ironman - 2018

01) Happy CSSer - 1.md

FB event: https://www.facebook.com/events/1890105347923108/
GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2016-12-25

---

第一次聚會是在外頭的咖啡廳
還是 WIFI 狀況挺慘烈的一家咖啡廳
所以特別考驗與會者的離線開發能力 XDDD
不過第一次來的人大多是老手，現場倒是還滿和平的

這週的主題是 Pokemon Go App 的各種 UI，任君挑選、自由挑戰

我自己挑了 pokedex 列表頁
成品如下

Pokédex in CSS grid
http://codepen.io/Rplus/pen/MbddMe?editors=1100

因為之前有針對細節寫過一篇文章了，所以這邊不會描述太多，
對實作細節有興趣的可以移步：

[POST] Introduction for 《Pokédex in CSS grid》
Rplus/rplus.github.io#38

但這邊可以稍微提一下還比較有印象的點：

1] 練習使用 CSS Grid

去年這個時間段，大概挺常看到 Rachel Andrew 到處火力展示 CSS Grid 的妙用。
但是一直都處於只看 MDN 跟文章的階段，沒太多練習機會，趁活動強迫自己練習看看~

在這類格狀排版上，CSS Grid 真的是方便許多許多
可以在成品中看到 mixmax 跟 auto-fill 的搭配就直接把整個排版打完收工了
Grid 新屬性的各種搭配下，可以玩出很多奇妙的效果~

2] 嘗試使用 CSS variables

這邊的 CSS variables 主要是用在 CSS image sprite 的定位，
雖然現在看起來會覺得這定位方式還挺有改進方式的
( 包含 百分比的精度 & CSS Variables 的使用方式 )
不過作為試驗作品，也還算是不錯的挑戰項目啦~ XDD

而 sprite 的百分比定位，倒是在這次才曉得有這樣的公式
100% * $index / #{$grid-count - 1}, source
以前都是慢慢算吶~ 果然是遇到才會去學些奇奇怪怪的東西 XDD
這過程跟以前書本上教的科學方法有點類似
只不過這邊是比較簡略的步驟：提問、搜尋、實驗、學習、紀錄

3] 認識 CSS counter

這玩意其實並不常用
但有些時候，它就特別好用。
只不過你覺得它特別好用時，往往也就不是該用它的時候… ( 我並沒有特別喜歡繞口令，真的…

這邊我是拿來計數，很好玩、很好用，
但 counter 原本就不是拿來計數用的 XD
這邊比較建議的作法是用 JS 處理，因為它應該要是實際的數值，而不是顯示用的指示，雖然會有相同的視覺效果

在寫那篇筆記時，我認為 counter 很吃 DOM 順序，
雖然有部份對，但更精確的說法應該是：你要清楚地瞭解該在哪邊運算以及重置 所以之後有針對這點做了些更新

4] 奇怪的技能

在解決問題的過程中，人往往會需要學些奇奇怪怪、非預期的技能
這次活動裡我就為了合成那張大的 sprite image 而去練習了一些 ImageMagick 的指令
雖然指令要下哪些我現在也忘光了
但對於 ImageMagick 在合圖時可以做到哪些控制條件，我還是有些印象~
相信這樣的印象可以在下次遇到問題時，更快速地搜尋到想要的效果
( 好吧，我承認忘了做筆記…

---

從上面幾點不難看出來
不是練習就是嚐試，還有試誤，總之就是亂踹~
折騰一段日子後總是能理解，新的技術需要新的習作
而在實例中練習未熟悉的知識，也是我喜歡 Happy CSSer 很大的原因，
這是個很吸引人的實驗(修羅)場~ <3

而活動討論的方式其實也與本文相似，
大致都是較籠統地提及而已，
討論過程中，大家多以「這個你應該懂」的想法進行，
所以有時會有種「這個簡單我也會」的誤區 XDD
想要避免這類情況發生就是一旦覺得怪怪的就該停下來好好想想、趕快提問

---

第一週就先這樣囉~
本來是還想介紹一下別人寫什麼，
但活動一開始的運作模式還沒有很明確
現在我直接看 source code 也想不太起大家寫了什麼東西 XDDD

只大約記得 rulin 的 CSS grid 比我熟很多 XDD
Neko 細節很講究、也作得飛快，還有空做互動
yutin 直接用 React 做 UI 邏輯 XDDDD

啊拉拉拉拉~ 人老了忘光啦~
明天見

Happy CSSer - 02.md

FB event: https://www.facebook.com/events/173472326462938/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-01-07

第二次聚會也還是在咖啡廳裡~
只不過不太適合打電腦的店 嘖嘖

這次的主題依舊是 Pokemon Go UI 擇一
因為其實認真看的話，還不少頁，
而且更重要的是，RWD 做得真的不是很好 XDDDD
( 但 app 固定螢幕方向後可以無視 RWD 就是 )

---

1 ]

我當時選的是 Dialog system
因為滿多資訊都是透過隊長的 dialog 做呈現，
所以就想說來自己來刻一個試試
成品如下 (我不是藍隊的！)

[Pokemon Go UI] Dialog
https://codepen.io/Rplus/pen/wgapbw

這個 Dialog UI 比較有趣的點是：
敘述者人相的定位，需要在不同視窗尺寸下維持位置。

一開始真的是想不到會卡在這邊 XD
原本以為是隨便定個百分比就可以放水流的事情，
結果在不希望塞一堆無意義的 media-query 的情況下，
使用了比較新的 background-position four-value syntax
可以設定背景圖偏移量的相對邊界是哪個方向 (預設是上 & 左)
例：

background-position: left 10px top 80px;
// 等同於以前直接設 10px 80px
background-position:      10px     80px;

細節可以去看 MDN: CSS > background-position
支援度看起來是還不錯啦，連 IE9 都看得懂真的超乎我的意料之外 XDDD

定位那邊也有搭配 viewpoint unit 跟奇妙的數學算式兜在一起
最後總算是能在不同尺寸下都能妥妥地塞好塞滿

相對地，Dialog 框框跟圖示的定位就比較基礎

圖示的尺寸因為限定為圓形，所以有用 object-fit 固定一下比例
這邊也有用 :not(:empty) 直接控制不同狀態的樣式，
讓樣式直接相依於內容而不是外部給定的狀態 class
可以試試不要放圖示~

Dialog 框框主體的陰影當時是使用 box-shadow 來處理，
現在看來，或許全都一起用 filter: drop-shadow() 來讓小三角也能有一致陰影似乎也不錯

---

這期回顧了一下，還記得一些別人做的 XD

2 ]

Pokemon Go achievement UI
by Neko
https://codepen.io/touneko/pen/egpWre

Neko 做的這個獎牌頁真的是瘋強！

分享時，看到那個六角螺絲帽竟然是用 CSS 直接刻的 XDD
真的是驚呆了！真的是超有心又超猛的！哈哈哈

他這邊是用 clip-path 直接切出六角形，算是直球對決

獎牌是個會重覆使用的 UI，
若有要 refactor 的話，可以試試引入 CSS Variables 來控制元件尺寸

---

3 ]

Rulin 的長脖子椰蛋樹 https://codepen.io/rulinshyu/pen/RKPxGM

• 隊徽分層來套用透明度算滿好用的技巧
• UI 高度計算有點失誤、椰子樹盡量可以垂直置中
• footer 的 button 理論上應該是要直接用絕對定位

---

4 ]

Ted 刻了兩個 UI，一個是物品列表、一個是日誌列表

物品列表是直接使用 pure.css 的 grid system
日誌列表則是用 CSS table layout，但左右欄沒有設定 spacing，容易造成子元件不對齊的狀況~

另外就是 Mac 開發者有時要留意一下 scrollbar 是否出現唷 XDD

---

第二次小聚就這樣啦~ 明兒見~

Happy CSSer - 03.md

FB event: https://www.facebook.com/events/1911828859048006/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-01-22

第一次在摩茲工寮辦活動~
場地真的棒！

這次活動還是繼續刻 Pokemon Go 的 UI
(到底是多喜歡 Pokemon GO XDDD)
嘛… 應該不久後就會膩到換主題了…

這次挑了個雷達的功能

[Pokemon Go UI] Poke Radar: NearBy & Sightings
https://codepen.io/Rplus/pen/wgdrjz

記得原本 N 社只有做 sightings 的功能，而且因為很難找到目標，部份玩家會用台語稱呼為 塞ting…
後來新加的這個 nearby 功能總算是讓一些幾何數學不好的朋友能輕鬆愉快找到目標~

會挑這個來做一是因為看起來比較簡單 XD
再來就是這塊 UI 滿獨立的，跟其它 UI 比較不會有相依問題
但僅管如此，它在橫向螢幕的表現實在是不太好，所以想來挑戰看看如何改善呈現效果

因為會有兩種雷達：Nearby & Sightings
所以用 title + list 的方式來呈現 現在回頭看那用 content 輸出 title 文字的方式實在是脫褲子放屁 XDD

而 list 是用 CSS Grid 排版 ( 這真的是排版救星~
因為數量有時不一定會全滿，
所以 grid-template 就只設定橫向 column 而已
設定好 grid-gap 間距後，一顆顆就自己按順序排好囉！

每個 item 分三部份: 背景圖、PM 圖、環(鎖定時有動畫)

item 的長寬相等是利用背景圖層 padding-bottom: 100% 做的，而其它的則是絕對定位。
背景圖這邊是統一用漸層色暫替，但其實要塞真的背景圖也只需要將圖片網址以 CSS variables 引入即可快速地完成~

PM 圖是用 pseudo-element 做的，設計上是直接用 CSS variables 吃 PM 圖片網址，只是這邊沒有做完所有的細節設定，包括背景圖尺寸、位置等等的調整。不過基本架構建好後，後續就比較容易對應處理了

環則是自己用了一個 DOM，分成三層：因為它需要三個圈，所以就一圈一層~
DOM 本體是基準的圈；那兩個 pseudo-element 則是動畫效果時才會出現的圈圈，它們兩會套用同一個放大的動畫，但會有不同的 animation-delay 來產生時間差的視覺效果

最後講的則是最麻煩的外框尺寸的控制
因為尺寸條件頗多，所以後來只針對 orientation 來判斷
細節就沒有處理太多。
所以在接近正方形的視窗下，就會有些東西被遮住，這是還可以改善的地方，或許一起改用 vmin 來處理元件尺寸會有不錯的效果

另外在圈圈的設定，也可以改用 em 或 vmin 來設定，
避免圈圈與圖片的位置會因為視窗尺寸不同而有太大的變化~

這期基本上是做了個雛型而已，但有時雛型也滿適合拿來討論改進方向的~ :P

偷偷廣告一下，
這週日有 Happy CSSer 的活動唷！
有興趣的可以來玩~
https://www.facebook.com/events/401531540268114/

( 週六有空就去遊行吧 XDDD )

Happy CSSer - 04.md

FB event: https://www.facebook.com/events/251162775324152/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-02-12

---

第四週終於不用繼續畫 pokemon go 的 UI 了！ XDDD
挑了個電影簡介的 APP UI 來實作

參考的 dribbble 已經撤掉了，
基本上是給了兩個狀態：簡介頁、細節內容頁。
因為不是 GIF 的動態 demo，所以我們需要自己腦補兩個狀態的過場動畫類型。
可以看到這次資料夾下會有各種不一樣的過場動畫 XDD
（ 這次來了好多人！

這是我的

Movie Card
https://codepen.io/Rplus/pen/xgmOGL

基本上寫得挺糟的 XDD
結構分得不清楚、動畫效果也不好看

如果再做一次，應該會以頁面間的過場來思考
而不是強硬地把元件做對應，這在不同頁面的元件間會挺無意義的

記得當時大家討論得挺熱烈的是電影資訊頁中
左右兩欄的資料該怎麼設計
因為有時左欄會較寬、有時是右欄
後來是看到不少人都用了 flexbox 的特性來排版~

至於用 label + input 來控制兩頁狀態
活動裡可以這樣用，但若是產品要用，還是會比較建議用不同的 url 來處理

---

一些別人的

• Neko 的
  這個就做得很完整了~
  主要是用 js 來控制兩狀態的 fade-in / fade-out

• Gore 的 也很完整~
  也是用 input 做狀態管理

• Elaine 的 ，套用 bunce animation 很 Q 彈

---

啊吶~
這種需要還原度很高的，通常會很花時間在微調細節樣式上
相對於這類的苦工活，在活動裡我還是比較喜歡 prototype，
更多地去思考實作架構的調整方式~ :P
( 好吧，我比較懶… )

Happy CSSer - 05.md

FB event: https://www.facebook.com/events/403776003304356/ GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/blob/master/2017-02-25/

---

這期一樣是大家提前投票選出意願最高的 UI 設計
這樣做是讓與會者可以決定要做哪個 UI，避免太難做不出來
（ 當然往後也是有出現過「看起來很簡單、做起來無敵煩」的狀況 XDD 也希望大家可以在家先思考一下大致的實作方向，
當天會比較容易有頭緒

這期的題目是 Music Player 的 UI
而且跟上次一樣，只是靜態圖，所以動畫或過場效果都是要自己腦補的 XDD

Daily UI Challenge #09 - Music Player
https://dribbble.com/shots/3305368-Daily-UI-Challenge-09-Music-Player

我記得我這次沒有放到 codepen 上，主要原因是因為 position: sticky 沒實驗成功，所以不爽放到 codepen 上 XDDD

不過 Gore 的後來回家有成功完成 sticky 功能！
https://codepen.io/GoreWang/pen/jBEoKd
捲動列表時，你可以看到左欄分類用的英文字母會"黏"在頂部 ( 體驗超讚！
他還有弄波浪的動畫~ 棒棒噠~
（ 他的波浪動畫分多層一點應該會好看些~

---

Neko 的成品：

兩個都有實作完波浪
不過 Neko 的波浪不是用 SVG 直接硬上，
而是用兩組 radial-gradient 組合出來的波形
雖說這樣的波形左右對稱而顯得較呆板
不過依然是非常有趣的實做方式

兩位的波浪都使用 mix-blend-mode 來讓顏色變化更加漂亮
而因為波浪有時會蓋住可捲動的底部區塊
所以都有加了 pointer-events: none; 避免波浪擋到捲軸

而我自己因為覺得波浪有點難實作
就直接用 clip-path 切了個大概的形狀就放水流了 XDDDD
要做音樂波浪示意還是用 canvas 處理可能會漂亮 & 方便些 :P

對於分類標籤的作法，大家用的方法也都不太一樣
我是讓每個 list item 都有個分類屬性
而顯不顯示則看它是不是第一個 item
(不曉得是不是這樣的設計才使用 sticky 無法作用)

而 Neko 是將分類設在 <ul> 上，再用偽元素定位

Gore 的方式跟 Neko 較為類似，不過定位就不太一樣了，他這邊是正常文字流的定位，而非跳脫型的
但他的 DOM 亂寫，ul 下面塞 div 是什麼鬼 XDD

---

這次的題目大家有志一同都花了不少時間在找 player icons XDDD

• 有人直接用 font-awason icon
• 有人去抓 SVG 直接塞成背景圖
• 也有人抓了 SVG 做成 SVG sprit

只能說，圖示系統的應用方式還真的挺多樣的~

---

因為個人挺愛弄 input 的
所以 search 那邊有用 label 實作了一個 input:focus 的效果
當點擊 search icon 觸發 input:focus 時，搜尋的輸入框才會跑出來~ :P
https://github.com/Happy-CSSer/Happy-CSSer/blob/04d1614/2017-02-25/rplus/app/style.scss#L63-L66

---

至於最底邊的按鈕們，大家都是用 flexbox 實作
但因為預期的排列方式各不相同，所以實作上也有些小差異
有的將中央的 icon 另外組成一個群組來處理，有的直接是扁平化的排列
群組起來的比較無腦、扁平的則是 DOM 看起來比較順眼 XDDD
就看比較在意哪邊

Happy CSSer - 06.md

FB event: https://www.facebook.com/events/1313247108762291 GitHub repo: https://github.com/Happy-CSSer/Happy-CSSer/tree/master/2017-03-11

嗯…
你沒看錯，這週的 repo 資料夾是空的 XDDD
沒記錯的話，來的人很少，所以就臨時改成自習課了 XDDDDDDD

偶而也要休息一下嘛~

這週活動主要是讓各自去看 CSS grid

看的是這份：
Grid by Example
https://gridbyexample.com/examples/

不過後來邊看邊聊天，
後來不知怎的，
就通通圍在一起，變成導讀 MDN CSS Grid 篇章了 XDDD

順著 grid property 一個個看下來
順便講講有哪些有趣的玩法
之後大家就快快樂樂地回家了 XDDDDD

---

---

這週內容寫這麼短，連我自己都看不過去了…
來聊聊活動裡大家比較常用哪種開發方式好了~

1] CodePen

線上前端開發平台，很好用！
支援的語法豐富，而且展示非常便利
基本上大家都會把寫好的成品丟上去，不管之前是用什麼奇怪的開發方式
也是方便後半段分享時，其他人可以直接看 code 更快理解在講什麼，或是提出疑文

缺點就是改一次要等 server response
有時網路環境不太好就常會卡卡的 XDD

2] Web Maker

簡單一句就是離線版的 CodePen!!!

這是款 Chrome 的 extension
因為是離線版的，所以 live reload 就一定是必帶啦~

跟 CodePen 比起來比較不同的是有些快速鍵沒有支援 Sublime 的快速鍵
再來就是沒存檔重整就是 GG 哈哈哈

非常推薦懶人使用！

3] Prepros

拖拉式的開發環境整合軟體，有跨平台，非常好用 <3
好處是可以使用自己慣用的編輯器、還有處理哩哩叩叩的小事情
推推

4] 土炮派

有人就是自幹慣了，或是專案要 bundle 成自己的形狀的，就自己弄環境，webpack 或 gulp 的都可以~

intro.md

Happy CSSer 是個出門一起寫 CSS 的小活動。
我們會在 FB 上糾團、在 GitHub 上遞交自己的作品、並在活動中分享及討論各自的理解與技巧。

而這一時興起的 Happy CSSer 小活動不知不覺也快一年了~ <3
算一算也有二十來場，我將試著回顧這一年來題目中有趣的內容。
感謝不少同好一起出門來跟 CSS 玩耍，學了很多、也多認識了不少有趣的朋友們！
希望會有更多的人快樂地寫著 CSS、也寫著快樂的 CSS~

Here is Happy CSSer.
https://www.facebook.com/HappyCSSer/

https://ithelp.ithome.com.tw/users/20107823/ironman