常用工具 | FE Skill

# 工作学习

::: cardList 4

- name: 时钟桌面
  desc: 专注看书，感受时光
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/未标题-1.2zqm0t6gbdk0.webp
  link: https://webcoding.top/clock/index.html
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 时间矩形
  desc: 每个矩形代表一天中的10分钟，看看你这一天还剩下多少个矩形
  avatar: https://rectangles.app/assets/apple-touch-icon.png
  link: https://rectangles.app/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 在线代码对比
  desc: 便捷、快速代码片段对比
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/7D260449-8045-4A37-8EB6-C920C9BDC278.1w51sndlqpr4.png
  link: https://www.json.cn/json/jsoncompare.html
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 前端技巧
  desc: 收集前端技巧、最佳实践
  avatar: https://getfrontend.tips/favicon.png
  link: https://getfrontend.tips/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::

# CSS 工具

::: cardList 4

- name: 终极CSS生成器
  desc: 我可以给你生任何你想要的CSS
  avatar: https://webcode.tools/favicon.png
  link: https://webcode.tools/generators/css
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: CSS渐变生成器
  desc: 满足你任何方式的渐变
  avatar: https://www.colorzilla.com/firefox/images/logo-50.png
  link: https://www.colorzilla.com/gradient-editor/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: CSS Layout
  desc: 收集常见的CSS布局方案
  avatar: https://csslayout.io/favicon.png
  link: https://csslayout.io/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: CSS阴影收集
  desc: 收集各种CSS阴影效果
  avatar: https://getcssscan.com/apple-touch-icon.png
  link: https://getcssscan.com/css-box-shadow-examples
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: CSS生成器
  desc: 三角形、渐变、波浪线等生成器
  avatar: https://omatsuri.app/assets/favicon-48x48.png
  link: https://omatsuri.app/triangle-generator
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 选择框生成器
  desc: 多选框、单选框样式生成器
  avatar: https://bun.js.org/apple-touch-icon.png
  link: https://bun.js.org/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 瀑布流生成器
  desc: 生成瀑布流的html/css/js完整代码
  avatar: https://w3bits.com/wp-content/uploads/masonry.jpg
  link: https://w3bits.com/tools/masonry-generator/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::

# JS 工具

::: cardList 4

- name: 在线JS代码格式化
  desc: 基于Prettier的在线JS代码格式化
  avatar: https://prettier.io/icon.png
  link: https://prettier.io/playground/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 在线JSON格式化
  desc: 在线JSON代码解析及格式化
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/json.3dj9idaidog0.jpg
  link: https://www.json.cn/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 30秒的代码
  desc: 满足开发需求的简短代码片段
  avatar: https://www.30secondsofcode.org/assets/30s-icon.png
  link: https://www.30secondsofcode.org/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 1 LOC
  desc: 1行JS代码解决方案
  avatar: https://1loc.dev/favicon.png
  link: https://1loc.dev/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 操作DOM
  desc: 收集了原生JS操作DOM的解决方案
  avatar: https://htmldom.dev/favicon.png
  link: https://htmldom.dev/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::

# 图片处理

::: cardList 4

- name: 微图
  desc: 不限格式，极速压缩。(压缩后可选格式为webp)
  avatar: https://devtool.tech/_next/image?url=%2Fassets%2Flogo.svg&w=96&q=75
  link: https://devtool.tech/tiny-image
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: tinypng
  desc: 压缩png很优秀，也可压缩jpg、webp
  avatar: https://tinypng.com/images/apng/panda-waving-2x.png
  link: https://tinypng.com/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: AI自动抠图
  desc: 只需单击一下，即可快速地自动删除图像背景
  avatar: https://www.remove.bg/apple-touch-icon.png?v=YAXaAv7pao
  link: https://www.remove.bg/zh
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: favicon生成器
  desc: favicon图标生成器，基于图片、文本、表情生成。
  avatar: https://favicon.io/assets/static/favicon.b9532cc.ed88c65f76fa003989a0c683d668c765.png
  link: https://favicon.io/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::

# 正则大全

::: cardList 4

- name: 正则可视化
  desc: 直观、方便的正则可视化
  avatar: https://regex101.com/static/assets/icon-76.png
  link: https://regex101.com/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 正则大全
  desc: 收集常用的正则表达式
  avatar: https://regex101.com/static/assets/icon-76.png
  link: https://any86.github.io/any-rule/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::

# 设计

::: cardList 4

- name: 设计师导航
  desc: 图库、灵感、工具、素材、配色等
  avatar: https://image.uisdc.com/wp-content/uploads/2018/09/nav-dkt-new2018.jpg
  link: https://hao.uisdc.com/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 配色生成器
  desc: 输入一个颜色，生成相应的配色
  avatar: https://cdn.jsdelivr.net/gh/xugaoyi/image_store@master/blog/WX20211219-145201@2x.2j5fe3tm0aw0.webp
  link: https://mycolor.space/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: unDraw免费插画
  desc: 免费插画，可编辑颜色
  avatar: https://undraw.co/apple-touch-icon.png
  link: https://undraw.co/illustrations
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: logo设计
  desc: logo设计，有免费的
  avatar: https://www.designevo.com/templates/designevosite/favicon.ico
  link: https://www.designevo.com/logo-maker/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: logo设计
  desc: logo设计，个人比较喜欢
  avatar: https://instantlogodesign.com/img/home/icon-instantlogodesign.svg?v=1
  link: https://instantlogodesign.com/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::

# 其他

::: cardList 4

- name: Shields徽章
  desc: 生成动态的数据统计小徽章
  avatar: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAABE0lEQVR4AWJkAIKkpCQ7TU3NySIiIlosQMCABejbMWAFf//8YXj77vWn27duZWVGz1nKGBYWZiQkJHSIkZGRmwEPCMxiwAt+/fz3/86VL8EAbuiiAKEoiMLwGcHdCQMBiUAlurDErmJ75tmKP8A3oiJyuF6vAxglws+0C5pv81GJaJdzhlWMMJssaaXM3C0CpmSDLAQtgH3BiCIVB2NRMKWEIoXQMBiLgjHGP9nQ+6ZPLgqGgs9xriDovX8A6Jjgw8ZyIigzn5xz+yZ+6O/tsz7Hy8tb/PLlywPAHMOFT/G3LwRc95fxPyerQCojuKwLDLQAGjoJWIzpAw1mw6bB0guHSYyMDBysnO/5hUTTGvM3rQEAI8qCnLiY3O4AAAAASUVORK5CYII=
  link: https://shields.io/
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: 树形目录生成器
  desc: Tree 树形目录可视化生成器
  avatar: https://devtool.tech/_next/image?url=%2Fassets%2Flogo.svg&w=96&q=75
  link: https://devtool.tech/tree
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"
- name: Nginx配置
  desc: 高性能、安全、稳定的Nginx配置方案
  avatar: https://www.digitalocean.com/assets/community/apple-icon-120x120-052cdf68a3af8b01c3fd0d46ed35f8f089c10c690109d20e7b186f0159391863.png
  link: https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN#top
  bgColor: "#f4f4f4"
  textColor: "#A05F2C"

:::