个人资源积累,✭ 号表示强烈推荐
下面按 Web 开发步骤反复梳理文档:
- ✭ FrontendMagazine 知乎前端外刊评论
- ✭ 前端之巅
- ✭ gold-miner 掘金翻译计划,大量精彩技术文档
- ✭ javascriptweekly javascript 周报
- ✭ d2forum D2前端技术论坛资料
- ✭ github trending github 仓库热度趋势
- 前端知识图谱 (阿里系)
- 50weekly 发现高质量的前端资源
- nodeweekly node 周报
- HelloGitHub
- 程序员们平时都喜欢逛什么论坛呢?
- Javascript
- js版本号的故事
- JS入门
- javascript info 现代 javascript 教程
- awesome-nodejs
- es6
- TypeScript
- TypeScript 中文网
- TypeScript 入门教程
- TypeScript-React-Starter
- dts-gen d.ts 自动生成
- 深入理解 TypeScript
- TypeScript 类型体操
- 用一个数组来定义类型
[] as const
- 用一个数组来定义类型
- Node
- Deno
- shell
- 30分钟shell入门
- shell 教程
- ✭ 命令行的艺术
- shellcheck shell 命令在线检查分析,辅助查找 shell 命令的错误
- php
- smarty
- php之道
- php Socket编程起步
- swoole 现代 PHP 开发,面向生产环境的 PHP 异步网络通信引擎
- rust
- go
- 怎么学习Golang
- Learning-Go-zh-cn go 语言学习中文版
- tour-golang go 语言教程
- gobyexample go 示例代码
- build-web-application-with-golang
- webgo 学习路由怎么实现
- skynet-archive 学习分布式
- etcd-io/etcd 学习分布式
- Go编程基础
- Go Web基础
- Go名库讲解
- lua
- linux
- linuxtools_rst 这本书专注于Linux工具的最常用用法
- 浏览器交互流程 --当你按下回车键时发生了什么
- referrer-policy referrer 协议介绍 (document.referrer, header 中的 referrer)
- 正则表达式回溯法原理
- stream-handbook node stream 概念说明
- Understanding the CSS Transforms Matrix
- 理解矩阵
- Cron 定时任务表达式手册
- fe-dev-playbook 打造舒适高效的前端开发环境
- 移动开发
- warriorjs 一个编程游戏
- codecombat 编程游戏
- wtf js js 缺陷集锦
- 一个正则表达式引发的血案,让线上CPU100%异常!
- 用JSON构建API的标准指南
- spellbook-of-modern-webdev
- 《屋中的大象》-- Apache基金会副总裁几十年的观察
- 编程哲学(一):愚者无疑,智者多虑 后续有 1-10 多篇文章,都在一个专栏下
- hacker-laws
- 极客法则 对开发人员有用的定律、理论、原则和模式。
- js 与 dom 参考(w3schools)
- html5
- orientation 重力感应
- html5rocks 各种 html5 demo
- video
- canvas
- mdn canvas
- w3school canvas
- khronos webgl wiki
- 让canvas像flash一样工作
- canvas截图
- rasterizeHTML
- dom-to-image 用svg截图
- spritejs 用像操作dom一样的api操作canvas
- html2canvas javascript dom 截图
- webgl
- opengl
- learnopengl 英文版 opengl教学
- learnopengl-cn 中文版 opengl教学
- svg
- 使用脚本动态操作 SVG 文档
- mdn svg教程
- svg 中文教程
- svg线条动画 vivus
- svgomg svg 在线优化工具
- svg-optimiser svg 在线优化
- pwa
- resvg-js svg 渲染为图片,高性能的 SVG 跨端渲染引擎
- navigator-share web share web分享api
- ✭ browser share 浏览器市场占有率
- mac
- HomeBrew mac os 包管理器
- 国内镜像安装Homebrew
- winows
- wsl
- WSL 安装及前端开发环境配置
- cmder windows上的命令行环境
- top-command-line-tools 最受欢迎的命令行工具
- shelljs node.js运行shell命令组件
- iterm2-zmodem 解决 item2 使用 rz,sz 管理终端文件的问题
- commander 命令行界面开发库
- execa better child_process
- ora 命令行loading
- vorpal 创建交互式CLI的框架
- vantage 将一个应用转化为命令行交互工具
- clui spinners、sparklines、progress bars图样显示组件
- chalk 用于在终端渲染文本颜色
- prompt 用于在终端构建交互式输入
- prompts 另一个漂亮的交互输入工具
- blessed-contrib 命令行可视化组件
- Inquirer.js 命令行交互信息收集组件
- ascii art 生成命令行艺术字
- asciiflow ascii 画图表
- carbonyl 命令行渲染一个浏览器
- isobar 前端代码规范
- 代码规范
- airbnb
- standard
- eslint-config-alloy 腾讯QQ团队规范
- prettier 代码格式化
- idomatic
- google styleguide
- css规范
- 代码增强
- lint
- ✭ eslint
- ✭ eslint 深入浅出
- git
- TortoiseGit windows git可视化工具
- git中文参考手册
- git bash
- git magic
- 坑:换行符自动转换
- git pro 中文
- nodegit git操作的node封装
- gitmoji git日志图标
- svn
- tortoise svn
- Linux下安装svn client
- node-svn-ultimate svn操作的node封装
- lerna 实现框架分包管理
- angular-CONTRIBUTING angular 提交规范,用于实现参考规范
- semver 语义化版本说明
- husky 便捷添加 Git hooks 。
- lint-staged 提交前 lint
- commitizen 代码提交规范化
- conventional-changelog changelog 自动生成
- semantic-release 全自动化版本管理
- standard-version 以较为轻量的方式生成 changelog 。
- commitlint 规范化提交内容。
- gitflow git 工作流规范化
- gitflow工作流程
- 开源许可协议 license
- opencollective 管理开源资金
- sketch 轻量矢量设计工具
- cutterman 图片裁剪
- canva 图片在线编辑
- remove.bg 在线抠图
- framer 大量站点模板
- penpot 面向跨领域团队的开源设计和原型平台
- dribbble 前端体验设计中心,寻找体验优化灵感
- npm
- npm的package.json中文文档
- 淘宝npm镜像
- npm-runkit 一个简单的npm模块实验室
- runkit 在线执行 node repl,引入 npm package
- npms.io npm模块搜索
- npm命令配置技巧
- fixing-npm-permissions npm 安装不再需要 sudo
- yarn facebook 推出的 npm 替代方案,安装模块更迅速
- pnpm 精简包体积的 package 管理工具
- patch-package 为npm包快速打补丁
- verdaccio 搭建私有npm仓库
- nrm 快速切换npm镜像
- concurrently 同时执行多个npm script
- ✭ less
- lesstester less 代码测试
- sass
- sass-reference sass中文参考手册
- sass用法指南 阮一峰版
- sass-compatibility sass兼容性问题
- sass-guidelin sass书写风格指导
- js
- prepack 代码优化,结合webpack与gulp使用
- ✭ vscode 插件无需翻墙就能下载,整体功能对现代前端开发十分友好
- Beautify, Prettier 美化代码
- Debugger for Chrome 配合 chrome 控制台进行代码调试
- Eslint, markdownlint, TSLint 检查代码规范
- Vetur vue开发支持
- Sublime Text Keymap and Settings Importer 支持使用 Sublime 的快捷键操作编辑器
- wakatime 安装这个插件,统计编码时长
- sublime 性能很好,但是配置起来比较麻烦,而且插件资源都需要翻墙才能下载
- DocBlockr 便捷生成jsdoc可以处理的多行注释
- vim vim官方资源
为前端业务来选择一个技术栈
- js-framework-benchmark js框架基准性能测试
- solid 高性能响应式框架
- preact react的精简版
- svelte 基础编译版本仅9kb
- jquery
- jquery-ui
- jquery file upload
- viewerjs 图片展示jquery插件
- cropper 图片裁剪jquery插件
- bxslider 基于jquery的响应式幻灯组件
- ant-design 阿里系的设计开发工具
- arco-design 字节跳动出品的企业级设计系统
- semi-design 抖音前端团队,MED 产品设计团队设计、开发并维护的设计系统
- tdesign 腾讯系的设计开发工具
- hdesign 华为系的设计开发工具
- react
- 教程与学习
- UI
- ant-design-pro 里面还包含了脑图编辑,流程编辑
- element react
- ring-ui 使用 Typescript 进行开发
- blueprint 使用 Typescript 进行开发
- 替代品
- ssr
- 框架补充
- react-router
- redux 通用react数据仓库
- mobx 另一个数据仓库
- immer immutable state 管理器
- formik 表单处理
- 工程
- jest 测试工具
- create-react-app 创建项目
- create-react-pwa pwa 支持
- enzyme 测试工具
- create-react-library 创建 React 库
- vue2
- vue3
- awesome-vue
- UI
- element ui 适用于桌面端ie9+
- iview 适合做数据报表
- tdesign-vue
- tdesign-vue-next
- ant-vue
- acro-vue
- hui-vue
- ssr
- 工程
- vue-router vue 路由
- vue-cli vue 项目创建工具
- vue-test-utils vue ui 测试工具
- vite vue3 推荐构建工具
- vitesse 最受欢迎的 vue3 项目模板
- vuex vue 数据存储
- pinia 适配 vue3 的数据存储库
- babel-plugin-transform-vue-jsx 用 jsx 编写 vue2 代码
- jsx-next 用 jsx 编写 vue3 代码
- other
- vuido 用 vue 构建桌面应用
- 集成后台管理
- 微信小程序
- spore-kit-wapp 个人工具,视图组件封装
- 微信小程序开发资源汇总
- 图表
- 框架
- JS/TS
- cordova PhoneGap/Cordova Hybrid App
- appcan 国内 Hybrid App
- react-native React 跨平台 app 开发工具
- NativeScript 跨平台 app 开发工具
- weex vue 跨平台 app 开发工具
- flutter 基于 Dart 的 app 开发框架,来自 Google
- ArkTs
- electron 构建桌面app
- electron-vue 基于vue框架的electron应用
- node-webkit
- 框架
- 数据库
- typeorm typescript 形式的数据库 ORM
- sharedb 用于解决多人编辑问题的数据库
- kysely 基于 ts 类型安全的 sql 查询库, inspired by knex, 可以在 deno 环境执行
- sequelize 老牌 ORM
- prisma TypeScript 生态类型安全 ORM
- mongoose MongoDB 数据库 Node ORM
- knex 为 PostgreSQL,CockroachDB,MSSQL,MySQL,MariaDB,SQLite3,Better-SQLite3,Oracle和Amazon Redshift设计的SQL查询构建器
- objection SQL 友好型 ORM
- ali-mysql-client 优雅的数据库 api
- Redis
- redis 连接 redis
- IO
- node-fetch fetch 的 node 版本
- 接口设计
- graphql facebook 推出的接口封装工具
- graphql-js js版实现
- APIJSON 腾讯开源的接口开发工具
- graphql facebook 推出的接口封装工具
- 模板引擎
- 日志
- winston 日志管理
- file-stream-rotator 文件循环,可以用来做日志循环
- rsyslog
- denon 监听文件变更的常驻进程
- velociraptor 启动脚本配置化
- oak deno 上的 koa 框架
- pagic 基于 deno 和 react 的静态发布站
- beego web框架
- Bee 脚手架工具,支持项目结构生成,热编译,打包,版本升级,容器化
- Beego Swagger 代码注释生成 api 在线文档
- Termui 跨平台,自适应的UI/Dashboard工具
- gomobile 在移动平台使用和构建 Go 的一套工具集,做原生应用
- therecipe/qt 跨平台GUI库
- present 幻灯片展示工具
现代开发,你自己的代码可能只占应用总代码量的 1%
- 乾坤 微前端解决方案
- single-spa 前端微服务解决方案
- ✭ iconfont 阿里巴巴矢量图标库
- icoMoon
- font-spider 字蛛:智能 WebFont 压缩工具
- font-awesome 开源图标字体库
- fontmin
- one div
- a single div
- nicon 图标管理服务器,支持私有部署
- realfavicongenerator favicon 生成
- favicon-generator favicon 生成
- 图片压缩
- ✭ squoosh 谷歌开源图片压缩工具
- ✭ squoosh.app 谷歌图片压缩服务
- hummingbird 蜂鸟图片压缩
- ✭ img.top 在线图片压缩
- ntn选择器精通-练习工具与实验场
- regex101 在线正则检查工具,可用来研究正则是否存在致命缺陷
- 检查设备屏幕相关参数
- unicode 图表字符集合
- unicodeicon utf8 图形字符
- unicode-table utf8 字符搜索
- 各个CDN服务提供的静态资源
- 在线JS代码格式化
- 给项目起名
- 简繁转换
- 贝塞尔动画生成器
- TimeIs 用于校对时间,验证直播延迟时有用
- 文件转base64
- obsproject 跨平台直播推流工具,适合测试rtmp直播
- FSCapture 屏幕像素数值测量工具
- css3generator css3 生成器
- css-generator 全面的 css 生成器
- css-grid-layout-generator css grid 布局生成器
- cip.cc 检查出口IP
curl cip.cc
- driver.js 做引导动画
- dialog
- 适用pc
- artDialog 简洁的对话框,QQ空间在用
- sweetalert 动画效果惊艳,但展示面积较大,不太适合移动端
- 均可
- 适用pc
- 集合
- material Material Design
- material-components-web-catalog 组件目录
- material-components-web 示例UI
- material-ui 实现 Google Material Design 的 React 组件库
- material-design-lite 谷歌官方组件库
- material2 基于 Angular 的 MDUI
- windicss 号称下一代响应式 CSS 框架,热度较高,vue3 社区推荐
- spectre 轻量级响应式css框架
- foundation 很多响应式框架依赖的响应式样式框架
- amaze ui 重视动画交互
- flat ui 扁平化
- Semantic-UI 响应式样式框架
- bootstrap twitter 出品的响应式框架
- weui 微信风格样式框架,适合移动端开发
- spectre 一个响应式css框架
- 飞冰 阿里的飞冰,用于中后台项目搭建
- material Material Design
- Javascript-Load-Image 加载图片并缩放
- fullPage 创建全屏滚动页面的框架
- 图片裁剪
- 幻灯
- PhotoSwipe 经典桌面swiper
- swiper 幻灯,h5slides
- impress 创建炫目的幻灯展示
- webslides 快速创建幻灯
- video.js 视频
- SoundJS 基于Audio Api 音频处理
- EaselJS 对 canvas api 的封装
- slate 现代富文本编辑器,与 React 集成性很好
- quill 现代所见即所得编辑器
- draft-js 基于react的编辑器
- CodeMirror 代码编辑器
- mathjax 公式编辑器
- lottie 设计导出动画直接供开发使用
- AlloyTouch 平滑滚动
- walkway svn路径动画
- TweenJS 动画过渡管理
- tween.js 动画过渡管理
- velocity 动画过渡管理
- bezier-easing 贝塞尔函数生成器
- simple easing 简单过渡动画函数
- Animate.css 动画样式集合
- greensock 高性能动画生成
- anime Anime.js 是一个轻量级的JavaScript动画库
- animejs 官方站点
- js动画引擎
- 3d引擎
- IO
- 时间处理
- 字符串处理
- voca 字符串操作工具
- grapheme-splitter 不同语言的字符串长度判断与裁剪
- 数学
- 格式校验
- 算法
- lz-string 基于lz的JavaScript压缩算法
- qrcode 二维码
- sortable 拖拽排序
- city 国家行政区划分数据
- kibo 键盘事件绑定
- ua-parser-js UA解析
- lazyload 图片延迟加载
- minimatch 文件路径匹配
- js-cookie
- step 流程控制
- 数据可视化 各种图表工具
- d3 用于制作复杂图表
- chart.js 体积小,适合 h5
- highcharts 开源图表框架,兼容性好
- echarts 百度推出的图表工具,功能强大,提供了webgl版本
- g2 蚂蚁金服推出的图表工具
- mermaid markdown 生成图表
- springy 生成点线拓扑图
- jsplumb 流程图绘制
- AntV 蚂蚁金服 - 数据可视化
- AntV/X6 图编辑引擎,搭建流程图,逻辑编排
- SandDance 微软炫酷3D图表
- socket.io 传统 websocket 库
- websockets/ws 性能更好的 websocket 库
- WebSocket-Node 另一款 Node websocket 的实现
- PxLoader 用于实现各种资源加载中状态
- masonry 瀑布流快速实现
- SpinKit 几个 css3 loading 效果
- JSPatch 封装js与ios交互
- cheerio 服务端的类jquery语法库
- AlloyImage 腾讯出品,图形图像处理
- AlloyFinger 多点触控封装
- mescroll 上拉刷新,下拉加载交互库
- smooth-scroll 点击锚点,平滑滚动
- scrollama 基于 IntersectionObserver 的滚动交互组件
- twemoji 实现 Emoji 展示
- wavesurfer.js 实现声音波形图渲染
- libuv Cross-platform asynchronous I/O
- opencv4nodejs opencv node 版,人脸识别,智能识别
- url-join url 字符串连接
- iconv 页面编码转换
- fs-extra 文件操作增强
- url-parse url解析
- sofa-rpc-node 一个通用的 Nodejs RPC 解决方案
- sofa-bolt-node SOFABolt 的 Nodejs 实现,它包含了 Bolt 通讯层协议框架,以及 RPC 应用层协议定制
- elasticsearch 开源搜索引擎
- 七牛云 免费CDN服务,图片上传
- 语音识别,人脸识别 科大讯飞
- 腾讯文智中文语义平台
- 讯飞开放平台
- 数据库
- 代码托管
- 统计
- 如何使用第三方统计工具
- 数据可视化
- 站点统计
- 集合
- javascript-algorithms javascript 算法集合
- python-algorithms Python 算法集合
- 寻路算法
- 人工智能
- 算法练习与学习
- leetcode LeetCode is the best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews.
- yeoman 自定义脚手架
- devtools
- BrowserSync 浏览器代码实时同步
- ✭ vConsole 提供一个Js编写的控制台,解决手机浏览器调试麻烦的问题
- saucelabs 开放测试平台 可在github readme生成兼容列表
- 移动端调试
- chrome插件
- Edit-This-Cookie cookie 编辑
- FeHelper 前端调试助手
- 移动端前端开发调试
- Node
- node-inspector node调试工具
- hotload
- nodemon 监听文件重启服务
- node-supervisor 代码保存触发hotload
- chrome-protocol-proxy chrome控制台调试接口代理
- ✭ http-proxy-middleware node代理中间件
- ✭ whistle 基于node的调试代理工具
- ✭ VRouter 跨平台搭建透明代理
- anyproxy 基于 node 的代理工具,阿里出品
- nproxy 基于 node 的静态文件代理
- 图片占位
- 数据模拟工具
- json generator
- ✭ mock.js 一个数据模拟工具
- Faker.js 一个数据模拟工具
- mock server
- rap 阿里 java mock server
- json server
- swagger
- yapi 一个可本地部署的、打通前后端及QA的、可视化的接口管理平台
- mockstar 轻量 mock 服务
- spore-mock 本地化mock服务
- ios mock
- OCMock 提供 Stub 和 Mock 功能的框架
- mocha 前端测试框架,既可以用于浏览器端,也可以用于服务器端
- chai 测试断言库
- should.js 测试断言库
- ✭ power-assert No API is the best API.
- karma 测试自动化
- nightwatchjs UI测试自动化
- macaca 多端自动化测试解决方案
- cypress 基于 chrome 的e2e测试
- matman matman 是一个用于端对端(e2e)测试的工具,出自腾讯
- ios
- XCTest Xcode 自带的单元测试框架,提供断言功能
- supertest 测试代码可以集成到项目
- responsivedesign 快速检查网站在不同屏幕尺寸下的外观
- responsivedesignchecker 响应式网页设计检查器
- browserstack BrowserStack是付费服务,可让你在2000多种真实设备和浏览器上测试你的网站或应用程序
- apache
- pm2 多进程管理 进程失败后重新拉起进程
- nginx
- localtunnel 将本地服务暴露到公网
- cloudbase-framework 腾讯云开发
- travis 适用于Github托管项目
- jenkins
- appveyor 应用持续构建,适用于Github托管项目
- circleci 适用于Github托管项目
- drone 原生容器持续集成分发平台
- docker
- docker 文档
- docker 入门
- docker 从入门到实践
- dockerhub docker 仓库
- 阿里云docker镜像服务
- 错误监控
- node 服务监控
- pandora 专业的 Node.js 应用监控管理器,阿里开源
- 性能监控,前端错误率
- wiki
- markdown
- markdown语法说明
- markdown语法示例
- markdown-it Markdown 解析器,vuepress 使用它完成对 md 文件的解析
- typora 极致简洁的 markdown 编辑器
- typora typora 的 github 地址
- mermaid markdown 生成图表
- dumi markdown 生成 html 文档
- gitbook
- 文档撰写
- bisheng ant-design 的文档生成工具
- vue-markdown-loader element-ui 使用的文档生成工具
- ✭ documentation 使用jsdoc语法,生成文档更贴近现代风格,适合注释转文档
- jsdoc 部分格式陈旧,支持node生成方面不错
- ✭ docsify 适合md转文档,wepy使用这个撰写了文档,看起来很舒服
- docute 便捷的单页文档,风格比较现代
- typedoc TypeScript项目的文档生成器,但看起来生成的文档过重
- deeplearnjs-doc deeplearn.js 的文档,用typedoc生成
- docdash jsdoc模板,界面看起来比较舒服,移动端界面看起来不完善
- jsduck sencha出品,适合命名空间与类的文档描述,适合传统js库,不适合单独模块文档构建
- 图表生成
- 代码高亮
- 徽章生成
- shields 自定义徽章
- 静态站部署
- pages github 静态站
- 静态站生成器
- react 静态站
- vue 静态站
- ✭ vuepress vue静态站点生成器
- vue-awesome-swiper 基于 swiper 4,支持SSR
- 生成器
- 静态站工具
- ✭ codepen 更适合编写showcase,在线编辑比较方便,各种预处理器齐全
- codesandbox 谷歌部分项目在用,看界面感觉不错
- jsbin 老牌代码展示服务
- jsfiddle 访问感觉比较缓慢,但属于老牌代码展示工具,对于代码展示功能齐备
- sololearn SoloLearn是一个在线游乐场,可让你测试HTML,CSS和JavaScript代码
- jsrun 国内版 codepen,访问速度快
- asciinema 终端命令行录制工具
- repl 在线开源交互执行平台,可以演示在服务端运行的代码,jest在用
- licecap 屏幕操作录制 gif
- ScreenStudio
- FocuSee(Mac)
- 前端研发生态环境构建经验谈
- 权限控制
- Github
- github docs github 文档
- github trending javascript 热门趋势
- github showcases 开源范例
- github explorer 资源浏览器
- github actions
- 文章
- GotGithub 熟练掌握 github
- 技巧:github上传图片和在线示例
- 如何为开源做贡献
- 少有人知的github使用技巧
- GitHub 漫游指南
- 果壳中的git
- ✭ 提问的智慧
- ✭ 如何向开源项目提交无法解答的问题
- ✭ 如何有效地报告 Bug
- ✭ 如何向开源社区提问题
- Github 相关工具
- Github 开源指南
- 国际化
- awesome 资源集合
- awesome 各类资源集合
- awesome-wechat-weapp 微信小程序
- 微信机器人
- qq机器人
- facebook机器人
- robotjs node桌面自动化实现
- 程序员客栈 外包协作