這個範例要練習的是利用 CSS 的變數搭配 JS 來控制圖片模糊和彩度的變化，而在開始製作之前，我們先來稍微了解一下 CSS 變數吧！ 使用 CSS 變數就與使用 JS 或 SASS 變數一樣，需要先定義變數並附值，而定義變數的語法長得像這樣： :root { --black: #000; /* --變數名稱: 變數的值; */ } 當我們需要引用變數時 …

這篇最主要是 JS date 的練習，但因為想順便練習一個 div 的 CSS 繪圖，所以原本的時鐘就變成了宇宙星球的模樣（結果寫這個練習大部分的時間都花在寫 CSS 上 XD） 這裡最主要要練習的是 JS 時間的用法，利用 JS 取得時間後將時間轉換成角度，搭配 CSS transform rotate 製作出一個時鐘，接下來我們就直接開始進行製作吧！ 在進入 JS 前先稍微介紹一下 HTML 和 CSS 的畫面佈局，下面是我們這次會用到的 HTML …

從資策會離開後，因為工作比較偏重設計跟版面製作的關係所以漸漸生疏了 JS 的用法，所以在離職後的這些時間透過 Javascript30 的練習復健和學習 ES6 的語法，練習完後要使用時都要回去翻程式碼覺得有點麻煩，於是決定將學習筆記整理在這裡方便自己查詢，也希望能幫助到有需要的人。 Javascript30（文章完成後會將連結陸續補上）： JavaScript Drum Kit Space clock(CSS image) Playing with CSS Variables and JS Array Cardio Day 1 Flex Panels Image Gallery Ajax Type Ahead Array Cardio Day Fun with HTML5 Canvas 14 Must Know Dev Tools Tricks Hold Shift to Check Multiple Checkboxes(with pure CSS images)

原本在 Javascript30 上這個範例是敲下鍵盤後，畫面會顯示對應按鈕的特效和播放對應的音效，不過因為我想順便寫 CSS 的 3D 效果來玩，所以就改成範例中敲下鍵盤後按鈕會有反應並轉出相對應的字母。 首先要先將 HTML 的結構建好，為了要能夠偵測到正確的鍵盤編碼，所以要先把對應的 keycode 查好（keycode 可以從這裡查到），接著將 …

從廣島開始的 Kaigi 之旅 又到了一年一度的 Kaigi 朝聖之旅，這次 Kaigi 舉辦的地點在廣島和平公園內的會議廳，所以我們此次的 Kaigi 行第一站就是擁有悲傷歷史的美麗都市 — 廣島。 抵達日本後已經是當地時間的晚上八點多了，跟著我們去日本的還有颱風泰利，所以去飯店放完行李後，大家就趁著颱風還沒登陸前先去超市補給緊急糧食。

2016 RubyKaigi 關西之旅 在文章的一開始我要先感謝五倍紅寶石舉辦這次的員工旅遊，除了讓我獲得九天的美好旅程外，還讓我有機會參與 RubyKaigi 這場盛會。 Day1 桃園－大阪 一早與同事們在桃園機場會合，由於飛機誤點，抵達飯店後已經是傍晚了。飢餓的一群人放下行李的第一個行程就是出去覓食，由於我們的飯店位在日本橋站旁，離道頓堀非常近，所以第一餐就決定在道頓堀解決。 在道頓堀覓食的時候，有選擇障礙的我一直無法決定要吃什麼，直到看到若狹家，第一次認識若狹家其實是之前準備去東京旅遊時在網路上的食記內看到的，標榜便宜又大碗的生魚片蓋飯，愛吃生魚片的我立馬記下來，但那次的東京行一直沒有機會吃到，因此一在道頓堀看到它我就立刻決定要把關西行的第一餐獻給它！實際吃過後它果然沒有讓我失望，便宜的價格加上滿滿的魚肉~喜歡吃生魚片的人有機會一定要去嚐嚐！