前端開(kāi)發(fā)實(shí)用工具網(wǎng)站清單整理

時(shí)間：2023-05-27 17:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-27 17:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

面試相關(guān)：

• js面試題
• vue面試題
• Git面試題
• 小程序面試題

css相關(guān)

• scss在線轉(zhuǎn)css https://www.sassmeister.com/
• CSS3 UI 庫(kù) http://css3lib.alloyteam.com/#progress_bar/demo2
• 一份非常完整的網(wǎng)頁(yè)CSS速查表 http://lesliefranke.com/files/reference/csscheatsheet.html
• 一份清單，按字母表順序列出了每個(gè)CSS屬性 http://www.blooberry.com/indexdot/css/propindex/all.htm
• HTML5 元素標(biāo)簽含義大全(元素周期表)—HTML5星空 http://www.html5star.com/manual/html5label-meaning/
• 很方便地查找一個(gè)CSS屬性，并且可以迅速地瀏覽可能的value值 https://cssvalues.com/
• CSS參考手冊(cè) http://css.doyoe.com/
• 最新最全的CSS3參考手冊(cè) https://www.html.cn/book/css/
• css3按鈕動(dòng)畫(huà) http://fian.my.id/Waves/#examples
• css按鈕生成器 https://www.bestcssbuttongenerator.com/#/37
• CSS3樣式生成器-Css3演示 https://www.html.cn/tool/css3Preview/
• svg背景生成 https://www.svgbackgrounds.com/#rose-petals
• 多張圖片生成雪碧圖 https://www.toptal.com/developers/css/sprite-generator
• Animate.css https://animate.style/
• 按需定制 CSS 動(dòng)畫(huà)效果 https://animista.net/play/basic/scale-up
• CSS 動(dòng)畫(huà)效果收集，點(diǎn)擊某個(gè)效果即可復(fù)制相應(yīng)的代碼片段至剪貼板 https://emilkowalski.github.io/css-effects-snippets/
• 匯集了實(shí)現(xiàn)各種加載效果的 CSS 代碼片段 https://tobiasahlin.com/spinkit/
• SVG濾鏡 https://yoksel.github.io/svg-filters/#/docs
• KakaCss - 快速生成Css樣式 https://renzhezhilu.gitee.io/kakacss/
• iDea CSS-常見(jiàn)效果 https://yangzw.vip/idea-css/
• 貝薩爾曲線 https://cubic-bezier.com/#.17,.67,.83,.67
• Bulma-css簡(jiǎn)潔的樣式庫(kù) https://bulma.io/documentation/elements/button/

小程序相關(guān)

• 小程序-Color Ui注重視覺(jué)組件庫(kù) https://www.color-ui.com/

正則工具

• Regulex練習(xí)網(wǎng)站 https://jex.im/regulex/
• 正則表達(dá)式在線測(cè)試 https://regex101.com/
• 正則大全 https://any86.github.io/any-rule/

nginx

• Nginx配置在線生成 https://www.digitalocean.com/community/tools/nginx#?

bootstrap

• Bootstrap 4 速度表 + Class 列表 https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/
• bootstrap手冊(cè) https://www.jqhtml.com/bootstraps-syntaxhigh/index.html

加載

• 各種各樣的loading效果 https://loading.io/

PS設(shè)計(jì)相關(guān)

• 【摳圖】在線摳圖軟件 https://www.gaoding.com/koutu
• 【在線PS】PS軟件網(wǎng)頁(yè)版，ps在線圖片處理工具photopea-稿定設(shè)計(jì)PS https://ps.gaoding.com/#/
• 設(shè)計(jì)導(dǎo)航 http://hao.shejidaren.com/
• 【在線PS軟件】在線PS圖片（照片）處理工具_(dá)在線制作編輯圖片ps精簡(jiǎn)版 https://www.uupoop.com/
• 消除圖片中的背景 –摳圖 https://www.remove.bg/zh

流程圖

• http://draw.io工具 https://app.diagrams.net/

Git

• http://gitignore.io - 生成項(xiàng)目忽略的文件 https://www.toptal.com/developers/gitignore

cdn相關(guān)

• 國(guó)內(nèi)cdn庫(kù)查詢網(wǎng)址 https://cdn.baomitu.com/

富文本

• simditor 便捷的所見(jiàn)即所得編輯器 https://simditor.tower.im/
• draftjs 一個(gè)用于構(gòu)建文本編輯器的React框架 https://draftjs.org/
• mavonEditor mavonEditor-基于Vue的markdown編輯器，支持多種個(gè)性化功能 https://github.com/hinesboy/mavonEditor
• tiptap Vue.js的無(wú)渲染富文本編輯器 https://tiptap.dev/
• vue-quill-editor @quilljs的編輯器組件@vuejs https://github.com/surmon-china/vue-quill-editor
• editor.js 具有干凈JSON輸出的塊樣式編輯器 https://github.com/codex-team/editor.js

其他

• 選倆色彩就行，其他的網(wǎng)站會(huì)自動(dòng)給出最佳配色 https://www.materialpalette.com/teal/cyan
• 分析網(wǎng)站使用的技術(shù) https://www.wappalyzer.com/
• Emoji 表情包 https://emoji.muan.co/
• WebP - 圖片格式的發(fā)展趨勢(shì) - 又拍云 https://www.upyun.com/webp
• 在線工具 https://tool.lu/

圖標(biāo)

• 網(wǎng)站開(kāi)發(fā)最流行的圖標(biāo)集 https://fontawesome.com/
• 簡(jiǎn)潔美觀的開(kāi)源圖標(biāo) https://feathericons.com/
• 精心繪制的開(kāi)源圖標(biāo) https://ionicons.com/
• 常見(jiàn)品牌的 SVG 圖標(biāo) https://simpleicons.org/
• 681 枚可定制的開(kāi)源 SVG 圖標(biāo) https://tablericons.com/

插畫(huà)

• 持續(xù)更新的精美的 SVG 插畫(huà)集 https://undraw.co/illustrations
• 免費(fèi)插畫(huà)集 https://www.manypixels.co/gallery/
• 通過(guò)調(diào)配漸變色、搭配手繪組件定制插畫(huà) https://iradesign.io/gallery/illustrations
• 在線 SVG 波形生成器 https://getwaves.io/
• 在線 SVG 形狀生成器 https://www.blobmaker.app/

色彩

• Material Design 色彩 https://www.materialui.co/colors
• 14 組配色、280 種顏色 https://flatuicolors.com/
• 分享色彩搭配的自由開(kāi)放平臺(tái)，包括成千上萬(wàn)人工選取的配色，可以從中獲取配色的靈感 https://colorhunt.co/
• 配色方案、CSS 顏色漸變生成工具 https://mycolor.space/
• 美觀的顏色漸變 https://uigradients.com/#Dusk
• web 安全色 https://www.bootcss.com/p/websafecolors/
• 李紫 - 中國(guó)色 - 中國(guó)傳統(tǒng)顏色 http://zhongguose.com/#lizi
• 色輪、調(diào)色盤產(chǎn)生器 | Adobe Color https://color.adobe.com/zh/create/color-wheel
• uiGradients - Beautiful colored gradients https://uigradients.com/#WeddingDayBlues
• palettable 利用數(shù)百萬(wàn)設(shè)計(jì)師的知識(shí)生成漂亮的調(diào)色板 https://www.palettable.io/C7CEB8
• colorsupplyyy 設(shè)計(jì)師和插畫(huà)家的選色器 https://colorsupplyyy.com/app
• webgradients 是180個(gè)線性漸變的免費(fèi)集合，您可以將其用作網(wǎng)站任何部分的內(nèi)容背景。輕松復(fù)制CSS3跨瀏覽器代碼 https://webgradients.com/
• 配色表 網(wǎng)頁(yè)設(shè)計(jì)常用色彩搭配表 http://tool.c7sky.com/webcolor/

圖片

• 可供免費(fèi)使用的圖片 https://unsplash.com/
• 精美的免費(fèi)圖片和視頻 https://www.pexels.com/zh-cn/
• 免費(fèi)高分辨率圖片，可用于網(wǎng)站和商業(yè)用途 https://burst.shopify.com/
• 使用 CC0 許可的免費(fèi)高分辨率圖片和視頻 https://isorepublic.com/
• 在線圖片壓縮工具，一次可以壓縮多達(dá) 20 張圖片 https://imagecompressor.com/
• 最快的在線圖片縮放工具（圖片縮放和壓縮在本地完成，無(wú)需上傳到服務(wù)器） https://bulkresizephotos.com/en
• 花瓣網(wǎng)_陪你做生活的設(shè)計(jì)師（創(chuàng)意靈感天堂，搜索、發(fā)現(xiàn)設(shè)計(jì)靈感、設(shè)計(jì)素材） https://huaban.com/

表單校驗(yàn)器

• Learn | JSON Schema http://json-schema.org/learn/
• ajv - npm-執(zhí)行json-schema規(guī)則 https://www.npmjs.com/package/ajv
• JSON Schema Validator-在線校驗(yàn) https://www.jsonschemavalidator.net/

可視化編輯

• imgcook/imove: Move your mouse, generate code from flow chart https://github.com/imgcook/imove

代理工具

• ngrok - secure introspectable tunnels to localhost https://ngrok.com/
• Chrome 插件下載-無(wú)需翻墻 https://chrome-extension-downloader.com/

壓縮圖片

• 在線圖片壓縮 - docsmall 在線圖片壓縮工具,在線圖片壓縮軟件 https://docsmall.com/image-compress
• TinyPNG – Compress PNG images while preserving transparency https://tinypng.com/