首页

# HTML 相关

# HTML5 + CSS 3 免费模版

HTML5 UP (opens new window) 提供大量的 HTML5 模版，用户可以自己分享和修改模版。

# CSS 相关

# CSS Inspiration

CSS Inspiration (opens new window) 可以帮助我们寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示了不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

# CSS Diner

CSS Diner (opens new window) 是一个可以在线练习 CSS 选择器的网站。

# CSS Battle

CSS Battle (opens new window) 是一个可以在线比拼 CSS 的网站，一个挺有趣的竞争性游戏，一共有 12 个级别，需要你用 HTML 和 CSS 100% 还原它给出的页面，然后再尽量减少代码，你也可以查看全球的排行榜，看解决方案。

# Learn CSS layout

Learn CSS layout (opens new window) 是一个可以在线学习 CSS 布局的网站，它会一步一步引导初学者学习 CSS 基础知识，在实践中帮助初学者掌握好 CSS 的布局知识，改善初学者对 CSS 的编写习惯和正确方法。

# CSS Layout

CSS Layout (opens new window) 收集了使用 CSS 制作的流行布局和图案，有 102 种布局模板。

# cssgr.id

cssgr.id (opens new window) 可以快速生成 grid 布局并获取相应的源码。

# Flexbox Froggy

Flexbox Froggy (opens new window) 是一个引导式的学习 Flex 布局的游戏，用 flex 布局让青蛙跳到荷叶上就算完成，游戏里面几乎包含了所有常用的属性，这样学习起来很有趣嘞，形象好记忆，谁要是 Flex 布局还不熟的话，在这多练练。

# EnjoyCSS

EnjoyCSS (opens new window) 是在线版的 CSS3 代码生成工具，基于可视化操作，能快速无编码的环境下调整网页效果和图形样式。就像是在本地使用 PS 或 AI 软件一样。

# CSS-Tricks

CSS-Tricks (opens new window) 是一个国外的优秀前端开发博客，主要分享使用 CSS 样式的技巧、经验和教程等。值得前端开发者阅读收藏的国外网站。

# CodePen

CodePen (opens new window) 是一个可以在线编码的网站，上面也有很多用 CSS 编写的动画效果可以学习和使用。

# Neumorphism

Neumorphism (opens new window) 可以帮助我们轻松实现新拟态效果，不仅可以修改颜色或填写色值，也可以修改尺寸、半径、距离、强度、模糊效果以及形状等参数，同时提供了 CSS 代码可以直接 Copy。

# uiGradients

uiGradients (opens new window) 提供渐变色效果的站点，里面接近上百种渐变配色方案，可根据自己风格来选择搭配，能直接获得对应渐变配色的 CSS 代码。

# State of CSS

State of CSS (opens new window) 展示了当前流行的各种 CSS 框架。

# JS 相关

# JavaScript 秘密花园

JavaScript 秘密花园 (opens new window) 是一个一直更新的 JavaScript 的语法文档，主要会写如何去避免一些常见的错误，以及找到很难发现的 bug ，比较深入 JavaScript 的语言特性。

# JS Tips

JS Tips (opens new window) 分享每天一个 Javascript 小知识。

# JSweekly

JSweekly (opens new window) 专门讲解 Javascript 的技术周刊。

# CDNJS

CDNJS (opens new window) 为开发者提供最新的前端 Web 开发资源，免费使用，无使用限制。你可以直接在自己的网页上引用这些 JS 文件。进入 CDNJS 网站后，搜索你想要的资源库，找到后点击项目后方的[ Copy Script Tag] ，然后贴上就可以用了。目前 CDNJS 在 Web 前端的 CDN 服务中排名第二（第一名是 Google），性能出色。

# Beautiful Open

Beautiful Open (opens new window) 收集了各类卓越设计的开源项目，大到 CMS 内容管理系统，小到常用的Javascript 库，适合网站开发的用户使用。

# JavaScript Fun

JavaScript Fun (opens new window) 是一个集合当下最流行的 JavaScript 代码库，显示流行排行，开发者可以轻松的找到想要最新的代码插件、工具和博客。

# Lodash

Lodash (opens new window) 是一套现代 JavaScript 实用程序库，提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。

# Async

Async (opens new window) 是一个实用模块，它为使用异步 JavaScript 提供了直接、强大的功能。虽然最初设计用于 Node.js 并且可以通过 npm i async 安装，但它也可以直接在浏览器中使用。ESM/MJS 版本包含在主异步包中，应自动与兼容的打包器（如 Webpack 和 Rollup）一起使用。

# Best of JS

Best of JS (opens new window) 上面会展示当前热门有趣的新项目，能帮助我们及时跟进当前流行的新技术，比如 30 seconds of code (opens new window)、JavaScript 明星项目 (opens new window)。

# CSS-in-JS

# CSS Modules

CSS Modules 不是一个库，但是它在各种前端编译工具中都有支持，做的事情很专一，就是做 CSS 样式的隔离。

# emotion

emotion (opens new window) 是一个高性能且灵活的 CSS-in-JS 库。

# styled-components

styled-components (opens new window) 也是一个热门的 CSS-in-JS 库，它不依赖于编译，本身就提供了组件化的 API。

# 社区和博客

# Stack Overflow

Stack Overflow (opens new window) 是全球 IT 界最受欢迎的技术问答网站之一，一个解决 bug 的社区，被称为“ 编程界的十万个为什么”。

# Codrops

Codrops (opens new window) 发表技术文章和网页教程，提供经验，少踩坑，资源丰富很丰富，很多优秀的技术都是从这里来的。

# CodeSandBox

CodeSandBox (opens new window) 提供一个在线开发环境的 “沙盒”，主流的框架如 React、Vue、Angular 等，都可即开即用、实时编译预览，非常方便。

# JS Bin

JS Bin (opens new window) 是另一个轻量级在线编辑器网站，界面简洁干净，临时想调试简单的 HTML 或 JS 代码可以考虑去这里试一试。

# sitepoint

sitepoint (opens new window) 是一个国外技术网站。

# DEV Community

DEV Community (opens new window) 是国外的一个软件开发人员社区。

# API 文档

# DevDocs

DevDocs (opens new window) 可以帮助我们快速搜索到不同语言不同框架某个 api 的用法。

# 技术知识集合

# Every Programmer Should Know

Every Programmer Should Know (opens new window) 收集了每个软件开发人员都应该知道的技术知识。

# 动画特效

# Animate.css

Animate.css (opens new window) 是 CSS3 动画库，也是目前最通用的动画库。

# Anime.js

Anime.js (opens new window) 是一个轻量级的 JavaScript 动画库，具有简单但功能强大的 API。它适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。

# Hover.css

Hover.css (opens new window) 收集了很多 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等，并且在 CSS、Sass 和 Less 中都可用。

# wow.js

wow.js (opens new window) 是一个用于轻松实现滚动时显示动画的库。

# ScrollReveal.js

ScrollReveal.js (opens new window) 用于在元素进入/离开视口时轻松设置动画。

# magic.css

magic.css (opens new window) 是具有特殊效果的 CSS3 动画库。

# Waves.js

Waves.js (opens new window) 提供了按钮点击的波纹效果。

# Move.js

Move.js (opens new window) 是一个小型的 JS 库，通过 JS 来控制一系列的 CSS 动画顺序执行，使得 CSS3 动画变得非常简单和优雅。

# Velocity.js

Velocity.js (opens new window) 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

# loading.io

loading.io (opens new window) 提供了各种各样的 loading 效果。

# particles.js

particles.js (opens new window) 可以帮助我们制造许多粒子效果，用在网页的背景可是相当好看的。

# Splitting

Splitting (opens new window) 是一个 JavaScript 微型库，旨在以多种方式拆分（截断）元素，例如单词、字符、子节点等。

# MixItUp

MixItUp (opens new window) 是一个用于动画过滤、排序、插入、删除等的高性能、无依赖库。

# React Moveable

React Moveable (opens new window) 可以很方便的帮我们创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可收缩、可分组、可捕捉的 React 组件。

# React Flip Toolkit

# React Motion

React Motion (opens new window) 也是一个能够实现有趣动画的库，比如列表拖拽排序、图片切换动画等等。

# React Transition Group

React Transition Group (opens new window) 可以为 react 组件的进入和离开添加过渡动画。

# 贝塞尔曲线

# cubic-bezier

cubic-bezier (opens new window) 网站能够帮助我们方便快速的设置贝塞尔曲线。

# Canvas Quadratic Curve

# bezier-easing

bezier-easing (opens new window) 可以用来快速生成贝塞尔缓动函数。

# easings.net

easings.net (opens new window) 提供了更多贝塞尔缓动函数例子以及对应的代码实现。

# 类型检查

# tRPC

tRPC (opens new window) 是一个端到端类型安全补位神器，开发 Next.js 等绝配。

# 拖拽排序

# 不区分框架

  • Sortable (opens new window) 是一个 JavaScript 拖拽库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。支持 Meteor、AngularJS、React、Polymer、Vue、Ember、Knockout 和任何 CSS 库。📱

  • Dragula (opens new window) 是一个 JavaScript 库，实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。

  • interact.js (opens new window) 是一个适用于现代浏览器的 JavaScript 拖放库，支持调整大小和多点触控手势，具有惯性和捕捉功能。为了尽可能多地提供控制，它尝试提供一个简单、灵活的 API，该 API 提供移动元素所需的所有拖拽 API。📱

# 适用于 React

  • React Beautiful Dnd (opens new window) 是一款美观且简单易用的 React 列表拖拽库。其动画效果自然，性能优秀，简洁而强大的 API，易于上手，与标准浏览器的互动性非常好。📱

  • React DnD (opens new window) 是 React 和 Redux 核心作者 Dan Abramov 创造的一组 React 高阶组件，可帮助我们构建复杂的拖放界面，同时保持组件解耦。它可以在应用程序的不同部分之间通过拖动传输数据，并且组件会更改其外观和应用状态以响应拖放事件。📱

  • React Draggable (opens new window) 库简单易用，将 CSS 中的 transform 应用于 React 组件，允许我们在 UI 中拖动组件。它有不同的 props 可以让你改变组件的行为，是创建直观、用户友好界面的绝佳选择。

  • React Sortable Tree (opens new window) 是一个用于对分层数据进行拖放式可排序表示的React组件。它支持单选多选，鼠标拖拽子集到新合集，模糊搜索等。

  • dnd kit (opens new window) 是用于 React 的现代、轻量级、高性能、可访问和可扩展的拖放工具包。📱

  • React Grid Layout (opens new window) 是一个用于 React 的具有响应断点的可拖动和可调整大小的网格布局。

# 适用于 Vue

# 长列表渲染

# 适用于 React

# MV* 框架相关

# TodoMVC

TodoMVC (opens new window) 提供了当下大多数流行的 JavaScript MV* 框架中使用 MV* 概念实现的相同 Todo 应用程序。

# 一次编码，到处运行

# mitosis

mitosis (opens new window) 支持一次编写组件，到处运行。可以编译为 React、Vue、Qwik、Solid、Angular、Svelte 等。

# 高阶组件

# recompose

recompose (opens new window) 是一个可以用于实现 React 高阶组件的工具。

# 模块相关

# SystemJS

SystemJS (opens new window) 是一个动态 ES 模块加载器，现在的微前端框架都是用它完成模块化的。

# module-alias

module-alias (opens new window) 可以帮助我们在 Node 中注册目录别名和自定义模块路径。

# 设计模式

# Patterns.dev

Patterns.dev (opens new window) 是一本关于设计模式和组件模式的免费书籍，用于使用 vanilla JavaScript 和 React 构建强大的 Web 应用程序。

# 正则表达式

# 可视化工具 Regulex、Regexper、Debuggex

Regulex (opens new window)、Regexper (opens new window)、Debuggex (opens new window) 都是能够将正则表达式可视化的工具。

# 在线测试工具 regex101

regex101 (opens new window) 可以让我们在线测试正则表达式的准确性以及提供一些性能信息。

# 可视化兼在线测试工具 iHateRegex

iHateRegex (opens new window) 既能够可视化正则表达式，也能够检验正则表达式的准确性。

# AST

# AST Explorer

AST Explorer (opens new window)

# JoinJS

JoinJS (opens new window)

# 编译器

# the-super-tiny-compiler

the-super-tiny-compiler (opens new window) 是一个用 JS 编写的简单编译器，包含了现代编译器的几个主要部分，可以用于学习。它也有中文版：the-super-tiny-compiler-cn (opens new window)。

# 图形可视化、低代码

# canvas-special

canvas-special (opens new window) 向我们展示了超多经典的 canvas 实例，可用于学习和使用。

# Fabric.js

Fabric.js 是一个强大而简单的 Javascript HTML5 画布库，它在画布元素之上提供交互式对象模型，同时还具有 SVG-to-canvas（和 canvas-to-SVG）解析器。简单使用 (opens new window)

# h5-dooring

h5-dooring (opens new window) 是一款可视化编辑器，底层是用 react 写的，使用此工具可以让我们快速生成 h5 页面。同时通过这个平台也能了解到低代码的相关知识。

# imgCook

imgcook (opens new window) 是阿里巴巴集团在前端智能化方向的落地产品，专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。

# Flourish

Flourish (opens new window) 是一款在线生成可视化图表的网站，内置了丰富的图表类型模板。这个网站提供的动态图表 和 URL 分享功能，可以快速制作那种动态变化数值的实时排行榜，做好之后可以一键分享网页地址，让他人浏览，也可以嵌入到自己的网页中。

# Make A Pie

Make A Pie (opens new window) 是一个分享可视化作品的网站，有很多图表作品可供学习和参考。

# Element-Pro-Crud

Element-Pro-Crud (opens new window) 能够帮助我们快速搭建后台管理系统的 CRUD 页面。

# Shadertoy

Shadertoy (opens new window) 网站上提供了丰富的着色器案例供学习和分享。

# 变量取名

# CODELF

CODELF (opens new window) 是一个在线变量取名网站，很有用。

# 图片相关

# Lazy Load

Lazy Load (opens new window) 是一款延迟加载图像的插件。

# gka

gka (opens new window) 是一款简单的、高效的帧动画生成工具，图片处理工具。只需一行命令，就可以快速图片优化、生成动画文件，支持效果预览。

# 图片压缩

# 图片预览

react-photo-view (opens new window) 是一款超精致的图片预览组件。📱

# 本地服务

# httpserver

httpserver (opens new window) 可以快速启动一个本地文件运行的服务器。

# supervisor

supervisor (opens new window) 可以监听本地代码更改，并进行热代码重新加载行为，而无需手动刷新。

# NodeJS

# nvm、fnm

nvm (opens new window) 和 fnm (opens new window) 都是 Node.js 版本管理工具，前者是符合 POSIX 标准的 bash 脚本，只支持 macOS 和 Linux 平台；后者是以 Rust 开发的，支持 macOS、Windows 和 Linux 平台。

# Nodemon

nodemon (opens new window) 用来监视 Node.js 应用程序中的任何更改并自动重启服务，非常适合用在开发环境中。

nodemon 将监视启动目录中的文件，如果有任何文件更改，nodemon 将自动重新启动 node 应用程序。

# PM2

PM2 (opens new window) 是一个具有内置负载均衡器的 Node.js 应用程序的生产流程管理器。有了它，你就可以让应用程序永远保持活跃，可以在不停机的前提下重新加载它们，并简化常见的系统管理任务。

# Concurrently

Concurrently (opens new window) 简单而直接，可同时运行多条命令的实用工具。

# pnp

pnp (opens new window) 可用于在 node.js 中快速启动一个网站。

# 模板引擎

# ejs

ejs (opens new window) 是一个高效的嵌入式 JavaScript 模板引擎。

# swig

swig (opens new window) 是一个很好用的 node.js 模板引擎。

# 日志处理

# log4js

log4js (opens new window) 是一个可以在 node.js 中处理日志的库。

# 水印生成

# gwm.js

gwm.js (opens new window) 用于生成网页水印，警示信息安全与责任追踪。

# 数据生成

# Uuid

Uuid (opens new window) 是一个便捷的微型软件包，能够快速生成更为复杂的通用唯一标识符（UUID）。

# faker.js

faker.js (opens new window) 是非常实用的工具包，用于在浏览器及 Node.js 中生成大量假数据。

# Mock.js

Mock.js (opens new window) 是一个模拟数据生成器，可帮助前端开发和原型与后端进度分开，并减少某些单调性，尤其是在编写自动化测试时。

# 日期处理

# Moment.js

Moment.js (opens new window) 是一个 JavaScript 日期处理类库，在浏览器和 Node.js 中都能正常使用。

# Day.js

Day.js (opens new window) 是一款快速且轻量化的 Moment.js (opens new window)(自 2020 年 9 月起进入纯维护模式,不再开发新版本) 替代方案。二者拥有类似的 API，只要你接触过 Moment.js，就能够快速上手 Day.js。

# 数字处理

# numeral

numeral (opens new window) 是一个专门用来格式化数字的 NPM 库，同时 numeral 还能解析各种格式的数字。

# url 参数处理

# qs

qs (opens new window) 处理 URL 查询字符串,支持内嵌对象和数组。简而言之，就是将对象和 URL 地址的参数互相转换。

# path-to-regexp

path-to-regexp (opens new window) 用来处理 url 中地址与参数，能够很方便得到我们想要的数据。

js 中有 RegExp 方法做正则表达式校验，而 path-to-regexp 可以看成是 url 字符串的正则表达式。

# 类名组合

# classnames

classnames (opens new window) 有条件地将类名组合在一起。

# 环境变量

# cross-env

cross-env (opens new window) 是一个运行跨平台设置和使用环境变量的脚本。

# 网页截屏

# JS 实现网页截屏五种方法 (opens new window)

# 浅析 js 实现网页截图的两种方式 (opens new window)

# CDN

# Staticfile CDN

Staticfile CDN (opens new window) 是一个免费、快速、开放的 CDN 服务。

# 图标网站

# CSS ICON

CSS ICON (opens new window) 收集了由纯 CSS 实现的各种图标。

# ICONSVG

ICONSVG (opens new window) 是一个在线可自定义设计 SVG 图标素材的网站，帮助前端设计师找到想要的图标素材，这些图标素材都是常用图标，可以点击官方提供的素材进行二次设计，同时也可以把设计好的图标导出。

# OpenMoji

OpenMoji (opens new window) 提供源代码的表情符号库，可免费下载使用。

# Share Icon

Share Icon (opens new window) 提供超过 25 万中 ICON 矢量图片素材的站点，120 多种分类，所有的素材都提供 PNG、SVG 格式，素材有多种尺寸尺寸包括 512*512、256*256、128*128、64*64、32*32、16*16 等，非常适合前端设计师收藏备用。

# Feathericons

Feathericons (opens new window) 是一个免费开源的简单而美丽的 ICON 图标集合，主要设计的使用范畴为应用系统、媒体控制、位置、天气、箭头、徽标等，可在移动端应用开发的时候使用，图标格式为 SVG。

# ICONS8

ICONS8 (opens new window) 的主要特点：

  • 并不是所有的图标都需要注明出处。

  • 在下载之前完成自定义图标设置。

  • 你可以找到任意颜色、大小和格式的图标。

  • 有不同的图标样式可供选择。(填充图标、线条图标、实心图标等。)

  • 免费增值服务。从 13 美元起，有不同的图标、照片、插图供你选择。

  • 免费套餐包括可达 100 像素的 PNG 图标，你需要更改为付费套餐才能下载其他格式。

缺点：

  • 需要注册才能下载图标。

  • 在下载图标并在项目中使用它们之前，你必须仔细检查，因为有些图标需要注明出处。

# Flaticon

Flaticon (opens new window) 的主要特点：

  • 提供 SVG、EPS、PSD、BASE 64 和 PNG 格式。

  • 为 Adobe 的创意云套件（CC）提供了扩展。（校对者注：目前并没有搜索到相关扩展，官网链接已失效，可能是该扩展已下架）

  • 能在下载之前进行自定义图标设计。

  • 高级套餐的价格为每月 9.99 欧元。

  • 高级套装提供无限数量的图标，包括三百万多个高级图标的集合。

  • 可以在 GSuite 应用程序中直接使用 Flaticon 图标。

  • 可以使用 Flaticon 为演示文稿、故事、博客和网站创建背景图像。

缺点：

  • 使用免费版本时需要提供注明出处。

# Font Awesome

Font Awesome (opens new window) 的主要特点：

  • 从 Font Awesome 3.0 版本开始，不再需要注明出处。

  • 支持 CSS 和 Bootstrap。

  • 提供 CSS 类，Unicode 和 SVG 格式的图标。

  • 可以使用纯 CSS 直接更改图标的基本属性（颜色、阴影、背景等）。

  • 可以轻松升级到最新版本。

  • Font Awesome 全局 CDN 和缓存可用于更快地加载图标。

  • 专业版价格为每年 99 美元，包括自定义设置，人工技术支持，专业版下载，标准专业证书和其他功能。

# Fontisto

Fontisto (opens new window) 的主要特点：

  • 完全免费用于商业用途。

  • 不需要使用 Javascript。

  • 支持使用 CSS。

  • 完美适配高分辨率显示器。

  • 图标是可伸缩的。

# Streamline Icons

Streamline Icons (opens new window) 的主要特点：

  • 提供 Sketch、AI、EPS、PDF、PNG 和 SVG 格式。

  • 用于搜索和编辑图标的 Web 应用程序。

  • 三个套餐版本，包括免费版、基础版和旗舰版。

  • 免费版中有 30000 个图标可供使用。

  • 基础版包含 12000 多个图标，有 .iconjar .sketch .fig .xd .svg .ai .pdf .png 等类型，售价 194 美元，而旗舰版包含 31500 多个图标。

# manypixels-icons

manypixels-icons (opens new window) 提供了 2000 多个免费好看的图标。

# 插图网站

manypixels-gallery (opens new window) 提供了 2500 多幅免费好看的插图。

# 办公需要

# Slidev

Slidev (opens new window) 是一款专为开发者设计的 PPT 制作器和演示器，它具有以下诸多特性：

  • 📝 基于 Markdown - 使用您最喜欢的编辑器和工作流程。

  • 🧑‍💻 开发人员友好 - 内置语法高亮、实时编码等。

  • 🎨 Themable - 主题可以与 npm 包共享和使用。

  • 🌈 Stylish - Windi CSS 按需实用程序，易于使用的嵌入式样式表。

  • 🤹 交互式 - 无缝嵌入 Vue 组件。

  • 🎙 演示者模式 - 使用另一个窗口，甚至您的手机来控制您的幻灯片。

  • 🧮 LaTeX - 内置 LaTeX 数学方程支持。

  • 📰 图表 - 创建带有文本描述的图表。

  • 🌟 图标 - 直接访问任何图标集中的图标。

  • 💻 编辑器 - 集成编辑器，或 VS Code 的扩展。

  • 🎥 录音 - 内置录音和相机视图。

  • 📤 便携 - 导出为 PDF、PNG，甚至可托管的 SPA。

  • ⚡️ 快速 - 由 Vite 提供支持的即时重新加载。

  • 🛠 Hackable - 使用 Vite 插件、Vue 组件或任何 npm 包。

# reveal.js

reveal.js (opens new window) 是一款网页 ppt，界面优美，又支持许多 ppt 功能，同时也有许多插件满足前端的需求，例如 markdown、code 等代码高亮插件。

# flowchart-fun

flowchart-fun (opens new window) 是一个高效的绘制流程图和思维导图的工具库，输入文字，就能自动生成一个框图，很有意思。不过是基于既定的英文单词串生成框图，可能上手使用会有一定难度。

# Draw.io

Draw.io (opens new window) 是一款在线绘图工具，可以很方便的画出美观的流程图。

# Process On

Process On (opens new window) 也是一款在线绘图工具，提供了大量的绘图模板。

# ioDraw

ioDraw (opens new window) 免费在线画图，无需注册，支持流程图、思维导图、甘特图、拓扑图、时序图、原型图、UML、平面设计图、电路图等。

# EdrawMax

EdrawMax (opens new window) 是一款本地作图软件，功能也很强大。

# Excel 相关

# Luckysheet

Luckysheet (opens new window) 是一款纯 js 实现的在线表格库，功能强大，excel 的常见能力都支持，对有表格库集成需求或者要实现类似功能的很有帮助。

# tableconvert

tableconvert (opens new window) 是一个功能强大的在线表格编辑器，支持 Excel、Markdown、JSON、CSV、HTML 等格式的相互转换。当需要转换表格，又不能让它变形，不妨试试这款工具。

# 录屏相关

# rrweb

rrweb (opens new window) 一个可以录制并回放任意 web 界面中的用户操作的纯前端的库，完全借助浏览器 api 来实现录制回放，实现的想法很有趣，对需要录制回放用户行为的需求很有帮助。

# 编程语言

# Learn X in Y minutes

Learn X in Y minutes (opens new window) 能够帮助你快速熟悉一门编程语言的基本语法。

# 文字识别

# Tesseract.js

Tesseract.js (opens new window) 是一个 js ocr 识别库，支持包括中英文等许多语言的图片和视频文字识别，底层封装了 Tesseract OCR 引擎来实现。

# 图片颜色提取

# color-thief (opens new window)

# 资源整合

# GitHub 上收集的最全的前端资源汇总 (opens new window)

包括前端学习、前端开发资源、前端求职面试等。

# 前端资源推荐 (opens new window)

收集了前端常用的一些资源，包括书籍、网站、技术周刊、工具等等。

# 微信小程序开发资源汇总 (opens new window)

# 前端先锋资源推荐 (opens new window)

# Linux 相关

# Linux Command

Linux Command (opens new window) 是一个 Linux 命令大全搜索工具，内容包含 Linux 命令手册、详解、学习、搜集。

# 代码成图

# Carbon

Carbon (opens new window) 可以很方便地将源代码生成好看的图片用于分享。

# 词云生成

# WordCloud

WordCloud (opens new window) 能够将我们输入的文字快速生成一张词云图。

# 免费字体

# fontspace

fontspace (opens new window) 2006 年成立，迄今为止有 84000 个字体免费下载字体，由世界各地的设计师进行设计。

# 修图网站

# 一键 AI 抠图

一键 AI 抠图 (opens new window)，百分之百全自动并且免费，解放生产力利器。强烈推荐。

# 在线 PS 工具

在线 ps 工具 (opens new window)拥有 photoshop 绝大部分的功能，无需安装在线批图，支持 psd，AI，sketch，pdf 等多种格式。

# 图片背景消除

removebg (opens new window) 可以帮助我们 100% 全自动且免费的消除图片背景。

# 颜色搭配

# color hunt (opens new window)

# 中国风配色网站 (opens new window)

# 渐变颜色 (opens new window)

# 壁纸网站

# Wallhaven (opens new window)

# Pexels (opens new window)

# Unsplash (opens new window)

# VSCode 插件

# Auto Close Tag (opens new window)

# Auto Rename Tag (opens new window)

# Bracket Pair Colorizer 2 (opens new window)

# Chinese (Simplified) Language Pack (opens new window)

# HTML CSS Support (opens new window)

# HTML Snippets (opens new window)

# Vetur (opens new window)

# React/Redux/react-router Snippets (opens new window)

# vscode wxml (opens new window)

# Git History (opens new window)

# GitLens (opens new window)

# Open in Browser (opens new window)

# vscode-icons (opens new window)

# Prettier (opens new window)

# Live Server (opens new window)

# One Dark Pro (opens new window)

# Power Mode (opens new window)

# Emoji (opens new window)

# Draw.io Integration (opens new window)

# Tabnine (opens new window)

# Copilot (opens new window)

# Quokka (opens new window)

# JSON to TS (opens new window)

# LeetCode (opens new window)

# 韭菜盒子 (opens new window)

# 小霸王 (opens new window)

# any rule

# Chrome 相关

# Console Importer

Console Importer (opens new window) 是一个 Chrome 插件，它能让你在 Chrome 控制台下载使用第三方包，方便快捷。

# Chrome 极简插件

相当于是一个 chrome 好用和受欢迎的插件集合地 (opens new window)，可以在上面找到一些实用的插件。

# Chrome 插件推荐

# 桌面软件

# uTools

uTools (opens new window) 是一个桌面软件，它能够帮你迅速搜索到并打开本地程序，而且它有强大的插件系统，你可以根据自己的需要打造最适合自己的工具集合。

# SwitchHosts

SwitchHosts (opens new window) 可以帮助我们快速编辑本地 host 文件，注意使用时如果是新增 host 页面，要记得打开页面右侧的开关，否则配置不生效。还有，如果打开开关时提示没权限，那么需要重新以管理员的身份运行 SwitchHosts，再打开开关。

# PhpStudy

PhpStudy (opens new window) 可以帮助我们快速配置和启动服务器环境，支持 CentOS、Ubuntu、Debian、Fedora、deepin，Web 端管理，一键创建网站、FTP、数据库、SSL；安全管理，计划任务，文件管理，PHP 多版本共存及切换；自带 LNMP 与 LAMP。

# 其他工具

# 油小猴

油小猴 (opens new window) 是一个汇聚了各种黑科技的小站。

# 纸飞机

纸飞机 (opens new window) 是一款科学上网工具。

上次更新时间: 2024年04月28日 00:58:15

←