Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/PanJiaChen/awesome-bookmarks

:sparkling_heart: A curated list of awesome things
https://github.com/PanJiaChen/awesome-bookmarks

List: awesome-bookmarks

Last synced: about 1 month ago
JSON representation

:sparkling_heart: A curated list of awesome things

Awesome Lists containing this project

README 

        


  




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



gitee 访问地址(github.io 有时候在国内访问会很慢)：[awesome-bookmarks](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)

  - [文档](#%E6%96%87%E6%A1%A3)

  - [工具库](#%E5%B7%A5%E5%85%B7%E5%BA%93)

  - [Node](#node)

    - [工具库](#%E5%B7%A5%E5%85%B7%E5%BA%93-1)

    - [命令行](#%E5%91%BD%E4%BB%A4%E8%A1%8C)

    - [文件处理](#%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86)

    - [调试](#%E8%B0%83%E8%AF%95)

  - [GraphQL](#graphql)

  - [工具](#%E5%B7%A5%E5%85%B7)

  - [Webpack](#webpack)

  - [移动端](#%E7%A7%BB%E5%8A%A8%E7%AB%AF)

  - [性能优化](#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96)

  - [请求处理](#%E8%AF%B7%E6%B1%82%E5%A4%84%E7%90%86)

  - [工程](#%E5%B7%A5%E7%A8%8B)

  - [Mac](#mac)

  - [录制](#%E5%BD%95%E5%88%B6)

  - [Chrome 拓展](#chrome-%E6%8B%93%E5%B1%95)

  - [VS Code](#vs-code)

    - [主题](#%E4%B8%BB%E9%A2%98)

    - [字体](#%E5%AD%97%E4%BD%93)

  - [编辑器和 Terminal](#%E7%BC%96%E8%BE%91%E5%99%A8%E5%92%8C-terminal)

    - [zsh 插件](#zsh-%E6%8F%92%E4%BB%B6)

  - [开发常用软件](#%E5%BC%80%E5%8F%91%E5%B8%B8%E7%94%A8%E8%BD%AF%E4%BB%B6)

  - [有趣](#%E6%9C%89%E8%B6%A3)

- [网站](#%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)

  - [生活](#%E7%94%9F%E6%B4%BB)

  - [Talk](#talk)

  - [算法](#%E7%AE%97%E6%B3%95)

  - [Typescript](#typescript)



# 推荐库



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



## 前端常用



- [**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 奇舞团出的跨平台绘图对象模型

- [**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

- [**runkit**](https://runkit.com) 一个基于 node 的在线 playground

- [**chart.xkcd**](https://github.com/timqian/chart.xkcd) 手绘风格的图表库

- [**sketchviz**](https://sketchviz.com/new) 手绘风格流程图

- [**pagemap**](https://github.com/lrsjng/pagemap) Mini map for web pages 页面导航图

- [**commonmark.js**](https://github.com/commonmark/commonmark.js) parser and renderer markdown

- [**body-scroll-lock**](https://github.com/willmcpo/body-scroll-lock) 解决滚动穿透问题

- [**lodash**](https://github.com/lodash/lodash) 前端工具函数集合

- [**dayjs**](https://github.com/iamkun/dayjs) 时间处理库，不过大部分情况下我还是用自己的封装的函数

- [**lightgallery**](https://github.com/sachinchoolur/lightgallery.js) 图片预览组件

- [**photoswipe**](https://github.com/dimsemenov/photoswipe) 图片预览组件，支持移动端

- [**darken**](https://github.com/ColinEspinas/darken) 页面黑夜模式切换

- [**mitt**](https://github.com/developit/mitt) 轻量级 pub/sub

- [sanitize-html](https://github.com/apostrophecms/sanitize-html) html 过滤库，防 xss

- [DOMPurify](https://github.com/cure53/DOMPurify) 比 sanitize-html 更轻量，建议一般业务用这个



## 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

- [**roughViz**](https://github.com/jwilber/roughViz) rough 风格的图表库 手绘风格的图表库

- [**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 引擎

- [**leonsans**](https://github.com/cmiscm/leonsans) 酷炫的 字体 动画 geometric sans-serif typeface made with code

- [**css-doodle**](https://github.com/css-doodle/css-doodle) A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件



## 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

- [**buefy**](https://github.com/buefy/buefy) 适配移动端的 vue 组件库 看着还挺舒服的

- [**vxe-table**](https://github.com/xuliangzhan/vxe-table)vue 表格解决方案，还没具体用过看着的确解决了其它 table 组件的一些问题

- [**Vue 测试指南**](https://lmiller1990.github.io/vue-testing-handbook/zh-CN/) vue 测试指南



## 实践库



- [**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 收集库



## 文档



- [**vuepress**](https://github.com/vuejs/vuepress) vue 官方出品的文档工具

- [**docsify**](https://github.com/docsifyjs/docsify) 轻量级文档工具，但其是运行时编译的，所以 seo 不好

- [**GitBook**](https://www.gitbook.com/) 除了编译慢没啥毛病

- [**mdx**](https://github.com/mdx-js/mdx) jsx + markdown

- [**docz**](https://github.com/pedronauck/docz)

- [**storybook**](https://github.com/storybooks/storybook)



## 工具库



- [**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

- [**mddir**](https://github.com/JohnByrneRepo/mddir) 生成 markdown file/folder structure 目录结构 tree

- [**imagemin**](https://github.com/imagemin/imagemin) 图片压缩库

- [**inline-css**](https://github.com/jonkemp/inline-css#readme) css covert to inline style 在生成 email 格式 html 的时候特别有用

- [**babel-plugin-try-catch-error-report**](https://github.com/mcuking/babel-plugin-try-catch-error-report) 全局自动 catch 错误进行数据上报

- [**StreamSaver.js**](https://github.com/jimmywarting/StreamSaver.js) 大文件下载，不用像 saveAs 那样先读到内存中再下载

- [**mammoth.js**](https://github.com/mwilliamson/mammoth.js) Convert Word documents (.docx files) to HTML

- [**npkill**](https://github.com/voidcosmos/npkill) 列出所有 node_modules，并支持删除

- [**strapi**](https://github.com/strapi/strapi/) 开源的解决方案来创建、部署和管理自己的 API，通过图形化界面进行操作



## Node



### 工具库



- [**cheerio**](https://github.com/cheeriojs/cheerio) 用类 jQuery 语法处理 HTML

- [**node-semver**](https://github.com/npm/node-semver) node 版本验证库

- [**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)node 依赖升级提醒工具

- [**fastscan**](https://github.com/pyloque/fastscan) node 敏感词库

- [**hygen**](https://github.com/jondot/hygen) 快速方便的创建代码 可以命令行创建预设的 template

- [**plop**](https://github.com/plopjs/plop) 同上，代码生成工具

- [**ink**](https://github.com/vadimdemedes/ink) 是一个 React 的命令行渲染器，命令行界面可以像写页面那么写了

- [**dotenv**](https://github.com/motdotla/dotenv) 通过.env 设置环境部变量 vue-cli 也依赖它

- [**patch-package**](https://github.com/ds300/patch-package) 优雅的修改 node_modules 中的依赖库

- [**Playwright**](https://github.com/microsoft/playwright) 同 Puppeteer 团队出品，但区别是它支持 Chrome、Safari、Firefox、Edge

- [**tree-cli**](https://github.com/MrRaindrop/tree-cli) node 根据目录结构生成 tree

- [**tree-node-cli**](https://github.com/yangshun/tree-node-cli) node 根据目录结构生成 tree

- [**open**](https://github.com/sindresorhus/open) node 打开浏览器



### 命令行



- [**signale**](https://github.com/klauscfhq/signale) 一个 Node 的日志格式库，自带 16 个级别，可以定制颜色和 Emoji，可扩展的日志记录器

- [**consola**](https://github.com/nuxt/consola) 优雅的命令行 console logger `vuepress` 也使用了它

- [**chalk**](https://github.com/chalk/chalk) 命令行着色美化库

- [**progress-estimator**](https://github.com/bvaughn/progress-estimator) 命令行 progress bar 进度条模拟库

- [**ora**](https://github.com/sindresorhus/ora) Elegant terminal spinner 命令行 loading

- [**listr**](https://github.com/SamVerschueren/listr) Terminal task 命令行任务列表

- [**yargs**](https://github.com/yargs/yargs) 命令行参数解析

- [**y18n**](https://github.com/yargs/y18n) yargs 基于 i18n 的一个包

- [**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) 同上

- [**cli-progress**](https://github.com/AndiDittrich/Node.CLI-Progress) Terminal Progress Bar

- [**cli-table**](https://github.com/Automattic/cli-table) tables for the CLI

- [**node-notifier**](https://github.com/mikaelbr/node-notifier) 在 NodeJS 环境中，可以很方便的唤起 notifier 通知



### 文件处理



- [**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) 文件查找

- [**chokidar**](https://github.com/paulmillr/chokidar) node 监听文件变化的库

- [**fs-extra**](https://github.com/jprichardson/node-fs-extra) fs-extra 模块是系统 fs 模块的扩展，提供了更多便利的 API，并继承了 fs 模块的 API

- [**execa**](https://github.com/sindresorhus/execa) 比 child_process 好用，返回 Promise

- [**npm-run-all**](https://github.com/mysticatea/npm-run-all) 一个 CLI 工具可以并行或者串行执行 script 指令

- [**memfs**](https://github.com/streamich/memfs) memory-fs 的替代品，将文件放在内存中优化读写，webpack 依赖



### 调试



- [**fx**](https://github.com/antonmedv/fx) 命令行优化 JSON 输出

- [**dumper.js**](https://github.com/zeeshanu/dumper.js) 能让你的 node console 更加的规整，方便调试

- [**ndb**](https://github.com/GoogleChromeLabs/ndb) node 调试

- [**why-is-node-running**](https://github.com/mafintosh/why-is-node-running) 查看 node 为什么在运行

- [**siege**](https://www.joedog.org/siege-home/) 压测工具

- [**node-in-debugging**](https://github.com/nswbmw/node-in-debugging) node.js 调试指南

- [**node-best-practices**](https://github.com/i0natan/nodebestpractices) node 最佳实践

- [**Node.js 最佳实践**](https://github.com/i0natan/nodebestpractices/blob/master/README.chinese.md)



## GraphQL



- [**prisma**](https://www.prisma.io/docs/) 让前端也能快速的写出

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

- [**dataloader**](https://github.com/facebook/dataloader) 解决 Graphql 中的 N+1 查询问题



## 工具



- [**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 很强大

- [**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

- [**build-tracker**](https://github.com/paularmstrong/build-tracker) 构建大小追踪 记录你多个版本构建后文件大小的变化

- [**zan-proxy**](https://github.com/youzan/zan-proxy/blob/master/README.zh-CN.md) 本地调试线上环境的工具

- [**mjml**](https://github.com/mjmlio/mjml) 一个让发 email 更简单的框架。定义了一套自己的语法，你用这套语法写邮件，然后编译成 HTML。

- [**any-rule**](https://any86.github.io/any-rule/) 正则大全

- [**outline**](https://github.com/outline/outline) 一个免费开源的库，能让你快速搭建自己的 wiki



## 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) 检查是否存在重复依赖

- [**cssnano**](https://github.com/cssnano/cssnano) CSS 压缩

- [**bundle-buddy**](https://github.com/samccone/bundle-buddy) webpack bundle 依赖分析



## 移动端



- [**fastclick**](https://github.com/ftlabs/fastclick) 解决移动端一些点击问题



## 性能优化



- [**workbox**](https://github.com/googlechrome/workbox) PWA 方案，Google 出品



## 请求处理



- [**axios**](https://github.com/axios/axios) 目前最常见的请求库

- [**got**](https://github.com/sindresorhus/got) http 请求库 如果你觉得 request 太多的话 这是一个不错的选择

- [**request**](https://github.com/request/request) 老牌请求库 -[\*whatwg-fetch\*\*](https://github.com/github/fetch) fetch 请求库

- [**grpc-web**](https://github.com/grpc/grpc-web) 前端直连 gRPC 服务

- [**node-fetch**](https://github.com/bitinn/node-fetch) node 环境下轻量级 fetch 请求库

- [**reqwest**](https://github.com/ded/reqwest)



## 工程



- [**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) airbnb 约束风格

- [**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) 跨平台的环境变量声明

- [**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) 监听文件变动然后做一些事

- [**tasksfile**](https://github.com/pawelgalazka/tasksfile) 在 node 中执行 script 脚本



## 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、磁力链、百度网盘的下载工具

- [**iPic**](https://apps.apple.com/cn/app/ipic-markdown-%E5%9B%BE%E5%BA%8A-%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E5%B7%A5%E5%85%B7/id1101244278?mt=12)这个应用可以让你方便地上传图片到各种图床

- [**Image2Icon**](http://www.img2icnsapp.com/)

- [**hidden**](https://github.com/dwarvesf/hidden) 是用来帮助你隐藏 macOS 菜单栏上那些不常用的应用图标



## 录制



- [**licecap**](https://www.cockos.com/licecap/) gif 录制，简洁好用，之前都用这个录制

- [**kap**](https://getkap.co/) 现在都用这个录制 gif，还支持导出 mp4，录制的 fps 很高

- [**KeyCastr**](https://github.com/keycastr/keycastr) 按键显示，录制的时候显示你的按键



## 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 标签，如输入``将自动补全``

- [**Auto Rename Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 自动重命名 html 标签，如修改`为`，将自动修改结尾标签`为`

- [**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 必备吧，为文件添加炫图标

- [**CodeSnap**](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap) 生产代码截图



### 主题



[**官方主题页**](https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs) 可以选择自己喜欢的主题

[**one-monokai**](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) 我用的是这个主题，很多年了



### 字体



- [**FiraCode**](https://github.com/tonsky/firacode)

- [**Dank Mono**](https://dank.sh/)

- [**Operator Mono**](https://www.typography.com/blog/introducing-operator)



## 编辑器和 Terminal



- [**Go2shell**](https://zipzapmac.com/Go2Shell) 在当前文件夹打开 shell

- Terminal 用 [**iTerm2**](https://www.iterm2.com/) + [**zsh**](https://en.wikipedia.org/wiki/Z_shell) + [**oh-my-zsh**](https://github.com/robbyrussell/oh-my-zsh) 的组合，主题是 [robbyrussell](https://github.com/robbyrussell/oh-my-zsh/blob/master/themes/robbyrussell.zsh-theme)



### zsh 插件



- [**Homebrew**](https://brew.sh/index_zh-cn) 必装

- [**autojump**](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/autojump) 实现目录间快速跳转，想去哪个目录直接 j + 目录名，不用在频繁的 cd 了

- [**zsh-autosuggestions**](https://github.com/zsh-users/zsh-autosuggestions) 命令自动建议和补全

- [**zsh-syntax-highlighting**](https://github.com/zsh-users/zsh-syntax-highlighting) 命令行语法高亮

- [**history**](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/history) 命令行记录

- [**zsh-git-prompt**](https://github.com/olivierverdier/zsh-git-prompt) git 分支信息提示



## 开发常用软件



- [**Github Desktop**](https://github.com/desktop/desktop)管理 github 仓库的变更和 PR

- [**runjs**](https://runjs.dev/) js 运行沙盒，写 test case 或者面试当场写代码的时候很有用

- [**Charles**](https://www.charlesproxy.com/) 抓包用，支持 https

- [**Google Chrome**](https://www.google.com/chrome/) 前端必备没啥好说的

- [**ColorSnapper2**](https://colorsnapper.com/) 取色工具

- [**postman**](https://www.getpostman.com/) api 调试工具

- [**Sequel Pro**](https://www.sequelpro.com/) MySQL 界面管理工具

- [**KeepingYouAwake**](https://github.com/newmarcel/KeepingYouAwake) 可保证系统不自动休眠，挂机跑脚本很有用



## 有趣



- [**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 交互

- [**react-kawaii**](https://github.com/miukimiu/react-kawaii) 一个非常可爱的 React 卡通人脸库，很有意思

- [**chart-race-react**](https://github.com/Mckinsey666/chart-race-react) 图表竞赛 长条图赛跑动画 在微博或者 b 站这种类型视频很火

- [**98.css**](https://jdan.github.io/98.css/#tree-view) windows 98 主题分格 css



# 网站



## 常看的网站



- [**overreacted**](https://overreacted.io/) react Dan 的个人博客，更新频率很高（redux 作者，react 核心开发）

- [**DailyJS**](https://medium.com/dailyjs)

- [**codeburst**](https://codeburst.io/)

- [**阮一峰的网络日志**](http://www.ruanyifeng.com/blog/) 阮老师出的东西还是值得一读的

- [**InfoQ**](https://www.infoq.cn/topic/Front-end) 文章的质量比一般网站的高不少

- [**鱼塘**](https://www.printf520.com/hot.html) 划水网站 收集了很多网站 当天热门文章

- [**每日时报**](https://wubaiqing.github.io/zaobao/) 定期会分享一些库和工具

- [**awesome-f2e-libs**](https://github.com/sorrycc/awesome-f2e-libs) sorrycc 整理的个人关注使用的前端库



## 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 的事情



## 开发



- [**产品/设计师/独立开发者的资源库**](https://maliquankai.com/designnav/) 很全很强大

- [**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/) 前端性能分析工具

- [**网络安全的教程**](hacksplaining.com/lessons)

- [**Ananas Analytics Desktop**](https://ananasanalytics.com/) 一站式 数据可视化

- [**“零宽” 长度的短网址服务**](https://zws.im) 利用“零宽字符”来缩短 url，还支持统计

- [**hotjar**](https://www.hotjar.com/) 用户调研 支持用户反馈 录屏 heatMap

- [**狼叔：如何正确的学习 Node.js**](https://github.com/i5ting/How-to-learn-node-correctly)

- [**独角兽公司榜单**](https://dujiaoshou.io/) 感觉大家想去大公司的时候，可以看看排名

- [**中国传统颜色手册**](https://colors.ichuantong.cn/)

- [**coderlane**](https://coderlane.net/) 远程视频面试，目前使用的是牛客，这个工具待考察

- [excalidraw](https://excalidraw.com/) 手绘风格流程图，强推

- [cwim](https://github.com/spencerwooo/cwim) Count Words Inside a Markdown file 统计字数和预期阅读时间



## 设计



- [**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/) 从你的图片中提取配色

- [**design.youzan**](design.youzan.com) 有赞设计原则

- [**undraw**](https://undraw.co/illustrations) 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。



## 有趣



- [**帮你百度一下**](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) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配，很有创意

- [**abbreviations**](https://www.abbreviations.com/) 查看一个简写是什么意思的网站

- [**magi**](https://magi.com/) ai 搜索神器，超屌

- [**诺基亚短信图片生成器**](https://zzkia.noddl.me:8020/)



## 交互



- [**微交互**](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) 网络安全学习网站

- [**mobile-web-best-practice**](https://github.com/mcuking/mobile-web-best-practice) 移动 web 最佳实践

- [**vanillawebprojects**](https://github.com/bradtraversy/vanillawebprojects) 通过纯前端的手段实现一些小项目，适合入门

- [**Think Python**](https://codingpy.com/books/thinkpython2/index.html) 还不错的 Python 入门教程

- [**Node.js CLI Apps Best Practices**](https://github.com/lirantal/nodejs-cli-apps-best-practices) 叫你如何写好一个 node cli 工具

- [**SQL Murder Mystery**](https://mystery.knightlab.com/walkthrough.html) 一个英文的 SQL 初级教程，以游戏的方式，让你利用学到的 SQL 概念和命令来找出谋杀凶手

- [**html-dom**](https://github.com/phuoc-ng/html-dom) 一些常用的 dom 或者原生 js 操作判断，挺实用的

- [**TypeScript**](https://ts.xcatliu.com/) TypeScript 入门教程，很不错，推荐初学者学习

- [**Webpack 知识图谱**](https://tsejx.github.io/webpack-guidebook/) webpack 相关教程和原理分析还不错



## 产品



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

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



## 实用



- [**写作猫**](https://xiezuocat.com/#/) 可以通过 AI 的方式，帮你检查错别字，很有效的一个工具

- [**draw**](https://www.draw.io/) 在线 web 画流程图

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

- [**VideoFk**](https://www.videofk.com/) VideoFk 视频在线解析下载

- [**全历史**](https://www.allhistory.com/) 历史内容聚合网站

- [**UzerMe**](https://www.uzer.me/) 云端办公工具

- [**SoBooks**](https://sobooks.cc/) 强大的电子书资源网站

- [**稿定设计**](https://www.gaoding.com/) 键式设计工具+智能抠图

- [**pichance**](https://pichance.com/) 一个将低分辨率图片增强为高分辨率的工具，可以将分辨率增加 4 倍（即长和宽各增加一倍）

- [**bigjpg**](http://bigjpg.com/) 放大图片的神器 通过神经网络可以放大图片并能降噪

- [**大力盘**](https://dalipan.com) 百度网盘搜索

- [**ENFI 下载器**](https://www.macbl.com/app/internet/enfi) 不限速下载器

- [**来画视频**](https://www.laihua.com/) 像做 PPT 一样做短视频

- [**Arkie 海报制作工具**](https://www.arkie.cn/)

- [**优品 PPT**](http://www.ypppt.com/)

- [**比格 PPT**](http://www.tretars.com)

- [**高清免费图片**](https://www.pexels.com/)

- [**高清免费图片 2**](https://unsplash.com/)

- [**历史价格查询**](http://www.lsjgcx.com/) 淘宝，京东等商品历史价格，能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器

- [**Firefox Send**](https://send.firefox.com/) 文件分享服务，下载一次或者到期即焚，在当前网络监管下很实用的服务

- [**time.graphics**](https://time.graphics/editor) 在线 milestone timeline 生成器

- [**processon**](https://www.processon.com/) 免费在线作图，支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等

- [**龙轩导航**](http://ilxdh.com/) 一个总结了不少实用网站的导航



## 生活



- [**Cook**](https://cook.yunyoujun.cn/) 居家烧饭神器，智能根据配菜生成菜谱还附带教学视频



## Talk



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



## 算法



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



## Typescript



- [**TypeScript 入门教程**](https://ts.xcatliu.com/) 推荐阅读

- [**深入理解 TypeScript**](https://jkchao.github.io/typescript-book-chinese/#why/) 深入理解 ts