2021

A collection of 17 posts

[CSS] Flex/Grid Layout Modules, part 2

[CSS] Flex/Grid Layout Modules, part 2

本篇會有不少冷門範例。 其實我覺得很奇妙,就是我老是踩到一些超冷門連 Google 都找不太到的雷。 Flexbox 能與不能 首先還是得叮嚀一下,如果使用靜態定位樣式,會打破 Flex 容器軸流向,所以請不要覺得用了 position: absolute, position: static, position: fixed 或 position: sticky 的時候來問為何 Flexbox 沒有效果。 尺寸 無論是 Flex 容器或是 Flex 元件,尺寸這件事情在設計或是設定上都會有一定的 毛病

[CSS] Flex/Grid Layout Modules, part 1

[CSS] Flex/Grid Layout Modules, part 1

其實我不知道 Flexbox 還有誰想看? 這年頭好像用框架比較快,誰理你背後的原理是什麼呢? Flexbox 我們先來看看可使用狀況。基本上除了 IE 以外,是不用擔心使用上的問題。 CSS Flexible Box Layout ModuleFlexbox 的基本盤是對應從 CSS2.1 以來的四種編排模式, 區塊(block) 行內(inline, inline block) 表格資料(table, 或各種資料集設計) 定位區塊(使用 position 的各種變化)

[CSS] Flex/Grid Layout Modules, part 0

萬事起頭難,只要不起頭,就一點都不難了。 在這個充滿著 CSS Frameworks 的年代,人人有功練,人人有版切,身為老屁股的我只能在沙灘上曬乾,而且還賣不到錢。 鐵人賽就當作自己還有在喘氣的證明。 前言 其實寫 CSS 框架應該比較多觀眾,但就一個碼農來說,自己動手做會比較有趣一點。而且那些框架實在有點五花八門,就是你去 Google 一些關鍵字,諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。 我沒有阻止你用,只要能賺錢的框架就是好框架。 君不見 jQuery

Vue3 - 每天來一點雷 Part 2

受到疫情影響,絕大部分的時間不是在公司就是在家裡,每個禮拜出門採買一次。其實也不是說我不喜歡用線上購物,只是目前其實物流業也是相當緊繃。出門自己小心避開人潮,萬事小心謹慎點就好了。 至於避開人潮這件事情,我都平常日早上 8 點多去大潤發,大概可以避開八九成的人流。 I'm watching you 在 Vue3.x 之後呢,除了原有的 watch 之外,另外提供了一個叫做 watchEffect 的方法。前者跟 Vue2.x 的區別在於,在 3.x 以後深度監聽已經是預設,

Vue3 - 每天來一點雷 Part 1

雖然疫情的狀況目前尚未明朗,但是該要做的事情還是得持續下去才行。身邊絕大部分的人都已經 WFH 了,所以在家裡看一點新的東西也是挺合理的。 是說,Vue3 這件事情也不新了。很多東西 Kuro 都已經寫在書裡面,所以這邊我就不贅述太多基礎的東西。 Competition API - setup 首先,跟 2.x 最大的差異是這個。在 3.x 裡面起手式大概就 setup () 這件事情,根據官方對於這件事情的說法,大抵上的差異在於,這個 setup () 是介於