前端程序员：月薪 5K 到 5 万，我干了啥

Posted 2020-06-23 HongMaJu

高贵的前端程序猿们：

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

入行行头：5 大硬件

请准备好以下东西

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


初级资质要求

一些专业基础

你需要学会浏览器能理解的三大语言：HTML, CSS, Javascript – 神圣的三位一体！

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

一些很有用的学习资源

    1.Codeacademy: interactive, code-along tutorials (this site is the bomb btw)
    2.Web Development for Beginners: article from webplatform.org.
    3.MDN：https://developer.mozilla.org/en-US/docs/Web


中级进阶路径一旦掌握了三大语言，就可以开始学习专业的开发流程啦：

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



高级炸裂装备

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

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

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

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

    Javascript design patterns，javascript 也有设计模式？ 是的，读一下吧。



突破天际的大招

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

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

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

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

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

    用一些测试框架来实现 Javascript 单元测试，比如 Jasmine，QUnit。

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



超好用的其他加成技能

    ↓↓↓这些并非必须，但能帮你脱颖而出：

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

    后端开发， Node.js



最后：去找工作吧！

    有了技能是不够的，你需要能展示它们，你还能干的是：

    1.搭建一个小网站，公开你的 gitub 代码库，确保你的代码和文档清楚漂亮，还有一份 README
    2.去 meetup.com 找你的老板或者投资人吧，开一个博客，申请一个 linkedin 帐号
    3.因为 web 技术总是在变化，最后，即使找到了一份称心的工作，还是需要 stay motivated, 你需要时常去下面这些地方转转：CSS Tricks，SitePoint，Smashing Magazine
    4.当然还有些像 CSDN 这样中文社区，总之遇到任何难题，社区里有总有乐于助人的。
    5.保持好的职业态度：Stay humble, and build cool shit