解析：純 CSS 的圈圈叉叉
前言在很久之前寫過一篇使用 CSS 繪圖的文章，但 CSS 能做的不僅止於此，利用 Pure CSS 製作遊戲的大有人在，像是 Pure CSS Games collection 裡面羅列的。 不過你知我知你隔壁戴眼鏡的也知，純 CSS 製作的圖畫或是遊戲，實作成本高、閱讀性不佳，也難以調教效能，幾乎無法應用到實際產品上。 可是很好玩啊！利用有限條件加上各種技巧想辦法完成預想中的效果，成就感是很大的，能夠有能力跟時間製作出這樣的作品，我
用 CSS Grid 創造蒙德里安藝術
前言前陣子 netflix 上了最新一季的夜魔俠，其中的反派角色很愛在家中擺設畫作，有了藝術品襯托，壞人在我的腦海裡突然就變成看似很有深度的角色。這讓我覺得應該也該擺點畫作在家裡，看看能不能提高自己的層次。 而宅宅如我當然無法做如此的投資，不過如果能夠自己用 Web 技術產生一些藝術作品，然後投影在家中呢？應該很酷吧！然後就在 codepen 上發現了一個有趣的東西： See the Pen Randomly generate Mond
FLIP 技巧總複習
前言在前端的世界中，如何優化 performance 一直都是很重要的議題，也常常被拿來當作評斷前端工程師能力的一個依據。效能調教有許多方面可以探討，但最主要的重點就是希望使用者在操作網站時，不會感受到頁面跳動，尤其是當網站有動畫效果時，些微的跳動就會引起使用者注意。 大概在去年的時候，同事為了解決 CSS Animation 在頁面上的不順暢，研究了不少 hack 技巧，其中一個讓我覺得很特別的就是今天的主角：FLIP。 FLIP 技
CSS keylogger：攻擊與防禦
前言前陣子在 Hacker News 上面看到這篇：Show HN: A CSS Keylogger，大開眼界，決定要找個時間好好來研究一下，並且寫一篇文章分享給大家。 這篇會講到以下東西： 什麼是 keylogger CSS keylogger 的原理 CSS keylogger 與 React 防禦方法 好，那就讓我們開始吧！ Keylogger 是什麼？Keylogger 就是鍵盤側錄，是惡意程式的一種，拿來記錄你電腦上面所有
用 CSS 畫畫的小技巧
前言我想每個人小時候應該都蠻喜歡畫畫的吧？在沒有遊戲機、沒有 iPhone 的年代，拿著畫筆跟一張紙就可以開心度過幾個小時，但不知道從什麼時候開始就忘掉了這份快樂。 今天想邀請大家把『快樂』找回來！ 身為工程師，我們拿起畫筆可能畫不出一個漂亮的圓，但透過熟悉的 CSS 我們可以做到。 『等等，平常上班調 CSS 就已經夠耗神了，你還要拿來畫圖？這除了炫技以外，對專業能力有什麼實質幫助嗎？你看連知乎上也有人這樣想。』 那你滑 ig 對專業
淺談 CSS 方法論與 Atomic CSS
See the Pen css-is-awesome by Arvin (@arvin0731) on CodePen. 今天來點輕鬆的，看標題就知道我想介紹一下 Atomic CSS，這是一套由 Yahoo 開源的 CSS 工具，工作上使用了蠻長一段時間，一開始使用起來其實覺得蠻不習慣的，但是久了以後發現搭配 React 寫起來雖然醜了點但是方便又易懂，非常適合獨立作業的前端工程師（設計師不參與 HTML, CSS 切版等動作），