Web 開發的 20 個實用網站
作為一名前端開發工程師,我們一定使用過很多工具來提高自己的工作效率。它們可以是網站、文檔或 JavaScript 庫。
本文將分享30個有趣的網站。
JavaScript正則表達式可視化工具
https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24
我們可能會覺得正則表達式特別難學習,但現在不一樣了。可視化工具使正則表達式更容易理解。
開發文檔
https://devdocs.io/
該網站有各種項目的文檔,也支持離線使用。
cdnjs
https://cdnjs.com/
有時我們需要在線資源來進行編程練習。cdnjs可以幫助我們找到幾乎所有的開源庫。
隨機圖像
https://unsplash.com/
互聯網上可免費使用的圖像來源。由世界各地的創作者提供支持。
智能WebP、PNG和JPEG壓縮
https://tinypng.com/
我們可能經常需要壓縮圖片,tinypng可以免費使用,并且壓縮后的圖片清晰度很高。
刪除圖像背景
https://www.remove.bg/zh
該網站可以幫助我們100%自動免費刪除圖像背景。
為我們的源代碼創建并分享精美的圖像
https://carbon.now.sh/
使用Carbon創建并分享源代碼的精美圖像。它提供了多種代碼風格和主題。
超級實用的調色板
https://colorhunt.co/palettes/pastel
我們在設計時有時候會找不到合適的顏色,可以使用colorhunt。
codePen
https://codepen.io/
CodePen是一個基于Web的開發平臺,允許用戶修改HTML、CSS和JavaScript等前端語言,而無需安裝任何軟件。最好的一點是,結果是實時可見的,使故障排除變得更加容易。開發人員和設計人員還可以與世界其他地方分享代碼示例。
開源圖標
https://ionic.io/
我們可以從 Ionic 找到我們需要的任何圖標,包括用于 Web、iOS、Android 和桌面應用程序的高級設計圖標。支持 SVG 和網絡字體。完全開源,Ionic .
caniuse
https://caniuse.com/
前端工程師經常需要檢查瀏覽器兼容性,是否可以使用一個可以查詢CSS和JavaScript在各種流行瀏覽器中的特性和兼容性的網站?
Readme
https://readme.so/editor
創建readme的最簡單方法,這個簡單的編輯器允許我們快速添加和自定義項目readme所需的所有部分。
查看網站加載速度
https://gtmetrix.com/
查看我們的網站表現如何,揭示網站速度緩慢的原因,并發現優化機會。
在線編輯圖片
https://www.photopea.com/
可以通過該網站在線設計圖像。
cssbattle
https://cssbattle.dev/
通過使用盡可能小的代碼復制目標來測試我們的 CSS 技能。這個游戲挑戰我們展示我們的 CSS 實力,同時磨練我們的代碼優化技能。
roadmap.sh
https://roadmap.sh/
該網站提供路線圖、指南和其他教育內容,以幫助開發人員選擇路徑并指導他們的學習。它對于初學者以及需要指導的學習者非常有幫助。
Lambda測試
https://www.lambdatest.com/
LambdaTest 是一個基于云的跨瀏覽器測試平臺,可讓我們在 2000 多種不同的瀏覽器、操作系統和設備上測試 Web 應用程序。LambdaTest 允許我們手動和自動測試跨瀏覽器兼容性。
代碼美化
https://codebeautify.org/
讓我們的源代碼更加美觀、易讀 使用codebeautify 美化將使我們的源代碼更加美觀、易讀。
overapi
https://overapi.com/
對于所有開發者來說,OverAPI 是最漂亮、最有用的網站之一。該網站提供了大多數編程語言的備忘單。
smalldev
https://smalldev.tools/
該網站提供各種免費的開發人員工具,包括編碼器/解碼器、HTML/CSS/Javascript 格式化程序、縮小、偽造或測試數據生成器等。它還允許我們共享代碼。