[12th 鐵人賽] 我說那個手機版 Day 1

2 min read ITHome鐵人賽2020Media QueryGrid LayoutGrid System
說在最前面 網頁這種萬年老埂應該是沒什麼人會看，會想要撰寫這種偏冷門的東西，純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門，真的會想手動自己來的應該屬於抖 M 屬性（吧）。總之，如果對於網頁製作有興趣，或者是想看看到底在做些什麼東西的人，可以繼續看下去。 至於是不是要看滿 30 天，如果我寫得完的話應該可以考慮按一下追蹤之類的。 大概會說些什麼 * 網頁「設計」在「設計」什麼？ * 給「人類」看的，給「機器」看的有什麼差別？ * 區塊、內文、文件流要流去哪裡？

[CSS] 瀑布流難題

7 min read CSSMasonry Layout瀑布流切版前端FrontendIsotopeFreetile.js
寫在最前面，多數情況下，網站的內容使用瀑布流的呈現方式並不多。而這種呈現方式，我記得好像是因為 Pinterest 而紅起來的（有錯誤請指正）。 為何說是難題？我只是想用這個來解釋 Flexbox, Grid 遇到的困難點。 -------------------------------------------------------------------------------- 瀑布流流去哪？ 給我一個 Box 這個埂知道就知道，不知道的不要問。之所以叫做 瀑布 故名思義，就是由上到下（由左到右）的一種排列方式。主要是用於呈現 卡牌類型 的內容，每一張卡牌的寬度是相同的，然後高度不同，所以由上到下依序排列出 多欄 式的結構。

RWD, AWD 與 WD-40

13 min read RWDAWDWD40Responsive web designAdaptive web designContent flowBreakpoints
很久沒有寫關於排版的文章，恰巧最近同事間討論到關於畫面資料流（ Content Flow ）的問題，所以把這個老話題在拿出來嘴一下，順便填充一下部落格的內容。 但，太久沒有寫文章實在是過於生疏。 -------------------------------------------------------------------------------- WD-40 > WD-40 超棒噠～ [https://zh.wikipedia.org/wiki/WD-40] 這個比較跟本文無關，只是為了 WD 的埂而已。 -------------------------------------------------------------------------------- RWD 全名叫做 Responsive web design [https://zh.wikipedia.org/

口罩地圖記錄

3 min read 口罩2020口罩之亂g0v
因應武漢肺炎（NCP，2019 新型冠狀病毒）造成的口罩之亂，原本由便利商店販售的動作，改由政府接手，這件事情確實在 g0v 上面發酵，然後我只是跟風而已。 -------------------------------------------------------------------------------- 起源 其實在 Facebook 看到這個訊息，覺得這應該是很多工程師的肝換來的！政府方面也透過唐鳳的協助，在短短 3 天內，提供了全台健保藥局加上衛生所的開放資料 API（神！），目前在 g0v 上面還是有公開筆記可以查閱。 > https://g0v.hackmd.io/gGrOI4_aTsmpoMfLP1OU4A?

[Vue] Vue CLI 3+ 動態載入實例

6 min read Vue 動態載入Vue ComponentVueJSVueJS 2.0JavaScript
鐵人賽之後，我實在對於沒辦法用 Vue CLI 3.0 來組合出動態載入，感到有點小小挫折。不過，畢竟所謂的 vue.config.js 其實，背後也都還是 Webpack 的設定，只是被封裝起來大家看不到而已。那麼，總是會有辦法把他做出來。 對，我做出來了，終究他還是 Webpack 所以其實也沒有非常困難。 > 然後 Vue 出了 4.0 結果 3.0