前端开发实用工具网站清单整理

时间：2023-05-27 17:12:01 | 来源：网站运营

时间：2023-05-27 17:12:01 来源：网站运营

面试相关：

• js面试题
• vue面试题
• Git面试题
• 小程序面试题

css相关

• scss在线转css https://www.sassmeister.com/
• CSS3 UI 库 http://css3lib.alloyteam.com/#progress_bar/demo2
• 一份非常完整的网页CSS速查表 http://lesliefranke.com/files/reference/csscheatsheet.html
• 一份清单，按字母表顺序列出了每个CSS属性 http://www.blooberry.com/indexdot/css/propindex/all.htm
• HTML5 元素标签含义大全(元素周期表)—HTML5星空 http://www.html5star.com/manual/html5label-meaning/
• 很方便地查找一个CSS属性，并且可以迅速地浏览可能的value值 https://cssvalues.com/
• CSS参考手册 http://css.doyoe.com/
• 最新最全的CSS3参考手册 https://www.html.cn/book/css/
• css3按钮动画 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 动画效果 https://animista.net/play/basic/scale-up
• CSS 动画效果收集，点击某个效果即可复制相应的代码片段至剪贴板 https://emilkowalski.github.io/css-effects-snippets/
• 汇集了实现各种加载效果的 CSS 代码片段 https://tobiasahlin.com/spinkit/
• SVG滤镜 https://yoksel.github.io/svg-filters/#/docs
• KakaCss - 快速生成Css样式 https://renzhezhilu.gitee.io/kakacss/
• iDea CSS-常见效果 https://yangzw.vip/idea-css/
• 贝萨尔曲线 https://cubic-bezier.com/#.17,.67,.83,.67
• Bulma-css简洁的样式库 https://bulma.io/documentation/elements/button/

小程序相关

• 小程序-Color Ui注重视觉组件库 https://www.color-ui.com/

正则工具

• Regulex练习网站 https://jex.im/regulex/
• 正则表达式在线测试 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手册 https://www.jqhtml.com/bootstraps-syntaxhigh/index.html

加载

• 各种各样的loading效果 https://loading.io/

PS设计相关

• 【抠图】在线抠图软件 https://www.gaoding.com/koutu
• 【在线PS】PS软件网页版，ps在线图片处理工具photopea-稿定设计PS https://ps.gaoding.com/#/
• 设计导航 http://hao.shejidaren.com/
• 【在线PS软件】在线PS图片（照片）处理工具_在线制作编辑图片ps精简版 https://www.uupoop.com/
• 消除图片中的背景 –抠图 https://www.remove.bg/zh

流程图

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

Git

• http://gitignore.io - 生成项目忽略的文件 https://www.toptal.com/developers/gitignore

cdn相关

• 国内cdn库查询网址 https://cdn.baomitu.com/

富文本

• simditor 便捷的所见即所得编辑器 https://simditor.tower.im/
• draftjs 一个用于构建文本编辑器的React框架 https://draftjs.org/
• mavonEditor mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能 https://github.com/hinesboy/mavonEditor
• tiptap Vue.js的无渲染富文本编辑器 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

其他

• 选俩色彩就行，其他的网站会自动给出最佳配色 https://www.materialpalette.com/teal/cyan
• 分析网站使用的技术 https://www.wappalyzer.com/
• Emoji 表情包 https://emoji.muan.co/
• WebP - 图片格式的发展趋势 - 又拍云 https://www.upyun.com/webp
• 在线工具 https://tool.lu/

图标

• 网站开发最流行的图标集 https://fontawesome.com/
• 简洁美观的开源图标 https://feathericons.com/
• 精心绘制的开源图标 https://ionicons.com/
• 常见品牌的 SVG 图标 https://simpleicons.org/
• 681 枚可定制的开源 SVG 图标 https://tablericons.com/

插画

• 持续更新的精美的 SVG 插画集 https://undraw.co/illustrations
• 免费插画集 https://www.manypixels.co/gallery/
• 通过调配渐变色、搭配手绘组件定制插画 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/
• 分享色彩搭配的自由开放平台，包括成千上万人工选取的配色，可以从中获取配色的灵感 https://colorhunt.co/
• 配色方案、CSS 颜色渐变生成工具 https://mycolor.space/
• 美观的颜色渐变 https://uigradients.com/#Dusk
• web 安全色 https://www.bootcss.com/p/websafecolors/
• 李紫 - 中国色 - 中国传统颜色 http://zhongguose.com/#lizi
• 色輪、調色盤產生器 | Adobe Color https://color.adobe.com/zh/create/color-wheel
• uiGradients - Beautiful colored gradients https://uigradients.com/#WeddingDayBlues
• palettable 利用数百万设计师的知识生成漂亮的调色板 https://www.palettable.io/C7CEB8
• colorsupplyyy 设计师和插画家的选色器 https://colorsupplyyy.com/app
• webgradients 是180个线性渐变的免费集合，您可以将其用作网站任何部分的内容背景。轻松复制CSS3跨浏览器代码 https://webgradients.com/
• 配色表 网页设计常用色彩搭配表 http://tool.c7sky.com/webcolor/

图片

• 可供免费使用的图片 https://unsplash.com/
• 精美的免费图片和视频 https://www.pexels.com/zh-cn/
• 免费高分辨率图片，可用于网站和商业用途 https://burst.shopify.com/
• 使用 CC0 许可的免费高分辨率图片和视频 https://isorepublic.com/
• 在线图片压缩工具，一次可以压缩多达 20 张图片 https://imagecompressor.com/
• 最快的在线图片缩放工具（图片缩放和压缩在本地完成，无需上传到服务器） https://bulkresizephotos.com/en
• 花瓣网_陪你做生活的设计师（创意灵感天堂，搜索、发现设计灵感、设计素材） https://huaban.com/

表单校验器

• Learn | JSON Schema http://json-schema.org/learn/
• ajv - npm-执行json-schema规则 https://www.npmjs.com/package/ajv
• JSON Schema Validator-在线校验 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 插件下载-无需翻墙 https://chrome-extension-downloader.com/

压缩图片

• 在线图片压缩 - docsmall 在线图片压缩工具,在线图片压缩软件 https://docsmall.com/image-compress
• TinyPNG – Compress PNG images while preserving transparency https://tinypng.com/