IT 鐵人幫完賽心得
# 前端今天是鐵人賽的最後一天,感覺自己最後結尾的部分收得不是很好,也有很多部分都因為時間上的關係沒有很完整地 介紹完。
挑戰 30 天連續發文的確是一件非常不容易的事情,自己也更了解到如果還有類似的機會,一定要事先做好準備才行,才不會突發狀況發生時,急就章地寫完文章結尾。
同時,這次挑戰的主題是以前從來沒有碰過的 webGL 及 3D 圖學。原本以為前 10 天的學習能夠掌握基本的知識,不過實際上要了解 webGL shader 的應用跟撰寫、活用 three.js API 等等,都需要相對應的圖形理論做補助,這樣框架用起來才能得心應手。
不過 10 天的學習完全不夠用,光是要了解 GSGL 的撰寫就要不少時間了,更別說應用在實際的計算上。儘管已經有框架幫我們處理掉底層的操作,但如果需要更進階、或是更強大的活用,就必須更了解背後的操作。
aframe 的部分,我會再找時間陸續補齊(如果有時間的話 QQ)。未來也希望自己能夠繼續往 3D 之路邁進,讓前端畫面的展現更加豐富。
這絕對需要時間的累積跟練習,也比以往的前端開發更有挑戰性,不過這 30 天的確學習到了很多過去完全不懂的知識。過去望之生畏的 shader ,現在也能夠寫、也能夠看懂;three.js 的 API 有基本的認知和了解;同時也看了一下 webVR 的發展跟認識 aframe 這個框架。
這 30 天可以堪稱最充實的一個月了(笑)。我知道本系列文章中仍然有許多不完整的部分,但希望各位讀者或多或少都能從中獲得一些知識!
後記
得到佳作。算是自己 2016 的總結吧!有太多事情沒有好好地記錄下來。
看到報名通知時其實掙扎蠻久的,因爲前端可想而知,今年寫 react redux 的人一定很多,既然如此,何不嘗試一下自己想碰很久,卻一直沒有碰過的 webGL?
一直以來都對畫面上的互動很有興趣,但是對一位工程師來說,處理動畫之類的邏輯是很煩人又枯燥的事。這一個月雖然學習的東西跟網站開發天差地遠,甚至很少能夠應用在實際的開發當中(壓榨時程都不夠了,誰還在管特效?)。不過能夠學習這些知識,拓寬自己的視野,又何嘗不是件好事呢?
越來越多公司對前端的要求,都是在數據視覺化上。以前被視為無聊、枯燥,在大數據的時代下開始被重視,對這個方向的要求就是 canvas 以及 webGL 的操作能力,不過現在也已經有很多框架幫你處理底層的 API 了。但身為前端,還是要有對底層的基本認識。不然總有一天抽象化滲透還是會找上門。
相關文章
- CSS field-sizing — 用一行 CSS 讓表單元素自動調整大小textarea 自動調整高度,以前只能靠 JavaScript 監聽 scrollHeight。CSS field-sizing: content 一行就能取代,支援 textarea、input、select。本文整理舊做法的痛點與 field-sizing 的用法。
- 讓你的超連結底線更好看:text-underline-offset預設的情況下底線跟文字很接近,有些設計師不喜歡這種樣式,我自己也覺得沒有很好看。
- 為什麼網頁不應該追求 Pixel Perfect只有在 Pixel Perfect 很重要的時候才應該關注他,否則往往會讓你得到一個雙輸的局面。
- 用 CSS HSL 來寫顏色吧!(以及更好的方法)在網頁開發中,傳統的 HEX 和 RGB 顏色表示法雖然廣泛使用,但存在不易閱讀和直觀性不足的問題,且在廣域的色彩空間如 P3 下表現能力受限。HSL(色相、飽和度、亮度)提供了一種更直覺的顏色定義方式,讓開發者能更輕鬆地理解與調整顏色。HSL 通過色相、飽和度和亮度三個維度來描述顏色,使得顏色的調整更加人性化,特別是在設計系統中,HSL 能更好地呈現色盤的亮度變化。