小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!


小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

GitHub 項目上好項目真的很多,但作者長的這麼漂亮的肯定屈指可數了。

用 HTML + CSS 畫油畫

如圖所示,這位小姐姐的名字叫 Diana Smith ,在她的個人博客上介紹自己是一位 JavaScript 開發人員,技能樹包含 React / Vue / Backbone / jQuery ,還是一位 CSS 專家(LESS 和 SASS 雙修),同時也是一位響應式設計的 UI 工程師。

她在 GitHub 上星數最高的一個項目,是用 HTML/CSS 創作了仿油畫作品。

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

這吹彈可破的質感、精妙的構圖、強烈又不違和的色彩搭配,不得不說“畫如其人”啊。

而且,這些圖片是隻用 CSS 和 HTML,所有元素都是手動輸入,僅允許使用 Atom 文本編輯器和 Chrome 開發者工具。

說實話,網頁三兄弟 HTML、CSS、JavaScript 大家都不陌生,但誰能想到能玩出這樣的花來呢?

作者小姐姐的個人博客中分享了一篇文章,其中有一個觀點是:“當你只擁有一把 CSS 錘子時,世界就像是 CSS 釘子。”在工作之外,她也會用 CSS 來尋求藝術靈感。

作為前端,我們每天都在與這三兄弟打交道,但你真的瞭解他們麼?你知道他們使用過程中的一些奇淫巧技麼?

HTML、CSS、JavaScript 都是啥?

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

在各種技術論壇和貼吧裡,前端算不算真正的程序員一直都是一個被討論的問題。

但我覺得這個問題毫無意義啊,是又如何不是又如何,我只知道對於全世界所有的網站而言,無論其服務器端的語言是什麼,前端都使用了 HTML + CSS。

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

很久之前我保存了一張微博上的圖片,是一個前端工程師的技能樹。雖然隨著時間的推移很多內容都需要更新,但從圖上我們也能看出前端工程師絕對不只是簡單的切切頁面而已。

前端工程師,首先是工程師,然後才是前端工程師。工程師的工作是用技術去解決業務上遇到的問題,所謂的前端後端只是分工不同。目前前端能容納的知識領域越來越廣,之後也將需要由更專業的人來完成工作,所以前端的路還可以走的很長。

今天,就和大家介紹一下網頁三劍客分別是什麼:

1. HTML

以前網頁都是非常單純的資訊呈現,所以有一些聰明的工程師想到,只要在電腦上裝了一個瀏覽器,然後制定一個標準,讓瀏覽器能正確呈現網頁就好了。

這個標準就是 HTML,HTML 用 tag 的方式告訴瀏覽器資訊該如何呈現,舉例:瀏覽器讀到 image 這個 tag 就知道要在網頁上擺一張圖片,讀到 button 就知道要在網頁上放一顆按鈕。

如此一來,我只要制定一系列常用的tag (例如

,

,

,<image>,等等),就能讓瀏覽器呈現圖文並茂的網頁。/<image>

一個好的網頁其 HTML 可以說是相當單純且具有易讀性,這種網頁不但方便前端工程師進行後續的維護外,也比較容易讓你的網頁增加曝光率讓搜尋引擎能把你的網頁擺在最前面,此種行為稱為 SEO。

2. CSS

有了 HTML 後,大家還是不滿意,因為單純用 HTML 語言描述出來的網頁很醜,工程師想出了一個方法,就是制定一種描述網頁外觀的語言,再讓它變成一種標準,這樣瀏覽器也就會知道如何美化網頁了,這個語言就是 CSS。CSS 提供很多很厲害的效果和描述外觀的屬性,例如讓圖片變模糊、變亮、旋轉,或者改變字體的顏色。

從 1997 年 CSS 1.0 發佈到如今,從最開始只支持簡單的文字排版到如今已經可以做出酷炫的 3D 動畫,CSS 已經走過了 22 個年頭,其發展如圖所示:

小姐姐用 HTML + CSS 畫油畫?誰能想到前端還有這麼一手操作!

隨著互聯網的發展,人們對網頁的要求已經是從只要展示圖文就好變成了各種交互跟視覺效果都需要有著更多的體驗要求。CSS 為此也是不斷的更新著。

3. JavaScript

但很多情況下僅憑 HTML + CSS 還是不夠的。光是呈現畫面總少了點趣味,我們希望網站能和使用者有互動,JavaScript 就是用來撰寫這些互動行為的程式語言。

Javascript 能監聽網頁上的各種操作行為,例如移動滑鼠、點擊按鈕、網頁縮放、輸入文字等等。

總結一下:

  • HTML 建立搭建網頁的主結構
  • CSS 負責網頁的美化與優化
  • JavaScript 負責描述網頁如何與使用者互動

但光學會這三樣東西,仍然無法滿足工程師開發上的需要,為了開發的效率,不想重新造輪子,所有的開發語言生態系都一定會衍生出各種 framework 和 library。

常見的 JavaScript 框架有 Vue.js、AngularJS、ReactJS、jQuery 等等,各有喜好者,但目的都是為了簡化開發複雜度,把前後端分開,提高重複使用性,可維護性。

後話:前端真的又容易又沒未來麼?

很多人都說前端簡單,但其實前端並不是簡單,而是前端的學習反饋非常直接,上手容易並且很快就能見效,這也造成了前端很容易的假象。

但實際上,掌握 HTML + CSS + JavaScript,瞭解一些後端知識,只能說是一個合格的前端工程師;要想達到 80 分,就要了解業務,對於業務的需求和架構設計有真正的理解和設計;而行業內最稀缺的前端大牛,則超過了一般前端的範疇,更接近於「以前端開發為主的全棧工程師」。

在 20 年前,前端的概念其實還不常見,就連程序員這個大領域也沒有過多的細分,基本上都是一個人或者幾個人一起完成一個項目。

隨著行業的變化和互聯網的發展,情況和之前大不相同了。2010 年開始,企業需要更多在某一領域更專業、更垂直的開發者,也就造成了現在的前後端分離。

而現在情況又有所變化,用 Node.js、Meteor.js 這類運行環境來說,他們的出現讓前端工程師也開始進行服務器開發,逐漸又在向全棧靠攏。

前不久有個觀點很有意思,說是到了雲時代,一家企業只要招幾個前端工程師就可以了。

運維通過控制檯就能完成,開發藉助 Serverless 和編排工具就能實現無服務端。在更之後的未來,無論是前端工程師還是全棧工程師,都將不復存在,應該叫端到端(F2E -> E2E)工程師了。

所以我們不需要界定崗位的優劣,不管是前端還是後端,只要你有能力、有熱情,都是稀缺的人才,學的一知半解想渾水摸魚的人,也就只能是趁著行業的紅利混口飯吃。


分享到:


相關文章: