# awesome-bookmarks

**Repository Path**: yourxiong/awesome-bookmarks

## Basic Information

- **Project Name**: awesome-bookmarks
- **Description**: :sparkling_heart: A curated list of awesome things 
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2019-07-31
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img width="320" src="https://wpimg.wallstcn.com/9e77e0ae-3018-45a2-bf9f-1a4c88dd300a.svg">
</p>

Coming Soon

Base on `vuepress`

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

<!-- 个人 Blog 文章地址：https://panjiachen.github.io/awesome-bookmarks/blog/js.html -->

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

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

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

- [推荐库](#%E6%8E%A8%E8%8D%90%E5%BA%93)
  - [前端常用](#%E5%89%8D%E7%AB%AF%E5%B8%B8%E7%94%A8)
  - [Css && 动画](#css--%E5%8A%A8%E7%94%BB)
  - [Vue](#vue)
  - [实践库](#%E5%AE%9E%E8%B7%B5%E5%BA%93)
  - [工具库](#%E5%B7%A5%E5%85%B7%E5%BA%93)
  - [Node](#node)
  - [GraphQL](#graphql)
  - [有趣](#%E6%9C%89%E8%B6%A3)
  - [工具](#%E5%B7%A5%E5%85%B7)
  - [Webpack](#webpack)
  - [Mac](#mac)
  - [Chrome 拓展](#chrome-%E6%8B%93%E5%B1%95)
  - [VS Code](#vs-code)
  - [工程](#%E5%B7%A5%E7%A8%8B)
- [网站](#%E7%BD%91%E7%AB%99)
  - [常看的网站](#%E5%B8%B8%E7%9C%8B%E7%9A%84%E7%BD%91%E7%AB%99)
  - [Github](#github)
  - [开发](#%E5%BC%80%E5%8F%91)
  - [设计](#%E8%AE%BE%E8%AE%A1)
  - [有趣](#%E6%9C%89%E8%B6%A3-1)
  - [交互](#%E4%BA%A4%E4%BA%92)
  - [Css](#css)
  - [教程](#%E6%95%99%E7%A8%8B)
  - [产品](#%E4%BA%A7%E5%93%81)
  - [实用](#%E5%AE%9E%E7%94%A8)
  - [Talk](#talk)
  - [算法](#%E7%AE%97%E6%B3%95)

# 推荐库

**太常用的一些库，比如 `lodash`、`axios`、`echarts`、`normalize.css`等就不再下面推荐了。这里主要推荐一下自己平时常用，提高效率的，但大家可能又不知道的一些库。**

## 前端常用

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

## Css && 动画

- [animate.css](https://github.com/daneden/animate.css) 最有名的动画效果库
- [magic.css](https://github.com/miniMAC/magic) css 动画效果库 类似 animate.css
- [popmotion](https://github.com/Popmotion/popmotion) 一个函数式声明前端动画库
- [NES.css](https://github.com/BcRikko/NES.css) 任天堂主题风格 css 库
- [particles.js](https://github.com/VincentGarreau/particles.js) 前端实现颗粒粒子的动画效果库，比较炫酷，但相对的也比较吃性能
- [PaperCSS](https://www.getpapercss.com/docs/) 手绘风格感觉 css 库
- [rough](https://github.com/pshihn/rough) 基于 Canvas 的手绘风格图形库
- [wired-elements](https://github.com/wiredjs/wired-elements) 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
- [matter-js](https://github.com/liabru/matter-js) web 物理引擎
- [micron](https://github.com/webkul/micron) 通过在元素上绑定属性从而实现动画效果的库
- [direction-reveal](https://github.com/NigelOToole/direction-reveal) 根据鼠标进入位置，展现从不同方向 展现 hover 效果
- [laxxx](https://github.com/alexfoxy/laxxx) 滚动特效库 轻量级 压缩完 2kb
- [cssfx](https://cssfx.dev/) 优雅的 CSS 动画效果，开箱即用
- [zdog](https://github.com/metafizzy/zdog) 3D engine 引擎

## Vue

- [vue-multiselect](https://github.com/shentao/vue-multiselect) select 组件 目前 vue 里面用过最好用的
- [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable) DnD 拖拽组件 基于 Sortable.js 的 vue 版本
- [vue-sauce](https://github.com/Botre/vue-sauce) 一个可以展示 vue 源码的指令
- [vue-smooth-dnd](https://github.com/kutlugsahin/vue-smooth-dnd) Vue wrappers components for smooth-dnd
- [vuegg](https://github.com/vuegg/vuegg) 一个 vue 可视化拖拽界面生成器
- [vee-validate](https://github.com/baianat/vee-validate) 基于 vue 的验证，能验证的内容比较全
- [vuesax](https://github.com/lusaxweb/vuesax) 一个很漂亮的基于 vue 的 ui 框架
- [vue-analytics](https://github.com/MatteoGabriele/vue-analytics) 基于 vue 的 谷歌统计封装
- [vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller) 基于 vue 的虚拟列表无限滚动
- [vue-content-placeholders](https://github.com/michalsnik/vue-content-placeholders) 页面龙骨 skeleton

## 实践库

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

## 工具库

- [live-server](https://github.com/tapio/live-server) 可以快速启一个本地 dev 服务 并且支持自动刷新的 http server
- [serve](https://github.com/zeit/serve) - 快速起本地静态服务
- [picojs](https://github.com/tehnokv/picojs) js 人脸识别库
- [es-checker](https://github.com/ruanyf/es-checker) 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
- [merge-images](https://github.com/lukechilds/merge-images) 图片合成，利用`canvas`能将几张图片合成一张
- [fabric.js](https://github.com/fabricjs/fabric.js) 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
- [phaser](https://github.com/photonstorm/phaser) 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。
  你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
- [purifycss](https://github.com/purifycss/purifycss) 移除没使用到的 css
- [dropcss](https://github.com/leeoniya/dropcss) 同上
- [fast-cli](https://github.com/sindresorhus/fast-cli) 命令行测试下载上传速度
- [@pika/web](https://github.com/pikapkg/web) 让你不需要在本地 webpack 中 import，直接在游览器里面运行 npm 包
- [pinyin](https://github.com/hotoo/pinyin) 汉字拼音转换工具
- [JavaScript Obfuscator Tool](https://obfuscator.io/) js 代码混淆工具
- [tesseract](https://github.com/naptha/tesseract.js) 图像识别，它能识别图片中的文字，支持中文
- [gka](https://github.com/gkajs/gka) 一款高效、高性能的帧动画生成工具。只需一行命令，快速图片优化、生成动画文件，支持效果预览。
- [recast](https://github.com/benjamn/recast) 前端 ast 库
- [jscodeshift](https://github.com/facebook/jscodeshift) 将 js 内容解析成 AST 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改
- [stats.js](https://github.com/mrdoob/stats.js/) 前端性能监控 如 FPS、内存使用情况等
- [PapaParse](https://github.com/mholt/PapaParse) 解析 csv excel

## Node

- [consola](https://github.com/nuxt/consola) 优雅的命令行 console `vuepress` 也使用了它
- [cheerio](https://github.com/cheeriojs/cheerio) - 用类 jQuery 语法处理 HTML
- [chokidar](https://github.com/paulmillr/chokidar) - node 监听文件变化的库
- [fs-extra](https://github.com/jprichardson/node-fs-extra) - fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API
- [rimraf](https://github.com/isaacs/rimraf) - 删除文件
- [globby](https://github.com/sindresorhus/globby) - 用于模式匹配目录文件
- [glob](https://github.com/isaacs/node-glob) - 文件查找
- [tiny-glob](https://github.com/terkelg/tiny-glob) - 文件查找
- [node-semver](https://github.com/npm/node-semver) - node 版本验证库
- [npm-run-all](https://github.com/mysticatea/npm-run-all/blob/master/docs/node-api.md) - 一个 CLI 工具可以并行或者串行执行 script
- [live-server](https://github.com/tapio/live-server) - 一个简单的 http server 带有 reload 功能
- [node-portfinder](https://github.com/indexzero/node-portfinder) - 一个端口嗅探工具
- [update-notifier](https://github.com/yeoman/update-notifier) - Update notifications for your CLI app. cli 升级提醒工具
- [y18n](https://github.com/yargs/y18n) - yargs 基于 i18n 的一个包
- [signale](https://github.com/klauscfhq/signale) - Hackable console logger 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji
- [execa](https://github.com/sindresorhus/execa) - A better `child_process`
- [listr](https://github.com/SamVerschueren/listr) - Terminal task
- [commander.js](https://github.com/tj/commander.js) - 自动的解析命令和参数，合并多选项，处理短参，等等，功能强大，上手简单
- [Inquirer.js](https://github.com/SBoudrias/Inquirer.js) - A collection of common interactive command line user interfaces. 命令行询问库
- [enquirer](https://github.com/nasa/openmct) - 命令行 prompt 询问库，写 cli 的时候很有用
- [Qoa](https://github.com/klaussinani/qoa) 同上
- [ora](https://github.com/sindresorhus/ora) - Elegant terminal spinner 命令行 loading
- [chalk](https://github.com/chalk/chalk) - 命令行着色美化库
- [hygen](https://github.com/jondot/hygen) - 快速方便的创建代码 可以命令行创建预设的 template
- [ndb](https://github.com/GoogleChromeLabs/ndb) - node 调试
- [got](https://github.com/sindresorhus/got) - http 请求库 如果你觉得 request 太多的话 这是一个不错的选择
- [dumper.js](https://github.com/zeeshanu/dumper.js) - 能让你的 node console 更加的规整，方便调试
- [node-in-debugging](https://github.com/nswbmw/node-in-debugging) - node.js 调试指南
- [node-best-practices](https://github.com/i0natan/nodebestpractices) - node 最佳实践
- [fastscan](https://github.com/pyloque/fastscan) - node 敏感词库
- [fx](https://github.com/antonmedv/fx) - 命令行优化 JSON 输出
- [dataloader](https://github.com/facebook/dataloader) - 解决 Graphql 中的 N+1 查询问题
- [progress-estimator](https://github.com/bvaughn/progress-estimator) - 命令行 progress bar 进度条模拟库
- [Node.js 最佳实践](https://github.com/i0natan/nodebestpractices/blob/master/README.chinese.md)
- [grpc-web](https://github.com/grpc/grpc-web) - 前端直连 gRPC 服务
- [node-fetch](https://github.com/bitinn/node-fetch) - node 环境下轻量级 fetch 请求库
- [ink](https://github.com/vadimdemedes/ink) 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了
- [strapi](https://github.com/strapi/strapi/) 开源的解决方案来创建、部署和管理自己的 API
- [listr](https://github.com/SamVerschueren/listr) Terminal task list
- [dotenv](https://github.com/motdotla/dotenv) 通过.env 设置环境部变量 vue-cli 也依赖它

## GraphQL

- [prisma](https://www.prisma.io/docs/) - 让前端也能快速的写出
- [Apollo GraphQL](https://www.apollographql.com/) - 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便

## 有趣

- [the-bread-code](https://github.com/hendricius/the-bread-code) - 使用程序员的思维制作面包 ，比如制作中使用 A/B test,
  来比较那种做法更好。
- [build-your-own-x](https://github.com/danistefanovic/build-your-own-x) - 教你用各种语言实现 Bot Database Neural Network
- [javascript-algorithms ](https://github.com/trekhleb/javascript-algorithms) - 教你用前端知识认识各种算法
- [not-paid](https://github.com/kleampa/not-paid) - 如果你给人做网站，交过去以后对方没有付款，那么这个 JS 会把网站的透明度一天调低一点，直到看不见
- [nsfwjs](https://github.com/infinitered/nsfwjs) - 前端图片鉴黄，基于 Tensorflow
- [elevator.js](https://github.com/tholman/elevator.js) 我很喜欢的一个库，让一个 back-to-top 的效果有了一种坐复古电梯的感觉
- [app-ideas](https://github.com/florinpop17/app-ideas) 很多年轻人苦于缺少练手的项目，这个项目收集了不少点子，每个点子都有明确的目标和复杂资源。
- [WebGL-Fluid-Simulation](https://github.com/PavelDoGreat/WebGL-Fluid-Simulation) 很酷的 WebGL 交互

## 工具

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

## Webpack

- [webpackbar](https://github.com/nuxt/webpackbar) webpack 打包进度可视化
- [jarvis](https://github.com/zouhir/jarvis) webpack dashboard
- [webpack-chain](https://github.com/neutrinojs/webpack-chain) 通过 chain 风格 api 的方式修改 webpack 配置
- [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) 探测 webpack 各阶段的耗时
- [obsolete-webpack-plugin](https://github.com/ElemeFE/obsolete-webpack-plugin) 基于 browserslist 做浏览器升级提示
- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 提取 CSS 为单独文件
- [copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin) 复制额外的文件到输出目录
- [duplicate-package-checker-webpack-plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin) 检查是否存在重复依赖

## Mac

- [get-plain-text](https://itunes.apple.com/cn/app/get-plain-text/) - 能清除剪贴板里的格式 很实用
- [IINA](https://github.com/lhc70000/iina) - mac 平台感觉免费最好的播放器 强推
- [magnet](https://itunes.apple.com/cn/app/magnet/id441258766?mt=12&ign-mpt=uo%3D4) - 分屏管理
- [Xnip](https://zh.xnipapp.com/) - 方便好用的截图工具-支持截长图
- [Spectacle](https://www.spectacleapp.com/) - 窗口管理工具
- [vanilla](https://matthewpalmer.net/vanilla/) - 顶栏图标管理工具
- [Dozer](https://github.com/Mortennn/Dozer) - 一个开源的顶栏管理
- [腾讯电脑管家](https://mac.guanjia.qq.com/index_o.html) - 反正我用下来好觉得蛮好用的
- [mos](https://mos.caldis.me/) - 鼠标平滑滚动软件，很好用。免费开源
- [sequel pro](https://www.sequelpro.com/) - mysql 客户端 好用
- [Microsoft Remote Desktop Beta](https://itunes.apple.com/us/app/microsoft-remote-desktop/id715768417?mt=12#) - Mac 远程登录 Windows 调试神器
- [pap.er](http://paper.meiyuan.in/) - 专为 Mac 设计的壁纸应用
- [The Unarchive](https://theunarchiver.com/) - Mac 目前感觉最好用的免费解压软件
- [Tickeys](https://github.com/yingDev/Tickeys) - 让你用 Mac 键盘也能打出机械键盘的感觉
- [Beaker Browser](https://github.com/beakerbrowser/beaker) - P2P 开源浏览器 支持点对点发布文件，成为了文件传输工具，支持 DAT 对等协议
- [Gifski](https://github.com/sindresorhus/gifski-app) - 视频转 gif 工具
- [more](https://github.com/serhii-londar/open-source-mac-os-apps) - 更多优秀的 mac app 介绍
- [Motrix](https://github.com/agalwood/Motrix) - 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具

## Chrome 拓展

- [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) 油猴 神器
- [扩展管理器](https://chrome.google.com/webstore/detail/extension-manager/gjldcdngmdknpinoemndlidpcabkggco/related?utm_source=chrome-ntp-icon) 轻松管理扩展，就不用担心安装太多扩展了
- [visbug](https://github.com/GoogleChromeLabs/ProjectVisBug) 它可以帮助你改变 css，移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用
- [refined-github](https://github.com/sindresorhus/refined-github) 优化 github 默认功能和样式的 chrome 插件
- [ADB](https://chrome.google.com/webstore/detail/adb/dpngiggdglpdnjdoaefidgiigpemgage) chrome 真机调试安卓神器
- [Adblock Plus](https://chrome.google.com/webstore/detail/adblock-plus-free-ad-bloc/cfhdojbkjhnklbpkdaibdccddilifddb)
  免费广告拦截程序 这个应该不用说了，装机必备
- [Axure RP Extension](https://chrome.google.com/webstore/detail/axure-rp-extension-for-ch/dogkpdfcklifaemcdfbildhcofnopogp) 看原型必备
- [JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa) JSON 格式化 程序员必备
- [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 谷歌出品，检查网页综合性能评分，分析不足
- [二维码(QR 码)生成器](https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81qr%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8qr-code-generato/pflgjjogbmmcmfhfcnlohagkablhbpmg) 手机扫码神器
- [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) github 上看代码必备神器
- [OctoLinker](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) 能在 github 上看代码的时候 快速链接跳转到依赖的库
- [The Great Suspender](https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg) chrome 太吃内存了，当页面开的很多时候会很卡，它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了，当你想看是再重新加载
- [WEB 前端助手](https://chrome.google.com/webstore/detail/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8Bfehelper/pkgccpejnmalmdinmhkkfafefagiiiad) 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等
- [掘金](https://chrome.google.com/webstore/detail/%E6%8E%98%E9%87%91/lecdifefmmfjnjjinhaennhdlmcaeeeb) 目前我默认新开 tab 的默认页，可以刷刷新的文章或者项目，还不错。
- [沙拉查词](https://chrome.google.com/webstore/detail/%E6%B2%99%E6%8B%89%E6%9F%A5%E8%AF%8D-%E8%81%9A%E5%90%88%E8%AF%8D%E5%85%B8%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/cdonnmffkdaoajfknoeeecmchibpmkmg) 划词翻译插件
- [npmhub](https://github.com/npmhub/npmhub)在 README 下方显示 npm 依赖信息

## VS Code

- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) 查看你引入的依赖模块大小
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 自动补全 html 标签，如输入`<a>`将自动补全`</a>`
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 自动重命名 html 标签，如修改`<a>为<b>`，将自动修改结尾标签`</a>为</b>`
- [polacode](https://github.com/octref/polacode) 生产代码图片快照插件
- [vscode-leetcode](https://github.com/jdneo/vscode-leetcode) - 一个能让你在 vscode 中刷 LeetCode 的插件 算一个划水神器吧
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons) VS Code 必备吧，为文件添加炫图标

## 工程

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

# 网站

## 常看的网站

- [awesome-f2e-libs](https://github.com/sorrycc/awesome-f2e-libs) sorrycc 整理的个人关注使用的前端库
- [overreacted](https://overreacted.io/) react Dan 的个人博客，更新频率很高
- [DailyJS](https://medium.com/dailyjs)
- [codeburst](https://codeburst.io/)

## Github

- [github 短域名服务](https://git.io)
- [shields](https://shields.io/) Github README 里面的装逼小图标
- [Emoji](https://www.webpagefx.com/tools/emoji-cheat-sheet/) 方便平时写查找 emoji
- [emoji.muan](http://emoji.muan.co/#) 同上 而且更全
- [git-awards](http://git-awards.com/users/search?login=panjiachen) github ranking 没事可以查着玩玩
- [http://githubrank.com/](http://githubrank.com/) github 按照 followers 排名
- [github-rank](https://wangchujiang.com/github-rank/)同上，githubrank 基本算挂了已经，只能用这个新的
- [star-history](https://www.timqian.com/star-history/#PanJiaChen/vue-element-admin) 展示一个项目 Stars 增长规矩曲线
- [probot](https://github.com/probot/probot) 基于 github 做一个小机器人。可以做很多 workflow 的事情

## 开发

- [can i use](https://caniuse.com/) 前端常用网站了 查看不同属性和方法的兼容性
- [Squoosh](https://squoosh.app/) 谷歌出品在线免费图片压缩工具 神器
- [codesandbox-client](https://github.com/CompuIves/codesandbox-client) - 在线 web 开发容器
- [astexplorer](https://github.com/fkling/astexplorer) - 一个在线 ast 生成器
- [30 seconds of code](https://30secondsofcode.org/) 收集了许多有用的代码小片段
- [zeplin](https://app.zeplin.io/) 前端和设计师神器，有标注、Style Guide、版本管理、简单的团队协作，重点是前端不用写 css 了，复制就可以了。
- [iconfont](http://www.iconfont.cn/) 阿里出的图标库，非常实用，支持 svg、font、png 多种格式，基本现在所有图标都在上面找。
- [cssicon](http://cssicon.space/#/) 所有的 icon 都是纯 css 画的 缺点：icon 不够多
- [智图](http://zhitu.isux.us/) 腾讯出品 在线图片压缩 支持转成 webP 处理静态图片时候很好用
- [picdiet](https://www.picdiet.com/zh-cn) 另一个图片压缩网站
- [CSS triangle generator](http://apps.eky.hk/css-triangle-generator/) 帮你快速用 css 做出三角形
- [cssarrowplease](http://www.cssarrowplease.com/) 帮你做对话框三角的
- [clippy](http://bennettfeely.com/clippy/) 在线帮你使用 css clip-path 做出各种形状的图形
- [Regular Expressions](https://regex101.com/) 在线正则网站
- [jex](https://jex.im/regulex/) 正则可视化网站，配合上面的 Regular Expressions，写正则方便很多
- [jsfiddle](https://jsfiddle.net/) 在线运行代码网站 很不错，可惜要翻墙
- [codepan](https://codepan.net/) 在线运行代码网站 不用翻墙，可以自己部署
- [fiddle.md](https://fiddle.md/) 一个方便的在线共享 markdown 在线笔试题一般都用这个
- [jsdelivr](https://www.jsdelivr.com/) cdn 服务
- [unpkg](https://unpkg.com) cdn 服务
- [coderpad](https://coderpad.io/) 远程面试的神器，可以让面试者远程写代码 不过需要翻墙
- [icode](http://www.icode.live/) 有赞团队出品的 coderpad 可以互补，它不需要翻墙
- [codeadvice](https://www.codeadvice.io) 又一个让面试者远程写代码的网址
- [snipper](https://snipper.io) 一个代码协同的网站。你新建一个代码片段，然后把网址分享给其他人，就可以看到他们的实时编辑。
- [codesandbox](https://codesandbox.io/) 一个可以在线编辑且提供在线 demo 的网站 支持 vue react angular 多种框架 神器
- [codrops](https://tympanus.net/codrops/) 上面的交互都非常酷炫
- [bgremover](http://www.aigei.com/bgremover) 在线图片去底工具
- [photopea](https://www.photopea.com/) 一个网页端 Photoshop 很变态
- [bestofjs](https://bestofjs.org/) 查看一个项目增长经历，Star 数变化的网站，辅助你判断这个库的质量
- [stackblitz](https://stackblitz.com/) 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能
- [programmingfonts.org ](http://app.programmingfonts.org) 一个专门介绍编程字体的网站
- [早报](https://wubaiqing.github.io/zaobao/) 一个个人开发者的前端开发的分享日报
- [emoji-search](https://emoji.muan.co/#) 帮你快速找到能表达你情感的 emoji
- [gitmoji](https://github.com/carloscuesta/gitmoji) 通过 emoji 表达 git 的操作内容
- [starcharts](https://starcharts.herokuapp.com/PanJiaChen/vue-element-admin) 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
- [mockapi](https://www.mockapi.io/) 一个还不错的在线 mock 服务（可在线可视化编辑），可以满足大部分简单需求了
- [coder](coder.com) 在线版 VS Code
- [browserstack](https://www.browserstack.com/) 远程调整各种版本浏览器 兼容性问题
- [carbon](https://carbon.now.sh/) 根据源码生成图片 主要作用是让你打代表片段分享的时候更好看一点
- [clipboard2markdown](https://euangoddard.github.io/clipboard2markdown/) 将你所有复制进去的内容都转化为 markdown
- [grammarly](https://www.grammarly.com/) 英语写作检查工具
- [quickchart](https://quickchart.io/) 通过 URL 生成图表的开源服务
- [hipdf](https://www.hipdf.cn/) 一站式在线 PDF 解决方案
- [whimsical](https://whimsical.com) 画路程图
- [Lorem Picsum](https://picsum.photos/) 提供免费的占位图
- [sm.ms](https://sm.ms/) 免费图床
- [webpagetest](https://www.webpagetest.org/) 前端性能分析工具

## 设计

- [uimovement](https://uimovement.com/) 能从这个网站找到不少动画交互的灵感
- [awwwards](https://www.awwwards.com/)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
- [dribbble](https://dribbble.com/) 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面招的
- [Bēhance](https://www.behance.net/) dribbble 是设计师的微博，Bēhance 是设计师的博客
- [Logojoy](https://logojoy.com/) 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
- [brandmark](http://brandmark.io/) 另一个在线制作 logo 网站
- [instant](https://instantlogodesign.com/) 又一个 logo 制作网站
- [logo-maker](https://www.designevo.com/logo-maker/) 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
- [coolors](https://coolors.co/) 帮你在线配色的网站 你能找到不少配色灵感
- [colorhunt](http://colorhunt.co/) 另一个配色网站
- [uigradients](https://uigradients.com/#SummerDog) 渐变色网站
- [designcap](https://www.designcap.com) 在线海报设计
- [Flat UI 色表](https://flatuicolors.com/) Flat UI 色表
- [0to255](https://www.0to255.com/) 颜色梯度
- [Ikonate](https://github.com/mikolajdobrucki/ikonate) 提供免费的图标 icons
- [remixicon](https://remixicon.com/) 又一个提供免费图标 icons
- [feather](https://github.com/feathericons/feather) 免费的 icons
- [nord ](https://github.com/arcticicestudio/nord) 北欧性冷淡风主题配色
- [Unsplash](https://unsplash.com/) 提供免费的高清图片
- [colorkitty](https://colorkitty.com/) 从你的图片中提取配色

## 有趣

- [帮你百度一下](http://www.baidu-x.com/) 可以 [点我测试一下](http://www.baidu-x.com/?q=%E5%92%8C%E8%B0%90%E6%9C%89%E7%88%B1%E5%AF%8C%E5%BC%BA)-
- [国际版](http://lmgtfy.com/) 同`帮我百度一下`-[点我测试一下](http://lmgtfy.com/?q=a)-
- [wallhaven](https://alpha.wallhaven.cc/) 壁纸网站-
- [URL 地址播放 Emojis 动画](http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/#%F0%9F%8C%96) 在地址栏里面播放 emoji
- [Can't Unsee](https://cantunsee.space/) 强烈建议前端、客户端、UI 开发的同学玩下，检查一下自己对设计稿的敏感度怎么样
- [ggtalk](https://talk.swift.gg/) 平时一直在听的一个技术博客
- [awesome-comment](https://github.com/Blankj/awesome-comment) 里面收集了很多有趣的代码注释
- [text-img](https://www.text-image.com/index.html) 都将图片转化为 ascii 用来写注释
- [weird-fonts](https://github.com/beizhedenglong/weird-fonts) 将普通字母转化为 特殊 unicode
- [snake](https://github.com/epidemian/snake) 在地址栏里面玩贪吃蛇
- [zero-width-lib](https://github.com/yuanfux/zero-width-lib) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意

## 交互

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

## Css

- [css-tricks](https://css-tricks.com/) 一个学习 css 不错的网站 有很多有意思的 demo

## 教程

- [npx](https://egghead.io/courses/execute-npm-package-binaries-with-the-npx-package-runner) 教你怎么合理的使用 npx

- [hacksplaining](https://www.hacksplaining.com/lessons) 网络安全学习网站

## 产品

- [产品大牛](http://www.pmdaniu.com/) 什么有很多完整的产品原型可以借鉴

- [磨刀](https://modao.cc/pricing) 快速出 ui 原型

## 实用

[typeform](https://admin.typeform.com/signup) 一个国外的在线调查问卷网站

## Talk

[peerigon-talks](https://github.com/peerigon/talks) 收集了不少有意思的 talks

## 算法

[leetcode](https://github.com/azl397985856/leetcode) 用 js 刷 leetcode