繼續分享新 10 個 “哇塞” 的 Web 資源

本篇帶來新 10 個 “哇塞” 的 web 資源，衝了！！！(๑•̀ㅂ•́)و✧🎉

  1. responsively[1]

responsively 是幹嘛喫的？一張圖你就懂了：

你可以在上面輸入你的 web 網站，一次性查看它在各個設備下的響應式佈局表現~

並且支持自定義選擇設備、導出爲圖片等；響應式佈局，一個界面盡收眼底！ 👀 再也不用在擱控制檯那兒拉來拉去了~~

UI 妹紙看到了都直呼 🐂🍺 ！！github star 13k+

  1. figlet[2]

想在控制檯上玩點花樣，figlet 就不容錯過了~~

在項目中 npm install figlet （分清環境：node/Vue/Browser）；

還有更多配置項可以去探究；

該庫的周下載量穩定在 800k 左右😍，太猛了！還不快點在你的項目中用起來，產品經理忍不住誇一句：“細節！”

  1. readme.so[3]

顧名思義，readme.so 這個用來快捷生成標準 README 的~

在左側編輯，在右側預覽，README 必備的各個要素一應俱全；規範！標準！好看！

還支持下載到本地；有了這個，還有人不會寫 README 嘛？

  1. smalldev[4]

這類開發輔助工具還算是挺常見的，不過 smalldev 的優勢就是 功能全、顏值高、沒廣告😎；

代碼分享牀、JSON 格式化、base64 加解密、HTML/JS/CSS 格式化、壓縮 SQL、生成佔位圖、生成測試數據等等；

  1. smartmockups[5]

據說 smartmockups 是：最好的產品模板生成工具，能創建令人驚豔的產品模板！

除了放置圖片，還可以放置網頁（自動捕獲內容）；

把我的主頁放上去，嗯，效果不錯，應該是這樣用的！（媽媽，我上電視了~）😄

  1. pfpmaker[6]

頭像處理神器！效果可百變！

本瓜給好基友阿詹做做頭像：

實際產生的處理結果比截圖上的多得多，還支持自定義，全憑你的奇葩色彩搭配喜好~~ (❤ ω ❤)

  1. storytale[7]

高級插圖，百看不厭；

各種畫風，妙趣橫生；

就不再一一截圖了，open the link 試一試便知；

不過就是下載要收費。。。。。。但是也可以 alt+A 或者 PrtSc 啊🐶

  1. type-scale[8]

type-scale 這個網站用於把不同字體大小，rem 和 em 值的差異進行可視化展現，支持實時預覽；

適合細扣像素級的前端仔們，或者適合想和 UI 妹紙一起看字體效果的前端仔們；

  1. remove-bg[9]

本瓜的第一條沸點就是推薦這個網站，此去已經 2 年；😶

網站都已經改版了，但是效果是依舊的好！👍

扣背景圖，認準 remove-bg ！

  1. metatags[10]

你可以在這個網站上預覽自己的站點在其它平臺的展示效果；

雖然它目前支持的都是國外的社交 App，但是也爲我們提供了一個好的思路：“可以把它抄過來呀！”🐶🐶🐶

絕對是一個很好的工具，把開發者的鏈接在其它平臺的表現進行預覽展示，妥妥的 剛需！

好啦，以上便是本次分享，針不戳~ 希望你也能用這些工具用的開心 o(￣▽￣) ブ

參考資料

[1]

responsively: https://responsively.app/

[2]

figlet: http://www.npmjs.com/package/figlet

[3]

readme.so: https://readme.so/

[4]

smalldev: https://smalldev.tools/

[5]

smartmockups: https://smartmockups.com/zh

[6]

pfpmaker: https://pfpmaker.com/

[7]

storytale: https://storytale.io/

[8]

type-scale: https://type-scale.com/

[9]

remove-bg: https://www.remove.bg/

[10]

metatags: https://metatags.io/

作者：掘金安東尼

鏈接：https://juejin.cn/post/7008303011655057444

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/cpFoomrrkI6_8yUzZXWg4g

猜你喜歡