3 Comments 1,306 views 2009-09-28 | 前端开发 | 作者：zhusun
现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。
首先认识一下getBoundingClientRect方法，标准语法为：
oRect = object.getBoundingClientRect();
Dom节点调用该方法可返回一个ClientRect类型的对象，该对象有四个属性值：top、left、right、bottom，表示了该节点相对于可视浏览器可视区域的左上角位置的坐标，看图就能好理解：
8 Comments 2,074 views 2009-07-20 | 前端开发 | 作者：三七
—— 本文刊登在《程序员》2009年7月期，略有增删
HTML是万维网上发布超文本的通用语言[1]。从1982年Tim Berners-Lee简化SGML建立HTML的原始定义到2001年发布XHTML1.1规范，HTML成为了有多个版本的国际标准[2]。各版本的规范都用一种机器可读的语言定义，它描述了法定结构、元素和属性，这就是文档类型定义（Document Type Definition），简称DTD。
DTD描述了文档类型声明（DTD declaration，简称doctype[3]）位于HTML文档最前面，它是联系文档和DTD指令。比如HTML4.01 Strict的doctype是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
它指明了文档使用的HTML版本，这是诸如浏览器之类的工具解析文档时最需要的信息。比如W3C的验证工具可依据它来检查语法和指出错误。
10 Comments 2,073 views 2009-06-17 | 前端开发 | 作者：zhusun
在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页面即是优惠券。
当然最优的做法是根据这个页面生成一个图片文件，用户下载这个图片再去打印，打印的效果就不会受浏览器的设置而受影响打印出来的效果。
但如果由于一些原因，为了快速或者节约成本，不去将页面存为图片文件的操作，那么就只有直接将HTML页面直接打印下来，这样就需要在对页面的设计中有一些额外的要求，这里提出两个地方需要注意：
1.对style标签的属性设置：
<style type=”text/css” media=”print”>
这里表示该style内引入或者定义的样式属性仅仅在打印的时候使用，这里提醒一下，如果没有设置media属性，那么定义的样式将在浏览器和打印时都起效，所以建议将类似这样的样式放在所有常规样式之后。比如我们希望在打印出来的页面上有一行“打印与雅虎口碑网”，但在浏览器中并不现实：
<p class=”printTitle”>打印与雅虎口碑网</p>
那么我们就可以在统一样式中设置.printTitle{display:none;},而在后面的media为”print”的样式中设置为.printTitle{display:block;}。在定义的打印样式并不是在打印时的优先级会高于常规定义的样式，所以再次建议将打印样式放在所有常规样式之后。
2.在页面打印的时候浏览器的设置会对打印的效果有影响，在IE中的“工具”–“Internet选项”–“高级”中有一个“打印背景颜色和图像”，类似的在Firefox中“文件”–“页面设置”中有一个“打印背景颜色和图像”，当这个选项被选中的时候，页面中的背景颜色和图片都可以打印出来（有些不标准的IE内核浏览器似乎有些问题，背景颜色可以打印出来，但是背景图片不行），如果没有选中则背景颜色和图片都无法打印出来，所以为了屏蔽用户不同的浏览器和浏览器设置，我建议两点，第一是在用背景色填充的区域作为分界的地方加上1px的边框，颜色和背景色一样，这样在浏览器中看不出来变化，而在打印的时候即使用户的设置导致背景色无法打印出来也可以有一个边框来作为分割，最大层的上保留了页面格局；第二是对所有必不可少的图片都使用<img/>标签，这样无论用户浏览器怎么设置都可以将这些图片打印出来，可能这样与平时一些页面设计方式不同，但为了统一打印的效果，也只要让步了。
我这里简单的提出了一些在实际运用中遇到的问题，如果大家还有什么新的问题和想法，可提出来共同谈论，在这里先抛砖了；
11 Comments 4,135 views 2009-04-3 | 前端开发, 未归类 | 作者：三七
本书的作者Douglas Crockford是JavaScript开发社区最知名的权威，JavaScript的发明人Brendan Eich说他是“Yoda of lambda programming and JavaScript（lambda编程和JavaScript的精神领袖）”。他不仅仅给我们带来了JSON、JSLint、JSMin和ADSafe等等在JavaScript开发领域应用广泛且影响深远的作品，更重要的是给我们带来了受益终身的利用JavaScript进行高效开发的思想和风格，这就是本书的重要意义。
JavaScript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣，抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集，让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华，这是语言最本质最优雅的部分，通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效的保障我们写出优美高效的代码。
60 Comments 7,349 views 2009-03-16 | 前端开发 | 作者：大米
双屏不是什么新鲜事，不过相信国内前端工程师还是用单屏的多，前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中？利用双屏显示让你从中解脱出来！我也刚用上了双屏开发，效率提升感觉值能有10%，所以来鼓动下大伙都来用双屏吧。
windows的双屏显示有很多种模式，我用的模式是主屏辅屏模式，两个屏是独立的窗口，可以进行窗口全屏。桌面和任务栏之显示在主屏，可以把主屏的一个或几个窗口拖到辅屏上，并全屏显示。看下图，右边的显示器为主屏，拖了个FX到左边的辅屏在该屏幕中最大化。
数数我们前端开发在工作流程中并行的全屏显示需求有多少个： 阅读全文»
40 Comments 8,570 views 2009-02-17 | 前端开发, 团队生活 | 作者：三七
春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事，节后收到很多简历，加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历，数量上是相当的多，把这些简历一一看完真是一个漫长而幸苦的体力活，何况我还要仔细认真的去提取和核查有用信息评估其能力，尽量不错过任何一个埋藏在大量简历中合适的人，这绝大部分时间并不是一个相当愉悦的过程。所以，我感觉有必要来谈谈：如何做好一份前端工程师的简历。
虽然简历都会有一些常规信息，但职业决定了这份简历核心内容和求职成败。所以，这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》，前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二，学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。
毫无疑问，前端工程师应该知道如何用简历体现其专业技能和职业精神，这是每个应聘者应该考虑的问题。
14 Comments 3,984 views 2009-01-22 | 前端开发 | 作者：大米
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。
做了一个demo列出了一些例子。
注：文章和demo于2009-2-2更新
9 Comments 5,004 views 2008-12-27 | 前端开发 | 作者：三七
两年前发表的《The visual design of Web 2.0》中提到“Rounded everything”，圆角因使人感觉舒适的友好风格而变得无处不在。这个无处不在也让很多前端工程师累个半死，YAHOO Performance Research Engneer Team的Nicole在讲演《Designing Fast Websites》中用的副标题是don’t blame the rounded corners!，从侧面也说明了圆角给实现者带来的困扰：实现麻烦、兼容困难、性能不佳。而W3C早在2002年的CSS3草案中就加入了一个叫border-radius的属性，通过它可以直接来定义HTML元素的圆角。 阅读全文»
7 Comments 3,878 views 2008-12-22 | 前端开发 | 作者：zhusun
13 Comments 4,610 views 2008-12-19 | 前端开发 | 作者：stauren
在日常的前端开发工作中，我们会经常的与HTML、javascript、css等语言打交道，和一门真正的语言一样，计算机语言也有它的字母表、语法、词法、编码方式等，在这里我简单的谈一下前端HTML与javascript日常工作中常碰到的编码问题。
在计算机中，我们储存的信息都是用二进制码表示的。我们认识的、屏幕上显示的英文、汉字等符号和储存用的二进制代码的互相转换，就是编码。
