Skip to content

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

License

Notifications You must be signed in to change notification settings

pftom/awesome-fe-resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 

Repository files navigation

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

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published