JavaScript

Transform tools 是一個免費的線上工具，專為轉換用於網頁開發與數據描述格式而設計。例如將 SVG 轉成 JSX、HTML 轉成 JSX、JSON 轉成 TypeScript 或是 JSON 轉 MySQL 及 CSS 轉 TailwindCSS 等。Transform tools 平台目前可以對 SVG、HTML、JSON、JSON Schema、CSS、JavaScript、GraphQL、JSON-LD、TypeScript、Flow 及其他，例如 Markdown to HTML 等。每種主要格式可轉換的格式各有不同，例如：JSON 格式可轉出一個 Create table 的 MySQL Script，免除還要手動的改寫的麻煩。

Lucide 是一個免費且開放原始碼的 SVG 圖示庫，提供的圖示類型有無障礙、帳戶、動物、箭頭、品牌等 40多種類型的圖示，總數達到 1500多個。這些圖示除了提供 SVG 向量格式外，也支援多種 JavaScript 框架及工具，包括：Vanilla、React、Vue、Svelte、Preact、Solid、Angular、Icon Font，除此之外，還能透過 HTML 語法中的 JSX 嵌入，滿足不同開發需求。另外，Lucide 也提供可以客製化這些圖示的工具，使用者可以透過這些工具輕鬆更改圖示顏色、描邊粗細（Stroke Width）、尺寸與開啟絕對值描邊粗細( Absolute Stroke width_)等。Lucide 圖示庫採用 ISC License，簡單來說這些圖示不但可以免費使用，還可以編輯與再分發，非常適合個人專案與商業用途使用。

Free HTML 404 page templates 是個免費提供 404頁面模板的網站，使用方式很簡便，只需在網站上瀏覽並選擇自己喜歡的模板，就可以使用 CodePen 進行預覽並可以根據自己的需求，修改模板的顏色、字體、圖像等元素，以便與自己的網站風格相匹配。一旦滿意了修改後的模板，只需複制所需的 HTML、CSS 及 Javascript 語法，然後將其貼到網站中相應的 404 頁面即可。

Color4Bg 是一個免費的背景產生器，專為生成各種酷炫且抽象的動態圖形而設計。使用者可以選擇匯出圖片 (PNG)、影片 (Webm) 或 JavaScript 腳本。Color4Bg 提供了多種模板，包括優美流動形態、模糊圓點、模糊漸變、三角形馬賽克、抽象曲線形狀、隨機分布正方體、波浪狀波浪及大塊球體等，使用者可以直接選擇這些模板來快速建立所需的背景。依據模板的不同，還有內建的可調參數，如噪點等級、模糊等級、循環速度和調色板，讓使用者可以依據具體需求進行微調。使用者可以根據後續應用的專案，選擇匯出為圖片、影片或 JavaScript 腳本。此外，Color4Bg 也將模板以色彩進行分類，方便使用者快速找到所需的背景。

網頁中的字型呈現，都是以瀏覽者電腦有安裝的字型為主，因此，即便是網頁製作時，所使用的字體有多美觀，除非瀏覽者的電腦有相同的字型。為解決此一困擾，因此便有網頁字型託管服務，像是 Google web fonts 由 Google 所提供的網頁字型應用服務 便是一例，現在，Adobe 也推出的 Edge Web Fonts 免費網頁字型託管服務，提供超過 500 種以上的免費字型，其中也包含所有在 Google Web Fonts 裡的開放原始碼字型，使用時，只需要將其生成的 JavaScript 語法複製到網站裡，便能以 CSS 的 font-family 方式來使用該字型，相當方便。

AjaxDaddy 是一個專門蒐集Ajax程式碼並將它寫成可在網頁中展示其效果的範例，讓想要使用這些Ajax程式碼的網站只要參考其範例就可以很輕易的就將它放到自己的網頁上。AjaxDaddy 網站內有非常明確的分類，包含有手風琴(accordion)、自動完成(autocomplete)、圖形(charts)、菜單(menu)、分頁(tabs)、提示(tooltip)...等20多個分類，想要在網站上添加一些Ajax效果的朋友，可以試試！

很多人會在自己的網頁或是部落格放上一些裝飾用的元件，例如天氣預報、音樂、線上即時人數或是時鐘等等，避免自己的版面過於單調，也能提供訪問者即時的資訊。ClockLink 是一個線上提供時鐘的免費網站，各式各樣造型的時鐘圖樣，絕對有你滿意的，且均提供連結的 JavaScript Code 及 embed 內嵌程式碼，方便放到網頁裡。

網站開發免不了都要使用到 JavaScript、CSS、SWF、images 等專屬前端網頁的開發應用，例如 JQuery 程式庫，若自己的網站流量夠大，當然可以將其下載到自己網站上來應用，若想節省自身網站的流量，也可以在網頁裡直接引用有提供 CDN 的網站上的程式庫，像是 Google CDN 或是 Microsoft runs their own CDN，若在前述兩個網站上找不到要應用的資源，可以到 CDNJS 網站上找找看，其穩定性與效能也還算不錯喔。

網頁內包含 HTML、JavaScript 及主要內容還有就是用來排版的 CSS語法，因此當檢視網頁原始碼的時候這些全部都會出現，而 Content Parser Website 這個網站可將網頁解析、篩選過雜結構並單純提取成 Markdown 標記式語言、Html 語法或是 Text，使用方式很簡單，僅需輸入網址選擇要提取的格式，就可以在線上預覽提取後的各種格式，方便使用者做後續的應用。

想要在網頁上對「Button - 按鈕」進行樣式調整，通常會使用背景圖片或是使用 CSS 來調整按鈕的外觀，若要加上當滑鼠移到按鈕的上方或是離開，也會使用 Javascript 來加上，若對繪製這些圖片、Javascript 都不是很熟悉的話，還是要花一些時間來製作，若是偶而用用，建議可以到 CSS Button Designer 這個免費的按鈕樣式產生器來製作，除了可使用 CSS 改變按鈕樣式，也提供滑鼠移到按鈕的上方或是離開時的 Javascript ，製作完成後，直接複製所產生的 Code 便可應用的網頁裡，相當方便。

如果網頁要使用一些動畫圖示，例如滑鼠移動按鈕上方，按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示，這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現，而現在你也可以單純利用 CSS 語法就可辦到，CSS WAND 提供 Hover、Loading 類型的 CSS 動畫，只要複製該範例的 CSS 語法，就可以將範例應用到自己的網頁，相當方便。

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕，如果自己在網頁上要做出如此效果的按鈕，免用 Javascript 就可以辦到，proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器，透過介面輸入所需條件，便可產生 CSS 語法，方便你應用在網頁上。