高貴的前端工程師們:
如何在前端開發這種頂尖的技術領域找到心儀的工作?實現在咖啡館喝喝咖啡打 code 就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業夢想?前端開發工作已經變的越來越複雜,僅僅是想羅列一份前端開發的學習列表就已經是一件艱巨的工作。曾經只要會編寫 HTML、CSS 和 Javascript 就是能夠找到一份前端開發工作的全部要求。而現在,web 開發遠遠不止是簡單編碼。因為我們的互聯網上有了更多的內容,也因為有更多的人、更多設備可以訪問,web 前端開發技能也就更多了。
我們現在需要考慮的問題很多,比如載入時間、性能、不同的螢幕尺寸,不同的輸入方式,build 系統,部署策略,還有如何組織好我們的代碼。這還是想像中前端開發嗎?好吧,其實只要你有熱情,這些還是很有趣的,現在就來仔細看看,一份前端開發的工作,到底需要你準備些什麼?
- 入行行頭:5 大硬體
請準備好以下東西
一顆人類的大腦:智商在平均水平線以上即可
一份強烈的渴望:我的 code 要可以運行在任何一個有瀏覽器的設備上。
一台筆記型電腦:不需要花費很多錢得那種,只要它可以運行 Windows,Mac OS X,或 Linux 系統。當然你也可以只用一台桌上型電腦,但是那樣就不能帶著它坐在咖啡館裡…
一個文字編輯器:可以推薦的比如 Atom、Visual Studio Code、TextMate,它們都有在 Mac OS,Windows 的免費版本,什麼還有 Sublime、WebStorm? 啊,那些都很流行,不過需要需要一筆不少於 70 美元的花費…
一個翻牆代理:這個大家都懂的,我就不解釋了
- 初級資質要求
一些專業基礎
你需要學會瀏覽器能理解的三大語言:HTML、CSS、Javascript -神聖的三位一體!
非常重要的一點是,一定要理解這三大語言後再去學習別的,確保知道怎樣在各種尺寸的螢幕上排列好你的網頁,怎樣在一個按鈕被按下後 do something!
一些很有用的學習資源
Codeacademy 、 Web Development for Beginners 、 MDN
- 中級進階路徑前端程式師:
一旦掌握了三大語言,就可以開始學習專業的開發流程啦:
1. Command line :好吧,指令列也許都會, 但是要掌握最基本的操作,熟悉怎樣配置你的環境,還有那些奇怪的 shell 腳本,因為你會經常用到它們。
2. CSS 已經不夠用了,我們有了 CSS 的預處理:Sass,LESS。
3. 知道如何搭建一個 build 系統 :Gulp 或 Grunt 這類的構建任務腳本器、編譯 LESS 成 CSS、 concatenating Javascript、minify 壓縮靜態資源,選一個非同步或同步的方式載入它們,然後一個好的 build 系統要能自動做到那些,包括一個本地的 web 伺服器用於測試 code。
4. code 版本管理 ,git。
5. 在 Github 上分享你的 code !
6. 讓你的網站上線 。可以找一個免費的服務提供者,比如 HEROKU 、 Github
這些幾乎就是現代前端開發者會用到的工具和技術,好了,你現在可以成為一個前端開發工程師了。
- 高級炸裂裝備
你已經能夠為你的朋友的業務搭建一個網站了。簡潔的排版,高清圖片,你成功了,它甚至在你的手機都看著很棒。那麼還有什麼值得學的?
把你的網站和一個內容管理系統 (CMS)集成在一起。一個 CMS 能夠讓你通過使用者介面增、刪、改、組織你的內容,不需要任何代碼。 這就是那些部落格網站如何工作的。比如免費的 WordPress,去熟悉一個開源的 CMS 吧,會很有用的。
學習怎樣搭建一個 CMS,意味著你講要 熟悉一個伺服器端的語言 ,比如 Node.js, 或 PHP,然後你還會想要知道怎樣 和資料庫打交道 ,比如 MySql 或者 MongoDB。
來熟悉一種 Javascript 框架吧,這樣你可以真正的搭建一個交互出色的 web 應用,那真的很重要,比如 Angular,React,Ember。只要挑一個你喜歡的,但是一定要精通它。
Javascript design patterns,javascript 也有設計模式? 是的,讀一下吧。
- 突破天際的大招
1. 溝通技巧!你需要和你的小夥伴們溝通,他們是你的 coder 夥伴,你的老闆,你的用戶,你的 stackoverflow.com, 有問題找 stackoverflow,擴展人脈,上 meetup.com ,在部落格上寫一些你的學習體驗,在 Gitgub 貢獻你的 Pull request。
2. 介面設計和使用者體驗設計 UI/UX design,前段開發的小夥伴需要具備基本的 UI/UX 設計知識。
3. SEO 優化,要知道怎樣提高網站的搜索排名,更容易被人們搜索到。
4. CSS 過渡效果,給你的按鈕寫一個 hover 的 CSS 動畫,還有你的從右邊滑入的導航功能表也需要一個平滑的動畫。
5. 關於性能,讓你的網站盡可能快的被載入,減少 DOM 的 reflow 和 repaint 操作,防止滾動性能瓶頸,優化 Javascript,讀一讀 developer fundamentals 吧。
用一些測試框架來實現 Javascript 單元測試,比如 Jasmine,QUnit。
持續集成 Continuous integration(CI),知道怎樣配置一套和夥伴們一起使用的自動測試和部署的工具,比如 CircleCI、Travis CI、Jenkins。
- 超好用的其他加成技能
這些並非必須,但能幫你脫穎而出:用 CSS3,SVG,Canvas API 實現動畫。後端開發,Node.js
有了技能是不夠的,你需要能展示它們,你還能幹的是:
1. 搭建一個小網站,公開你的 Gitub 代碼庫,確保你的 Code 和文件清楚漂亮,還有一份 README
2. 去 meetup.com 找你的老闆或者投資人,開一個部落格,申請一個 linkedin 帳號
3. 因為 web 技術總是在變化,最後,即使找到了一份稱心的工作,還是需要 stay motivated,你需要時常去下面這些地方轉轉:CSS Tricks,SitePoint,Smashing Magazine
4. 當然還有些像 CSDN 這樣中文社區,總之遇到任何難題,社區裡有總有樂於助人的。
5. 保持好的職業態度:Stay humble,and build cool shit。
(本文為《 點融黑幫 》授權轉載,原文標題為〈 前端程式師:月薪 5K 到 5 萬,我幹了啥 〉,圖片來源: christiaan_008 CC Licensed,未經授權請勿轉載。)

一致的HTML编码风格很重要,因为它提高了代码的可读性、可维护性和效率。1)使用小写标签和属性,2)保持一致的缩进,3)选择并坚持使用单引号或双引号,4)避免在项目中混合使用不同风格,5)利用自动化工具如Prettier或ESLint来确保风格的一致性。

在Bootstrap4中实现多项目轮播的解决方案在Bootstrap4中实现多项目轮播并不是一件简单的事情。虽然Bootstrap...

如何实现鼠标滚动事件穿透效果?在我们浏览网页时,经常会遇到一些特别的交互设计。比如在deepseek官网上,�...

无法直接通过CSS修改HTML视频的默认播放控件样式。1.使用JavaScript创建自定义控件。2.通过CSS美化这些控件。3.考虑兼容性、用户体验和性能,使用库如Video.js或Plyr可简化过程。

在手机上使用原生select的潜在问题在开发移动端应用时,我们常常会遇到选择框的需求。通常情况下,开发者倾...

在手机上使用原生select的弊端是什么?在移动设备上开发应用时,选择合适的UI组件是非常重要的。许多开发者�...

使用Three.js和Octree优化房间内第三人称漫游的碰撞处理在Three.js中使用Octree实现房间内的第三人称漫游并添加碰�...

使用原生select在手机上的问题在移动设备上开发应用时,我们经常会遇到需要用户进行选择的场景。虽然原生sel...


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

Dreamweaver CS6
视觉化网页开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。