GitHub 項(xiàng)目上好項(xiàng)目真的很多，但作者長的這么漂亮的肯定屈指可數(shù)了。
用 HTML + CSS 畫油畫如圖所示，這位小姐姐的名字叫 Diana Smith ，在她的個人博客上介紹自己是一位 JavaScript 開發(fā)人員，技能樹包含 React / Vue / Backbone / jQuery ，還是一位 CSS 專家（LESS 和 SASS 雙修），同時(shí)也是一位響應(yīng)式設(shè)計(jì)的 UI 工程師。
她在 GitHub 上星數(shù)最高的一個項(xiàng)目，是用 HTML/CSS 創(chuàng)作了仿油畫作品。
這吹彈可破的質(zhì)感、精妙的構(gòu)圖、強(qiáng)烈又不違和的色彩搭配，不得不說“畫如其人”啊。而且，這些圖片是只用 CSS 和 HTML，所有元素都是手動輸入，僅允許使用 Atom 文本編輯器和 Chrome 開發(fā)者工具。
說實(shí)話，網(wǎng)頁三兄弟 HTML、CSS、JavaScript 大家都不陌生，但誰能想到能玩出這樣的花來呢？
作者小姐姐的個人博客中分享了一篇文章，其中有一個觀點(diǎn)是：“當(dāng)你只擁有一把 CSS 錘子時(shí)，世界就像是 CSS 釘子。”在工作之外，她也會用 CSS 來尋求藝術(shù)靈感。
作為前端，我們每天都在與這三兄弟打交道，但你真的了解他們么？你知道他們使用過程中的一些奇淫巧技么？
HTML、CSS、JavaScript 都是啥？在各種技術(shù)論壇和貼吧里，前端算不算真正的程序員一直都是一個被討論的問題。
但我覺得這個問題毫無意義啊，是又如何不是又如何，我只知道對于全世界所有的網(wǎng)站而言，無論其服務(wù)器端的語言是什么，前端都使用了 HTML + CSS。
很久之前我保存了一張微博上的圖片，是一個前端工程師的技能樹。雖然隨著時(shí)間的推移很多內(nèi)容都需要更新，但從圖上我們也能看出前端工程師絕對不只是簡單的切切頁面而已。
前端工程師，首先是工程師，然后才是前端工程師。工程師的工作是用技術(shù)去解決業(yè)務(wù)上遇到的問題，所謂的前端后端只是分工不同。目前前端能容納的知識領(lǐng)域越來越廣，之后也將需要由更專業(yè)的人來完成工作，所以前端的路還可以走的很長。
今天，就和大家介紹一下網(wǎng)頁三劍客分別是什么：
1. HTML
以前網(wǎng)頁都是非常單純的資訊呈現(xiàn)，所以有一些聰明的工程師想到，只要在電腦上裝了一個瀏覽器，然后制定一個標(biāo)準(zhǔn)，讓瀏覽器能正確呈現(xiàn)網(wǎng)頁就好了。
這個標(biāo)準(zhǔn)就是 HTML，HTML 用 tag 的方式告訴瀏覽器資訊該如何呈現(xiàn)，舉例：瀏覽器讀到 image 這個 tag 就知道要在網(wǎng)頁上擺一張圖片，讀到 button 就知道要在網(wǎng)頁上放一顆按鈕。
如此一來，我只要制定一系列常用的tag (例如<h1>,<h2>,<p>,<image>,<input>等等)，就能讓瀏覽器呈現(xiàn)圖文并茂的網(wǎng)頁。
一個好的網(wǎng)頁其 HTML 可以說是相當(dāng)單純且具有易讀性，這種網(wǎng)頁不但方便前端工程師進(jìn)行后續(xù)的維護(hù)外，也比較容易讓你的網(wǎng)頁增加曝光率讓搜尋引擎能把你的網(wǎng)頁擺在最前面，此種行為稱為 SEO。
2. CSS
有了 HTML 后，大家還是不滿意，因?yàn)閱渭冇?HTML 語言描述出來的網(wǎng)頁很丑，工程師想出了一個方法，就是制定一種描述網(wǎng)頁外觀的語言，再讓它變成一種標(biāo)準(zhǔn)，這樣瀏覽器也就會知道如何美化網(wǎng)頁了，這個語言就是 CSS。CSS 提供很多很厲害的效果和描述外觀的屬性，例如讓圖片變模糊、變亮、旋轉(zhuǎn)，或者改變字體的顏色。
從 1997 年 CSS 1.0 發(fā)布到如今，從最開始只支持簡單的文字排版到如今已經(jīng)可以做出酷炫的 3D 動畫，CSS 已經(jīng)走過了 22 個年頭，其發(fā)展如圖所示：
隨著互聯(lián)網(wǎng)的發(fā)展，人們對網(wǎng)頁的要求已經(jīng)是從只要展示圖文就好變成了各種交互跟視覺效果都需要有著更多的體驗(yàn)要求。CSS 為此也是不斷的更新著。
3. JavaScript
但很多情況下僅憑 HTML + CSS 還是不夠的。光是呈現(xiàn)畫面總少了點(diǎn)趣味，我們希望網(wǎng)站能和使用者有互動，JavaScript 就是用來撰寫這些互動行為的程式語言。
Javascript 能監(jiān)聽網(wǎng)頁上的各種操作行為，例如移動滑鼠、點(diǎn)擊按鈕、網(wǎng)頁縮放、輸入文字等等。
總結(jié)一下：
HTML 建立搭建網(wǎng)頁的主結(jié)構(gòu)CSS 負(fù)責(zé)網(wǎng)頁的美化與優(yōu)化JavaScript 負(fù)責(zé)描述網(wǎng)頁如何與使用者互動但光學(xué)會這三樣?xùn)|西，仍然無法滿足工程師開發(fā)上的需要，為了開發(fā)的效率，不想重新造輪子，所有的開發(fā)語言生態(tài)系都一定會衍生出各種 framework 和 library。
常見的 JavaScript 框架有 Vue.js、AngularJS、ReactJS、jQuery 等等，各有喜好者，但目的都是為了簡化開發(fā)復(fù)雜度，把前后端分開，提高重復(fù)使用性，可維護(hù)性。
后話：前端真的又容易又沒未來么？很多人都說前端簡單，但其實(shí)前端并不是簡單，而是前端的學(xué)習(xí)反饋非常直接，上手容易并且很快就能見效，這也造成了前端很容易的假象。
但實(shí)際上，掌握 HTML + CSS + JavaScript，了解一些后端知識，只能說是一個合格的前端工程師；要想達(dá)到 80 分，就要了解業(yè)務(wù)，對于業(yè)務(wù)的需求和架構(gòu)設(shè)計(jì)有真正的理解和設(shè)計(jì)；而行業(yè)內(nèi)最稀缺的前端大牛，則超過了一般前端的范疇，更接近于「以前端開發(fā)為主的全棧工程師」。
在 20 年前，前端的概念其實(shí)還不常見，就連程序員這個大領(lǐng)域也沒有過多的細(xì)分，基本上都是一個人或者幾個人一起完成一個項(xiàng)目。
隨著行業(yè)的變化和互聯(lián)網(wǎng)的發(fā)展，情況和之前大不相同了。2010 年開始，企業(yè)需要更多在某一領(lǐng)域更專業(yè)、更垂直的開發(fā)者，也就造成了現(xiàn)在的前后端分離。
而現(xiàn)在情況又有所變化，用 Node.js、Meteor.js 這類運(yùn)行環(huán)境來說，他們的出現(xiàn)讓前端工程師也開始進(jìn)行服務(wù)器開發(fā)，逐漸又在向全�？繑n。
前不久有個觀點(diǎn)很有意思，說是到了云時(shí)代，一家企業(yè)只要招幾個前端工程師就可以了。
運(yùn)維通過控制臺就能完成，開發(fā)借助 Serverless 和編排工具就能實(shí)現(xiàn)無服務(wù)端。在更之后的未來，無論是前端工程師還是全棧工程師，都將不復(fù)存在，應(yīng)該叫端到端(F2E -> E2E)工程師了。
所以我們不需要界定崗位的優(yōu)劣，不管是前端還是后端，只要你有能力、有熱情，都是稀缺的人才，學(xué)的一知半解想渾水摸魚的人，也就只能是趁著行業(yè)的紅利混口飯吃。
