本项目为个人技术收藏集,里面会不定期分享一些作者平时用到的一些库,或者常用的网站和小工具。
如果你有好的推荐你可以提 issue 或者 pr 来告诉作者
# 推荐库
这里主要推荐一下自己平时常用,提高效率的一些库和软件。
# 前端常用
- sweetalert2 (opens new window) 一个自适应,且自定义性强的弹出框(零依赖)
- tippy.js (opens new window) 最著名的 tooltip/popover library
- text-mask (opens new window) 可以让 input 按照规则输入(如电话,email,日期,信用卡等),特殊格式 input
- dinero.js (opens new window) 用来创建、计算和格式化货币价值的不可变的框架,支持国际化
- lerna (opens new window) 大项目版本控制工具,项目中可以有多个 package.json 文件
- img-2 (opens new window) 一个提高图片加载性能和体验的库,懒加载使用 web worker 模糊预览
- fingerprintjs (opens new window) 是一个快速的浏览器指纹库,通浏览环境的一系列配置生成 id
- ajv (opens new window) 一个 json schema 验证的库
- dayjs (opens new window) 一个轻量级类 moment.js API 时间库
- primjs (opens new window) 让页面支持代码高亮
- ReLaXed (opens new window) 一个将 document html 转成 PDF 的工具
- uppy (opens new window) 一个很好看的也很好用的 前端上传库
- Filepond (opens new window) 一个小巧的文件上传库
- tui-calendar (opens new window) 功能全面的日程安排日历控件,还支持拖拽
- tui.editor (opens new window) markdown 所见即所得编辑器
- tabler (opens new window) 基于 Bootstrap 4 的 Dashboard UI Kit 和美观 高颜值 ui 模板
- pulltorefresh.js (opens new window) 下个下拉刷新插件
- lulu (opens new window) 腾讯阅文基于 jQuery,针对 PC 网站 IE8+(peak 主题)的前端 UI 框架
- chancejs (opens new window) 生成随机数据的库
- spritejs (opens new window) 360 奇舞团出的跨平台绘图对象模型
- tui.image-editor (opens new window) 一个功能齐全的在线图片编辑,基于 canvas
- nanoid (opens new window) 前端轻量 unique string ID 生成库
- rxdb (opens new window) 一款开源的快速、灵活的客户端数据库,支持各种浏览器以及 NodeJS,Electron、React 等等,是 PouthDB 之上的一个封装库
- percollate (opens new window) 命令行工具 能将网页转换成 pdf
- rawact (opens new window) 一个 babel 插件,把 react 组件转为原生 dom
- irondb (opens new window) 是一个浏览器 key-value 储存的封装库,把 Cookies、IndexedDB、LocalStorage、SessionStorage 统一成一个接口。它的最大特色就是数据冗余机制,即使某种底层储存机制失效,它可以从其他机制恢复数据。
- big.js (opens new window) 解决 js 浮点数问题。 主要就是 Big Number 或者小数点温柔
- bignumber.js (opens new window) 同上
- stickybits (opens new window) CSS 的 position: sticky 是一个很有用的设置,但是老的浏览器不支持。这个 JS 库是该功能的垫片库。
- react-jsonschema-form (opens new window) Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
- cleave.js (opens new window) 用于在输入时格式化输入内容(信用卡格式、日期等)
- shiny (opens new window) 在手机设备上模拟光的反射效果。 支持 DeviceMotion 事件
- cloudquery (opens new window) Turn any website to serverless API
- A-Programmers-Guide-to-English (opens new window) 专为程序员编写的英语学习指南。
- rrweb (opens new window) 一个可以记录你页面中所有操作的库
- nodeppt (opens new window) markdown 写 ppt
- flexsearch (opens new window) 能让你更加高效和快速的检索文本内容
- public-apis (opens new window) 汇集了市面上一些对外免费开放的 api,做一些自己练手 app 的时候很好用。
- scroll-hint (opens new window) 用于提示用户页面可以左右滑动的一个提示库
- fuse.js (opens new window) 轻量级前端模糊查询库 非常的好用
- FileSaver.js (opens new window) 文件下载插件 很多时候下载会有兼容性问题,它能帮你解决这些问题
- instant.page (opens new window) 一个判断用户行为 预测提前加载页面的库
- screenfull.js (opens new window) 浏览器全屏插件 解决了不少兼容性问题
- VuePress (opens new window) 本网站就是基于它实现的,简单方便的静态网站生成器
- selection (opens new window) 可视化选择页面元素的库
- scroll-out (opens new window) 滚动效果(滚动视差)的框架,框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配
- gpu.js (opens new window) 通过将 js 转为特定的 language,利用 GPU 来执行,大大提高了执行性能和速度
- pressure (opens new window) 前端实现 3D Touch
- hammer (opens new window) 移动端手势库
- AlloyFinger (opens new window) 腾讯出的手势库
- lowdb (opens new window) LowDB 是一个本地 JSON 数据库,基于 Lodash 开发的
- JSON-server (opens new window) 可以配合 LowDB 使用 快速搭建一个 REST API
- lunr.js (opens new window) 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索
- he (opens new window) 一个前端 encoder/decoder 库
- grade (opens new window) 一个可以根据你的 图片 调整底色的插件
- pretty-bytes (opens new window) 将字节转换成可以读的字符串,比如 1337 个字节,会显示成 1.34 KB
- runkit (opens new window) 一个基于 node 的在线 playground
- chart.xkcd (opens new window) 手绘风格的图表库
- sketchviz (opens new window) 手绘风格流程图
- pagemap (opens new window) Mini map for web pages 页面导航图
- commonmark.js (opens new window) parser and renderer markdown
- body-scroll-lock (opens new window) 解决滚动穿透问题
- lodash (opens new window) 前端工具函数集合
- dayjs (opens new window) 时间处理库,不过大部分情况下我还是用自己的封装的函数
- lightgallery (opens new window) 图片预览组件
- photoswipe (opens new window) 图片预览组件,支持移动端
- darken (opens new window) 页面黑夜模式切换
- mitt (opens new window) 轻量级 pub/sub
- sanitize-html (opens new window) html 过滤库,防 xss
- DOMPurify (opens new window) 比 sanitize-html 更轻量,建议一般业务用这个
# Css && 动画
- animate.css (opens new window) 最有名的动画效果库
- magic.css (opens new window) css 动画效果库 类似 animate.css
- popmotion (opens new window) 一个函数式声明前端动画库
- NES.css (opens new window) 任天堂主题风格 css 库
- particles.js (opens new window) 前端实现颗粒粒子的动画效果库,比较炫酷,但相对的也比较吃性能
- PaperCSS (opens new window) 手绘风格感觉 css 库
- rough (opens new window) 基于 Canvas 的手绘风格图形库
- wired-elements (opens new window) 基于 rough.js 分装 button input radio 等组件。它的底层是 Web components
- roughViz (opens new window) rough 风格的图表库 手绘风格的图表库
- matter-js (opens new window) web 物理引擎
- micron (opens new window) 通过在元素上绑定属性从而实现动画效果的库
- direction-reveal (opens new window) 根据鼠标进入位置,展现从不同方向 展现 hover 效果
- laxxx (opens new window) 滚动特效库 轻量级 压缩完 2kb
- cssfx (opens new window) 优雅的 CSS 动画效果,开箱即用
- zdog (opens new window) 3D engine 引擎
- leonsans (opens new window) 酷炫的 字体 动画 geometric sans-serif typeface made with code
- css-doodle (opens new window) A web component for drawing patterns with CSS 一个用于使用 CSS 绘制图案的 Web 组件
# Vue
- vue-multiselect (opens new window) select 组件 目前 vue 里面用过最好用的
- Vue.Draggable (opens new window) DnD 拖拽组件 基于 Sortable.js 的 vue 版本
- vue-sauce (opens new window) 一个可以展示 vue 源码的指令
- vue-smooth-dnd (opens new window) Vue wrappers components for smooth-dnd
- vuegg (opens new window) 一个 vue 可视化拖拽界面生成器
- vee-validate (opens new window) 基于 vue 的验证,能验证的内容比较全
- vuesax (opens new window) 一个很漂亮的基于 vue 的 ui 框架
- vue-analytics (opens new window) 基于 vue 的 谷歌统计封装
- vue-virtual-scroller (opens new window) 基于 vue 的虚拟列表无限滚动
- vue-content-placeholders (opens new window) 页面龙骨 skeleton
- buefy (opens new window) 适配移动端的 vue 组件库 看着还挺舒服的
- vxe-table (opens new window)vue 表格解决方案,还没具体用过看着的确解决了其它 table 组件的一些问题
- Vue 测试指南 (opens new window) vue 测试指南
# 实践库
- Jasonette (opens new window) 一个用 json 来构建 hybrid App 的框架
- crate (opens new window) 一个 react 全栈练习(pc,mobile,rn,api) demo,适合入门拿来练手
- react-in-patterns (opens new window) 一本开源教你如何写 react 的书
- hocs (opens new window) react 相关 hoc 收集库
# 文档
- vuepress (opens new window) vue 官方出品的文档工具
- docsify (opens new window) 轻量级文档工具,但其是运行时编译的,所以 seo 不好
- GitBook (opens new window) 除了编译慢没啥毛病
- mdx (opens new window) jsx + markdown
- docz (opens new window)
- storybook (opens new window)
# 工具库
- live-server (opens new window) 可以快速启一个本地 dev 服务 并且支持自动刷新的 http server
- serve (opens new window) 快速起本地静态服务
- picojs (opens new window) js 人脸识别库
- es-checker (opens new window) 检查当前环境对 ES6 支持的情况。支持浏览器和 node.js
- merge-images (opens new window) 图片合成,利用
canvas
能将几张图片合成一张 - fabric.js (opens new window) 基于 canvas 创建交互式的图片编辑界面非常适合用来做图片合成类工作。
- phaser (opens new window) 这是一个为桌面和移动浏览器开发 HTML5 游戏的快速开源框架。 你可以为 iOS、 Android 和不同的本地应用程序创建游戏。
- purifycss (opens new window) 移除没使用到的 css
- dropcss (opens new window) 同上
- fast-cli (opens new window) 命令行测试下载上传速度
- @pika/web (opens new window) 让你不需要在本地 webpack 中 import,直接在游览器里面运行 npm 包
- pinyin (opens new window) 汉字拼音转换工具
- JavaScript Obfuscator Tool (opens new window) js 代码混淆工具
- tesseract (opens new window) 图像识别,它能识别图片中的文字,支持中文
- gka (opens new window) 一款高效、高性能的帧动画生成工具。只需一行命令,快速图片优化、生成动画文件,支持效果预览。
- recast (opens new window) 前端 ast 库
- jscodeshift (opens new window) 将 js 内容解析成 AST 语法树,然后提供一些便利的操作接口,方便我们对各个节点进行更改
- stats.js (opens new window) 前端性能监控 如 FPS、内存使用情况等
- PapaParse (opens new window) 解析 csv excel
- mddir (opens new window) 生成 markdown file/folder structure 目录结构 tree
- imagemin (opens new window) 图片压缩库
- inline-css (opens new window) css covert to inline style 在生成 email 格式 html 的时候特别有用
- babel-plugin-try-catch-error-report (opens new window) 全局自动 catch 错误进行数据上报
- StreamSaver.js (opens new window) 大文件下载,不用像 saveAs 那样先读到内存中再下载
- mammoth.js (opens new window) Convert Word documents (.docx files) to HTML
- npkill (opens new window) 列出所有 node_modules,并支持删除
- strapi (opens new window) 开源的解决方案来创建、部署和管理自己的 API,通过图形化界面进行操作
# Node
# 工具库
- cheerio (opens new window) 用类 jQuery 语法处理 HTML
- node-semver (opens new window) node 版本验证库
- live-server (opens new window) 一个简单的 http server 带有 reload 功能
- node-portfinder (opens new window) 一个端口嗅探工具
- update-notifier (opens new window)node 依赖升级提醒工具
- fastscan (opens new window) node 敏感词库
- hygen (opens new window) 快速方便的创建代码 可以命令行创建预设的 template
- plop (opens new window) 同上,代码生成工具
- ink (opens new window) 是一个 React 的命令行渲染器,命令行界面可以像写页面那么写了
- dotenv (opens new window) 通过.env 设置环境部变量 vue-cli 也依赖它
- patch-package (opens new window) 优雅的修改 node_modules 中的依赖库
- Playwright (opens new window) 同 Puppeteer 团队出品,但区别是它支持 Chrome、Safari、Firefox、Edge
- tree-cli (opens new window) node 根据目录结构生成 tree
- tree-node-cli (opens new window) node 根据目录结构生成 tree
- open (opens new window) node 打开浏览器
# 命令行
- signale (opens new window) 一个 Node 的日志格式库,自带 16 个级别,可以定制颜色和 Emoji,可扩展的日志记录器
- consola (opens new window) 优雅的命令行 console logger
vuepress
也使用了它 - chalk (opens new window) 命令行着色美化库
- progress-estimator (opens new window) 命令行 progress bar 进度条模拟库
- ora (opens new window) Elegant terminal spinner 命令行 loading
- listr (opens new window) Terminal task 命令行任务列表
- yargs (opens new window) 命令行参数解析
- y18n (opens new window) yargs 基于 i18n 的一个包
- commander.js (opens new window) 自动的解析命令和参数,合并多选项,处理短参,等等,功能强大,上手简单
- Inquirer.js (opens new window) A collection of common interactive command line user interfaces. 命令行询问库
- enquirer (opens new window) 命令行 prompt 询问库,写 cli 的时候很有用
- Qoa (opens new window) 同上
- cli-progress (opens new window) Terminal Progress Bar
- cli-table (opens new window) tables for the CLI
- node-notifier (opens new window) 在 NodeJS 环境中,可以很方便的唤起 notifier 通知
# 文件处理
- rimraf (opens new window) 删除文件
- globby (opens new window) 用于模式匹配目录文件
- glob (opens new window) 文件查找
- tiny-glob (opens new window) 文件查找
- chokidar (opens new window) node 监听文件变化的库
- fs-extra (opens new window) fs-extra 模块是系统 fs 模块的扩展,提供了更多便利的 API,并继承了 fs 模块的 API
- execa (opens new window) 比 child_process 好用,返回 Promise
- npm-run-all (opens new window) 一个 CLI 工具可以并行或者串行执行 script 指令
- memfs (opens new window) memory-fs 的替代品,将文件放在内存中优化读写,webpack 依赖
# 调试
- fx (opens new window) 命令行优化 JSON 输出
- dumper.js (opens new window) 能让你的 node console 更加的规整,方便调试
- ndb (opens new window) node 调试
- why-is-node-running (opens new window) 查看 node 为什么在运行
- siege (opens new window) 压测工具
- node-in-debugging (opens new window) node.js 调试指南
- node-best-practices (opens new window) node 最佳实践
- Node.js 最佳实践 (opens new window)
# GraphQL
- prisma (opens new window) 让前端也能快速的写出
- Apollo GraphQL (opens new window) 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便
- dataloader (opens new window) 解决 Graphql 中的 N+1 查询问题
# 工具
- high-speed-downloader (opens new window) 百度网盘不限速下载 支持 Windows 和 Mac
- hyper (opens new window) 前端命令行
- yapi (opens new window) 是一个可本地部署的、打通前后端及 QA 的、可视化的接口管理平台
- sway (opens new window) 一个微软自己出的在线 ppt 很强大
- Ascii Art Generator (opens new window) 在线生成 Ascii 图案
- Winds (opens new window) 开源 RSS
- JSUI (opens new window) 一个用来控制管理前端项目的客户端
- docz (opens new window) 让你能快速写文档的一个库
- hiper (opens new window) 性能统计分析工具
- verdaccio (opens new window) 私有 npm
- git-guide (opens new window) git 入门指南
- git-tips (opens new window) git 进阶
- bit (opens new window) 实现了项目之间的代码共享 可以自建私有
- simpread (opens new window) 简悦 ( SimpRead ) 让你瞬间进入沉浸式阅读的扩展
- mkcert (opens new window) 一键命令 让本地也支持 https
- termtosvg (opens new window) 录制 命令操作转成 svg 基于 python
- gh-polls (opens new window) 可以在 github issue 中添加投票
- eruda (opens new window) 移动端调试工具
- vConsole (opens new window) 也是一个移动端调试工具 腾讯出品
- terminalizer (opens new window) 命令行录制工具 基于 node
- badgen (opens new window) 快速构建和 shields 一样的 svg badge 但速度更快
- readability (opens new window) 移除页面非正文部分 基于 jsdom
- WeChatPlugin-MacOS (opens new window) 一款功能强大的 macOS 版微信小助手
- puppeteer-recorder (opens new window) 一个 chrome 插件 能够根据你的操作 自动生成 puppeteer 相关代码
- mdx-deck (opens new window) 用 markdown 编写演示文稿
- code-surfer (opens new window) 基于 mdx-deck 的一个插件 让你更好的在文稿中展示 code
- Progressive Tooling (opens new window) 前端性能优化工具集合
- https://github.com/artf/grapesjs (opens new window) 可视化建站工具 不需要写代码就能写一个页面,前端再次再次要下岗了
- image-charts (opens new window) 该服务通过 URL 接受参数,然后生成图表,以图片形式返回
- eagle.js (opens new window) 一个用 vue 来制作 PPT 的库
- Optimizely (opens new window) A/B Test
- appadhoc (opens new window) 一个国内的 A/B Test 服务
- glorious-demo (opens new window) 通过编写代码的方式构建一个命令行的演示例子
- nginxconfig (opens new window) 可视化配置 nginx 提供了多个基础模板
- bundlephobia (opens new window) 一个可以查看某个库的大小,并且分析它的依赖
- jsperf (opens new window) 一个提供在线 test case 的网站,主要用来比较性能。可以比较如: forEach vs for 的性能
- perflink (opens new window) 与 jsperf 类似的一个比较 js 性能的网站
- algorithm-visualizer (opens new window) 算法代码可视化
- An-English-Guide-for-Programmers (opens new window) 专为程序员编写的英语学习指南
- Webhint (opens new window) 用于检查代码的可访问性、性能和安全的开源检查(Linting)工具
- airtap (opens new window) 测试浏览器兼容性,可覆盖 800 多种浏览器
- jsonstore (opens new window) 供免费,安全且基于 JSON 的云数据存储,自己玩的小项目神器
- git-history (opens new window) 可视化查看一个文件的历史变化
- x-spreadsheet (opens new window) 一个基于 Canvas 的 JS 电子表格库 excel
- imgcook (opens new window) 阿里出品,一键通过设计稿生成代码
- majestic (opens new window) jest 可视化
- leon (opens new window) 你开源项目的 ai 个人助手
- js-code-to-svg-flowchart (opens new window) 将代码逻辑用流程图的方式展现出来
- xterm.js (opens new window) 一个 web terminal
- pixelmatch (opens new window) diff 两张图片不一样的地方
- readme-md-generator (opens new window) 一个命令行脚本帮你快速的创建一个 README
- build-tracker (opens new window) 构建大小追踪 记录你多个版本构建后文件大小的变化
- zan-proxy (opens new window) 本地调试线上环境的工具
- mjml (opens new window) 一个让发 email 更简单的框架。定义了一套自己的语法,你用这套语法写邮件,然后编译成 HTML。
- any-rule (opens new window) 正则大全
- outline (opens new window) 一个免费开源的库,能让你快速搭建自己的 wiki
# Webpack
- webpackbar (opens new window) webpack 打包进度条
- jarvis (opens new window) webpack dashboard
- webpack-chain (opens new window) 通过 chain 风格 api 的方式修改 webpack 配置
- speed-measure-webpack-plugin (opens new window) 统计 webpack 各阶段的耗时
- obsolete-webpack-plugin (opens new window) 基于 browserslist 做浏览器升级提示
- mini-css-extract-plugin (opens new window) 提取 CSS 为单独文件
- copy-webpack-plugin (opens new window) 复制额外的文件到输出目录
- duplicate-package-checker-webpack-plugin (opens new window) 检查是否存在重复依赖
- cssnano (opens new window) CSS 压缩
- bundle-buddy (opens new window) webpack bundle 依赖分析
# 移动端
- fastclick (opens new window) 解决移动端一些点击问题
# 性能优化
- workbox (opens new window) PWA 方案,Google 出品
# 请求处理
- axios (opens new window) 目前最常见的请求库
- got (opens new window) http 请求库 如果你觉得 request 太多的话 这是一个不错的选择
- request (opens new window) 老牌请求库 -*whatwg-fetch** (opens new window) fetch 请求库
- grpc-web (opens new window) 前端直连 gRPC 服务
- node-fetch (opens new window) node 环境下轻量级 fetch 请求库
- reqwest (opens new window)
# 工程
- lerna (opens new window) monorepo 管理
- lerna-changelog (opens new window) 为 lerna 项目自动生成 changelog
- eslint (opens new window) JS 风格约束
- eslint-config-airbnb (opens new window) airbnb 约束风格
- xo (opens new window) 封装自 eslint
- prettier (opens new window) 更主观的风格自动修改
- yeoman-generator (opens new window) 脚手架工具
- serve (opens new window) 本地静态服务器
- np (opens new window) npm publish 辅助,自动 push、打 tag、升版本等
- lint-staged (opens new window) eslint 提速,只 lint 提交的代码
- coveralls (opens new window) 覆盖率
- husky (opens new window) 添加 git hooks
- cross-env (opens new window) 跨平台的环境变量声明
- nvm (opens new window) 管理 node 版本
- concurrently (opens new window) 在 npm scripts 里并行执行命令
- @zeit/ncc (opens new window) 打包为 npm 包为一个文件
- npm-check (opens new window) 检测依赖升级情况,我会和
yarn upgrade-interactive
配合着用,主要用来检测冗余依赖 - cpx (opens new window) 复制,支持 glob,并且可以 watch
- onchange (opens new window) 监听文件变动然后做一些事
- tasksfile (opens new window) 在 node 中执行 script 脚本
# Mac
- get-plain-text (opens new window) 能清除剪贴板里的格式 很实用
- IINA (opens new window) mac 平台感觉免费最好的播放器 强推
- magnet (opens new window) 分屏管理
- Xnip (opens new window) 方便好用的截图工具-支持截长图
- Spectacle (opens new window) 窗口管理工具
- vanilla (opens new window) 顶栏图标管理工具
- Dozer (opens new window) 一个开源的顶栏管理
- 腾讯电脑管家 (opens new window) 反正我用下来好觉得蛮好用的
- mos (opens new window) 鼠标平滑滚动软件,很好用。免费开源
- sequel pro (opens new window) mysql 客户端 好用
- Microsoft Remote Desktop Beta (opens new window) Mac 远程登录 Windows 调试神器
- pap.er (opens new window) 专为 Mac 设计的壁纸应用
- The Unarchive (opens new window) Mac 目前感觉最好用的免费解压软件
- Tickeys (opens new window) 让你用 Mac 键盘也能打出机械键盘的感觉
- Beaker Browser (opens new window) P2P 开源浏览器 支持点对点发布文件,成为了文件传输工具,支持 DAT 对等协议
- Gifski (opens new window) 视频转 gif 工具
- more (opens new window) 更多优秀的 mac app 介绍
- Motrix (opens new window) 支持 HTTP、FTP、BT、磁力链、百度网盘的下载工具
- iPic (opens new window)这个应用可以让你方便地上传图片到各种图床
- Image2Icon (opens new window)
- hidden (opens new window) 是用来帮助你隐藏 macOS 菜单栏上那些不常用的应用图标
# 录制
- licecap (opens new window) gif 录制,简洁好用,之前都用这个录制
- kap (opens new window) 现在都用这个录制 gif,还支持导出 mp4,录制的 fps 很高
- KeyCastr (opens new window) 按键显示,录制的时候显示你的按键
# Chrome 拓展
- Tampermonkey (opens new window) 油猴 神器
- 扩展管理器 (opens new window) 轻松管理扩展,就不用担心安装太多扩展了
- visbug (opens new window) 它可以帮助你改变 css,移动元素等等一系类强大的功能,页面调试神器。当然有些时候还是 DevTools 更好用
- refined-github (opens new window) 优化 github 默认功能和样式的 chrome 插件
- ADB (opens new window) chrome 真机调试安卓神器
- Adblock Plus (opens new window) 免费广告拦截程序 这个应该不用说了,装机必备
- Axure RP Extension (opens new window) 看原型必备
- JSON Formatter (opens new window) JSON 格式化 程序员必备
- Lighthouse (opens new window) 谷歌出品,检查网页综合性能评分,分析不足
- 二维码(QR 码)生成器 (opens new window) 手机扫码神器
- Octotree (opens new window) github 上看代码必备神器
- OctoLinker (opens new window) 能在 github 上看代码的时候 快速链接跳转到依赖的库
- The Great Suspender (opens new window) chrome 太吃内存了,当页面开的很多时候会很卡,它就完美的解决了这个问题。它将几分钟没浏览过的页面都挂载了,当你想看是再重新加载
- WEB 前端助手 (opens new window) 支持 JSON 格式化、二维码生成与解码、代码压缩、Markdown 与 HTML 互转、网页滚动截屏、正则表达式、时间转换工具、JSON 比对工具等
- 掘金 (opens new window) 目前我默认新开 tab 的默认页,可以刷刷新的文章或者项目,还不错。
- 沙拉查词 (opens new window) 划词翻译插件
- npmhub (opens new window)在 README 下方显示 npm 依赖信息
# VS Code
- Import Cost (opens new window) 查看你引入的依赖模块大小
- Auto Close Tag (opens new window) 自动补全 html 标签,如输入
<a>
将自动补全</a>
- Auto Rename Tag (opens new window) 自动重命名 html 标签,如修改
<a>为<b>
,将自动修改结尾标签</a>为</b>
- polacode (opens new window) 生产代码图片快照插件
- vscode-leetcode (opens new window) 一个能让你在 vscode 中刷 LeetCode 的插件 算一个划水神器吧
- vscode-icons (opens new window) VS Code 必备吧,为文件添加炫图标
- CodeSnap (opens new window) 生产代码截图
# 主题
官方主题页 (opens new window) 可以选择自己喜欢的主题 one-monokai (opens new window) 我用的是这个主题,很多年了
# 字体
# 编辑器和 Terminal
- Go2shell (opens new window) 在当前文件夹打开 shell
- Terminal 用 iTerm2 (opens new window) + zsh (opens new window) + oh-my-zsh (opens new window) 的组合,主题是 robbyrussell (opens new window)
# zsh 插件
- Homebrew (opens new window) 必装
- autojump (opens new window) 实现目录间快速跳转,想去哪个目录直接 j + 目录名,不用在频繁的 cd 了
- zsh-autosuggestions (opens new window) 命令自动建议和补全
- zsh-syntax-highlighting (opens new window) 命令行语法高亮
- history (opens new window) 命令行记录
- zsh-git-prompt (opens new window) git 分支信息提示
# 开发常用软件
- Github Desktop (opens new window)管理 github 仓库的变更和 PR
- runjs (opens new window) js 运行沙盒,写 test case 或者面试当场写代码的时候很有用
- Charles (opens new window) 抓包用,支持 https
- Google Chrome (opens new window) 前端必备没啥好说的
- ColorSnapper2 (opens new window) 取色工具
- postman (opens new window) api 调试工具
- Sequel Pro (opens new window) MySQL 界面管理工具
- KeepingYouAwake (opens new window) 可保证系统不自动休眠,挂机跑脚本很有用
# 有趣
- the-bread-code (opens new window) 使用程序员的思维制作面包 ,比如制作中使用 A/B test, 来比较那种做法更好。
- build-your-own-x (opens new window) 教你用各种语言实现 Bot Database Neural Network
- **javascript-algorithms ** (opens new window) 教你用前端知识认识各种算法
- not-paid (opens new window) 如果你给人做网站,交过去以后对方没有付款,那么这个 JS 会把网站的透明度一天调低一点,直到看不见
- nsfwjs (opens new window) 前端图片鉴黄,基于 Tensorflow
- elevator.js (opens new window) 我很喜欢的一个库,让一个 back-to-top 的效果有了一种坐复古电梯的感觉
- app-ideas (opens new window) 很多年轻人苦于缺少练手的项目,这个项目收集了不少点子,每个点子都有明确的目标和复杂资源。
- WebGL-Fluid-Simulation (opens new window) 很酷的 WebGL 交互
- react-kawaii (opens new window) 一个非常可爱的 React 卡通人脸库,很有意思
- chart-race-react (opens new window) 图表竞赛 长条图赛跑动画 在微博或者 b 站这种类型视频很火
- 98.css (opens new window) windows 98 主题分格 css
# 网站
# 常看的网站
- overreacted (opens new window) react Dan 的个人博客,更新频率很高(redux 作者,react 核心开发)
- DailyJS (opens new window)
- codeburst (opens new window)
- 阮一峰的网络日志 (opens new window) 阮老师出的东西还是值得一读的
- InfoQ (opens new window) 文章的质量比一般网站的高不少
- 鱼塘 (opens new window) 划水网站 收集了很多网站 当天热门文章
- 每日时报 (opens new window) 定期会分享一些库和工具
- awesome-f2e-libs (opens new window) sorrycc 整理的个人关注使用的前端库
# Github
- github 短域名服务 (opens new window)
- shields (opens new window) Github README 里面的装逼小图标
- Emoji (opens new window) 方便平时写查找 emoji
- emoji.muan (opens new window) 同上 而且更全
- git-awards (opens new window) github ranking 没事可以查着玩玩
- http://githubrank.com/ (opens new window) github 按照 followers 排名
- github-rank (opens new window)同上,githubrank 基本算挂了已经,只能用这个新的
- star-history (opens new window) 展示一个项目 Stars 增长规矩曲线
- probot (opens new window) 基于 github 做一个小机器人。可以做很多 workflow 的事情
# 开发
- 产品/设计师/独立开发者的资源库 (opens new window) 很全很强大
- can i use (opens new window) 前端常用网站了 查看不同属性和方法的兼容性
- Squoosh (opens new window) 谷歌出品在线免费图片压缩工具 神器
- codesandbox-client (opens new window) - 在线 web 开发容器
- astexplorer (opens new window) - 一个在线 ast 生成器
- 30 seconds of code (opens new window) 收集了许多有用的代码小片段
- zeplin (opens new window) 前端和设计师神器,有标注、Style Guide、版本管理、简单的团队协作,重点是前端不用写 css 了,复制就可以了。
- iconfont (opens new window) 阿里出的图标库,非常实用,支持 svg、font、png 多种格式,基本现在所有图标都在上面找。
- cssicon (opens new window) 所有的 icon 都是纯 css 画的 缺点:icon 不够多
- 智图 (opens new window) 腾讯出品 在线图片压缩 支持转成 webP 处理静态图片时候很好用
- picdiet (opens new window) 另一个图片压缩网站
- CSS triangle generator (opens new window) 帮你快速用 css 做出三角形
- cssarrowplease (opens new window) 帮你做对话框三角的
- clippy (opens new window) 在线帮你使用 css clip-path 做出各种形状的图形
- Regular Expressions (opens new window) 在线正则网站
- jex (opens new window) 正则可视化网站,配合上面的 Regular Expressions,写正则方便很多
- cyrilex (opens new window) 正则可视化网站
- jsfiddle (opens new window) 在线运行代码网站 很不错,可惜要翻墙
- codepan (opens new window) 在线运行代码网站 不用翻墙,可以自己部署
- fiddle.md (opens new window) 一个方便的在线共享 markdown 在线笔试题一般都用这个
- jsdelivr (opens new window) cdn 服务
- unpkg (opens new window) cdn 服务
- coderpad (opens new window) 远程面试的神器,可以让面试者远程写代码 不过需要翻墙
- icode (opens new window) 有赞团队出品的 coderpad 可以互补,它不需要翻墙
- codeadvice (opens new window) 又一个让面试者远程写代码的网址
- snipper (opens new window) 一个代码协同的网站。你新建一个代码片段,然后把网址分享给其他人,就可以看到他们的实时编辑。
- codesandbox (opens new window) 一个可以在线编辑且提供在线 demo 的网站 支持 vue react angular 多种框架 神器
- codrops (opens new window) 上面的交互都非常酷炫
- bgremover (opens new window) 在线图片去底工具
- photopea (opens new window) 一个网页端 Photoshop 很变态
- bestofjs (opens new window) 查看一个项目增长经历,Star 数变化的网站,辅助你判断这个库的质量
- stackblitz (opens new window) 一款在线 IDE,主要面向 Web 开发者,移植了很多 VS Code 的特性与功能
- **programmingfonts.org ** (opens new window) 一个专门介绍编程字体的网站
- 早报 (opens new window) 一个个人开发者的前端开发的分享日报
- emoji-search (opens new window) 帮你快速找到能表达你情感的 emoji
- gitmoji (opens new window) 通过 emoji 表达 git 的操作内容
- starcharts (opens new window) 可以把你一个项目的 stars 增长轨迹当做 svg 放在 readme 中
- mockapi (opens new window) 一个还不错的在线 mock 服务(可在线可视化编辑),可以满足大部分简单需求了
- coder 在线版 VS Code
- browserstack (opens new window) 远程调整各种版本浏览器 兼容性问题
- carbon (opens new window) 根据代码块生成图片 主要作用是让你打代码片段分享的时候更好看一点
- clipboard2markdown (opens new window) 将你所有复制进去的内容都转化为 markdown
- grammarly (opens new window) 英语写作检查工具
- quickchart (opens new window) 通过 URL 生成图表的开源服务
- hipdf (opens new window) 一站式在线 PDF 解决方案
- whimsical (opens new window) 画路程图
- Lorem Picsum (opens new window) 提供免费的占位图
- sm.ms (opens new window) 免费图床
- webpagetest (opens new window) 前端性能分析工具
- 网络安全的教程
- Ananas Analytics Desktop (opens new window) 一站式 数据可视化
- “零宽” 长度的短网址服务 (opens new window) 利用“零宽字符”来缩短 url,还支持统计
- hotjar (opens new window) 用户调研 支持用户反馈 录屏 heatMap
- 狼叔:如何正确的学习 Node.js (opens new window)
- 独角兽公司榜单 (opens new window) 感觉大家想去大公司的时候,可以看看排名
- 中国传统颜色手册 (opens new window)
- coderlane (opens new window) 远程视频面试,目前使用的是牛客,这个工具待考察
- excalidraw (opens new window) 手绘风格流程图,强推
# 设计
- uimovement (opens new window) 能从这个网站找到不少动画交互的灵感
- awwwards (opens new window)是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站
- dribbble (opens new window) 经常能在上面找到很多有创意好看的 gif 或者图片,基本上我所有的图都是上面招的
- Bēhance (opens new window) dribbble 是设计师的微博,Bēhance 是设计师的博客
- Logojoy (opens new window) 使用 ai 做 logo 的网站,做出来的 logo 质量还不错。
- brandmark (opens new window) 另一个在线制作 logo 网站
- instant (opens new window) 又一个 logo 制作网站
- logo-maker (opens new window) 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
- coolors (opens new window) 帮你在线配色的网站 你能找到不少配色灵感
- colorhunt (opens new window) 另一个配色网站
- uigradients (opens new window) 渐变色网站
- designcap (opens new window) 在线海报设计
- Flat UI 色表 (opens new window) Flat UI 色表
- 0to255 (opens new window) 颜色梯度
- Ikonate (opens new window) 提供免费的图标 icons
- remixicon (opens new window) 又一个提供免费图标 icons
- feather (opens new window) 免费的 icons
- **nord ** (opens new window) 北欧性冷淡风主题配色
- Unsplash (opens new window) 提供免费的高清图片
- colorkitty (opens new window) 从你的图片中提取配色
- design.youzan 有赞设计原则
- undraw (opens new window) 一个免费的插图网站,可以在上面寻找合适的插图,用于商业用途。
# 有趣
- 帮你百度一下 (opens new window) 可以 点我测试一下** (opens new window)-
- 国际版 (opens new window) 同
帮我百度一下
-点我测试一下** (opens new window)- - wallhaven (opens new window) 壁纸网站-
- URL 地址播放 Emojis 动画 (opens new window) 在地址栏里面播放 emoji
- Can't Unsee (opens new window) 强烈建议前端、客户端、UI 开发的同学玩下,检查一下自己对设计稿的敏感度怎么样
- ggtalk (opens new window) 平时一直在听的一个技术博客
- awesome-comment (opens new window) 里面收集了很多有趣的代码注释
- text-img (opens new window) 都将图片转化为 ascii 用来写注释
- weird-fonts (opens new window) 将普通字母转化为 特殊 unicode
- snake (opens new window) 在地址栏里面玩贪吃蛇
- zero-width-lib (opens new window) 利用零宽度字符实现 隐形水印、加密信息分享、逃脱词匹配,很有创意
- abbreviations (opens new window) 查看一个简写是什么意思的网站
- magi (opens new window) ai 搜索神器,超屌
- 诺基亚短信图片生成器 (opens new window)
# 交互
- 微交互 (opens new window) 里面收集了市面上很多很好的微交互例子 值得学习
- Little Big Details (opens new window) 同上,一个国外微交互汇集网站
- cruip (opens new window) 登录页的各种页面设计,可以免费下载模板
- Comixify (opens new window) 一个波兰团队做了非常好玩的工具,可以把视频自动转成漫画,上图是他们提供的 demo,效果很棒。
- taiko-web (opens new window) 太鼓达人网页版 只能说很 6
# Css
- css-tricks (opens new window) 一个学习 css 不错的网站 有很多有意思的 demo
# 教程
- npx (opens new window) 教你怎么合理的使用 npx
- hacksplaining (opens new window) 网络安全学习网站
- mobile-web-best-practice (opens new window) 移动 web 最佳实践
- vanillawebprojects (opens new window) 通过纯前端的手段实现一些小项目,适合入门
- Think Python (opens new window) 还不错的 Python 入门教程
- Node.js CLI Apps Best Practices (opens new window) 叫你如何写好一个 node cli 工具
- SQL Murder Mystery (opens new window) 一个英文的 SQL 初级教程,以游戏的方式,让你利用学到的 SQL 概念和命令来找出谋杀凶手
- html-dom (opens new window) 一些常用的 dom 或者原生 js 操作判断,挺实用的
- TypeScript (opens new window) TypeScript 入门教程,很不错,推荐初学者学习
- Webpack 知识图谱 (opens new window) webpack 相关教程和原理分析还不错
# 产品
- 产品大牛 (opens new window) 什么有很多完整的产品原型可以借鉴
- 磨刀 (opens new window) 快速出 ui 原型
# 实用
- 写作猫 (opens new window) 可以通过 AI 的方式,帮你检查错别字,很有效的一个工具
- draw (opens new window) 在线 web 画流程图
- typeform (opens new window) 一个国外的在线调查问卷网站
- VideoFk (opens new window) VideoFk 视频在线解析下载
- 全历史 (opens new window) 历史内容聚合网站
- UzerMe (opens new window) 云端办公工具
- SoBooks (opens new window) 强大的电子书资源网站
- 稿定设计 (opens new window) 键式设计工具+智能抠图
- pichance (opens new window) 一个将低分辨率图片增强为高分辨率的工具,可以将分辨率增加 4 倍(即长和宽各增加一倍)
- bigjpg (opens new window) 放大图片的神器 通过神经网络可以放大图片并能降噪
- 大力盘 (opens new window) 百度网盘搜索
- ENFI 下载器 (opens new window) 不限速下载器
- 来画视频 (opens new window) 像做 PPT 一样做短视频
- Arkie 海报制作工具 (opens new window)
- 优品 PPT (opens new window)
- 比格 PPT (opens new window)
- 高清免费图片 (opens new window)
- 高清免费图片 2 (opens new window)
- 历史价格查询 (opens new window) 淘宝,京东等商品历史价格,能更清晰了解商家的活动是否为虚假促销以及促销的力度。神器
- Firefox Send (opens new window) 文件分享服务,下载一次或者到期即焚,在当前网络监管下很实用的服务
- time.graphics (opens new window) 在线 milestone timeline 生成器
- processon (opens new window) 免费在线作图,支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图等
- 龙轩导航 (opens new window) 一个总结了不少实用网站的导航
# Talk
- peerigon-talks (opens new window) 收集了不少有意思的 talks
# 算法
- leetcode (opens new window) 用 js 刷 leetcode