Nicholas C. Zakas如何面试前端工程师

Original Post：Interviewing the front-end engineer
Nicholas C. Zakas，2010年1月5日

面试前端工程师对我来说是一件非常有意思的事，因为面试过程很大程度上也是自我提升的过程。无论大公司还是小公司，之所以在如何招聘到真正有能力的前端工程师方面会遇到同样的问题，就是因为负责招聘的那些人不知道自己公司需要什么样的人，结果问问题时也问不到点子上。经过这几年在行业里的摸索，我总结出了自己的一套很有效的面试前端工程的方法。
有的应聘者说我不好对付，但留给他们这样的印象也并非我所愿。我觉得之所以他们说我不好对付，主要是因为我问他们问题时问得太细了。以前我曾专门写过一些东西，告诉应聘者怎么才能通过我的面试（Surviving an interview with me）以及优秀的前面工程师应该具备什么样的素质（What makes a good front end engineer?），而我的面试可以说完全是按照那两篇文章的标准进行的。我不会问一些特别偏门的问题，也不认为出几道逻辑题就能考出人的真实水平。我唯一的想法就是确定你能否胜任我们要招的这个职位。为此，我需要简单地考察如下几个方面。

Continue...

Facebook如何做设计

Facebook的设计团队分享了他们的设计理念，以及他们是如何为2.5亿用户设计产品的。特别的是，他们强调了以下几点：

• 自己动手，亲历亲为（get your hands dirty）
• 尽早且频繁地分享设计（share early & often）
• 设计过程要从项目开始延续到结束（be there from start to finish）
• 不要爱上你的设计（don’t fall in love）

尤其重要的是确保设计师有足够的技术能力来写很多代码。
其他一些信息：

• Facebook设计团队的工作包括产品设计、市场营销、UI模式、品牌和前端开发。整个团队由15个产品设计师、5个UI工程师、5个用户体验研究员、4个交互设计师和1个内容架构师。在这个约有1000个员工的公司中，设计团队总共有25人。

• 通过撰写从前端到后端代码全部代码，将设计和技术融合进整个公司的文化。

1）设计师需要参与整个过程：从战略到发布。这不同于其他公司。

• Facebook花费了很多时间和精力来保证设计师能参与到整个产品开发流程。
• 例如：3月的主页改版发布，精简信息架构和提高页面信息的流动速度。这样的改变需要同时涉及数据结构和视觉结构。
• 在确定视觉风格后，开始写代码来制作原型。设计师通过写代码来了解真实的数据如何在页面布局中工作。
• 不断地平衡取舍，通过不断地迭代交互设计和视觉设计来做很多尝试。
• 给管理层和其他团队展示静态的产品原型并做交互演示。
• 让设计师写代码能发现细节问题并快速执行修改。

2）尽早且频繁地分享想法。了解用户能帮助实现更好的设计。

• 在Facebook没有创意总监，取而代之的是自下而上的设计团队组织架构。这对于团队能分享他们的创意至关重要。
• 开发相应工具来实现高效地分享。其中一个工具叫Pixelcloud，类似于一个带评论功能的在线图库。自从在3月发布了这个工具后，大约每天有15张创意图片通过这个网站得到分享。
• 整个工作组涵盖视觉设计和前端开发，这确保了Facebook的设计保持一贯的风格。所有的工作组都有固定的时间来给设计师提供反馈。
• 例如：隐私向导的设计。在项目立项阶段（kickoff phase），召集12个用户并向他们展示30个原型，以此来决定产品的开发方向。在产品开发阶段，再次召集相对较少的用户，向他们展示7个原型来决定具体的设计。
• 反馈是有效的。尽可能多的和早的获取反馈，这有助于节约项目时间。

3）勤动手，最重要的是理解代码是如何运行的。所有的设计师都要写一些HTML，CSS，甚至PHP。

• 模糊设计和技术的区别。设计师也能调试代码和创建快速原型。
• 设计师往往错在设计过于简洁，而工程师则错在提供过多功能。
• 理解你所为之工作的媒介类型，然后不断反思你的设计。
• 快速行动。Facebook在许多领域有很多竞争对手，而用户使用网络的习惯也在持续改变，所以快速地迭代更新产品很重要。
• 最核心的是，Facebook相信最有效的方式是快速发布产品，然后看看用户是如何使用的。
• 原型在说谎。它们通常缺乏内容和上下文联系。因此需要使用真实的内容和页面设计来理解具体的设计是如何工作的。
• 为了快速反应，我们需要快速地制作原型。例如：评论的UI首先在内部测试并修改，然后才发布给用户。新的设计打破了原有的信息流里的视觉线路。
• 设计师一般每周大约会提交40个版本的代码。

4）不要爱上你的设计。软件的生命是短暂的，它总是在变化，你需要接受这个事实。

• 你的目的是确保设计工作正常并能持续改进。
• 不要怀念今天的成就，要永远向前看。作为一个设计师，你需要预测并思考在下一年事情将发生怎样的变化。
• 在Facebook，设计存在时间最长的是首页，从2004年发布，历时18个月。
• 例如：全局导航的改版。在数月里尝试了无数的想法。甚至在昨天网站的头部又变了。
• 相比以往任何时候，我们的工作都远没有完成。
• 对大多数功能都做A/B测试。清晰地定义度量效果的标准并进行测量，但切忌不要让度量标准来驱动设计。

Front End Developer Knowledge Map

If you are a front-end developer, come back and look at this skills map weekly, to see what skills you have already, and what skills you are missing.

Front End Developer Cheat Sheets

There’s a lot of cheat sheets available for CSS, html and any other web technology. I have picked a few that I believe stand out because they are able to assist you remebering important elements of key web technologies or because they are really well structured.

Print out your favorite Cheat Sheet and put it on the wall just next to your monitor to get instant access to help and reference.

CSS2 Cheat Sheet

This cheat sheet is designed to not only be a quick reference for CSS properties but also to give you a good feel for how each property should be used. It contains all of the properties in the CSS2 specification including a description of the syntax of each one. There are also sections that describe selectors, pseudo-elements and pseudo-classes, @ rules, and colors.

Gosquared CSS help sheets

Good looking and well structured CSS overview

addedbytes CSS2 Cheat Sheet

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

Core css

All you need to know about CSS in 3 parts. These documents go through all important aspects of CSS on a minimum number of pages.

CSS Shorthand Cheat Sheet

Get help with some of the CSS elements that are so easy to forget.

CSS2 – Quick Reference Guide – PDF

XHTML 1.1 Cheat Sheet

This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.

Gosquared html help sheets

Good looking and well structured html overview

HTML Cheat Sheet

The HTML cheat sheet is a one-page A4 printable document, designed to provide a quick reference for HTML. PDFPNG

HTML5 Canvas Cheat Sheet

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things (the appearance of which is very much inspired by those found in Mozilla’s examples). So, it’s basically just a listing of the attributes and methods of the canvas element and the 2d drawing context.

HTML Character Entities Cheat Sheet

The HTML Character Entities cheat sheet is designed to act as a reference sheet, listing the various character codes in HTML. PDF PNG

HTML Character Entities Cheat Sheet

This cheat sheet contains a list of all of the HTML 4 character entities including ISO 8859-1 (Latin-1) entities. The characters are organized into 8 groups: Latin characters, Greek characters, numbers, puncutation and miscellaneous symbols, mathematical symbols, currency symbols, arrows and shapes, and spacing symbols.

Each character contains a unicode entity reference (e.g. &#160) as well as a named entity reference (e.g.  ) where available.

HTML Colors Cheat Sheet

This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).

RGB Hex Colour Chart

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called “web safe” or “non-dithering” colours (there are actually only 22 web safe colours, but those are revolting).

Scripting Cheat Sheets

JavaScript Cheat Sheet

The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size JavaScript cheat sheet.

JavaScript DOM Cheatsheet

Working with XML in Javascript is

jQuery 1.3 Cheat Sheet

Quick reference to all jQuery 1.3 functions and properties. Note that it doesn’t cover any of the UI functionality as this could easily be a whole cheat sheet in and of itself.

jQuery Cheat Sheet 1.2

mootools 1.2 cheat sheet

This sheet cover Core, Native, Class, Element, Utilities and Request

prototype 1.5.0

Prototype 1.6.0.2 Cheat Sheet

• Modules are sorted in a somewhat logical order – those commonly used are mostly in the left/center area, while deprecated/utility methods are all the way to the right
• Method can be recognized by parentheses following it (anything that doesn’t have ones is a property)
• Deprecated items are marked red and have NO parentheses/arguments specified
• Prototype extends quite few native objects’ prototypes with a set of convenient methods. In such cases there’s an explicit note about it next to a module name – i.g.stripScripts()method from “String (String.prototype)” can be called as'foo'.stripScripts()
• When a module is also a class, there’s a “(constructor)” note next to it – i.g. “Hash (constructor)” means that it should be called asnew Hash()
• There are few bonus items (such as those from Prototype.Browser) which are not yet included in documentation

Download

Addison-Wesley’s JavaScript Reference Card

Javascript: A scripting language designed to be integrated into HTML code to produce enhanced, dynamic, interactive web pages.

jQuery selectors

Very comprehensive overview of jQuery selectors. This is a must have for every jQuery developer!

Server side programming

PHP Cheat Sheet (V2)

The PHP cheat sheet is a one-page reference sheet, listing date format arguments, regular expression syntax and common functions.

visibone

This website contains a 2-page light and lean PHP cheatsheet and an 8-page comprehensive PHP cheat sheet for committed PHP developers

Php 4 Reference Card

PHP Cheat Sheet

3 cheat sheets covering comparison using different operators etc.

Core C# and .NET Quick Reference

ASP.net

MS ASP

The ASP cheat sheet is designed to act as a reminder and reference sheet, listing various of the oft-forgotten parts of ASP / VBScript.

msnet formatting strings

SQL (Structured Query Language) in one page

MySQL Cheat Sheet

XML (eXtensible Markup Language) in one page

XML Syntax Quick Reference

Search Engine Optimization Cheat Sheets

Creating good content that is presented in the right way is important but only haft the way to get visitors. Understanding and mastering Search Engine Optimization, SEO is quite essential and here you get some really good overviews

The Web Developer’s SEO Cheat Sheet

This cheat sheet cover most of what you need, Important SEO Html Tags, Search Engine Indexing Limits, Recommended Title Tag Syntax, Common Canonical Issues, Important Search Engine Robot User-Agents etc.