logo

bar_normal

前端的收心操

結束了一個長假後總覺得心還是收不回來,只好先來整理下去年底研究的一些前端模組了。

這算是個小小的自我挑戰計畫,有點類似於100 days plan,由我們的前端團隊共同進行。 但如果真正要實施100天實在是有太多困難之處了,我們就決定改為2 months 1week plan! 簡單來說就是利用上班空檔之餘,連續兩個月,一周做出一個模組。 雖然聽起來有點少,但畢竟凡事剛開始總是先上初階班的課程嘛:)

而我自己是針對下面幾個有興趣的功能進行模組研究:

01|線上字體
以前剛開始製作網頁時,總是苦惱於無法將設計稿上的字體在網頁上完美地呈現。 藉著這次的機會學習到了如何使用Google font提供的線上英文字體,當能在font-family上選擇除了Microsoft JhengHei或sans-serif之外的字體時真有種說不出的感動…當然除了英文外也有基本黑體、圓體等中文字體可以選擇。
此外,現在連特殊的中文字體都開始進行線上雲端服務了,有興趣的人不訪可以查查喔。


02|瀑布式


瀑布式瀏覽大部分是用在動態讀入的大筆資料上,是除了換頁瀏覽外的另一種新的閱覽方式。可以讓使用者只要滑動滾輪就可以繼續觀賞更多的訊息。比較主要的社群網站或是新型blog大都是使用此種瀏覽方式,像是Facebook、Twitter、Pinterest等… …。


03|偽元素


從設定基本的a:hover、a:link到::after或::before都算是偽元素的一種,::after和::before則是自己近來才開始研究的用法,我們可以通過偽元素的設定來進行更多種的變化。加上CSS3的動畫屬性還能製作豐富的動態Menu,越熟悉就會越來越忘記js的存在(笑)。


最後還是來聽音樂放空一下,洗洗耳邊嗡嗡作響的鞭炮聲。


Primary - Mileage (ft. Paloalto, Hwa sa of MAMAMOO)

中文字幕版https://youtu.be/zeTFOSyL89I

將拿鐵放在左手邊的小茶几上,躺進被陽光曬得暖暖的懶骨頭沙發裡,聽著Primary的曲子總是會浮出這樣的景象。


Ed Sheeran - I'm A Mess

簡簡單單的,一把吉他再配上Ed Sheeran的歌聲,卻又聽起來很不簡單。雖然沒甚麼原因,但我覺得很適合用來收心。


BTS - Autumn Leaves

中文字幕版https://youtu.be/9EU61Xv2u8M

在這裡放上BTS算是我一點點小小的私心...第一次聽完這首歌時是種「被輕輕提起,抱緊,再緩緩地被放下」這樣的形容...比起聽覺居然更偏向觸覺的感受。


Magic! - Rude

中文字幕版https://youtu.be/3dBlgB2Qb6Q

明明要收心了,但在聽到Rude的節奏時整個差點又玩心大起,只能說雷鬼的力量太無法抵擋了!...還有強大的岳父。