線上工具 - 開發工具

對初學或不熟悉關聯式資料庫的人來說，一下就要掌握這麼多的 SQL 指令也不容易，如果可以透過 SQL Translator 網站的協助，使用者只要使用口語化的文字描述，SQL Translator 就能講其轉譯成可以執行的 SQL 指令，而如果看不懂的 SQL 指令，也可以拿來問 SQL Translator 反向解釋 SQL 指令的含意，快速增加自己對 SQL 掌握度。

AI Code Mentor 程式碼解析服務是個可根據程式設計師程度提出符合程度且可理解的解釋，適合初學者、進階者，乃至於高高手各種程度的程式設計師使用。使用方式也很簡單，只需貼上程式碼，就可以根據自己的程度選擇是要透過 Robot、5 Years Old、Beginner Programmer、Teacher 或 NASA Programmer 來解釋程式碼。

CSS Scanner 是一款極具便利性和直觀性的瀏覽器擴充功能，它能夠直接顯示出網頁上任何 HTML 元素所套用的 CSS 語法，操作上，只需在網頁上滑動滑鼠游標到任意 HTML 元素上，CSS Scanner 就會立即顯示出該 HTML 元素所使用的 CSS 語法及其相關屬性，並讓使用者能夠輕鬆地複製該語法，以供後續使用。

Gradientos 是個免費線上漸層色彩產生器，可用來快速測試不同漸變在一些常見 UI 元素上的外觀，例如 ICON或背景色等，一進入 Gradientos 網站，就可以看到隨機出現的漸層色彩，點擊任一色彩，就會告訴使用者它的色彩組成，同時產生 CSS語法及圖片，方便使用者後續的應用。

有別於常見的規則運算式免費檢查工具，其運作方式通常都是由使用者自行輸入，然後由工具進行檢查，Text-to-Regex 免費工具則是利用 Match 關鍵字輸入文字描述想要的規則運算式，然後由 Text-to-Regex 網站產生符合文字描述的規則運算式。

Dummy / Fake Credit Card Generator 是一個免費的線上信用卡卡號產生器，產生的卡號可提供開發或測試人員進行電子商務付款測試，支援 Visa、MasterCard、American Express 和 Discover 等信用卡形式，無須下載或安裝任何軟體，就能在線上快速產生隨機且合乎規則的信用卡卡號。

網頁排版靠 CSS，為求可維護性，我們通常會將共用語法單獨寫在一個 CSS檔案，然後由網頁從外部引進使用，以便將來在維護時會較輕鬆且不會出錯，但從外部引進的 CSS檔案多了，卻會造成網頁加載緩慢的問題，SiteLocity 這個網站提供了 Critical Path CSS Generator 的免費功能，該功能可將網頁從外部引入的多個 CSS 檔案合併成一個並最佳化，而使用方式也非常簡單，使用者僅需輸入網址交由 SiteLocity網站掃描，便可以得到合併後的 CSS語法。

瀏覽網頁之所以會覺得網站可能沒有回應，原因有可能出在網頁需要運算時間較久、網路傳輸速率較慢或的數據過多...等等，總之，在這之前如果適時地放上一個等待圖示或是加載中，請稍後...的字樣，都比讓用戶空等帶來的好，如果是要放等待動畫圖示，GIF 是個選擇，而另一選擇則是使用 CSS，Uiball.com 這個網站提供 24個以 CSS 打造的等動畫圖示，喜患的就可以直接複製其 html 與 css語法，直接放到想要顯示的位置即可。

網頁處理、運算、傳輸都需要時間，如果讓使用者乾等待，就容易產生當機的錯覺，因此，在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的，而現行網頁最常見的就是使用等待動畫圖示，負責處理到呈現這段時間的呈現，這個動畫可以使用 GIF 圖檔，也可以使用純 CSS 語法打造，24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示，只需在網頁中引用該 CSS 檔案，就可輕易實現等待中使用動畫圖示來提示。

瀏覽網頁時，當我們看到帶有 ? 的圖示符號，通常將滑鼠指標指過去就會出現提示框，而其內容是解釋其意義或是提示使用者該如何操作等，而其出現的位置，可能會是在 ? 圖示符號的上、下、左、右。對 CSS 的初學者而言，要產生這樣的提示框並不容易，但我們可以透過一些輔助工具像是 CSS Tooltip Generator 這個免費網站，使用者僅需修改簡單的參數，便可以快速產生自己理想中的提示框，然後複製其產生的 CSS 語法，就可以應用到網頁內，相當方便。

常可以見到在網路上關於 CSS 排版的提問，例如元件在容器內如何橫排、對齊或是自動縮放等問題，而這些問題幾乎都可以使用 CSS Flexbox 來解決，那什麼是 Flexbox 呢？簡單的說就是將容器的 display 屬性設定為 flex，再透過 flex 的相關屬性來決定容器內的元件要如何排版，所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性，如果是 CSS Flexbox 的初學者建議先看 圖解：CSS Flex 屬性一點也不難 這篇文章，因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法，你也可能需要對 flex 屬性有基本的認識，即便是不全，在實際操作該網站後，便可以完全釐清疑問，增加自己對使用 flex 排版的功力。

網路上有很多免費的網頁模板可供下載，套用的方式也不複雜，但如要修改其中的版型結構，可能就有點門檻，而我們比較常見的網頁布局有表頭、內容可能區分三、二及單欄式再加上表尾，但不論利用何種版型，如要套用模板，就需要找到相類似的模板，不然就是自己改，太麻煩了。Grid-Generator 這個網站可以讓我們用所見及所得的方式，視覺化的操作網站結構分割、合併、增加、減少、調整區塊大小等，到最後產生該網頁版型的 CSS 樣式表，讓你不論用何種的網頁開發工具，都能輕鬆靈活的套用該 CSS，加快生產力。