Created 8 articlesIn total 8457 words

低像素佔位圖片 (Low quality image placeholder)

TigerCodingStudio

網頁圖片載入緩慢,載入的圖片還會顯示尷尬的空白,這些問題既影響美觀還降低使用者的體驗。如果你也遇過這些問題,不妨試試看低像素佔位圖片(Low quality image placeholder)。

React Router Dom: BrowserRouter vs HashRouter

TigerCodingStudio

在開發過程,或者學習過程中,可能都沒有注意到 Route 有 BrowserRouter 跟 HashRouter 這兩種分別。直到網頁上線,在你第一次 F5 重載的時候,看到 404 錯誤的時候。你才發覺 ...

從零開始布署你的個人網頁 — CI/CD自動化布署覺醒篇

TigerCodingStudio

如何一鍵入雲更新你的網頁。

從零開始布署你的個人網頁 — GCP網頁架設激鬥篇

TigerCodingStudio

YO ! Google Cloud Platform 架設靜態網頁又有什麼可怕?

從零開始佈署你的個人網頁 —網域購買篇

TigerCodingStudio

來購買網域吧 ! 挑對了,之後搞不好還可以賣出去賺錢 >.<

在 React 上實作視差滾動(Parallax)效果

TigerCodingStudio

最近工作上遇到parallax的需求,本來想用第三方套件來快速解決戰鬥,怎料網路上根本沒有輕量又符合需求的套件。最後只好動手實作,絞盡腦汁完成的成果如下:Parallax Effect完整的範例在這裡。解釋我這個範例的要求是當目標<div>的底部碰到視窗底部時,背景圖片就要移動到終點(最大值)。

簡易入門 Snowpack + React + Typescript,享受原生支援 Typescript 的快樂 !

TigerCodingStudio

photo from Snowpack (https://www.snowpack.dev)前言承接上一篇知識分享,這次我們要分享 Snowpack + React + Typescript 的設定流程。完整的專案,這次我有打包放在 GitHub,程式碼參考 Snowpack T...

15分鐘建立一個Snowpack + React 的專案

TigerCodingStudio

photo from SnowpackSnowpack 最為一個網頁打包工具可謂大受歡迎,相比起主流打包工具Webpack,Snowpack 更符合目前主流的開發需求,今天就帶各位用15分鐘的時間啟動一個Snowpack 加 React 的專案。