点击有惊喜

高贵的前端程序猿们&＃xff1a;

如何在前端开发这种高精尖的技术领域找到心仪的工作&＃xff1f;实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪、买房买车、迎娶白富美走上人生巅峰的职业梦想&＃xff1f;这 篇《进化论&＃xff1a;从 0 到 100&＃xff0c;前端猿茁壮成长的精神饲料史》&＃xff0c;肯定能给你事业的加速动力。前端开发工作已经变的越来越复杂&＃xff0c;仅仅是想罗列一份前端开发的学习列表就已经是一件艰 巨的工作。曾经只要会编写 HTML, CSS 和 Javascript 就是能够找到一份前端开发工作的全部要求。而现在&＃xff0c;web 开发远远不止是简单编码。因为我们的互联网上有了更多的内容&＃xff0c;也因为有更多的人、更多设备可以访问互联网,  web 前端开发技能也就更多了。我们现在需要考虑的问题很多&＃xff0c;比如载入时间&＃xff0c;性能&＃xff0c;不同的屏幕尺寸, 不同的输入方式, build 系统, 部署策略&＃xff0c;还有如何组织好我们的代码。这还是想象中前端开发么&＃xff1f;好吧其实只要你有热情&＃xff0c;这些还是很有趣的&＃xff0c;现在就来仔细看看&＃xff0c;一份前端开发的工作&＃xff0c;到底需 要你准备些什么?

入行行头&＃xff1a;5 大硬件

请准备好以下东西

 1.一颗人类的大脑&＃xff1a;智商在平均水平线以上即可
 2.一份强烈的渴望&＃xff1a;我的代码要可以运行在任何一个有浏览器的设备上。
 3.一台笔记本电脑&＃xff1a;不需要花费很多钱得那种&＃xff0c;只要它可以运行 Windows, Mac OS X, 或 Linux 系统。当然你也可以只用一台台式机&＃xff0c;但是那样就不能带着它坐在咖啡馆里…
 4.一个文本编辑器&＃xff1a;可以推荐的比如 Atom,Visual Studio Code, TextMate, 它们都有在 Mac OS, Windows 的免费版本&＃xff0c;什么还有 Sublime, WebStorm? 啊&＃xff0c;那些都很流行&＃xff0c;不过需要需要一笔不少于 70 美元的花费…
 5.一个翻墙代理&＃xff1a;这个大家都懂的&＃xff0c;我就不解释了

初级资质要求

一些专业基础

你需要学会浏览器能理解的三大语言&＃xff1a;HTML, CSS, Javascript – 神圣的三位一体&＃xff01;

非常重要的一点是&＃xff0c;一定要理解这三大语言后再去学习别的&＃xff0c;确保知道怎样在各种尺寸的屏幕上排列好你的网页&＃xff0c;怎样在一个按钮被按下后 do something!

一些很有用的学习资源

   • Codeacademy: interactive, code-along tutorials (this site is the bomb btw)

   • Web Development for Beginners: article from webplatform.org.

   • MDN&＃xff1a;https://developer.mozilla.org/en-US/docs/Web

中级进阶路径

一旦掌握了三大语言&＃xff0c;就可以开始学习专业的开发流程啦&＃xff1a;

1. Command line&＃xff1a;好吧,命令行也许都会,但是要掌握最基本的操作,熟悉怎样配置你的环境,还有那些奇怪的 shell 脚本&＃xff0c;因为你会经常用到它们。
2. CSS 已经不够用了,我们有了 CSS 的预处理&＃xff1a;Sass, LESS。
3. 知道如何搭建一个 build 系统&＃xff1a;Gulp 或 Grunt 这类的构建任务脚本器,编译 LESS 成 CSS, concatenating Javascript, minify 压缩静态资源, 选一个异步或同步的方式加载它们&＃xff0c;然后一个好的 build 系统要能自动做到那些,包括一个本地的 web 服务器用于测试代码。
4. 代码版本管理&＃xff0c;git。
5. 在 github 上分享你的代码&＃xff01;
6. 部署! 让你的网站上线。可以找一个免费的服务提供商&＃xff0c;比如 heroku.com, https://pages.github.com

这些几乎就是现代前端开发者会用到的工具和技术&＃xff0c;好了&＃xff0c;你现在可以成为一个前端开发工程师了。

高级炸裂装备

你已经能够为你的朋友的业务搭建一个网站了&＃xff0c;简洁的排版&＃xff0c;高清大照片&＃xff0c;你成功了&＃xff0c;它甚至在你的手机都看着很棒。那么还有什么值得学的&＃xff1f;

把你的网站和一个内容管理系统 (CMS&＃xff09;集成在一起。一个 CMS 能够让你通过用户界面增、删、改、组织你的内容&＃xff0c;不需要任何代码。这就是那些博客网站如何工作的。比如免费的 WordPress&＃xff0c;去熟悉一个开源的 CMS 吧&＃xff0c;会很有用的。

学习怎样搭建一个 CMS&＃xff0c;意味着你讲要熟悉一个服务器端的语言&＃xff0c;比如 Node.js, 或 PHP&＃xff0c;然后你还会想要知道怎样和数据库打交道&＃xff0c;比如 MySql 或者 MongoDB。

来熟悉一种 Javascript 框架吧&＃xff0c;这样你可以真正的搭建一个交互出色的 web 应用&＃xff0c;那真的很重要&＃xff0c;比如 Angular, React, Ember。只要挑一个你喜欢的&＃xff0c;但是一定要精通它。

Javascript design patterns&＃xff0c;Javascript 也有设计模式&＃xff1f; 是的&＃xff0c;读一下吧。

突破天际的大招

沟通技巧&＃xff01;你需要和你的小伙伴们沟通&＃xff0c;他们是你的 coder 伙伴&＃xff0c;你的老板&＃xff0c;你的用户&＃xff0c;你的….stackoverflow.com&＃xff0c; 有问题找 stackoverflow&＃xff0c;扩展一下人脉把&＃xff0c;上 meetup.com, 在博客上写一些你的学习体验&＃xff0c; 在 Gitgub 贡献一下你的 Pull request。

界面设计和用户体验设计 UI/UX design&＃xff0c;前段开发的小伙伴需要具备基本的 UI/UX 设计知识。

搜索优化&＃xff0c;要知道怎样提高网站的搜索排名&＃xff0c;更容易被人们搜索到。

CSS 过度效果&＃xff0c;给你的按钮写一个 hover 的 CSS 动画&＃xff0c;还有你的从右边滑入的导航菜单也需要一个平滑的动画。

关于性能&＃xff0c;让你的网站尽可能快的被加载&＃xff0c;减少 DOM 的 reflow 和 repaint 操作&＃xff0c;防止滚动性能瓶颈&＃xff0c;优化 Javascript, 翻墙读一读这个吧 google web developer fundamentals。

用一些测试框架来实现 Javascript 单元测试&＃xff0c;比如 Jasmine&＃xff0c;QUnit。

持续集成 Continuous integration (CI)&＃xff0c;知道怎样配置一套和伙伴们一起使用的自动测试和部署的工具&＃xff0c;比如 CircleCI, Travis CI, Jenkins.

超好用的其他加成技能

↓↓↓这些并非必须&＃xff0c;但能帮你脱颖而出&＃xff1a;

用 CSS3, SVG, Canvas API 实现动画。

后端开发&＃xff0c; Node.js

最后&＃xff1a;去找工作吧&＃xff01;

有了技能是不够的&＃xff0c;你需要能展示它们&＃xff0c;你还能干的是&＃xff1a;

   1.搭建一个小网站&＃xff0c;公开你的 gitub 代码库&＃xff0c;确保你的代码和文档清楚漂亮&＃xff0c;还有一份 README

   2.去 meetup.com 找你的老板或者投资人吧&＃xff0c;开一个博客&＃xff0c;申请一个 linkedin 帐号

   3.因为 web 技术总是在变化&＃xff0c;最后&＃xff0c;即使找到了一份称心的工作&＃xff0c;还是需要 stay motivated, 你需要时常去下面这些地方转转&＃xff1a;CSS Tricks&＃xff0c;SitePoint&＃xff0c;Smashing Magazine

   4.当然还有些像 CSDN 这样中文社区&＃xff0c;总之遇到任何难题&＃xff0c;社区里有总有乐于助人的。

   5.保持好的职业态度&＃xff1a;Stay humble, and build cool shit

点击有惊喜