Amo Chen

從原始碼偷學技術之圖片預載(preload)

Lightbox 是很知名的網頁圖片 viewer, 很多網站顯示圖片都會使用 Lightbox 以滿足使用者想放大圖片的需求。 p.s. 你在瀏覽網頁時，如果點一下圖片，那張圖片就會置中放大的話，那

Posted on Sep 1, 2023 by Amo Chen ‐ 1 min read

之前就想說為什麼有些文章的 OG Image 上的程式碼照片非常漂亮，還以為是純手工打造出來的圖片，真想不到這個也是一門生意⋯⋯。 snappify 是專注在如何呈現程式碼的

Posted on Aug 31, 2023 by Amo Chen ‐ 1 min read

大家初次使用 Python 的 logging 模組時，應該都跟我同樣困惑過，例如下列程式碼：

import logging

log = logging.getLogger(__name__)
log.info('Hello')

我們會預期上述程式碼要列印 Hello 的字串，然而事實是不會。

這是由於 Python logging 模組預設的 log level 為 WARNING , 所以只有 WARNING , ERROR 以及 CRITICAL 才會顯示。

所以使用 logging 模組通常都要額外做一些設定才行，這不免需要讀一下 Python 官方文件。（這不是 Python 的問題，只是設計哲學不同）

那麼，有沒有什麼套件比起內建的 logging 模組更直覺好用呢？

答案是「有」，那就是本文要介紹的 structlog 套件。

由於現代螢幕尺寸相當多元，為了讓網頁能夠在各式各樣尺寸的螢幕上能夠正常顯示，所以網頁設計越來越講求響應式網頁設計(responsive web de

Posted on Aug 29, 2023 by Amo Chen ‐ 2 min read

just 是一個打造專案專屬指令(project-specific commands)的工具，簡單來說你可以直接認為它就是改良版的 make 指令，兩者語法多有

Posted on Aug 28, 2023 by Amo Chen ‐ 1 min read

Sass 的出現，改善 CSS 語法的不足， Sass 可以更像寫程式一樣定義變數、函數，也可以使用 if-else, for 等程式常見的邏輯控制，甚至模組化都可以做到，最後還可以編譯輸出 CSS, 讓前端工程師的工作效率提升到一個全新檔次。

知名的前端框架 Bootstrap 即使用 Sass 開發的，足見 Sass 的實用性！

本文將如何在 VS Code 中使用 Live Sass Compiler 擴充將 Sass 編譯成 CSS 。

Posted on Aug 26, 2023 in VS Code , VS Code 擴充推薦 by Amo Chen ‐ 2 min read

Material Icon Theme 是 VS Code 擴充中著名的 VS Code 主題，擁有 4.9 顆星的評價， 1,900+ 萬個安裝數，是我個人正在使用的主題，也推薦給大家。

本文將介紹如何安裝與設定 Material Icon Theme 。

Posted on Aug 26, 2023 in VS Code , VS Code 擴充推薦 by Amo Chen ‐ 2 min read

個人以往長時間使用 Vim 作為主要編輯器使用，但是現在除了 Vim 之外，也會使用 VS Code 進行開發。

Vim 有個功能稱為 bookmark , 可以讓人在特定行做一個書籤，等到需要的時候，可以使用快捷鍵/指令迅速跳到該書籤，可以節省切換的時間，相當高效。

不過使用 VS Code 之後就失去這個功能，所幸還是可以安裝擴充解決問題。

這個擴充稱為 Numbered Bookmarks 推薦給大家使用。

Posted on Aug 25, 2023 in VS Code , VS Code 擴充推薦 by Amo Chen ‐ 2 min read