本项目为个人技术收藏集，里面会不定期分享一些作者平时用到的一些库，或者常用的网站和小工具。同时作者也会在上面不定期的写一些简单的博文

如果你有好的推荐你可以提 issue 或者 pr 来告诉作者

推荐库
- 前端常用
- Css && 动画
- Vue
- 实践库
- 文档
- 工具库
- Node
  - 工具库
  - 命令行
  - 文件处理
  - 调试
- GraphQL
- 工具
- Webpack
- 移动端
- 性能优化
- 请求处理
- 工程
- Mac
- 录制
- Chrome 拓展
- VS Code
  - 主题
  - 字体
- 编辑器和 Terminal
  - zsh 插件
- 开发常用软件
- 有趣
网站
- 常看的网站
- Github
- 开发
- 设计
- 有趣
- 交互
- Css
- 教程
- 产品
- 实用
- Talk
- 算法
- Typescript

推荐库

这里主要推荐一下自己平时常用，提高效率的一些库和软件。

前端常用

sweetalert2 一个自适应，且自定义性强的弹出框（零依赖）
tippy.js 最著名的 tooltip/popover library
text-mask 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input
dinero.js 用来创建、计算和格式化货币价值的不可变的框架，支持国际化
lerna 大项目版本控制工具，项目中可以有多个 package.json 文件
img-2 一个提高图片加载性能和体验的库，懒加载使用 web worker 模糊预览
fingerprintjs 是一个快速的浏览器指纹库，通浏览环境的一系列配置生成 id
ajv 一个 json schema 验证的库
dayjs 一个轻量级类 moment.js API 时间库
primjs 让页面支持代码高亮
ReLaXed 一个将 document html 转成 PDF 的工具
uppy 一个很好看的也很好用的前端上传库
Filepond 一个小巧的文件上传库
tui-calendar 功能全面的日程安排日历控件，还支持拖拽
tui.editor markdown 所见即所得编辑器
tabler 基于 Bootstrap 4 的 Dashboard UI Kit 和美观高颜值 ui 模板
pulltorefresh.js 下个下拉刷新插件
lulu 腾讯阅文基于 jQuery，针对 PC 网站 IE8+（peak 主题）的前端 UI 框架
chancejs 生成随机数据的库
spritejs 360 奇舞团出的跨平台绘图对象模型
tui.image-editor 一个功能齐全的在线图片编辑，基于 canvas
nanoid 前端轻量 unique string ID 生成库
rxdb 一款开源的快速、灵活的客户端数据库，支持各种浏览器以及 NodeJS，Electron、React 等等，是 PouthDB 之上的一个封装库
percollate 命令行工具能将网页转换成 pdf
rawact 一个 babel 插件，把 react 组件转为原生 dom
irondb 是一个浏览器 key-value 储存的封装库，把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制，即使某种底层储存机制失效，它可以从其他机制恢复数据。
big.js 解决 js 浮点数问题。主要就是 Big Number 或者小数点温柔
bignumber.js 同上
stickybits CSS 的 position: sticky 是一个很有用的设置，但是老的浏览器不支持。这个 JS 库是该功能的垫片库。
react-jsonschema-form Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
cleave.js 用于在输入时格式化输入内容（信用卡格式、日期等）
shiny 在手机设备上模拟光的反射效果。支持 DeviceMotion 事件
cloudquery Turn any website to serverless API
A-Programmers-Guide-to-English 专为程序员编写的英语学习指南。
rrweb 一个可以记录你页面中所有操作的库
nodeppt markdown 写 ppt
flexsearch 能让你更加高效和快速的检索文本内容
public-apis 汇集了市面上一些对外免费开放的 api，做一些自己练手 app 的时候很好用。
scroll-hint 用于提示用户页面可以左右滑动的一个提示库
fuse.js 轻量级前端模糊查询库非常的好用
FileSaver.js 文件下载插件很多时候下载会有兼容性问题，它能帮你解决这些问题
instant.page 一个判断用户行为预测提前加载页面的库
screenfull.js 浏览器全屏插件解决了不少兼容性问题
VuePress 本网站就是基于它实现的，简单方便的静态网站生成器
selection 可视化选择页面元素的库
scroll-out 滚动效果（滚动视差）的框架，框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配
gpu.js 通过将 js 转为特定的 language，利用 GPU 来执行，大大提高了执行性能和速度
pressure 前端实现 3D Touch
hammer 移动端手势库
AlloyFinger 腾讯出的手势库
lowdb LowDB 是一个本地 JSON 数据库，基于 Lodash 开发的
JSON-server 可以配合 LowDB 使用快速搭建一个 REST API
lunr.js 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索
he 一个前端 encoder/decoder 库
grade 一个可以根据你的图片调整底色的插件
pretty-bytes 将字节转换成可以读的字符串，比如 1337 个字节，会显示成 1.34 KB
runkit 一个基于 node 的在线 playground
chart.xkcd 手绘风格的图表库
sketchviz 手绘风格流程图
pagemap Mini map for web pages 页面导航图
commonmark.js parser and renderer markdown
body-scroll-lock 解决滚动穿透问题
lodash 前端工具函数集合
dayjs 时间处理库，不过大部分情况下我还是用自己的封装的函数
lightgallery 图片预览组件
photoswipe 图片预览组件，支持移动端
darken 页面黑夜模式切换
mitt 轻量级 pub/sub
sanitize-html html 过滤库，防 xss
DOMPurify 比 sanitize-html 更轻量，建议一般业务用这个

Css && 动画

animate.css 最有名的动画效果库
magic.css css 动画效果库类似 animate.css
popmotion 一个函数式声明前端动画库
NES.css 任天堂主题风格 css 库
particles.js 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能
PaperCSS 手绘风格感觉 css 库
rough 基于 Canvas 的手绘风格图形库
wired-elements 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
roughViz rough 风格的图表库手绘风格的图表库
matter-js web 物理引擎
micron 通过在元素上绑定属性从而实现动画效果的库
direction-reveal 根据鼠标进入位置，展现从不同方向展现 hover 效果
laxxx 滚动特效库轻量级压缩完 2kb
cssfx 优雅的 CSS 动画效果，开箱即用
zdog 3D engine 引擎
leonsans 酷炫的字体动画 geometric sans-serif typeface made with code
css-doodle A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件

Vue

vue-multiselect select 组件目前 vue 里面用过最好用的
Vue.Draggable DnD 拖拽组件基于 Sortable.js 的 vue 版本
vue-sauce 一个可以展示 vue 源码的指令
vue-smooth-dnd Vue wrappers components for smooth-dnd
vuegg 一个 vue 可视化拖拽界面生成器
vee-validate 基于 vue 的验证，能验证的内容比较全
vuesax 一个很漂亮的基于 vue 的 ui 框架
vue-analytics 基于 vue 的谷歌统计封装
vue-virtual-scroller 基于 vue 的虚拟列表无限滚动
vue-content-placeholders 页面龙骨 skeleton
buefy 适配移动端的 vue 组件库看着还挺舒服的
vxe-tablevue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题
Vue 测试指南 vue 测试指南

实践库

Jasonette 一个用 json 来构建 hybrid App 的框架
crate 一个 react 全栈练习(pc,mobile,rn,api) demo，适合入门拿来练手
react-in-patterns 一本开源教你如何写 react 的书
hocs react 相关 hoc 收集库

文档

vuepress vue 官方出品的文档工具
docsify 轻量级文档工具，但其是运行时编译的，所以 seo 不好
GitBook 除了编译慢没啥毛病
mdx jsx + markdown
docz
storybook

工具库

live-server 可以快速启一个本地 dev 服务并且支持自动刷新的 http server
serve 快速起本地静态服务
picojs js 人脸识别库
es-checker 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
merge-images 图片合成，利用canvas能将几张图片合成一张
fabric.js 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
phaser 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。
你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
purifycss 移除没使用到的 css
dropcss 同上
fast-cli 命令行测试下载上传速度
@pika/web 让你不需要在本地 webpack 中 import，直接在游览器里面运行 npm 包
pinyin 汉字拼音转换工具
JavaScript Obfuscator Tool js 代码混淆工具
tesseract 图像识别，它能识别图片中的文字，支持中文
gka 一款高效、高性能的帧动画生成工具。只需一行命令，快速图片优化、生成动画文件，支持效果预览。
recast 前端 ast 库
jscodeshift 将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改
stats.js 前端性能监控如 FPS、内存使用情况等
PapaParse 解析 csv excel
mddir 生成 markdown file/folder structure 目录结构 tree
imagemin 图片压缩库
inline-css css covert to inline style 在生成 email 格式 html 的时候特别有用
babel-plugin-try-catch-error-report 全局自动 catch 错误进行数据上报
StreamSaver.js 大文件下载，不用像 saveAs 那样先读到内存中再下载
mammoth.js Convert Word documents (.docx files) to HTML
npkill 列出所有 node_modules，并支持删除
strapi 开源的解决方案来创建、部署和管理自己的 API，通过图形化界面进行操作

Node

工具库

cheerio 用类 jQuery 语法处理 HTML
node-semver node 版本验证库
live-server 一个简单的 http server 带有 reload 功能
node-portfinder 一个端口嗅探工具
update-notifiernode 依赖升级提醒工具
fastscan node 敏感词库
hygen 快速方便的创建代码可以命令行创建预设的 template
plop 同上，代码生成工具
ink 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了
dotenv 通过.env 设置环境部变量 vue-cli 也依赖它
patch-package 优雅的修改 node_modules 中的依赖库
Playwright 同 Puppeteer 团队出品，但区别是它支持 Chrome、Safari、Firefox、Edge
tree-cli node 根据目录结构生成 tree
tree-node-cli node 根据目录结构生成 tree
open node 打开浏览器

命令行

signale 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji，可扩展的日志记录器
consola 优雅的命令行 console logger vuepress 也使用了它
chalk 命令行着色美化库
progress-estimator 命令行 progress bar 进度条模拟库
ora Elegant terminal spinner 命令行 loading
listr Terminal task 命令行任务列表
yargs 命令行参数解析
y18n yargs 基于 i18n 的一个包
commander.js 自动的解析命令和参数，合并多选项，处理短参，等等，功能强大，上手简单
Inquirer.js A collection of common interactive command line user interfaces. 命令行询问库
enquirer 命令行 prompt 询问库，写 cli 的时候很有用
Qoa 同上
cli-progress Terminal Progress Bar
cli-table tables for the CLI
node-notifier 在 NodeJS 环境中，可以很方便的唤起 notifier 通知

文件处理

rimraf 删除文件
globby 用于模式匹配目录文件
glob 文件查找
tiny-glob 文件查找
chokidar node 监听文件变化的库
fs-extra fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API
execa 比 child_process 好用，返回 Promise
npm-run-all 一个 CLI 工具可以并行或者串行执行 script 指令
memfs memory-fs 的替代品，将文件放在内存中优化读写，webpack 依赖

调试

fx 命令行优化 JSON 输出
dumper.js 能让你的 node console 更加的规整，方便调试
ndb node 调试
why-is-node-running 查看 node 为什么在运行
siege 压测工具
node-in-debugging node.js 调试指南
node-best-practices node 最佳实践
Node.js 最佳实践

GraphQL

prisma 让前端也能快速的写出
Apollo GraphQL 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便
dataloader 解决 Graphql 中的 N+1 查询问题

工具

high-speed-downloader 百度网盘不限速下载支持 Windows 和 Mac
hyper 前端命令行
yapi 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台
sway 一个微软自己出的在线 ppt 很强大
Ascii Art Generator 在线生成 Ascii 图案
Winds 开源 RSS
JSUI 一个用来控制管理前端项目的客户端
docz 让你能快速写文档的一个库
hiper 性能统计分析工具
verdaccio 私有 npm
git-guide git 入门指南
git-tips git 进阶
bit 实现了项目之间的代码共享可以自建私有
simpread 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展
mkcert 一键命令让本地也支持 https
termtosvg 录制命令操作转成 svg 基于 python
gh-polls 可以在 github issue 中添加投票
eruda 移动端调试工具
vConsole 也是一个移动端调试工具腾讯出品
terminalizer 命令行录制工具基于 node
badgen 快速构建和 shields 一样的 svg badge 但速度更快
readability 移除页面非正文部分基于 jsdom
WeChatPlugin-MacOS 一款功能强大的 macOS 版微信小助手
puppeteer-recorder 一个 chrome 插件能够根据你的操作自动生成 puppeteer 相关代码
mdx-deck 用 markdown 编写演示文稿
code-surfer 基于 mdx-deck 的一个插件
让你更好的在文稿中展示 code
Progressive Tooling 前端性能优化工具集合
https://github.com/artf/grapesjs 可视化建站工具不需要写代码就能写一个页面，前端再次再次要下岗了
image-charts 该服务通过 URL 接受参数，然后生成图表，以图片形式返回
eagle.js 一个用 vue 来制作 PPT 的库
Optimizely A/B Test
appadhoc 一个国内的 A/B Test 服务
glorious-demo 通过编写代码的方式构建一个命令行的演示例子
nginxconfig 可视化配置 nginx 提供了多个基础模板
bundlephobia 一个可以查看某个库的大小，并且分析它的依赖
jsperf 一个提供在线 test case 的网站，主要用来比较性能。可以比较如： forEach vs for 的性能
perflink 与 jsperf 类似的一个比较 js 性能的网站
algorithm-visualizer 算法代码可视化
An-English-Guide-for-Programmers 专为程序员编写的英语学习指南
Webhint 用于检查代码的可访问性、性能和安全的开源检查（Linting）工具
airtap 测试浏览器兼容性，可覆盖 800 多种浏览器
jsonstore 供免费，安全且基于 JSON 的云数据存储，自己玩的小项目神器
git-history 可视化查看一个文件的历史变化
x-spreadsheet 一个基于 Canvas 的 JS 电子表格库 excel
imgcook 阿里出品，一键通过设计稿生成代码
majestic jest 可视化
leon 你开源项目的 ai 个人助手
js-code-to-svg-flowchart 将代码逻辑用流程图的方式展现出来
xterm.js 一个 web terminal
pixelmatch diff 两张图片不一样的地方
readme-md-generator 一个命令行脚本帮你快速的创建一个 README
build-tracker 构建大小追踪记录你多个版本构建后文件大小的变化
zan-proxy 本地调试线上环境的工具
mjml 一个让发 email 更简单的框架。定义了一套自己的语法，你用这套语法写邮件，然后编译成 HTML。
any-rule 正则大全
outline 一个免费开源的库，能让你快速搭建自己的 wiki

Webpack

webpackbar webpack 打包进度条
jarvis webpack dashboard
webpack-chain 通过 chain 风格 api 的方式修改 webpack 配置
speed-measure-webpack-plugin 统计 webpack 各阶段的耗时
obsolete-webpack-plugin 基于 browserslist 做浏览器升级提示
mini-css-extract-plugin 提取 CSS 为单独文件
copy-webpack-plugin 复制额外的文件到输出目录
duplicate-package-checker-webpack-plugin 检查是否存在重复依赖
cssnano CSS 压缩
bundle-buddy webpack bundle 依赖分析

移动端

fastclick 解决移动端一些点击问题

性能优化

workbox PWA 方案，Google 出品

请求处理

axios 目前最常见的请求库
got http 请求库如果你觉得 request 太多的话这是一个不错的选择
request 老牌请求库 -*whatwg-fetch** fetch 请求库
grpc-web 前端直连 gRPC 服务
node-fetch node 环境下轻量级 fetch 请求库
reqwest

工程

lerna monorepo 管理
lerna-changelog 为 lerna 项目自动生成 changelog
eslint JS 风格约束
eslint-config-airbnb airbnb 约束风格
xo 封装自 eslint
prettier 更主观的风格自动修改
yeoman-generator 脚手架工具
serve 本地静态服务器
np npm publish 辅助，自动 push、打 tag、升版本等
lint-staged eslint 提速，只 lint 提交的代码
coveralls 覆盖率
husky 添加 git hooks
cross-env 跨平台的环境变量声明
nvm 管理 node 版本
concurrently 在 npm scripts 里并行执行命令
@zeit/ncc 打包为 npm 包为一个文件
npm-check 检测依赖升级情况，我会和 yarn upgrade-interactive 配合着用，主要用来检测冗余依赖
cpx 复制，支持 glob，并且可以 watch
onchange 监听文件变动然后做一些事
tasksfile 在 node 中执行 script 脚本

Mac

get-plain-text 能清除剪贴板里的格式很实用
IINA mac 平台感觉免费最好的播放器强推
magnet 分屏管理
Xnip 方便好用的截图工具-支持截长图
Spectacle 窗口管理工具
vanilla 顶栏图标管理工具
Dozer 一个开源的顶栏管理
腾讯电脑管家 反正我用下来好觉得蛮好用的
mos 鼠标平滑滚动软件，很好用。免费开源
sequel pro mysql 客户端好用
Microsoft Remote Desktop Beta Mac 远程登录 Windows 调试神器
pap.er 专为 Mac 设计的壁纸应用
The Unarchive Mac 目前感觉最好用的免费解压软件
Tickeys 让你用 Mac 键盘也能打出机械键盘的感觉
Beaker Browser P2P 开源浏览器支持点对点发布文件，成为了文件传输工具，支持 DAT 对等协议
Gifski 视频转 gif 工具
more 更多优秀的 mac app 介绍
Motrix 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具
iPic这个应用可以让你方便地上传图片到各种图床
Image2Icon
hidden 是用来帮助你隐藏 macOS 菜单栏上那些不常用的应用图标

录制

licecap gif 录制，简洁好用，之前都用这个录制
kap 现在都用这个录制 gif，还支持导出 mp4，录制的 fps 很高
KeyCastr 按键显示，录制的时候显示你的按键

Chrome 拓展

Tampermonkey 油猴神器
扩展管理器 轻松管理扩展，就不用担心安装太多扩展了
visbug 它可以帮助你改变 css，移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用
refined-github 优化 github 默认功能和样式的 chrome 插件
ADB chrome 真机调试安卓神器
Adblock Plus
免费广告拦截程序这个应该不用说了，装机必备
Axure RP Extension 看原型必备
JSON Formatter JSON 格式化程序员必备
Lighthouse 谷歌出品，检查网页综合性能评分，分析不足
二维码(QR 码)生成器 手机扫码神器
Octotree github 上看代码必备神器
OctoLinker 能在 github 上看代码的时候快速链接跳转到依赖的库
The Great Suspender chrome 太吃内存了，当页面开的很多时候会很卡，它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了，当你想看是再重新加载
WEB 前端助手 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等
掘金目前我默认新开 tab 的默认页，可以刷刷新的文章或者项目，还不错。
沙拉查词 划词翻译插件
npmhub在 README 下方显示 npm 依赖信息

VS Code

Import Cost 查看你引入的依赖模块大小
Auto Close Tag 自动补全 html 标签，如输入<a>将自动补全</a>
Auto Rename Tag 自动重命名 html 标签，如修改<a>为<b>，将自动修改结尾标签</a>为</b>
polacode 生产代码图片快照插件
vscode-leetcode 一个能让你在 vscode 中刷 LeetCode 的插件算一个划水神器吧
vscode-icons VS Code 必备吧，为文件添加炫图标
CodeSnap 生产代码截图

主题

官方主题页 可以选择自己喜欢的主题
one-monokai 我用的是这个主题，很多年了

字体

FiraCode
Dank Mono
Operator Mono

编辑器和 Terminal

Go2shell 在当前文件夹打开 shell
Terminal 用 iTerm2 + zsh + oh-my-zsh 的组合，主题是 robbyrussell

zsh 插件

Homebrew 必装
autojump 实现目录间快速跳转，想去哪个目录直接 j + 目录名，不用在频繁的 cd 了
zsh-autosuggestions 命令自动建议和补全
zsh-syntax-highlighting 命令行语法高亮
history 命令行记录
zsh-git-prompt git 分支信息提示

开发常用软件

Github Desktop管理 github 仓库的变更和 PR
runjs js 运行沙盒，写 test case 或者面试当场写代码的时候很有用
Charles 抓包用，支持 https
Google Chrome 前端必备没啥好说的
ColorSnapper2 取色工具
postman api 调试工具
Sequel Pro MySQL 界面管理工具
KeepingYouAwake 可保证系统不自动休眠，挂机跑脚本很有用

有趣

the-bread-code 使用程序员的思维制作面包，比如制作中使用 A/B test,
来比较那种做法更好。
build-your-own-x 教你用各种语言实现 Bot Database Neural Network
**javascript-algorithms ** 教你用前端知识认识各种算法
not-paid 如果你给人做网站，交过去以后对方没有付款，那么这个 JS 会把网站的透明度一天调低一点，直到看不见
nsfwjs 前端图片鉴黄，基于 Tensorflow
elevator.js 我很喜欢的一个库，让一个 back-to-top 的效果有了一种坐复古电梯的感觉
app-ideas 很多年轻人苦于缺少练手的项目，这个项目收集了不少点子，每个点子都有明确的目标和复杂资源。
WebGL-Fluid-Simulation 很酷的 WebGL 交互
react-kawaii 一个非常可爱的 React 卡通人脸库，很有意思
chart-race-react 图表竞赛长条图赛跑动画在微博或者 b 站这种类型视频很火
98.css windows 98 主题分格 css

网站

常看的网站

overreacted react Dan 的个人博客，更新频率很高（redux 作者，react 核心开发）
DailyJS
codeburst
阮一峰的网络日志 阮老师出的东西还是值得一读的
InfoQ 文章的质量比一般网站的高不少
鱼塘划水网站收集了很多网站当天热门文章
每日时报 定期会分享一些库和工具
awesome-f2e-libs sorrycc 整理的个人关注使用的前端库

Github

github 短域名服务
shields Github README 里面的装逼小图标
Emoji 方便平时写查找 emoji
emoji.muan 同上而且更全
git-awards github ranking 没事可以查着玩玩
http://githubrank.com/ github 按照 followers 排名
github-rank同上，githubrank 基本算挂了已经，只能用这个新的
star-history 展示一个项目 Stars 增长规矩曲线
probot 基于 github 做一个小机器人。可以做很多 workflow 的事情

开发

产品/设计师/独立开发者的资源库 很全很强大
can i use 前端常用网站了查看不同属性和方法的兼容性
Squoosh 谷歌出品在线免费图片压缩工具神器
codesandbox-client - 在线 web 开发容器
astexplorer - 一个在线 ast 生成器
30 seconds of code 收集了许多有用的代码小片段
zeplin 前端和设计师神器，有标注、Style Guide、版本管理、简单的团队协作，重点是前端不用写 css 了，复制就可以了。
iconfont 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。
cssicon 所有的 icon 都是纯 css 画的缺点：icon 不够多
智图腾讯出品在线图片压缩支持转成 webP 处理静态图片时候很好用
picdiet 另一个图片压缩网站
CSS triangle generator 帮你快速用 css 做出三角形
cssarrowplease 帮你做对话框三角的
clippy 在线帮你使用 css clip-path 做出各种形状的图形
Regular Expressions 在线正则网站
jex 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多
cyrilex 正则可视化网站
jsfiddle 在线运行代码网站很不错，可惜要翻墙
codepan 在线运行代码网站不用翻墙，可以自己部署
fiddle.md 一个方便的在线共享 markdown 在线笔试题一般都用这个
jsdelivr cdn 服务
unpkg cdn 服务
coderpad 远程面试的神器，可以让面试者远程写代码不过需要翻墙
icode 有赞团队出品的 coderpad 可以互补，它不需要翻墙
codeadvice 又一个让面试者远程写代码的网址
snipper 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。
codesandbox 一个可以在线编辑且提供在线 demo 的网站支持 vue react angular 多种框架神器
codrops 上面的交互都非常酷炫
bgremover 在线图片去底工具
photopea 一个网页端 Photoshop 很变态
bestofjs 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量
stackblitz 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能
**programmingfonts.org ** 一个专门介绍编程字体的网站
早报一个个人开发者的前端开发的分享日报
emoji-search 帮你快速找到能表达你情感的 emoji
gitmoji 通过 emoji 表达 git 的操作内容
starcharts 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
mockapi 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了
coder 在线版 VS Code
browserstack 远程调整各种版本浏览器兼容性问题
carbon 根据代码块生成图片主要作用是让你打代码片段分享的时候更好看一点
clipboard2markdown 将你所有复制进去的内容都转化为 markdown
grammarly 英语写作检查工具
quickchart 通过 URL 生成图表的开源服务
hipdf 一站式在线 PDF 解决方案
whimsical 画路程图
Lorem Picsum 提供免费的占位图
sm.ms 免费图床
webpagetest 前端性能分析工具
网络安全的教程
Ananas Analytics Desktop 一站式数据可视化
“零宽” 长度的短网址服务 利用“零宽字符”来缩短 url，还支持统计
hotjar 用户调研支持用户反馈录屏 heatMap
狼叔：如何正确的学习 Node.js
独角兽公司榜单 感觉大家想去大公司的时候，可以看看排名
中国传统颜色手册
coderlane 远程视频面试，目前使用的是牛客，这个工具待考察
excalidraw 手绘风格流程图，强推

设计

uimovement 能从这个网站找到不少动画交互的灵感
awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
dribbble 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面招的
Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客
Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
brandmark 另一个在线制作 logo 网站
instant 又一个 logo 制作网站
logo-maker 又一个 logo 制作网站这个更简单点就是选模板之后微调
coolors 帮你在线配色的网站你能找到不少配色灵感
colorhunt 另一个配色网站
uigradients 渐变色网站
designcap 在线海报设计
Flat UI 色表 Flat UI 色表
0to255 颜色梯度
Ikonate 提供免费的图标 icons
remixicon 又一个提供免费图标 icons
feather 免费的 icons
**nord ** 北欧性冷淡风主题配色
Unsplash 提供免费的高清图片
colorkitty 从你的图片中提取配色
design.youzan 有赞设计原则
undraw 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。

有趣

帮你百度一下 可以点我测试一下**-
国际版 同帮我百度一下-点我测试一下**-
wallhaven 壁纸网站-
URL 地址播放 Emojis 动画 在地址栏里面播放 emoji
Can’t Unsee 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
ggtalk 平时一直在听的一个技术博客
awesome-comment 里面收集了很多有趣的代码注释
text-img 都将图片转化为 ascii 用来写注释
weird-fonts 将普通字母转化为特殊 unicode
snake 在地址栏里面玩贪吃蛇
zero-width-lib 利用零宽度字符实现隐形水印、加密信息分享、逃脱词匹配，很有创意
abbreviations 查看一个简写是什么意思的网站
magi ai 搜索神器，超屌
诺基亚短信图片生成器

交互

微交互 里面收集了市面上很多很好的微交互例子值得学习
Little Big Details 同上，一个国外微交互汇集网站
cruip 登录页的各种页面设计，可以免费下载模板
Comixify 一个波兰团队做了非常好玩的工具，可以把视频自动转成漫画，上图是他们提供的 demo，效果很棒。
taiko-web 太鼓达人网页版只能说很 6

Css

css-tricks 一个学习 css 不错的网站有很多有意思的 demo

教程

npx 教你怎么合理的使用 npx
hacksplaining 网络安全学习网站
mobile-web-best-practice 移动 web 最佳实践
vanillawebprojects 通过纯前端的手段实现一些小项目，适合入门
Think Python 还不错的 Python 入门教程
Node.js CLI Apps Best Practices 叫你如何写好一个 node cli 工具
SQL Murder Mystery 一个英文的 SQL 初级教程，以游戏的方式，让你利用学到的 SQL 概念和命令来找出谋杀凶手
html-dom 一些常用的 dom 或者原生 js 操作判断，挺实用的
TypeScript TypeScript 入门教程，很不错，推荐初学者学习
Webpack 知识图谱 webpack 相关教程和原理分析还不错

产品

产品大牛 什么有很多完整的产品原型可以借鉴
磨刀快速出 ui 原型

实用

写作猫 可以通过 AI 的方式，帮你检查错别字，很有效的一个工具
draw 在线 web 画流程图
typeform 一个国外的在线调查问卷网站
VideoFk VideoFk 视频在线解析下载
全历史 历史内容聚合网站
UzerMe 云端办公工具
SoBooks 强大的电子书资源网站
稿定设计 键式设计工具+智能抠图
pichance 一个将低分辨率图片增强为高分辨率的工具，可以将分辨率增加 4 倍（即长和宽各增加一倍）
bigjpg 放大图片的神器通过神经网络可以放大图片并能降噪
大力盘 百度网盘搜索
ENFI 下载器 不限速下载器
来画视频 像做 PPT 一样做短视频
Arkie 海报制作工具
优品 PPT
比格 PPT
高清免费图片
高清免费图片 2
历史价格查询 淘宝，京东等商品历史价格，能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器
Firefox Send 文件分享服务，下载一次或者到期即焚，在当前网络监管下很实用的服务
time.graphics 在线 milestone timeline 生成器
processon 免费在线作图，支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等
龙轩导航 一个总结了不少实用网站的导航

Talk

peerigon-talks 收集了不少有意思的 talks

算法

leetcode 用 js 刷 leetcode

Typescript

TypeScript 入门教程 推荐阅读
深入理解 TypeScript 深入理解 ts

在线地址：https://panjiachen.github.io/awesome-bookmarks

gitee 访问地址(github.io 有时候在国内访问会很慢)：awesome-bookmarks

【收藏】前端开发必备：前端开发不得不收藏的网站,提高200%开发效率！相关推荐

农业app开发软件有效推动了智慧农业发展，提高用户工作效率
农业app开发软件有效推动了智慧农业发展,提高用户工作效率. 从现在的形式来看,智慧农业的发展趋势已经不是一种需求了,这也更为符合智慧产业的发展体系.所以,农业APP软件顺应用户的需求而诞生了. 智 ...
推荐几个Vue开发必备插件，要收藏
「介绍用途」大家知道,Vue2.x之后,Vuex状态管理是必须要掌握的一个技术点,今天北妈先介绍下Vuex是什么,然后在介绍几个封装好的操作本地缓存.状态的几个组件,需要的童鞋赶紧拿走,可能有很 ...
【开发必备】快来收藏！涵盖日常开发中所需要的60多个正则验证！！
前言正则表达式对于前端来说是非常熟悉的,尤其是表单验证,本人是做活动开发的,经历过各种信息资料的填写,特意整理收集了若干个常用以及不常用的正则. 我把它们整理成文档,方便大家查阅.文档有正则,但不只 ...
.Net界面开发必备！DevExpress Blazor UI全新组件助力界面开发
行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,DevExpress UI for Blazor/ Razor组件附带7个用户界面组件(包括Data Grid和Pivot G ...
Windows下Visual Studio Code配置Shell开发环境（超详细图文）| 瞬间提高200%生产力
人生苦短,务必性感. 要说目前最火的编辑器,我说是Visual Studio Code(VS Code)应该没人反对吧!!!作为一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高 ...
Linux 常用Shell脚本，后端开发必备
Linux 常用Shell脚本,后端开发必备文章目录 Linux 常用Shell脚本,后端开发必备 1 用户猜数字 2 查看有多少远程的 IP 在连接本机 3 helloworld 4 打印 tom ...
Java后端开发必备软件下载地址汇总
Java后端开发必备软件下载地址汇总文章目录 Java后端开发必备软件下载地址汇总先记录,用到再加,持续更新,欢迎补充. 华为云 jdk8 OpenJdk小版本 IDEA各版本 Tomcat各版本 ...
Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
AndroidUtils：Android开发不得不收藏的Utils
AndroidUtils AndroidUtils Android开发不得不收藏的Utils AndroidUtils:Android必备utilCode 具体Demo使用参考开源github:And ...

【收藏】前端开发必备：前端开发不得不收藏的网站,提高200%开发效率！

推荐库