Tag Archives: 前端

[zz]新职业:全栈工程师/全能工程师(Full Stack Developer)

期望一个凡人掌握开发过程中各个方面的知识,合理吗?也许不合理,但是Facebook正是要寻找这样的人。在一个OSCON会议上,一名Facebook的工程师告诉我的,他们只聘请“全能(Full stack)”的程序员。那么,全能是什么意思呢? 对于我,一个全能的程序员应该熟悉每一个层面的技术知识,如果不是全部掌握,也要对所有的软件技术有真正的兴趣。 熟悉整个技术体系的程序员,可以使得周围的人的生活更加容易。这就是为什么我反对在工作场合的技术鸿沟。当然,大公司里的政治和沟通的问题往往会影响他们的发展。我想Facebook招聘策略的目的就在于,如果聪明的人身心俱到,一个好的产品可以在更短的时间内发布。 技术知识体系的分层: 1.    服务器,网络和主机环境 这包括理解什么会宕机,为什么会,没有任何资源是理所当然的。 合理使用文件系统,云存储,网络资源,理解数据冗余和可用性。 在硬件受限的情况下,如何扩展应用。 那么关于多线程和竞争呢?你猜怎么着,你在你的开发机器上看不到,但是在现实中却经常发生。 全能程序员可以与DevOps协同工作。系统应该提供有效的错误信息和日志能力。DevOps会在你之前看到这些信息,使它们有意义。 2.    数据建模 如果数据模型存在缺陷,那么业务逻辑和更高的层次将要用奇怪、丑陋的代码来弥补那些模型没有覆盖到的边界场景。 全能程序员知道如何构建合理规范化的关系模型,包括外键、索引、视图、查找表等。 全能程序员熟悉非关系数据存储的概念,理解其比关系型数据存储的优点。 3.    业务逻辑 明白应用程序提供的核心商业价值。 需要扎实的面向对象知识。 需要理解框架。 4.    API层面/Action层面/MVC 理解外部如何与业务逻辑和数据模型进行交互。 框架在这里会用得很多。 全能的程序员有能力写出清晰,一致,简单易用的接口。一些API的复杂得使我感到厌烦。 5.    用户界面 全能程序员a)知道如何创建可读的布局,或者b)明白自己需要帮助艺术和图形设计师。无论哪一种,实现好的视觉设计是关键。 掌握HTML5/CSS3。 Javascript在将来会是非常重要的一门语言,很多令人兴奋的作品都是用Javascript完成的。(node, backbone, knockout……) 6.    用户体验 全能程序员明白,用户只是想让产品可以正常工作。 一个好的系统不会使得用户患上腕管综合征和眼痛病。一个全能程序员会将一个需要8次点击3个步骤的工序,修改为1次点击。 全能程序员会添加有用的错误信息。如果有什么出错了,要向用户道歉。有时程序员漫不经心写的错误信息会让用户觉得很傻。 7.    理解用户和业务的需求 现在我们模糊的进行的架构设计,但这会远离了真正的需求。 全能程序员会预先看看当用户在使用软件的时候,会发生什么。同时,他们也会关注业务部分。 其他问题: 能够编写质量单元测试。顺便说说,Javascript现在也可以进行单元测试了。 理解持续自动化集成,包括构建应用,测试,编写文档和部署扩展。 安全意识也非常重要,因为每一个层面都会有其易受攻击的地方。 总结: 将代码紧紧的绑到一个特定的环境(库,操作系统,硬件等等),是非常糟糕的实践来的。全能程序员理解所有的知识体系,不意味着他们可以走捷径。然而,他们确实会这样做,如果只是建立一个原型的话。 技术型创业公司需要全能程序员的多才多艺。但是,一个成熟的公司,需要更多的是专注的技术。 我不确定在你使用多种语言,使用多个平台,甚至为多个行业工作之前,你是否可以自称为全能程序员。全能程序员要在“高级程序员”之上,因为他们与通晓多语言的程序员在同一线上,但是对各个模块的关系更有全局的意识。注意我刚刚的列表,只有3-5项包含了编写代码。     Is it… Read More »

Safari浏览器浏览器对HTML5的支持

Safari浏览器浏览器对HTML5的支持Safari浏览器支持HTML5音频和视频元素, 离线存储支持, 和其它HTML5功能使得它很容易为​​开发人员提供丰富的, 互动媒体体验在本机的浏览器, 专有技术,而不需要为. 支持HTML5的媒体网站可以提供丰富的, 互动媒体容易,因为他们提供的图像. Safari was the… Read More »

Safari 6更新了什么?

Safari 6更新了什么? Safari continues to support the latest web standards and technologies. New features in Safari 6 allow you to create audio for interactive web applications, tap into hardware-accelerated color effects, and keep users up-to-date with web notifications. Web Audio API With the Web Audio API, you can create and customize audio effects in interactive web… Read More »

新版Mozilla Firefox的UI设计理念预览

Mozilla Firefox 未来的UI设计 作为Mozilla Firefox的忠实粉丝,这里跟大家分享一下Mozilla刚刚跟我们分享的 Firefox 的未来设计理念。他们首先展示了其实整个界面背後的设计哲学是来自火狐(Firefox)这种动物的「天性」,他们形容为和蔼(soft)丶友善(friendly)和富有人性的(human);于是他们便将界面的元素都设计得很 soft,tag 等图示都会有着圆滑的边缘(跟Chrome有点像啊)。还添加了阅读模式。另外,他们也打出界面一体化的牌,将手机丶平板和电脑的用户体验都统一了。而且在计划的当中也包括了为 Windows 8 而设的 Metro 版本,是以 Win 8 的特色 — Tile 来作为主调的。最吸引我的是新的开发模式(包括现有的3D层叠似视图),相信会给我们这些web developer带来巨大的便利和更高的用户体验。整个简报还有数不尽的「未来特色」,有兴趣的话可以到继续阅读看看。 Ux overview fxworkweek_april2012

Safari浏览器对CSS3的支持

Safari浏览器浏览器对CSS3的支持Safari将继续实施在网络上最具创新性的网络技术来推动的界限,什么是可能的. 借助Safari浏览器支持CSS动画, CSS效果, 和CSS网页字体, 您可以创建下一代丰富, 交互式Web应用程序. CSS动画Safari是第一个浏览器,支持CSS过渡和动画。... Read More »

写给设计师的基础色彩论 [Part2]

Color Theory For Designers, Part 2: Understanding Concepts And Terminology If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The… Read More »

[zz]24款非常实用的CSS3工具终极收藏

对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者们有了更多的选择。如今,用纯CSS就可以实现各种各样很酷的效果,甚至是动画。今天这篇文章向大家推荐24款非常优秀的CSS3工具,为了获得更佳的效果,请在Chrome 4+, Safari 4+, Firefox 3.6+, IE9+, Opera 10.5+版本浏览器中浏览如下在线工具。 1.CSS3 Pie 使用CSS3 Pie可以让IE6至IE8版本实现大多数的CSS3修饰特性,如圆角、阴影、渐变等等。 2. CSS3 Click Chart 非常好的CSS3效果演示,提供了示例代码。   3.CSS3 Please! 非常帅的一款CSS3工具,可修改代码,即时预览。   4.CSS3 Button Maker 一个非常不错的CSS3按钮制作工具。 5.CSS3 Generator 非常不错的CSS3代码生成器,带预览效果。 6.CSS3 Menu 非常不错的CSS3菜单制作工具。 7.CSS3 Gradients 一款非常棒的CSS3渐变效果演示工具。 8.CSS3 Cheat Sheet 一份不错的CSS3属性速查手册(PDF格式)。 9.CSS3 Selector Test 非常不错的CSS3选择器测试工具 10.CSS3 Transforms 一款强大的CSS3旋转动画效果演示工具,即时生成代码。 11.CSS3 Preview CSS3特性介绍及效果预览。 12.CSS3 Generator 一款非常不错的CSS3代码生成工具。 13.CSS3 Color… Read More »

[zz]如何做好一份前端工程师的简历?

原文连接:http://dancewithnet.com/2009/02/17/how-to-make-a-resume-of-f2e/ 春节前在蓝色理想上发了个“雅虎口碑招聘前端工程师 ”的启事,节后收到很多简历,加之HR通过专业招聘网站得到的简历和朋友同事推荐的简历,数量上是相当的多,把这些简历一一看完真是一个漫长而幸苦的体力活,何况我还要仔细认真的去提取和核查有用信息评估其能力,尽量不错过任何一个埋藏在大量简历中合适的人,这绝大部分时间并不是一个相当愉悦的过程。所以,我感觉有必要来谈谈:如何做好一份前端工程师的简历。 一、你是前端工程师 虽然简历都会有一些常规信息,但职业决定了这份简历核心内容和求职成败。所以,这份简历应该尽可能体现你自己是一个合格的前端工程师。专业的前端工程师是什么可以看看去年Nate Koechley的演讲《Professional Frontend Engineering》,前端工程师应该关注的内容可以从克军总结的“前端工程师应该关注什么”的思维导图中窥出一二,学习内容聚合可以看看陈成总结的《前端开发大众手册(包括工具、网址、经验等)》。 毫无疑问,前端工程师应该知道如何用简历体现其专业技能和职业精神,这是每个应聘者应该考虑的问题。 二、内容为王 个人信息 姓名 (必需) 性别 (必需) 年龄 (必需) 联系电话 (必需) 学历及学位 (必需) 薪资期望 个人照片 邮箱 Blog 外语能力 职业技能 HTML、CSS、JavaScript/ActionScript等 Web标准、可用性、可访问性 一门非前端脚本的语言(Java、PHP、Python、C#等) 任何有利于前端开发的技能和兴趣 职业和教育经历 起始时间、单位名、职位(学位)和收获 简而精 按照时间倒序排列 代表作品 能体现自己现在前端技能或者重要经历的作品 简而精,且可以简要附上自己在这个作品中的收获 和别人合作的作品要注明自己具体完成的内容 在线链接要测试以保证可用,如果有其他人的变更应注明,较大变更就无需提交了 提供附件要注明与之对应的文件名 按完成时间倒序排列 依据实际情况,代表作品也完全可以直接融入到职业技能和经历中体现。当然内容不仅仅是这些,可以任意增加能体现前端工程师职业素质的信息。 三、Web是平台 毫无疑问,Web才是真正的平台,当这个平台的后端逐步被云所统治时(Amazon的很多服务和Google App Engine都初见端倪),那么云端的用户代理(比如浏览器)就是前端工程师的战场。前端工程师是可以长期从事且有前途的职业。 简历作为前端工程师迈向新征途而提交的第一份作品,应该毫不迟疑的用它来体现其专业技能和职业精神,所以Web页面是前端工程师简历的最好载体。它能体现前端工程师诸多专业素质: 知道为什么选择的DTD是下面中的一个而不是其他,这是对HTML标准的理解和思考 。 < !DOCTYPE HTML PUBLIC "-//W3C//DTD… Read More »

高性能移动web开发

高性能移动web开发 移动终端面临的主要问题: 网络数据传输延迟(即便是3G网络) CPU运算能力(即便是配有1GHz+的设备) 移动终端可以做的优化: 根据设备屏幕来选择加载资源 降低延迟,加快连接速度 提高处理性能 本文介绍了一些针对移动设备优化技术,特别针对高级智能系统(iOS,Android,WebOS)。 原文:http://iloves.org/2011/05/high-performance-mobile/ 译自:High-Performance Mobile 原作者:David Calhoun 请尊重版权,转载请注明来源! 针对屏幕来优化图片 移动设备有不同屏幕尺寸,分辨率,应当有针对性加载不同的图片内容。 如果你正在开发一个只有一套带有很多图形样式的站点,那就意味着无论用户用何种大小设备都会下载这些巨大的图片。 为什么一定要让移动用户下载这些为桌面用户开发的样式图片呢? 不过不用担心,现代很多设备都支持 CSS media queries(媒体选择器)了, 通过media queries 我们可以方便的针对不同设备屏幕特性来加载不同版本的样式图片。 /* Screens bigger than 480px */ @media only screen and (min-device-width: 481px) { #header { background-image: url(header-full.png); } } /* Screens smaller than 480px */ @media only screen and… Read More »