Giters

pftom / awesome-fe-resources

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

awesome-fe-resources

一些优质的前端资源

对打造产品有帮助

  • Kong：Cloud Native API Gateway
    • insomnia：开源的 API Client 和 GraphQL/REST/gRPC 设计平台
    • mockbin：Mock、测试和追踪微服务的 HTTP 请求和响应
  • rought-notation：在 Web 上创建动画草图
  • xstate：现代 Web 的状态机和状态图
  • jonschlinkert：研究 Markdown 的人
  • git-notify：通过 git commit 消息通知重要的更新
  • yjs：实时协作
  • moleculer：渐进式的 Node.js 微服务框架
  • markup：判定那些 markup 库需要使用，在渲染 github 的 README内容时
  • code-server：在浏览器中使用 VSCode
  • open-base：可以查看一个库的一些相关信息
  • ab-testing：AB Test 的框架
  • hackershare：基于标签和设计的平台
  • getstream.io：一个 RSS/Podcast 的开源平台
  • stringer：自建、反社交的 RSS Reader
  • stream

RSS 和 Podcast 的本质是什么？

未来会研究的

  • lucet：WebAssembly 沙盒编译器
  • xstate：现代 Web 的状态机和状态图
  • wasmtime：独立的，JIT 风格的 WebAssembly
  • thinscript：低层次的类 TS 的语言

优质的 Github 库

React 相关

  • react-query：获取、缓存和更新异步数据的 React Hooks
  • react-diagrams：使用 react 画流程图
  • jotai ：原子的、灵活的 React 状态管理库
  • react-hook-form ：React Hooks 版本的表单验证，支持 Web 和 React Native
  • next-auth ：Next.js 的验证库
  • react-xr： 使用 react-three-fiber 的 VR/AR 库
  • valtio：可以在 React 和原生 JS 中使用代理 State
  • react-textare-autosize：React 版本的 textarea 自动适应大小
  • flowchar：使用文本快速创建流程图
  • awesome-react-render：践行了 React 一次学习，到处使用的哲学，包括渲染到命令行、电视、桌面端、移动端等
  • next-i18next：方便在 Next.js 中做国际化的库
  • reactive.macro：减少 React 的模板代码的库
  • react-ripples：Material 形式的波浪风格
  • web3-react：使用 React 来构建以太坊 DApp
  • react-refractor：基于 Prism 和 refractor 来对 React 应用进行语法高亮
  • react-dnd：React 版本的拖拽库
  • material-tailwind：使用 tailwind 实现 material design
  • zustand：React 中基于 Hooks 的状态管理，🧐思考：基于这个**借鉴到 Vue 状态管理？需要理解 vuex 做了什么，我们能改进什么
  • react-flow：构建高可定制的基于节点的流程图

Vue 相关

Svelte 相关

Flutter

CSS 相关

组件库相关

  • blueprint：基于 React 的 UI 组件库
  • iviewui ： 基于 Vue.js 的高质量组件库
  • react-md：React 实现的 Material Design 组件库
  • argon-design-system：基于 Bootstrap4 的设计系统
  • tabler：基于 Bootstrap 的 Dashboard UI 组件库
  • rsuite：一系列 React 组件套件
  • react-spectrum：Adobe 的设计系统，包括设计原语、跨平台的状态管理等
  • chakra：一个简单的、模块化的、可访问的组件库

TypeScript 相关

  • type-coverage：检查一个 TypeScript 项目的 type 覆盖度
  • type-challenges：TS 的类型挑战的 online judge （OJ）
  • tsd：检查 TS 类型定义
  • quicktype：从 JSON/Schema/GraphQL 转换成 types 或者生成 types

Node.js 相关

  • prisma：下一代基于 TypeScript 的 Node.js ORM，支持 PostgreSQL、MySQL、MariaDB、SQL Server & SQLite
  • node-http-proxy：Node.js 的多功能的 http 代理
  • micro：异步的 HTTP 微服务
  • sirv：静态资源的服务器
  • serve：静态资源的服务器

数据库相关

  • querybook：带 notebook 界面的大数据查询的 IDE

CLI 相关

  • degit：直观的项目脚手架，可以从 github 拉项目到本地

好用的插件

跨平台开发

  • tauri：使用 Web 技术构建更小、更快和更安全的桌面端应用
  • hippy：腾讯出品的跨平台开发框架，使用类似 React/Vue 的技术来开发 iOS、Android 和 Web 应用。

开发辅助

  • http-serve：零配置的命令行开发服务器
  • serve：可作为静态文件服务器以及浏览本地文件目录
  • xstate： 现代 Web 的状态管理库
  • unist-util-select：使用类 CSS 的选择去来选中一元节点
  • auto：在 PR 时基于语义版本标签生成 released 包
  • trpc：构建 typesafe 的端到端 API
  • supabase：Firebase 的开源替代版本
  • deepmerge：深度递归合并 JS 对象
  • polyfill.io：根据浏览器的 User-Agent 自动生成必要的 polyfill
  • waypoint：在任意平台上构建，部署，和发布应用
  • dokku：Docker powered 的 Paas 平台，用于管理应用的生命周期

测试/调试相关

  • editthiscookie：Chrome 插件，可以方便的设置网站的 Cookie
  • Flame bearer ：极快的 V8 和 Node.js 的火焰图工具
  • patch-package ：快速修复损坏的 node_modules
  • axe-core：用于 Web UI 自动化测试的可访问性引擎

工程化相关

  • commitlint：对 commit 信息进行检查
  • commitizen：侵入 git cli 提供格式化的提交格式、生成 CHANGELOG
  • lint-staged：只对本次提交中有修改的文件进行检查
  • prettier：格式化代码：JS/CSS 等
  • husky：可以拦截 git hooks，然后进行代码提交检查
  • editorconfig：一些编辑器相关的格式化配置
  • esbuild：极快的 JS 打包器和压缩器，比 Webpack、Parcel、Rollup with terser 都快

协议相关

  • automerge：JSON 类型的数据结构，可以同时被多个用户修改然后自动合并

编辑器相关

  • keenwrite：基于 Java 的桌面端文本编辑器
  • xdm：MDX 的编译器，支持 Webpack、Rollup 和 ESBuild 等插件
  • swc ：使用 Rust 写的巨快的 JS 编译器
  • vue-editor-js ：Vue 版本的 editor.js
  • brackets：adobe 开发的 Web 端的代码编辑器，目前已经停止维护，推荐 VSCode
  • estree-util-value-to-estree：将 JavaScript 值转换为 ESTree 表达式
  • ckeditor：强大的富文本编辑，支持常用的 Markdown
  • language-packs：Jupyter 生态的语言集
  • tribute：ES6 原生的 @mentions
  • medium-editor：使用原生 JS 实现的多平台兼容的类 Medium 编辑器
  • vue-quill：Vue3 版本的 Quill 编辑器
  • editorjs：一个跨平台、多框架的编辑器
  • mdx-bunder：给予 MDX/TSX 字符串，返回可以渲染的组件
  • prosemirror-math：支持 Prosemirror math
  • rehype-autolink-headings：自动给标题加链接

文档相关

  • pitsby ：类似 Storybook 一样展示组件的文档，可以进行交互
  • code-surfer ：使用代码来编写 PPT
  • mdx-deck ：使用 MDX 来编写 PPT

应用相关

底层相关

  • awesome-scalability ：构建大规模、可依赖和高性能的系统模式总结
  • ssim ：比较两张图片
  • pngquant ：高效压缩 png 图片
  • uhtml： 一个微型 html/svg 渲染器
  • wasm3：使用 C 写的超快的 WebAssembly 解释器
  • jsencrypt：可以用于 OpenSSL RSA 加密、解密和秘钥生成
  • assemblyscript：将 TypeScript 转为 WebAssembly
  • crates.io：Rust 社区包源，类似 JS 的 npm
  • prepack：一个 JavaScript 打包优化器
  • llvm-project：LLVM 编译器架构
  • bazel：构建和测试任何大小的软件，快速且可依赖
  • ohm：一个构建 parsers、interpreters、compilers 的库或者语言
  • surcras：超快的 Babel 替代品编译器，只考虑现代的 JS runtimes
  • twgl.js：小的 WebGL 帮助库
  • RecordRTC：是一个 WebRTC JavaScript library
  • resize-observer：Polyfills the ResizeObserver API

生活相关

组件库相关

优秀的开源书籍

About

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

License:MIT License