前端工程 f2e front-end engineering
2010年的D2前端技术论坛将在12月初广州举办, 今年的D2前端技术论坛可以期待一下克军的do.js 在豆瓣小站的实践分享和前几天克军说的前端角色的转变 web apps 方面的. 街旁的html5+js做的街旁也满有意思的. KISSY 的一些分享估计也会有. 今年的D2前端技术论坛还不清楚是哪家公司承办,不过12月的广州会比杭州温暖一些,去年把我给冻坏了,哈哈. update 貌似第五届 D2前端技术论坛在杭州举办。。。
Read more →webkit内核的浏览器主要有Safari Chrome webkit浏览器会在输入框聚焦时候outline发光 并且webkit浏览器的textarea是可调整大小的，但是有时候我们不想要这两个效果，强大的是我们可以简单的加两个css就搞定了。 /* for webkit */ textarea { resize: none } input[type=text]:focus, input[type=password]:focus, textarea:focus { outline: 0 } 记录一下 以后用得着，呵呵～
Read more →piwik 网站分析系统是一个以Google Analytics 为目标的网站分析工具，官方网址为 http://piwik.org/ 前身是phpMyVisit。 目前版本的piwik可以很好的满足小流量站点使用，在大型站点的使用上还有些小问题。基本上一个月更新一次修正版本，改正一些错误，提供实用的功能。在piwik dev trac里可以清晰的看到roadmap 和tickets 对未来的规划很清晰。 大部分人使用Google Analytics 即可满足网站分析的需要。貌似流量太大会有所限制，但是豆瓣现在也在使用Google Analytics 小部分人使用收费的网站分析软件。 piwik适合一些需要自建网站分析系统，又不需要付费软件的人使用。 piwik可以看到哪些数据？ 1.可定制的组件和组件位置的控制台，将你关心的数据在一个页面内显示出来。 2.访客客户端信息，包括地理位置，浏览器类型，屏幕分辨率…… 访问客户端时间和服务器时间，Engagement 访问记录 等 3.页面访问量排行、进入页面、退出页面、出站地址等 4.访问来源概况、搜索引擎和关键字状况、来源网站等 5.目标，自定义站点目标并监视其完成量。 piwik 的live 可以实时看到用户访问 十分的吸引人。
Read more →揣测Google搜索排行存在一个比重很小的因素：越是被点击的搜索结果其排行指数会提升。即搜索行为影响搜索结果。 根据如下几个原因推测： 1.登录用户可以对Google搜索结果进行加星、排除的操作，说明Google对个人的搜索行为有存储、分析，对于某个用户来说，经常在搜索结果里点击某站点，则其站点排行会相对变高，在登录状态和非登录状态下某些搜索结果的排序不同（有过经历但未专门测试） 2.外部链接反映某个页面的重要程度，有用程度，虽然Google的搜索结果不会传递PR值什么的 但是可以理解为搜索结果中越是被点击的页面有用程度更高，经常被点击的第11个页面可能会取代不怎么被点击的第10个页面，理论上的猜想。 3.技术实现上考虑越多人搜索的和越多人点击的结果 应该处于活跃状态以减少系统开支，可能目前的粒度不会精确到页面 可能只是热门的关键字才会处于活跃状态，但是应该是可以理解的，额 又是一个猜想。 4.基本上如果Google有对搜索行为分析的话 有精确到搜索结果点击量的话 应该会有“越是被点击的搜索结果其排行指数会提升。”这种效果。 这个有什么用呢？ 让我们每天自己去点击自己站点的搜索结果？ 额 貌似没什么用，哈哈，基本上那么一点点的点击不大可能影响什么，登录用户的主要是自己的搜索习惯不会影响其他用户。 有这个猜想的原因是有次我在登录状态下的搜索结果跟别人的不一样。至于用户的搜索行为是否也是Google的排行因素还不得而知。 附带SEOMOZ.org提供的排名因素 五大积极排名因素 1.外部链接title属性里的关键字 2.外部链接的数量和质量 3.来源的多样性 4.title标签里包含关键字 5.域名的可信任度 附带全集的排行因素的说明 http://www.seomoz.org/article/search-ranking-factors
Read more →转化率的问题对电子商务很重要，转化率的高低很大程度影响了电子商务的盈利水平。 Safari 有一个功能 当一个页面内的表单有填写内容时关闭该标签 则浏览器会提示：“您确定要关闭此标签吗？”“您已在“新会员免费注册”上输入了文本。如果您关闭该标签，您的更改将被丢失。您仍要关闭该标签吗？”“取消 关闭” （截图有点麻烦 就不截图了） 不知道谁有兴趣写一下，加入到表单验证的js里，当表单内容不为空时 遭遇标签页关闭的情况下提请用户确认操作。本人js不行。 这里有一个范例，基于jquery实现的。 http://www.cssrain.cn/demo/jquery-closewindow/d.html 标签关闭确认的功能，可以广泛部署在用户注册，购买流程，以及一些不安全关闭窗口的环境下。
Read more →Monster是Alipay UED推出的网站代码分析、质量检测及评分的浏览器扩展，它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。它是一个开源项目，您可以在GoogleCode中心检出MonsterForChrome项目源代码。不久会推出Firefox版扩展。 下载及演示 下载Monster 视频演示 Monster主要检测规则： 检测是否有重复ID的标签； 检测是否使用内联标签嵌套块级标签，如a嵌套div； 检测https协议页面，是否使用了http协议的图片、JS、CSS等； 检测compatMode、doctype是否出错； 检测是否使用了HTML5不再支持的标记，如font,s,u等； 检测标签是否正确关闭； 检测CSS、JS、background-image文件是否为404； 检测CSS、JS文件是否重复调用； 检测是否引用过多外部JS、CSS文件； 检测CSS、JS、HTML是否压缩； 检测CSS样式表是否使用了CSS expression； 检测Cookie是否超过30KB； 检测是否有form标签嵌套form标签； 检测是否直接在标签里定义JS事件，如<a href=”#” onclick=”…”>link</a>； 检测<meta charset=”utf-8″ />是否为<head>第一个子标签； 检测一个<form>标签内部是否出现二个input[type=submit]标签； 检测是否在<form>标签中使用了 id=”submit” 的标签； 检测是否将<style>块放置在</head>前面； 检测是否将<script>块放置在</body>前面； 检测<img>标签是否指定alt属性； 检测是否为input[text]指定label； 检测网页编码是否为gbk或utf-8； 检测是否使用了@import导入样式表； 如果CSS、JS指定 类似于“?t=20100405”时间戳，则自动输出最后修改时间，方便对比； 如果background-image超过6个，则提示所有背景图片及大小，超过30KB，标红显示； Monster评分规则： Monster是根据问题解决难易程度、性能提升程度、可用性提升程度以及维护性提升程度来综合评分的。具体，请下载 Monster评分算法.xls 这是Monster的第一版，欢迎抓虫，如果您有更好的改进建议，请反馈给我们。 来源：http://ued.alipay.com/2010/05/monster-for-chrome/
Read more →还是淘宝去年的裸体比较性感，含蓄。 赶上了今天要裸体，那就裸一下吧，反正裸的是别人的代码。
Read more →有这么一段HTML，请挑毛病： <P> 哥写的不是HTML，是寂寞。<br><br> 我说：<br>不要迷恋哥，哥只是一个传说 这是原来雅虎一道笔试题（文字变了变），用了很多年了，还没有一个人完全答对过。 下周（3.27）交流会上我会公布答案 http://www.w3ctech.com/ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 解答部分 ================ 出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维 护，灵不灵活，同时事关网页性能，协作效率。碰到不少人认为前端开发就是javascript开发，大错特错啊。javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他 们真的不懂怎么合理的把js, html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。 这不是一道较真题或是装逼题，正经一道“画鸡蛋”的题（引自http://twitter.com/RageCarrier/status/10712084993） 考的是基本功。代码如其人，对一行代码的理解足以反映出他的前端开发素养。 言归正传。这道题的考点： 考点1：html和 xhtml的区别 这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。 这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。 考点2：考样式分离 用nbsp控制缩进是不合理的。应该用CSS干这事。所以应该删掉nbsp 考点3：合理使用标签 br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期 无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。 上面全答对，你就能拿到100分。 对原题改进的结果： html 4.01: <p>哥写的不是HTML，是寂寞。<p>我 说：<br> 不要迷恋哥，哥只是一个传说 xhtml 1.0: <p>哥写的不是HTML，是寂寞。</p><p>我说：<br /> 不要迷恋哥，哥只是一个传说</p> 加分：合理的用语义化标签 在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我 说”的话，可以用q标签标注。 <p>哥写的不是HTML，是寂寞。 <p>我说：<br> <q>不要迷恋哥，哥只是一个传说</q> 我觉得这就够了，如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注（至于再讨论abbr和acronym的区别就太较真了），也OK。再复杂就没必要了。 <p> 哥写的不是<abbr [...]
Read more →简单暴力的将我的博客主题DTD替换成html 5 ，呵呵～ 想要html 5 很简单的， html 5 是一种更包容的DTD 返璞归真的统一html文档声明 从早先相对蹩脚的DTD 到现在直接出一个 <!DOCTYPE html> 说 这个就是html 5 啦，大家看清楚了，以后就按这个搞了。html 5 这次来的比较不一样，有很多令人兴奋的变化和创新，audio标签 和 video标签只是一部分，更多的是将html的书写变得更自由，当然高层次的代码书写例如语义化代码 依然不是那么简单的东西，因为语义化不纯粹是技术，更多的是世界观。就如同雅虎的面试题一样，不只是考察语法，更多的是语义的考察。满有意思的。 现在用html5的网站有哪些呢？ ux伦敦 这个站很早前就html5 的 是一家英国的UX研究公司。 apple.com 早先看到的apple.com 还不是html 5 的 今天看的时候已经html 5 了，难道是因为ipad的缘故？ ipad 让一堆网站率先支持了html5 taobao.com 今年改版的时候淘宝就html5了，不过好像只有首页那样，淘宝的首页代码压缩的比较狠，异步加载等技术用的很多，甚至那时候还出了一个PPT说淘宝首页是如何斤斤计较的。 koubei.com 三七手下的口碑前端搞的也很high 在新技术面前没有失去勇气，在前端技术自动化以及页面BUG检测插件（不知道推出了没），在前端工作环境架构上走在前面。 youtube.com 听说也改版了，改版前就支持html5 甚至 html5 video 也部分支持了。有墙即使有VPN也上的不勤快了，杯具的GFW 我想twitter 也改成html5了吧，昨天晚上有上了一下，没注意看，新版的twitter变扁了一些。
Read more →SEF SEO SEM 15个供稿 http://www.google.com/reader/bundle/user%2F12842760435830929066%2Fbundle%2FSEF%20SEO%20SEM 产品设计 11个供稿 http://www.google.com/reader/bundle/user%2F12842760435830929066%2Fbundle%2F%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1 交互设计 26个供稿 http://www.google.com/reader/bundle/user%2F12842760435830929066%2Fbundle%2F%E4%BA%A4%E4%BA%92%E8%AE%BE%E8%AE%A1 用户体验 29个供稿 http://www.google.com/reader/bundle/user%2F12842760435830929066%2Fbundle%2F%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C 前端工程 33个供稿 http://www.google.com/reader/bundle/user%2F12842760435830929066%2Fbundle%2F%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B Web Analytics 7个供稿 http://www.google.com/reader/bundle/user/12842760435830929066/bundle/Web%20Analytics 产品运营 共3个供稿 http://www.google.com/reader/bundle/user/12842760435830929066/bundle/%E4%BA%A7%E5%93%81%E8%BF%90%E8%90%A5 推荐google reader 订阅 或者google 加我好友 suweihua@gmail.com
Read more →