Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/pftom/awesome-fe-resources

平时工作中看到、学到的一些实用的前端资源
https://github.com/pftom/awesome-fe-resources

List: awesome-fe-resources

Last synced: about 1 month ago
JSON representation

平时工作中看到、学到的一些实用的前端资源

Awesome Lists containing this project

README 

        
# awesome-fe-resources



> 一些优质的前端资源



## 对打造产品有帮助



- [Kong](https://github.com/Kong)：Cloud Native API Gateway

  - [insomnia](https://github.com/Kong/insomnia)：开源的 API Client 和 GraphQL/REST/gRPC 设计平台

  - [mockbin](https://github.com/Kong/mockbin)：Mock、测试和追踪微服务的 HTTP 请求和响应

- [rought-notation](https://github.com/rough-stuff/rough-notation)：在 Web 上创建动画草图

- [xstate](https://github.com/davidkpiano/xstate)：现代 Web 的状态机和状态图

- [jonschlinkert](https://github.com/jonschlinkert)：研究 Markdown 的人

- [git-notify](https://github.com/jevakallio/git-notify)：通过 git commit 消息通知重要的更新

- [yjs](https://github.com/yjs/yjs)：实时协作

- [moleculer](https://github.com/moleculerjs/moleculer)：渐进式的 Node.js 微服务框架

- [markup](https://github.com/github/markup)：判定那些 markup 库需要使用，在渲染 github 的 README内容时

- [code-server](https://github.com/cdr/code-server)：在浏览器中使用 VSCode

- [open-base](https://openbase.com/js/@vue/compiler-dom)：可以查看一个库的一些相关信息

- [ab-testing](https://github.com/appannie/ab-testing)：AB Test 的框架

- [hackershare](https://hackershare.dev/bookmarks)：基于标签和设计的平台

- [getstream.io](/Users/bytedance/Projectes/my-projects/github/awesome-fe-resources)：一个 RSS/Podcast 的开源平台

- [stringer](https://github.com/swanson/stringer)：自建、反社交的 RSS Reader

- [stream](https://getstream.io/)



> RSS 和 Podcast 的本质是什么？



## 未来会研究的



- [lucet](https://github.com/bytecodealliance/lucet)：WebAssembly 沙盒编译器

- [xstate](https://github.com/davidkpiano/xstate)：现代 Web 的状态机和状态图

- [wasmtime](https://github.com/bytecodealliance/wasmtime)：独立的，JIT 风格的 WebAssembly 

- [thinscript](https://github.com/evanw/thinscript)：低层次的类 TS 的语言



## 优质的 Github 库



- [awesome-f2e-libs](https://github.com/sorrycc/awesome-f2e-libs) - umijs、dva 的开发者，蚂蚁金服的大佬整理的前端库

- [godbasin](https://github.com/godbasin/godbasin.github.io)：被删前端博客

- [awesome-cto](https://github.com/kuchin/awesome-cto)：对创业公司友好的一些 CTO 相关的资源

- [frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) ：前端 Web 开发者的一系列总结的优质资源，包括架构、生态、兼容性、协议等

- [modern-web](https://github.com/modernweb-dev/web)：现代 Web 开发的指南、工具和库

- [web-dev-for-beginners](https://github.com/microsoft/Web-Dev-For-Beginners)：微软出品的 Web 基础开发课程

- [front-end-interview-handbook](https://github.com/yangshun/front-end-interview-handbook)：前端面试手册

- [coding-interview-university](https://github.com/jwasham/coding-interview-university)：一个成为软件工程师的计算机科学学习计划

- [cs-video-courses](https://github.com/Developer-Y/cs-video-courses)：一系列计算机科学视频课程

- [engineering-blogs](https://github.com/kilimchoi/engineering-blogs)：一系列工程师的博客

- [app-ideas](https://github.com/florinpop17/app-ideas)：一系列提升编码技能的应用想法

- [awesome-fenix](https://github.com/fenixsoft/awesome-fenix)：讨论如何构筑一套可靠的分布式大型软件系统

- [awesome-crawler](https://github.com/BruceDone/awesome-crawler)：一系列爬虫集合，包含多种语言

- [dt-fe/weekly](https://github.com/dt-fe/weekly)：阿里大佬出品的前端精度周刊

- [awesome-ddd](https://github.com/heynickc/awesome-ddd)：领域驱动设计的系列资源

- [CodeX](https://github.com/codex-team)：一些 Web 爱好者发起的项目，包含 Editorjs 等

- [Text editos](https://github.com/collections/text-editors)：文本编辑器合集

- [algorithm](https://github.com/marcosfede/algorithms)：使用不同的语言解决算法和数据结构的问题

- [javascript-algorithms](https://github.com/mgechev/javascript-algorithms)：使用 JS 实现计算机科学的算法

- [awesome-compilers](https://github.com/aalhour/awesome-compilers)：awesome 编译器系列



## React 相关



- [react-query](https://github.com/tannerlinsley/react-query)：获取、缓存和更新异步数据的 React Hooks

- [react-diagrams](https://github.com/projectstorm/react-diagrams)：使用 react 画流程图

- [jotai](https://github.com/pmndrs/jotai) ：原子的、灵活的 React 状态管理库

- [react-hook-form](https://github.com/react-hook-form/react-hook-form) ：React Hooks 版本的表单验证，支持 Web 和 React Native

- [next-auth](https://github.com/nextauthjs/next-auth) ：Next.js 的验证库

- [react-xr](https://github.com/pmndrs/react-xr)： 使用 react-three-fiber 的 VR/AR 库

- [valtio](https://github.com/pmndrs/valtio)：可以在 React 和原生  JS 中使用代理 State

- [react-textare-autosize](https://github.com/Andarist/react-textarea-autosize)：React 版本的 textarea 自动适应大小

- [flowchar](https://github.com/davidkpiano/xstate)：使用文本快速创建流程图

- [awesome-react-render](https://github.com/chentsulin/awesome-react-renderer)：践行了 React 一次学习，到处使用的哲学，包括渲染到命令行、电视、桌面端、移动端等

- [next-i18next](https://github.com/isaachinman/next-i18next)：方便在 Next.js 中做国际化的库

- [reactive.macro](https://github.com/yesmeck/reactive.macro)：减少 React 的模板代码的库

- [react-ripples](https://github.com/rwu823/react-ripples)：Material 形式的波浪风格

- [web3-react](https://github.com/NoahZinsmeister/web3-react)：使用 React 来构建以太坊 DApp

- [react-refractor](https://github.com/rexxars/react-refractor)：基于 Prism 和 refractor 来对 React 应用进行语法高亮

- [react-dnd](https://github.com/react-dnd/react-dnd)：React 版本的拖拽库

- [material-tailwind](https://material-tailwind.com/)：使用 tailwind 实现 material design

- [zustand](https://github.com/pmndrs/zustand#transient-updates-for-often-occuring-state-changes)：React 中基于 Hooks 的状态管理，🧐思考：基于这个思想借鉴到 Vue 状态管理？需要理解 vuex 做了什么，我们能改进什么

- [react-flow](https://github.com/wbkd/react-flow)：构建高可定制的基于节点的[流程图](https://github.com/wbkd)



## Vue 相关



- [vue-virtual-scrolle](https://github.com/Akryum/vue-virtual-scroller)：接受大规模数据的滚动列表

- [nuxt/vite](https://github.com/nuxt/vite)：Nuxt2 使用 Vite 作为开发工具

- [volar](https://github.com/johnsoncodehk/volar)： Vue3 的 VSCode 语言支持扩展

- [@vueuse/motion](https://motion.vueuse.org/introduction.html)：将 [Popmotion](https://popmotion.io/) 整合到 Vue 中

- [svu](https://github.com/wineSu/svu)：Vue3 的一个简单实现版本

- [vite-design](https://github.com/zhangyuang/vite-design)：提供 Vite 中文文档，分析 Vite 1.0 源码

- [vue-use](https://vueuse.org/)：Vue Composition 的实用函数集合

- [iconify](https://github.com/iconify/iconify)：同构 icon 框架

- [vite-plugin-components](https://github.com/antfu/vite-plugin-components)：Vite 按需自动导入组件

- [swrv](https://github.com/Kong/swrv)：swr 的 Vue 版本

- [harlem](https://github.com/andrewcourtice/harlem)：简单的，unopinionated 的 Vue3 版本的状态管理

- [pinia](https://github.com/posva/pinia)：支持 Vue3 和 Vite 的状态管理方案



## Svelte 相关



- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui)：使用 Svelte 来写桌面端应用



## Flutter



- [awesome-flutter](https://github.com/Solido/awesome-flutter)：Flutter 的系列资源



## CSS 相关



- [goober](https://github.com/cristianbote/goober)：小于 1KB 的 css-in-js 库

- [open-ui](https://github.com/WICG/open-ui)：维护一个 UI 的开放标准

- [tailwindcss](https://github.com/tailwindlabs/tailwindcss)：辅助优先的 CSS 框架，能够快速的开发 UI

- [tailwindcss-jit](https://github.com/tailwindlabs/tailwindcss-jit)：Tailwind 的实时编译器

- [heroicons](https://github.com/tailwindlabs/heroicons)：一系列很棒的 SVG icons 

- [popmotion](https://popmotion.io/)：动画工具箱

- [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography)：Tailwind  字体库

- [tailwind-starter-kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation)：tailwind 实现的一套组件库，用于学习组件库写法

- [supabase-ui](https://github.com/supabase/ui)：Firebase 的开源替代品 UI 组件库



## 组件库相关



- [blueprint](https://blueprintjs.com/docs/#select/omnibar)：基于 React 的 UI 组件库

- [iviewui](https://www.iviewui.com/) ： 基于 Vue.js 的高质量组件库

- [react-md](https://github.com/mlaursen/react-md)：React 实现的 Material Design 组件库

- [argon-design-system](https://github.com/creativetimofficial/argon-design-system)：基于 Bootstrap4 的设计系统

- [tabler](https://github.com/tabler/tabler)：基于 Bootstrap 的 Dashboard UI 组件库

- [rsuite](https://rsuitejs.com/)：一系列 React 组件套件

- [react-spectrum](https://react-spectrum.adobe.com/index.html)：Adobe 的设计系统，包括设计原语、跨平台的状态管理等

- [chakra](https://chakra-ui.com/docs/getting-started)：一个简单的、模块化的、可访问的组件库



## TypeScript 相关



- [type-coverage](https://github.com/plantain-00/type-coverage)：检查一个 TypeScript 项目的 type 覆盖度

- [type-challenges](https://github.com/type-challenges/type-challenges)：TS 的类型挑战的 online judge （OJ）

- [tsd](https://github.com/SamVerschueren/tsd)：检查 TS 类型定义

- [quicktype](https://github.com/quicktype/quicktype)：从 JSON/Schema/GraphQL 转换成 types 或者生成 types



## Node.js 相关



- [prisma](https://github.com/prisma/prisma)：下一代基于 TypeScript 的 Node.js  ORM，支持 PostgreSQL、MySQL、MariaDB、SQL Server & SQLite

- [node-http-proxy](https://github.com/http-party/node-http-proxy#options)：Node.js 的多功能的 http 代理

- [micro](https://github.com/vercel/micro)：异步的 HTTP 微服务

- [sirv](https://www.npmjs.com/package/sirv)：静态资源的服务器

- [serve](https://github.com/vercel/serve)：静态资源的服务器



## 数据库相关



- [querybook](https://www.querybook.org/)：带 notebook 界面的大数据查询的 IDE



## CLI 相关



- [degit](https://github.com/Rich-Harris/degit)：直观的项目脚手架，可以从 github 拉项目到本地



## 好用的插件



- [Foam](https://foambubble.github.io/foam/) ：知识管理和分享系统（VSCode 插件）

- [immutable-object-formatter-extension](https://github.com/mattzeunert/immutable-object-formatter-extension)：将 Immutable 转换为更容易阅读的格式（Chrome 插件）



## 跨平台开发



- [tauri](https://github.com/tauri-apps/tauri)：使用 Web 技术构建更小、更快和更安全的桌面端应用

- [hippy](https://github.com/Tencent/Hippy)：腾讯出品的跨平台开发框架，使用类似 React/Vue 的技术来开发 iOS、Android 和 Web 应用。



## 开发辅助



- [http-serve](https://github.com/http-party/http-server)：零配置的命令行开发服务器

- [serve](https://github.com/vercel/serve)：可作为静态文件服务器以及浏览本地文件目录

- [xstate](https://github.com/davidkpiano/xstate)： 现代 Web 的状态管理库

- [unist-util-select](https://github.com/syntax-tree/unist-util-select)：使用类 CSS 的选择去来选中一元节点

- [auto](https://github.com/intuit/auto)：在 PR 时基于语义版本标签生成 released 包

- [trpc](https://github.com/trpc/trpc)：构建 typesafe 的端到端 API

- [supabase](https://github.com/supabase/supabase)：Firebase 的开源替代版本

- [deepmerge](https://github.com/TehShrike/deepmerge)：深度递归合并 JS 对象

- [polyfill.io](https://polyfill.io/v3/)：根据浏览器的 User-Agent 自动生成必要的 polyfill

- [waypoint](https://github.com/hashicorp/waypoint)：在任意平台上构建，部署，和发布应用

- [dokku](https://github.com/dokku/dokku)：Docker powered 的 Paas 平台，用于管理应用的生命周期



## 测试/调试相关



- [editthiscookie](http://www.editthiscookie.com/)：Chrome 插件，可以方便的设置网站的 Cookie

- [Flame bearer](https://github.com/mapbox/flamebearer) ：极快的 V8 和 Node.js 的火焰图工具

- [patch-package](https://github.com/ds300/patch-package) ：快速修复损坏的 node_modules

- [axe-core](https://github.com/dequelabs/axe-core)：用于 Web UI 自动化测试的可访问性引擎



## 工程化相关



- [commitlint](https://github.com/conventional-changelog/commitlint)：对 commit 信息进行检查

- [commitizen](https://github.com/commitizen-tools/commitizen)：侵入 git cli 提供格式化的提交格式、生成 CHANGELOG

- [lint-staged](https://github.com/okonet/lint-staged)：只对本次提交中有修改的文件进行检查

- [prettier](https://github.com/prettier/prettier)：格式化代码：JS/CSS 等

- [husky](https://github.com/typicode/husky)：可以拦截 git hooks，然后进行代码提交检查

- [editorconfig](https://github.com/editorconfig/editorconfig)：一些编辑器相关的格式化配置

- [esbuild](https://github.com/evanw/esbuild)：极快的 JS 打包器和压缩器，比 Webpack、Parcel、Rollup with terser 都快



## 协议相关



- [automerge](https://github.com/automerge/automerge)：JSON 类型的数据结构，可以同时被多个用户修改然后自动合并



## 编辑器相关



- [keenwrite](https://github.com/DaveJarvis/keenwrite)：基于 Java 的桌面端文本编辑器

- [xdm](https://github.com/wooorm/xdm)：MDX 的编译器，支持 Webpack、Rollup 和 ESBuild 等插件

- [swc](https://github.com/swc-project/swc) ：使用 Rust 写的巨快的 JS 编译器

- [vue-editor-js](https://github.com/ChangJoo-Park/vue-editor-js) ：Vue 版本的 editor.js

- [brackets](https://github.com/adobe/brackets)：adobe 开发的 Web 端的代码编辑器，目前已经停止维护，推荐 VSCode 

- [estree-util-value-to-estree](https://github.com/remcohaszing/estree-util-value-to-estree)：将 JavaScript 值转换为 ESTree 表达式

- [ckeditor](https://github.com/ckeditor/ckeditor5)：强大的富文本编辑，支持常用的 Markdown

- [language-packs](https://github.com/jupyterlab/language-packs)：Jupyter 生态的语言集

- [tribute](https://github.com/zurb/tribute)：ES6 原生的 @mentions

- [medium-editor](https://github.com/yabwe/medium-editor)：使用原生 JS 实现的多平台兼容的类 Medium 编辑器

- [vue-quill](https://github.com/vueup/vue-quill)：Vue3 版本的 Quill 编辑器

- [editorjs](https://editorjs.io/)：一个跨平台、多框架的编辑器

- [mdx-bunder](https://github.com/kentcdodds/mdx-bundler)：给予 MDX/TSX 字符串，返回可以渲染的组件

- [prosemirror-math](https://github.com/benrbray/prosemirror-math)：支持 Prosemirror math

- [rehype-autolink-headings](https://github.com/rehypejs/rehype-autolink-headings)：自动给标题加链接



## 文档相关



- [pitsby](https://pitsby.com/) ：类似 Storybook 一样展示组件的文档，可以进行交互

- [code-surfer](https://github.com/pomber/code-surfer) ：使用代码来编写 PPT

- [mdx-deck](https://github.com/jxnblk/mdx-deck) ：使用 MDX 来编写 PPT



##  应用相关



- [mapbox](https://github.com/mapbox)：为 Web 和移动设备提供位置数据的平台应用

- [glorious](https://glorious.codes/demo?demo=Y29uc3QgZ2RlbW8gPSBuZXcgR0RlbW8oJ1tkYXRhLWRlbW8tY29udGFpbmVyXScpOwoKY29uc3QgY29kZSA9ICdjb25zb2xlLmxvZygiSGVsbG8gV29ybGQhIik7JwoKY29uc3QgaGlnaGxpZ2h0ZWRDb2RlID0gUHJpc20uaGlnaGxpZ2h0KAogIGNvZGUsCiAgUHJpc20ubGFuZ3VhZ2VzLmphdmFzY3JpcHQsCiAgJ2phdmFzY3JpcHQnCik7CgpnZGVtbwogIC5vcGVuQXBwKCdlZGl0b3InLCAlT1BCUiUgbWluSGVpZ2h0OiAnNDAwcHgnLCB3aW5kb3dUaXRsZTogJ2RlbW8uanMnICVDTEJSJSkKICAud3JpdGUoaGlnaGxpZ2h0ZWRDb2RlLCAlT1BCUiUgb25Db21wbGV0ZURlbGF5OiAyMDAwICVDTEJSJSkKICAub3BlbkFwcCgndGVybWluYWwnLCAlT1BCUiUgbWluSGVpZ2h0OiAnNDAwcHgnLCBwcm9tcHRTdHJpbmc6ICckJyAlQ0xCUiUpCiAgLmNvbW1hbmQoJ25vZGUgLi9kZW1vJykKICAucmVzcG9uZCgnSGVsbG8gV29ybGQhJykKICAuY29tbWFuZCgnJykKICAuZW5kKCk7Cg==)：方便创建展示代码的动画

- [github-star-stats](https://stars.yangerxiao.com/)：展示一个 Github 仓库的 Star 趋势

- [tsukae](https://github.com/irevenko/tsukae)：展示最常用的 shell 命令

- [bit](https://github.com/chriswalz/bit)：现代 Git CLI

- [gitnow](https://github.com/joseluisq/gitnow)：加速 Git 工作流

- [venom](https://github.com/orkestral/venom) ：创建 WhatsApp 的 JS 库

- [excalidraw](https://github.com/excalidraw/excalidraw)：一个用于画出类似手画风格图形的虚拟白板

- [pydio/cells](https://github.com/pydio/cells)：一个 Go 实现的文件分享平台

- [Inquirer.js](https://github.com/SBoudrias/Inquirer.js)：用于构建命令行工具的一系列通用工具

- [unlimited-medium](https://github.com/issammani/unlimited-medium)：可以无限观看 Medium 文章的 Chrome 扩展

- [nodejs-text-to-speech](https://github.com/googleapis/nodejs-text-to-speech)：文本转语音的库

- [awesome-lowcode](https://github.com/taowen/awesome-lowcode)：低代码平台从业者交流

- [vdx](https://github.com/yuanqing/vdx)：使用 FFmpeg 来处理 video 的 CLI

- [geometric.js](https://github.com/HarryStevens/geometric)：用来做几何运算的 JS 库

- [zoxide](https://github.com/ajeetdsouza/zoxide)：快速在文件系统里面导航

- [dragula](https://bevacqua.github.io/dragula/)：DnD 库

- [slidevjs](https://github.com/slidevjs/slidev)：用 Markdown/Vue 等来做 PPT



## 底层相关



- [awesome-scalability](https://github.com/binhnguyennus/awesome-scalability) ：构建大规模、可依赖和高性能的系统模式总结

- [ssim](https://github.com/obartra/ssim) ：比较两张图片

- [pngquant](https://github.com/ImageOptim) ：高效压缩 png 图片

- [uhtml](https://github.com/WebReflection/uhtml)： 一个微型 html/svg 渲染器

- [wasm3](https://github.com/wasm3/wasm3)：使用 C 写的超快的 WebAssembly 解释器

- [jsencrypt](https://github.com/travist/jsencrypt)：可以用于 OpenSSL RSA 加密、解密和秘钥生成

- [assemblyscript](https://github.com/yesmeck/reactive.macro)：将 TypeScript 转为 WebAssembly

- [crates.io](https://crates.io/)：Rust 社区包源，类似 JS 的 npm

- [prepack](https://github.com/facebook/prepack)：一个 JavaScript 打包优化器

- [llvm-project](https://github.com/llvm/llvm-project)：LLVM 编译器架构

- [bazel](https://bazel.build/)：构建和测试任何大小的软件，快速且可依赖

- [ohm](https://github.com/harc/ohm)：一个构建 parsers、interpreters、compilers 的库或者语言

- [surcras](https://github.com/alangpierce/sucrase)：超快的 Babel 替代品编译器，只考虑现代的 JS runtimes

- [twgl.js](https://github.com/greggman/twgl.js)：小的 WebGL 帮助库

- [RecordRTC](https://github.com/muaz-khan/RecordRTC)：是一个 WebRTC JavaScript library

- [resize-observer](https://github.com/juggle/resize-observer)：Polyfills the ResizeObserver API



## 生活相关



- [shanghai_house_knowledge](https://github.com/ayuer/shanghai_house_knowledge) ：程序员上海买房经历

- [leerob.io](https://github.com/leerob/leerob.io)：基于 Next.js、MDX、Tailwind CSS 编写，并部署到 Vercel 的博客



## 组件库相关



- [vanillajs-datepicker](https://github.com/mymth/vanillajs-datepicker)：使用纯 JS 实现的类似 bootstrap/bulma 的 datepicker



## 优秀的开源书籍



- [mastering-modular-javascript](https://github.com/mjavascript/mastering-modular-javascript)：模块 JS 教程

- [ponyfoo](https://ponyfoo.com/books/mastering-modular-javascript/chapters/2#read)：一系列开源书籍，网站设计值得参考