Skip to content

baizixv/bookmarks

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
.github/workflows
.github/workflows
 
 
docs
docs
 
 
scripts
scripts
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

Baizixv Bookmarks

在线地址：https://baizixv.github.io/bookmarks

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

本项目为个人技术收藏集，里面会不定期分享一些作者平时用到的一些库，或者常用的网站和小工具.

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

API 官网

这里主要记录一下经常使用的 API 官网。

1.API 查询网站

  • MDN
  • devdocs 快速 API 文档搜索工具
  • docschina 印记中文,深入挖掘国外前端新领域,为中国 Web 前端开发人员提供优质文档
  • 腾讯云开发者手册 开发者手册是云+社区开发者共同维护的一个提供中文化编程基础技术教程的知识平台，提供了 HTML、CSS、JavaScript、Python、Ruby、C、Go 等各种编程语言的基础知识
  • WebPlatform Docs一个社区驱动的网站，旨在成为 Web 开发人员文档的综合性和权威性来源。
  • html 中文 专业的 web 前端开发在线学习、培训、交流平台
  • w3cschool 一个专业的 W3C 前端开发及编程入门学习平台,提供包括 HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql 等编程语言和开源课程

2.前端常用

版本控制系统

运行时

  • nodejs Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
  • nodejs 中文文档 nodejs 中文文档
  • DenoDeno 是作者 Ryan Dahl 在 Node 之后的又一大作,它是一个新的运行时,用于在 Web 浏览器之外执行 JavaScript 和 TypeScript

包管理工具

  • npm npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具
  • yarn yarn，Facebook 贡献的 Javascript 包管理器
  • cnpm 一个完整 npmjs.org 镜像，同步频率目前为 10 分钟 一次

前端工程化

1.脚手架

  • Create React App 官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。
  • Vue CLI Vue.js 开发的标准工具
  • Angular CLI
  • YeomanYeoman 是现代化前端项目的脚手架工具,用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站。
  • Plop小型前端脚手架工具

2.构建工具

  • Grunt是一个基于任务的 JavaScript 工程命令行构建工具
  • Gulp基于流(stream)的自动化构建工具
  • FIS3前端工程构建工具，FIS3 采取了类似 CSS 语法一样的配置风格,易于理解与上手
  • vitejsVite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

3.打包工具

  • BrowserifyBrowserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
  • webpack 一个用于现代 JavaScript 应用程序的静态模块打包工具
  • webpack 中文文档 webpack 中文文档
  • webpack 中文文档 2 webpack 中文文档 2
  • Rollup.js Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,Rollup 对代码模块使用新的标准化格式,这些标准都包含在 JavaScript 的 ES6 版本中。
  • Parcel 极速零配置Web应用打包工具

4.格式化工具 & 其他

  • ESLint 中文文档插件化的 JavaScript 代码检测工具
  • Prettier 一个流行的代码格式化工具
  • Babel Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

5.持续集成工具

  • Travis CI在线托管的持续集成服务,绑定 Github 项目,抓取新的代码自动进行测试构建,甚至自动部署到测试环境。
  • Jenkins一个开源软件项目，是基于 Java 开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能

语言，模板与框架

  • ECMAScript Language SpecificationECMAScript 语言规范
  • ECMAScriptECMAScript 语言规范
  • Typescript TypeScript 官方文档
  • Typescript 中文文档 学习有关 TypeScript 的所有知识。
  • Bootstrap 中文网 Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。是一个 CSS/HTML 框架
  • CSS 速查总表 CSS 是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现
  • CSS 参考手册
  • Vue.js 官方文档 是一套构建用户界面的渐进式框架
  • Vuex 官方文档 Vuex 是专门为 Vue.js 设计的状态管理库
  • Element Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  • iView 一套基于 Vue.js 的高质量 UI 组件库
  • React React 是一个用于构建用户界面的 JavaScript 库
  • Redux 中文文档 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
  • React-Redux: Hooks React-Redux 是 Redux 的官方 React 绑定库
  • react-use React-use 一个很好用的 React Hooks 库
  • ReactNative 开源的跨平台移动应用开发框架
  • Umi 是可扩展的企业级前端应用框架，蚂蚁金服的底层前端框架
  • Umi Hooks 一个强大的管理异步数据请求的 Hook
  • DvaJS 一个基于 redux 和 redux-saga 的数据流方案，一个轻量级的应用框架
  • Ant Design 一个基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
  • Ant Design Pro 一个企业级中后台前端/设计解决方案
  • Material-UI 一个受欢迎的 React UI 框架
  • React Router 官方文档 一个用于 React.js 的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。
  • React Router 中文文档 React Router 中文文档
  • React Router 中文文档 2 React Router 中文文档 2
  • Ember.jsEmber.js 是一个开源的 JavaScript 客户端框架,用于开发 Web 应用程序并使用 MVC(模型 - 视图 - 控制器)架构模式。
  • Flutter Flutter 是 Google 提供的新一代跨平台方案，开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。
  • Flutter 中文文档 Flutter 中文文档
  • tabler Tabler 是一个基于 Bootstrap 4 开发的 HTML 仪表盘 UI 套件，旨在提供一个用户友好，清晰简单的管理面板，可适用于简单和复杂的网站系统。
  • lulu 腾讯阅文基于 jQuery，针对 PC 网站 IE8+（peak 主题）的前端 UI 框架
  • Jasonette 一个用 json 来构建 hybrid App 的框架
  • art-template art-template 是一个简约、超快的模板引擎。
  • Smarty Smarty是一个php模板引擎。
  • EJS 高效的嵌入式 JavaScript 模板引擎。

兼容性

  • polyfill.io Polyfill 可以为旧浏览器提供和标准 API 一样的功能，polyfill.io 是自动化的 JavaScript Polyfill 服务，只需要引入一个 JS 文件。 Polyfill.io 通过分析请求头信息中的 UserAgent 实现自动加载浏览器所需的 polyfills

其他

  • 30 seconds of code大量有用的 Javascript 片段（也有其他语言）
  • Chrome 版本发布查阅
  • GraphQL一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）

javascript 库与函数式编程库

可视化相关

  • D3 D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。
  • ECharts ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
  • Three.js 中文网Three.js 是基于原生 WebGL 封装运行的三维引擎，在所有 WebGL 引擎中，Three.js 是国内文资料最多、使用最广泛的三维引擎
  • chart.xkcd 手绘风格的图表库
  • F2 移动端可视化，蚂蚁出品
  • highcharts 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

静态站点生成器 && 文档管理

  • VuePress 中文文档是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。本站就是使用它生成的
  • docsify 轻量级文档工具，但其是运行时编译的
  • GitBook 除了编译慢没啥毛病
  • docz
  • GitHub Pages

3.MongoDB 相关

  • MongoDB 官网 MongoDB 是一个基于分布式文件存储的数据库
  • mongoose - Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具
  • mongoose 中文文档 mongoose 中文文档
  • mLab mLab 是一款免费的在线 mongodb 云数据库产品,它为用户免费提供了 500M 容量

4.GraphQL

  • prisma Prisma 则提供一套简洁的 API，使你更加方便地操作数据库和理解查询语句。Prisma 的 API 是类型安全的，返回的数据是普通的 JS 对象（plain old JavaScript objects）。让前端也能快速的写出 API
  • Apollo GraphQL 是基于 GraphQL 的全栈解决方案集合。从后端到前端提供了对应的 lib 使得开发使用 GraphQL 更加的方便
  • dataloader 解决 Graphql 中的 N+1 查询问题

其他

  • WebAssembly wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式
  • todomvc Helping you select an MV* framework

实用网站

搜索引擎

云平台

代码托管

文档编辑

协同平台

  • 蓝湖 一款产品文档和设计图的共享平台，高效的产品设计协作平台
  • Slack 用于企业沟通和协作
  • 钉钉 工作用途，沟通和协作
  • TAPD 一站式敏捷研发协作云平台
  • Trello
  • Teambition

交流社区 && 技术论坛 && 写作平台

收集的网站或收藏册

算法

Github

在线编程，创建项目网站

开发

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

设计

  • artbreeder 可以在线生成随机 meme、头像、专辑封面、风景图片以及二次元头像，通过选定两个或多个图片你可以决定图片中的内容和风格
  • Bēhance dribbble 是设计师的微博，Bēhance 是设计师的博客
  • Logojoy 使用 ai 做 logo 的网站，做出来的 logo 质量还不错。
  • brandmark 另一个在线制作 logo 网站
  • instant 又一个 logo 制作网站
  • logo-maker 又一个 logo 制作网站 这个更简单点 就是选模板之后微调
  • coolors 帮你在线配色的网站 你能找到不少配色灵感
  • colorhunt 另一个配色网站
  • uigradients 渐变色网站
  • designcap 在线海报设计
  • Flat UI 色表 Flat UI 色表
  • 0to255 颜色梯度
  • Ikonate 提供免费的图标 icons
  • remixicon 又一个提供免费图标 icons
  • feather 免费的 icons
  • nord 北欧性冷淡风主题配色
  • Unsplash 提供免费的高清图片
  • colorkitty 从你的图片中提取配色
  • design.youzan 有赞设计原则
  • undraw 一个免费的插图网站，可以在上面寻找合适的插图，用于商业用途。

有趣

交互

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

产品

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

实用

Talk

面试相关

0.面试题

1.熟人内推

2.公司招聘官网

3.面试平台

第三方平台

  • 云雀客服全渠道客服系统 - 微信客服/微博客服/客资管理/在线咨询/在线客服软件
  • 容联云通讯短信平台、手机验证码、语音验证码、IM 即时通讯、云呼叫系统等互联网通信服务
  • 友盟 第三方网站数据统计与监测
  • 百度统计 第三方网站数据统计与监测
  • Google Analytics 第三方网站数据统计与监测
  • 快海报 快海报提供小程序分享海报生成服务，接口为 HTTP API

其他

常用库与工具

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

常用库

包管理工具

  • npm npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具
  • yarn yarn，Facebook 贡献的 Javascript 包管理器
  • cnpm 一个完整 npmjs.org 镜像，同步频率目前为 10 分钟 一次
  • pnpm 继承了yarn的所有优点，包括离线模式和确定性安装。

收集库

  • hocs react 相关 hoc 收集库
  • markdown-it-emoji 将对应 emoji 表情的符号码复制后输入你的 markdown 文本即可显示 emoji 表情。

通用库

  • markdown-toc Generate a markdown TOC (table of contents) with Remarkable.自动生成 markdown 的导航栏

  • html-dom 一些常用的 dom 或者原生 js 操作判断，挺实用的

  • moment.js是一个简单易用的轻量级 JavaScript 日期处理类库，提供了日期格式化、日期解析等功能。它支持在浏览器和 NodeJS 两种环境中运行。

  • moment.js 中文网

  • html2canvasJavaScript 实现页面截图的类库

  • Immutable.jsImmutable 是 Facebook 开发的不可变数据集合

  • clipboard.jsClipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。

  • passportjs Passport 是一个 Node 平台的身份认证中间件，极其灵活和模块化

  • axios 中文文档 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

  • sweetalert2 一个自适应，且自定义性强的弹出框（零依赖）

  • tippy.js 最著名的 tooltip/popover library

  • text-mask 可以让 input 按照规则输入(如电话,email,日期,信用卡等)，特殊格式 input

  • dinero.js 用来创建、计算和格式化货币价值的不可变的框架，支持国际化

  • img-2 一个提高图片加载性能和体验的库，懒加载使用 web worker 模糊预览

  • fingerprintjs 是一个快速的浏览器指纹库，通浏览环境的一系列配置生成 id

  • ajv 一个 json schema 验证的库

  • dayjs Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js

  • primjs 让页面支持代码高亮

  • uppy 一个很好看的也很好用的 前端上传库

  • Filepond 一个小巧的文件上传库

  • tui-calendar 功能全面的日程安排日历控件，还支持拖拽

  • spritejs SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库，可以基于 canvas 快速绘制结构化 UI 、动画和交互效果，并发布到任何拥有 canvas 环境的平台上（比如浏览器、小程序和 node ）

  • tui.image-editor 一个功能齐全的在线图片编辑，基于 canvas

  • nanoid 是使用 JavaScript 开发、一个小型、安全、对 URL 友好的唯一字符串 ID 生成器。据作者说，比 uuid 更可靠和好用。至少从 API 的功能和易用性来看，似乎确实如此

  • rxdb 一款开源的快速、灵活的客户端数据库，支持各种浏览器以及 NodeJS，Electron、React 等等，是 PouthDB 之上的一个封装库

  • ImmortalDB 是用于浏览器的弹性键值存储 ImmortalDB 是在浏览器中存储持久键值数据的最佳方法，保存在其中的数据被冗余地存储在 Cookies、IndexedDB

  • big.js 解决 js 浮点数问题。 主要就是 Big Number 或者小数点，一个用于任意精度十进制算术的小而快速的 JavaScript 库。

  • bignumber.js 同上

  • stickybits CSS 的 position: sticky 是一个很有用的设置，但是老的浏览器不支持。这个 JS 库是该功能的垫片库。

  • cleave.js 用于在输入时格式化输入内容（信用卡格式、日期等）

  • shiny 在手机设备上模拟光的反射效果。 支持 DeviceMotion 事件

  • rrweb 一个可以记录你页面中所有操作的库

  • nodeppt markdown 写 ppt

  • flexsearch 能让你更加高效和快速的检索文本内容

  • scroll-hint 用于提示用户页面可以左右滑动的一个提示库

  • fuse.js 轻量级前端模糊查询库 非常的好用

  • FileSaver.js 文件下载插件 很多时候下载会有兼容性问题，它能帮你解决这些问题

  • selection 可视化选择页面元素的库

  • scroll-out 滚动效果（滚动视差）的框架，框架大小不到 1KB,使用回调的方式将相关动画元素的属性进行实时分配

  • gpu.js 通过将 js 转为特定的 language，利用 GPU 来执行，大大提高了执行性能和速度

  • pressure 前端实现 3D Touch

  • hammer 移动端手势库

  • AlloyFinger 腾讯出的手势库

  • lowdb LowDB 是一个本地 JSON 数据库，基于 Lodash 开发的

  • JSON-server 可以配合 LowDB 使用 快速搭建一个 REST API

  • lunr.js 是个用于浏览器的轻量级 JavaScript 全文搜索引擎,对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索

  • he 一个前端 encoder/decoder 库

  • grade 一个可以根据你的 图片 调整底色的插件

  • pretty-bytes 将字节转换成可以读的字符串，比如 1337 个字节，会显示成 1.34 KB

  • pagemap Mini map for web pages 页面导航图

  • commonmark.js parser and renderer markdown

  • body-scroll-lock 解决滚动穿透问题

  • lightgallery 图片预览组件

  • photoswipe 图片预览组件，支持移动端

  • darken 页面黑夜模式切换

  • mitt Tiny 200b functional event emitter / pubsub

  • sanitize-html html 过滤库，防 xss

  • DOMPurify 比 sanitize-html 更轻量，建议一般业务用这个

  • mdx jsx + markdown

Css && 动画

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

React

  • React Icons 将一些受欢迎的图标包含到 React 项目中
  • formik构建 React 表单的开源库：Formik
  • react-jsonschema-form Mozilla service 开源了一个通过 JSON 直接生成表单的 React 组件
  • rawact 一个 babel 插件，把 react 组件转为原生 dom

Vue

工具库

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

命令行相关

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

文件处理相关

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

开发调试相关

Webpack

移动端

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

性能优化

  • workbox PWA 方案，Google 出品

请求处理

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

工程化相关

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

插件

  • pulltorefresh.js 下个下拉刷新插件
  • chancejs Chance 是一个轻量级的随机字符串生成器 JavaScript 插件，可帮助减少编写单调的代码，特别是在编写自动化测试时经常需要各种随机内容。
  • instant.page 一个判断用户行为 预测提前加载页面的库
  • screenfull.js 浏览器全屏插件 解决了不少兼容性问题

常用工具

这里主要推荐一下平时常用的工具。

通用工具

技术工具

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

浏览器

VS Code

通用

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

主题

字体

Chrome 扩展

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

编辑器和 Terminal

zsh 插件

开发常用软件

  • Github Desktop管理 github 仓库的变更和 PR
  • runjs js 运行沙盒，写 test case 或者面试当场写代码的时候很有用
  • Charles 抓包用，支持 https
  • Google Chrome 前端必备没啥好说的
  • ColorSnapper2 取色工具
  • postman api 调试工具
  • Sequel Pro MySQL 界面管理工具
  • KeepingYouAwake 可保证系统不自动休眠，挂机跑脚本很有用
  • Swagger UI Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务，部署管理和使用 API

其他有趣的工具

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

录制

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

Ubuntu

Mac

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

在线解析工具

教程与书籍

这里主要记录一下有用的教程与书籍。

1.书籍

Book

JavaScript && ECMAScript && TypeScript

Html && CSS

React &&　 Vue

Node

函数式编程

移动端

信息安全

Python

  • Think Python 《Think Python 2e》最新版中文翻译，还不错的 Python 入门教程

其他

2.实践教程

  • crate 一个 react 全栈练习(pc,mobile,rn,api) demo，适合入门拿来练手
  • vanillawebprojects 通过纯前端的手段实现一些小项目，适合入门

3.视频教程 && 交互式学习

  • FCC FreeCodeCamp 是 GitHub 上排名第一的开源项目，致力于帮助人们利用零散时间学习编程。
  • css-tricks 一个学习 css 不错的网站 有很多有意思的 demo
  • Java 教程
  • 深入浅出现代 Web 编程一站式学习 React, Redux, Node.js, MongoDB, GraphQL 以及 TypeScript！
  • sololearn交互式学习 Python 3,C++， Java
  • web.dev可以由 Google 开发者 M 带你了解 Web 基础
  • scrimba一个交互式编程教学网站，视频播放过程中,你可以随时编辑正在演示的代码
  • Git 教学一个交互式 git 教学网站

4.网络课程平台

文章收集

::: tip 说明 主要是用来收集汇总平时看过得一些不错的文章，方便日后查找 :::

浏览器

How browsers work

编程

leetcode 题解 用 js 刷 leetcode

代码重构经验

Functors, Applicatives, And Monads In Pictures

React

Vue

手摸手，带你用 vue 撸后台 系列一(基础篇)

手摸手，带你用 vue 撸后台 系列二(登录权限篇)

手摸手，带你用 vue 撸后台 系列三 (实战篇)

手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)

手摸手，带你封装一个 vue component

手摸手，带你优雅的使用 icon

前端

Press Enter to Submit 背后的那些事

Webnovel 国际化实践

Things I Don’t Know as of 2018

The TypeScript Tax: A Cost vs Benefit Analysis 主要讲 ts 收益，具有一定可读性

TypeScript 解决了什么痛点？ 比较中肯的一个答案，做技术不要盲目跟风

GraphQL

GraphQL 核心概念

RPC vs REST vs GraphQL

Why use GraphQL, good and bad reasons

职业发展

一个程序员的成长之路 张云龙大佬的文章，强推！！值得反复阅读。

开发者如何在「技术+管理」的路上越走越宽？

蔡志忠：努力是没有用的

视频

计算机科学速成课 计算机科学基础的系列视频，很不错，浅显易懂，看完这四十节课能多计算机世界有一个大概的整体认知。

其它

前端人工智能？TensorFlow.js 学会游戏通关

谈谈 WebSocket

https://zhuanlan.zhihu.com/p/37171897

小程序

只需两步获取任何微信小程序源码 挺有意思的一篇文章

node

基于 node.js 的脚手架工具开发经历 How to build a CLI with Node.js

网络

什么是 RPC 框架？

前端技术清单

关于 JavaScript 单线程的一些事

从零开始开发一款属于你的 Visual Studio Code 插件

AST

平庸前端码农之蜕变 — AST

交互

让功能找到用户；让用户体验美好「自然交互 1」

资源网站

设计相关

No Design 网站上收集了许多十分便利的 UI 设计工具与设计资源

500px 照片分享网站

觅元素 设计元素的免费下载网站_免抠素材

站酷海洛 设计师互动平台，素材交易网站

uimovement 能从这个网站找到不少动画交互的灵感

awwwards是一个一个专门为设计精美的网站以及富有创意的网站颁奖的网站

dribbble 经常能在上面找到很多有创意好看的 gif 或者图片，基本上我所有的图都是上面找的

Pexels免费素材图片

Iconfont-阿里巴巴矢量图标库

技术相关

Android FOSS安卓系统的免费开源软件（FOSS）清单

前端开发

Awesomes-Web 前端开发资源库

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

Appscope - Progressive Web Apps ExamplesAppscope 是一款专门用来收集渐进式网页应用 Progressive Web Apps(PWA)的网站

技术书籍

技术书籍资源下载

免费计算机书籍汇总

其他

chrome 插件/扩展推荐

蜗牛图书馆蜗牛图书馆集成全球知名高校图书馆，包含上百种期刊数据库，提供一站式文献检索下载服务

知网

wikipedia自由的百科全书

友情链接

这里主要收集一些自己觉得不错的网站。

其他人的收藏

其他

About

My Bookmarks

Resources

Readme

License

MIT license
Activity

Stars

4 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages