随缘

Appearance

学习资源 ​

资源 ​

1. Web Developer Road Map ​

developer-roadmap 是一个为开发人员准备的学习路线图，他提供了学习编程中每个阶段的详细信息，并且每年都会进行更新。除了有前端的路线路，还包含后端、Android、Java、Python、Go 等不同方向的学习路线图。

✨Star：182k

官网地址：https://roadmap.sh/

GitHub 地址：https://github.com/kamranahmedse/developer-roadmap

2. Clean Code JavaScript ​

clean-code-javascrip 综合了作者在使用 JavaScript 过程中的编码经验。它可以帮助我们学习编写易于理解、易于重用、提高代码效率的 JavaScript 代码。

✨Star：61.4k

GitHub 地址：https://github.com/ryanmcdermott/clean-code-javascript

3. DevDocs ​

devdocs 是当今比较流行的编程语言的文档集合，包含 JavaScript、HTML、CSS、React、Vue.js、TypeScript 等。

✨Star：27.3k

官网地址：https://devdocs.io/

GitHub 地址：https://github.com/freeCodeCamp/devdocs

4. 30 Seconds Of Code ​

30 Seconds Of Code 是一个聚合代码片段的网站，可以帮助我们开发过程中遇到的常见问题。它支持 JavaScript、React、Node.js、Git、CSS、Python 等语言。

✨Star：90.5k

官网地址：https://www.30secondsofcode.org/

GitHub 地址：https://github.com/30-seconds/30-seconds-of-code

5. Airbnb JavaScript Style Guide ​

这是一个由 Airbnb 开源的 JavaScript 代码风格指南。主要是为编写 JavaScript 代码提供规范的风格，方便开发者理解、阅读代码。它是最流行的 JavaScript 代码风格指南之一。

✨Star：118k

GitHub 地址：https://github.com/airbnb/javascript

6. Grab Front End Guide ​

front-end-guide 主要根据 Grab 团队的实际操作经验，帮助前端初学者了解基本概念以及 Web 项目中使用哪些工具和库。

✨Star：14.1k

GitHub 地址：https://github.com/grab/front-end-guide

7. Free Programming Books ​

这个网站上汇集着很多免费的课程和编程书籍。在这个网站上，包含了很多语言，如果英文不太好，可以选择查看中文的资料，除了文档之外，还有视频、程序等多种形式的资料。

✨Star：218k

官网地址：https://ebookfoundation.github.io/free-programming-books/

GitHub 地址：https://github.com/EbookFoundation/free-programming-books

8. Front-end Developer Interview Questions ​

这个网站收集了一些常见的前端试炼，不过并没有给出答案，可以自己整理学习。

✨Star：51.7k

GItHub 地址：https://github.com/h5bp/Front-end-Developer-Interview-Questions

官网地址：https://h5bp.org/Front-end-Developer-Interview-Questions/translations/chinese/

9. Every Programmer Should Know ​

every-programmer-should-know 是每个软件开发人员都应该知道的技术知识的集合。

✨Star：51.2k

GitHub 地址：https://github.com/mtdvio/every-programmer-should-know

10. Tech Interview Handbook ​

这是一个关于技术面试的网站，它总结了开发人员的面试经验，例如如何写简历、自我介绍、面试中的常见问题以及编程中的算法和技术等。

✨Star：63k

官网地址：https://techinterviewhandbook.org/

GitHub 地址：https://github.com/yangshun/tech-interview-handbook

11. Coding Interview University ​

该项目收录了作者为进入谷歌而准备的学习笔记列表，包括数据结构与算法、计算机基础、编程练习等多种学子资料。

✨Star：202k

GitHub 地址：https://github.com/jwasham/coding-interview-university

12. Modern JavaScript Cheatsheet ​

这是一个 JavaScript 速查表，可帮助我们解决在开发过程中经常遇到的问题。

✨Star：22.1k

官网地址：https://mbeaudru.github.io/modern-js-cheatsheet/

GitHub 地址：https://github.com/mbeaudru/modern-js-cheatsheet

13. Front-End Checklist ​

这个一个前端开发者在开发前需要了解的知识清单。适合初学者来检测自己的学习情况。

✨Star：57.5k

官网地址：https://frontendchecklist.io/

GitHub 地址：https://github.com/thedaviddias/Front-End-Checklist

14. Awesome ​

Awesome 是一个书籍、工具、库等集合，适用于当今所有流行的编程语言。

✨Star：183k

GitHub 地址：https://github.com/sindresorhus/awesome

15. Design Resources For Developers ​

这是一个为开发人员提供的在网站开发过程中选择颜色、字体、模板、CSS 框架等设计工具的集合。

✨Star：34.6k

GitHub 地址：https://github.com/bradtraversy/design-resources-for-developers

16. JavaScript Algorithms And Data Structures ​

这是一个使用 JavaScript 来介绍常见的算法和数据结构的教程，它有很多种语言可以选择，英文不好的小伙伴可以直接看中文版。

✨Star：131k

GitHub 地址：https://github.com/trekhleb/javascript-algorithms

17. CSS Protips ​

这是一个提供 CSS 技巧的项目，帮我们快速掌握 CSS 技巧。

✨Star：20.3k

GitHub 地址：https://github.com/AllThingsSmitty/css-protips

18. Awesome Web Development Resources ​

这是一个面向前端开发人员的免费编程资源的集合，上面包含了学习平台、托管平台、图片、图标、字体、文档、视频教程等多个分类。

✨Star：3k

官网地址：https://markodenic.com/free-web-development-resources/

GitHub 地址：https://github.com/markodenic/web-development-resources

19. JavaScript Questions ​

这个网站收集了 JavaScript 从基础到高级的各种问题，并且每个问题都有答案和详细的说明。它被翻译成多种语言，可自行选择。

✨Star：40k

GitHub 地址：https://github.com/lydiahallie/javascript-questions

20. Vanilla Web Projects ​

这是一个通过 20 多个免费项目帮助我们练习 JavaScript 开发代码的项目。

✨Star：11.8k

GitHub 地址：https://github.com/bradtraversy/vanillawebprojects

21. Spellbook of Modern Web Dev ​

这是一个针对 Web 开发人员的学习资源（如文章、书籍等）的集合。

✨Star：13.8k

GitHub 地址：https://github.com/dexteryy/spellbook-of-modern-webdev

22. 33 JavaScript Concepts ​

这个项目是帮助我们快速掌握 33 个常见的 JavaScript 概念的文章汇总。

✨Star：45.7k

GitHub 地址：https://github.com/nguyentranchung/33-js-concepts

23. Project Guidelines ​

这是一个前端项目开发的教程列表，主要介绍在项目开发时需要注意的点。该项目也提供了中文版供我们选择。

✨Star：26k

GitHub 地址：https://github.com/elsewhencode/project-guidelines

24. Learn Git Branching ​

LearnGitBranching 是一个 git 存储库可视化工具、沙箱，以及一系列教程和挑战。它的主要目的是通过可视化的形式帮助开发人员理解 git。这是通过不同级别的游戏来熟悉不同的 git 命令来实现的。

✨Star：23.1k

GitHub 地址：https://github.com/pcottle/learnGitBranching

25. You Don’t Know JS Yet ​

这是一个关于 JavaScript 核心概念的系列丛书。它涵盖了 JavaScript 中的大多数知识点，如作用域、闭包、this、对象原型、异步和性能等。

✨Star：148k

GitHub 地址：https://github.com/getify/You-Dont-Know-JS

26. Nodejs Best Practices ​

这个项目是 Nodejs 开发最佳实践的终极指南。这里面包含了代码风格、性能、安全性、项目结构等方面的重要提示。

✨Star：73.3k

GitHub 地址：https://github.com/goldbergyoni/nodebestpractices

27. FreeCodeCamp ​

FreeCodeCamp 是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。它的使命是 Learn to code and help nonprofits。FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动相互帮助。

✨Star：338k

Github 地址：https://github.com/freeCodeCamp/freeCodeCamp

28. Awesome Repos ​

该项目收录了很多很实用的资源库，包含了前端、后端、网络、人工智能等很多方向的资源。

✨Star：1.3k

GitHub 地址：https://github.com/pawelborkar/awesome-repos

29. Frontend Development Bookmarks ​

该项目包含为前端开发人员精心挑选的资源集合。从架构到 UI 组件，都在这个项目中。它涵盖了广泛的前端技术。

✨Star：33k

GitHub 地址：https://github.com/dypsilon/frontend-dev-bookmarks

30. Awesome Interview Questions ​

该项目包含几乎每种编程语言和框架的大量面试问题。

✨Star：44.5k

GitHub 地址：https://github.com/DopplerHQ/awesome-interview-questions

31. TypeScript Tutorial ​

typescript-tutorial 是一个 TypeScript 入门教程，从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。

✨Star：8.4k

GItHub 地址： https://github.com/xcatliu/typescript-tutorial

32. TypeScript Book Chinese ​

typescript-book-chinese 此书是 《TypeScript Deep Dive》 的中文翻译版，即《深入理解 TypeScript》。

✨Star：5.1k

GitHub 地址：https://github.com/jkchao/typescript-book-chinese

33. Clean Code TypeScript ​

clean-code-typescript 是一个类似于 clean-code-JavaScript 的库，教给我们如何更好的编写 TypeScript 代码。

✨Star：5.1k

GitHub 地址：https://github.com/labs42io/clean-code-typescript

Vue项目 ​

概览：

  1. Marktext：笔记应用
  2. YesPlayMusic：第三方网易云播放器
  3. PicGo：图片上传应用
  4. PPTist：在线 PPT 应用
  5. vue2-elm：仿饿了么
  6. vue-element-admin：后台管理系统
  7. Cider：Apple Music 播放器
  8. newbee-mall-vue3-app：商城及后台管理系统

1. Marktext ​

Marktext 是一个简单而优雅的开源 Markdown 编辑器，专注于速度和可用性，适用于 Linux、macOS 和 Windows。其支持实时预览、Markdown 扩展、输出 HTML 和 PDF 文件，主题切换、多种编辑模式、直接从剪贴板粘贴图像等功能。

Github：https://github.com/marktext/marktext

2. YesPlayMusic ​

YesPlayMusic 是一个高颜值的第三方网易云播放器，使用 Vue.js 全家桶开发。可以使用网易云账号登录（扫码/手机/邮箱登录），支持 MV 播放、歌词显示、每日推荐歌曲、每日自动签到、Light/Dark Mode 自动切换、Touch Bar、音乐云盘、定义快捷键和全局快捷键等功能。

Github：https://github.com/qier222/YesPlayMusic

3. PicGo ​

PicGo 是一个用于快速上传图片并获取图片 URL 链接的工具，支持多种图床、拖拽图片上传、图片预览、上传图片后自动复制链接到剪切板、自定义复制到表格的链接格式、支持快捷键、支持通过发送 HTTP 请求调用 PicGo 上传等功能。

Github：https://github.com/Molunerfinn/PicGo

4. PPTist ​

PPTist 是一个基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，支持导出本地 PPTX 文件，支持移动端基础编辑和预览，支持 PWA。

Github：https://github.com/pipipi-pikachu/PPTist

5. vue2-elm ​

vue2-elm 是一个基于 vue2 + vuex 构建一个具有 45 个页面的仿饿了么的大型单页面应用，涉及注册、登录、商品展示、购物车、下单等，是一个完整的流程。

Github：https://github.com/bailicangdu/vue2-elm

6. vue-element-admin ​

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件。

Github：https://github.com/PanJiaChen/vue-element-admin

7. Cider ​

Cider 是一个基于 Electron 和 Vue.js 的全新跨平台 Apple Music 体验，从头开始编写，同时兼顾性能和视觉效果。

Github：https://github.com/ciderapp/Cider

8. newbee-mall-vue3-app ​

newbee-mall 项目是集电商，包括 newbee-mall 商城系统及 newbee-mall-admin 后台管理系统，基于 Spring Boot 2.X 和商城 Vue 3 以及相关技术栈开发。前台系统包含首页门户、商品分类新品上线、首页轮播、商品推荐、商品搜索、商品、购物车、订单结算、订单展示流程、订单管理、会员中心、帮助中心等模块。后台管理系统包含数据面板、播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

Github：https://github.com/newbee-ltd/newbee-mall-vue3-app

TypeScript资源 ​

1. TypeScript 官方文档 ​

TypeScript 官方文档，提供了中文版本。

Github：https://github.com/microsoft/TypeScript

2. 学习 TypeScript ​

可能是中国最好的 TypeScript 入门到进阶系统教程。

Github：https://github.com/mqyqingfeng/learn-typescript

3. TypeScript 使用指南手册 ​

TypeScript 使用手册（中文版）翻译。

Github：https://github.com/zhongsp/TypeScript

4. 深入理解 TypeScript ​

TypeScript Deep Dive 中文版。

Github：https://github.com/jkchao/typescript-book-chinese

5. TypeScript 入门教程 ​

从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。

Github：https://github.com/xcatliu/typescript-tutorial

6. TypeScript 类型挑战 ​

高质量的类型可以提高项目的可维护性并避免一些潜在的漏洞。本项目意在于让你更好的了解 TS 的类型系统，编写你自己的类型工具，或者只是单纯的享受挑战的乐趣！

Github：https://github.com/type-challenges/type-challenges

7. DefinitelyTyped ​

DefinitelyTyped 包含大量的高质量的 TypeScript 类型定义。通过使用 DefinitelyTyped 及其包含的声明文件，我们可以使用大多数流行的 JavaScript 库，就像它们是 TypeScript 库一样，将通过编译器进行类型验证。

Github：https://github.com/DefinitelyTyped/DefinitelyTyped

8. react-redux-typescript-guide ​

本指南记录了有关在 React（及其生态系统）中以函数式风格使用 TypeScript 的模式和秘诀。它将使代码类型安全，同时专注于从实现中推断类型，从长远来看更容易编写和维护正确的类型。

Github：https://github.com/piotrwitek/react-redux-typescript-guide

9. React+TypeScript 备忘录 ​

专注于帮助 React 开发人员在 React 应用中使用 TypeScript。

Github：https://github.com/typescript-cheatsheets/react

10. clean-code-typescript ​

将 Clean Code 的概念适用到 TypeScript，引导读者使用 TypeScript 编写易读、可扩展的应用。

Github：https://github.com/labs42io/clean-code-typescript

11. 谷歌 TypeScript 风格指南 ​

Google 的 TypeScript 风格指南。

Github：https://google.github.io/styleguide/tsguide.html

12. Awesome TypeScript ​

很棒的 TypeScript 资源

Github：https://github.com/semlinker/awesome-typescript

数据可视化大屏项目 ​

DataV ​

DataV 是一个基于 Vue 的数据可视化组件库，Vue 数据可视化组件库（类似阿里 DataV，大屏数据展示），提供 SVG 的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新。

Github：https://github.com/DataV-Team/DataV

DataV-React ​

DataV-React 是一个基于React的数据可视化组件库(类似阿里 DataV，大屏数据展示），提供 SVG 的边框及装饰、图表、水位图、飞线图等组件，简单易用，长期更新。

Github：https://github.com/DataV-Team/DataV-React

iDataV ​

大屏数据可视化案例。包含了很多现成的模板，可在这些不同风格的模板基础上快速开始一个可视化大屏项目。

Github：https://github.com/yyhsong/iDataV

DataEase ​

DataEase 是开源的数据可视化分析工具，帮助用户快速分析数据并洞察业务趋势，从而实现业务的改进与优化。DataEase 支持丰富的数据源连接，能够通过拖拉拽方式快速制作图表，并可以方便的与他人分享。

Github：https://github.com/dataease/dataease

FlyFish ​

飞鱼（FlyFish）是一个数据可视化编码平台。通过简易的方式快速创建数据模型，通过拖拉拽的形式，快速生成一套数据可视化解决方案。

Github：https://github.com/CloudWise-OpenSource/FlyFish

GoView ​

GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。

Gitee：https://gitee.com/MTrun/go-view

vue-big-screen ​

一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，

Gitee：https://gitee.com/MTrun/big-screen-vue-datav

react-big-screen ​

一个基于 React、Dva、DataV、ECharts 框架的 " 数据大屏项目 "。支持数据动态刷新渲染、屏幕适配、数据请求模拟、局部样式、图表自由替换/复用等功能。

Gitee：https://gitee.com/MTrun/react-big-screen

低代码项目 ​

1. Appsmith ​

Appsmith 是一款开源低代码框架，主要用于构建管理面板、内部工具和仪表板等，允许拖放 UI 组件来构建页面，通过连接到任何 API、数据库或 GraphQL 源，并使用 JavaScript 语言编写逻辑，可以在短时间内创建内部应用程序。

Github（⭐️ 20.2k）：https://github.com/appsmithorg/appsmith

2. Amis ​

Amis 是百度开源的一块前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。

Github（⭐️ 11.6k）：https://github.com/baidu/amis

3. LowCodeEngine ​

LowCodeEngine 低代码引擎是一款为低代码平台开发者提供的，具备强大扩展能力的低代码研发框架。由阿里巴巴前端委员会、钉钉宜搭联合出品。使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。

Github（⭐️ 7.5k）：https://github.com/alibaba/lowcode-engine

4. form-generator ​

Element UI 表单设计及代码生成器，可将生成的代码直接运行在基于 Element 的 vue 项目中；也可导出 JSON 表单，使用配套的解析器将 JSON 解析成真实的表单。

Github（⭐️ 6.8k）：https://github.com/JakHuang/form-generator

5. H5-Dooring/pc-Dooring ​

H5-Dooring 是一款功能强大、专业可靠的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。技术栈以 React 和 TypeScript 为主，后台采用 nodejs 开发。除了 H5 版，还提供了 PC 版。

Github（H5）（⭐️ 6.7k）：https://github.com/MrXujiang/h5-Dooring

Github（PC）（⭐️ 354）：https://github.com/MrXujiang/pc-Dooring

6. YAO ​

Yao 是一款支持快速创建 Web 服务和管理后台的开源低代码应用引擎。只需使用 JSON 即可创建数据库模型、编写 API 接口、描述管理后台界面的低代码引擎，使用 Yao 构建的应用可运行在云端或物联网设备上。

Github（⭐️ 4.3k）：https://github.com/YaoApp/yao

7. Mometa ​

mometa 不是传统主流的低代码平台，而是面向研发的、代码可视设计编辑平台；它更像是 dreamweaver、gui 可视编辑之于程序员。它的定位更多是基于程序员本地开发的模式，新增了可视化编码的能力。

Github（⭐️ 3.2k）：https://github.com/imcuttle/mometa

8. NocoBase ​

NocoBase 是一个极易扩展的开源无代码开发平台。 无需编程，使用 NocoBase 搭建自己的协作平台、管理系统，只需要几分钟时间。如果你有以下需求，NocoBase 就是为你设计的：

  • 开发组织内部管理系统
  • 通过无代码开发，满足大部分业务需求
  • 无代码开发在操作上足够简单，满足非开发人员；在功能上足够灵活，接近原生开发
  • 可以非常方便的进行扩展开发
  • 私有部署，掌控全部代码和数据

Github（⭐️ 2.9k）：https://github.com/nocobase/nocobase

9. Sparrow ​

sparrow 是一个场景化低代码（LowCode）搭建工作台，它的核心目标仅有一条“提升研发效率”，目前提供基于 Vue、Element-UI 组件库中后台项目的实践，实时输出源代码。

Github（⭐️ 2.7k）：https://github.com/sparrow-js/sparrow

10. vite-vue3-lowcode ​

vite-vue3-lowcode 是一个基于 Vite2.x + Vue3.x + TypeScript 的 H5 低代码平台。

Github（⭐️ 1.8k）：https://github.com/buqiyuan/vite-vue3-lowcode

11. 华炎魔方 ​

华炎魔方是 Salesforce 低代码平台的开源替代方案，使用可视化工具进行模型设计, 页面设计, 流程设计, 报表设计 ， 只需点击鼠标，就能快速创建应用程序，实现敏捷开发的新高度。

Github（⭐️ 805）：https://github.com/steedos/steedos-platform

12. Awesome Lowcode ​

Awesome Lowcode 是国内低代码平台从业者交流项目，包含了国内外的一些低代码平台。

Github（⭐️ 8.5k）：https://github.com/taowen/awesome-lowcode

React 资源 ​

1. Awesome React ​

关于 React 生态系统的一系列很棒的资源。

Github：https://github.com/enaqx/awesome-react

2. React in patterns ​

React in patterns 是介绍 React 开发设计模式和技术的免费开源书籍。该书提供了简体中文版本。

Github：https://github.com/krasimir/react-in-patterns

3. 30 Days Of React ​

30 Days Of React 是在 30 天内学习 React 的分步指南。它需要 HTML、CSS 和 JavaScript 知识。在开始 React 之前，应该熟悉 JavaScript。

Github：https://github.com/Asabeneh/30-Days-Of-React

4. Real world React apps ​

现实世界的 React 应用程序及其开源代码库，供开发人员学习。该库包含了 51 个 React 开源项目。

Github：https://github.com/jeromedalbert/real-world-react-apps

5. React Bits ​

React Bits 包含 React 设计模式、技术、技巧和窍门，该库也提供了中文版。

Github：https://github.com/vasanthk/react-bits

6. React & Redux in TypeScript - Complete Guide ​

使用 TypeScript 在“React & Redux”应用程序中进行静态输入的完整指南。本指南记录了如何使用 TypeScript 以函数式风格使用 React（及其生态系统）的最重要的模式和秘诀。它将帮助你使代码完全类型安全，同时专注于从实现中推断类型。

Github：https://github.com/piotrwitek/react-redux-typescript-guide

7. Awesome React Components ​

这是一个很棒的 React 组件和库的列表，包含了 11 个大类。

Github：https://github.com/brillout/awesome-react-components

8. ahooks ​

阿里巴巴开源的一套高质量可靠的 React Hooks 库。包含大量提炼自业务的高级 Hooks 以及丰富的基础 Hooks。它使用 TypeScript 构建，提供完整的类型定义文件。

Github：https://github.com/alibaba/hooks

9. Beautiful React Hooks ​

Beautiful React Hooks 是系列可以显著为你提升组件开发和 hooks 开发效率的一系列漂亮的 React hooks。

Github：https://github.com/antonioru/beautiful-react-hooks

10. React Use ​

必不可少的自定义 React Hooks 集合，提功了中文文档。

Github：https://github.com/streamich/react-use

11. useHooks ​

useHooks 是一系列易于理解的自定义 React Hook。

Github：https://github.com/uidotdev/usehooks

12. React+TypeScript Cheatsheets ​

为经验丰富的 React 开发人员提供 TypeScript 入门的备忘单。

Github：https://github.com/typescript-cheatsheets/react

13. ReactJS coding challenges ​

ReactJS coding challenges 是一系列具有各种困难的 ReactJS 编码挑战。

Github：https://github.com/alexgurr/react-coding-challenges

14. React Interview Questions & Answers ​

300 多道 React 试炼，含答案。

Github：https://github.com/sudheerj/reactjs-interview-questions

15. 30 seconds of code ​

满足你所有开发需求的简短 React 代码片段。

Github：https://github.com/30-seconds/30-seconds-of-react

16. React hooks cheatsheet ​

带有实时可编辑示例的 React hooks 备忘单 。包含一些可能会遇到的真实案例/问题示例，它包含实际的代码示例，每个示例都模仿了所有的 Hook API。

Github：https://github.com/ohansemmanuel/react-hooks-cheatsheet

17. React/Redux Links ​

React/Redux Links 收集了一些有关 React、Redux、ES6 等的精选教程和资源链接，旨在为想要了解 React-Redux 生态系统的人提供高质量文章和资源的集合，以及有关高级主题和技术的优质信息。

Github：https://github.com/markerikson/react-redux-links

18. React Developer Roadmap ​

该指南将助你成为一名 React 开发者，它包含了成为一名 React 开发者可以选取的学习路径以及可以学习的库。

Github：https://github.com/adam-golab/react-developer-roadmap

19. Awesome React Hooks ​

一系列关于 React Hooks 的教程、视频、播客、工具、自定义 hooks 库等。

Github：https://github.com/rehooks/awesome-react-hooks

20. Awesome Next.js ​

关于使用 Next.js（通用服务器渲染 React 应用程序的简约框架）的书籍、视频、文章的精选资源列表。

Github：https://github.com/unicodeveloper/awesome-nextjs

国外前端博主 ​

  1. Ahmad Shadeed，主要分享 CSS 相关文章：https://ishadeed.com/
  2. Iskander Samatov，主要分享 TypeScript、React 相关文章：https://isamatov.com/
  3. Nadia Makarevich，主要分享 React 相关文章：https://www.developerway.com/
  4. 有很多优秀博主共同分享，主要分享 JavaScript 原理相关文章：https://blog.sessionstack.com/how-javascript-works/home
  5. Aleksandr Hovhannisyan，一个比较综合的博客：https://www.aleksandrhovhannisyan.com/
  6. Bramus Van Damme，主要分享 CSS 相关文章：https://www.bram.us/
  7. Lydia Hallie，作品集：https://www.lydiahallie.io/
  8. Lydia Hallie，还是这个 23 岁的宝藏博主写的设计模式和组件模式的书：https://www.patterns.dev/
  9. Bitbucket，主要分享 Git 相关知识：https://www.atlassian.com/git
  10. 有很多优秀博主共同分享，主要分享框架进阶的知识：https://blog.openreplay.com/
  11. 全网每日热门文章：https://app.daily.dev/
  12. 有众多博主分享前端各类文章，质量比较高：https://blog.logrocket.com/
  13. Dr. Axel Rauschmayer，主要分享 JavaScript 相关文章：https://2ality.com/index.html
  14. Victoria Lo，主要分享 React 相关文章：https://lo-victoria.com/
  15. 技术博主汇总平台：https://tech-blogs.dev/
  16. Chak Shun Yu，主要分享 React 相关文章，质量很高：https://www.chakshunyu.com/blog/
  17. Tapas Adhikary，主要分享前端开发技巧和进阶知识：https://blog.greenroots.info/
  18. Steven，主要分享偏基础的文章：https://lumin8media.com/
  19. Suhail Kakar，全栈开发，分享内容比较综合：https://blog.suhailkakar.com/
  20. inDepthDev，深入学习前端系列，框架相关较多：https://indepth.dev/
  21. 前端性能优化相关的理论：https://requestmetrics.com/web-performance/
  22. Alex Kondov，主要分享 React 文章，文章很硬核，必读：https://alexkondov.com/articles/
  23. JoshWComeau，主要分享 CSS 文章：https://www.joshwcomeau.com/
  24. Daily Dev Tips，日更博主，分享前端各类文章：https://daily-dev-tips.com/archive/
  25. Ben Nadel，全栈开发，JavaScript 相关值得一看： https://www.bennadel.com/blog/complete-blog-entry-list.htm
  26. David Walsh，分享各类文章：https://davidwalsh.name/
  27. Amelia Wattenberger，分享 React 和可视化：https://wattenberger.com/blog
  28. Lee Robinson，分享 React 相关文章：https://leerob.io/ 29.Tania Rascia，分享各类文章：https://www.taniarascia.com/blog/
  29. Writing JavaScript，主要分享 JavaScript 文章：https://writingjavascript.com/
  30. Maxime，各类文章：https://blog.maximeheckel.com/
  31. Stefan，各类文章：https://www.stefanjudis.com/
  32. Chameera Dulanga，文章必看：https://chameeradulanga.medium.com/
  33. Piumi Liyana Gunawardhana，主要分享 React 相关文章：https://piumi-16.medium.com/
  34. 技术社区，内容偏向 CSS，设计：https://www.smashingmagazine.com/
  35. 技术社区，各类前端文章，质量较高：https://blog.bitsrc.io/
  36. Async blog，各类前端文章：https://www.loginradius.com/blog/async/
  37. Stephanie Eckles，主要分享 CSS 文章：https://moderncss.dev/
  38. Devtrium，分享 React、TypeScript 文章：https://devtrium.com/
  39. ALEX DEVERO：https://blog.alexdevero.com/
  40. Flavio Copes：https://flaviocopes.com/
  41. Bhagya Vithana：https://bhagya-16.medium.com/
  42. Dan Abramov，React 团队核心成员：https://overreacted.io/
  43. Todd H. Gardner，分享性能优化相关：https://toddhgardner.medium.com/
  44. Temani Afif，主要分享 CSS 相关文章：https://dev.to/afif
  45. Sass 风格指南：https://sass-guidelin.es/zh/
  46. 分享各类文章：https://ordinarycoders.com/blog/articles
  47. TK，JavaScript 相关: https://www.iamtk.co/
  48. RisingStack，Node.js 相关：https://blog.risingstack.com/
  49. Journal： https://yagmurcetintas.com/

跨平台桌面项目 ​

全文概览：

  1. windows95：Electron 中的 Windows 95；
  2. drawio-desktop：基于 Electron 的图表和白板桌面应用；
  3. MarkText：简单而优雅的开源 Markdown 编辑器；
  4. Trilium：分层的笔记应用，专注于建立大型个人知识库；
  5. Joplin：笔记和待办事项应用；
  6. lx-music-desktop：基于 Electron 17 + Vue 3 的音乐软件；
  7. YesPlayMusic：高颜值的第三方网易云播放器；
  8. Cider：全新跨平台 Apple Music 体验；
  9. ZY Player：跨平台桌面端视频资源播放器；
  10. Nylas Mail：可扩展的邮件客户端；
  11. PicGo：用于上传图片并获取图片 URL 链接的工具；
  12. Awesome Electron：Electron 资源汇总；

1. windows95 ​

这是一个运行在 Electron 中的 Windows 95，可以在 macOS、Linux 和 Windows 上运行。

Github：https://github.com/felixrieseberg/windows95

2. drawio-desktop ​

drawio-desktop 是一个基于 Electron 的图表和白板桌面应用，其可以用于绘制流程图、类图、组织结构图、泳道图、E-R 图等，模板丰富。

Github：https://github.com/jgraph/drawio-desktop

3. MarkText ​

MarkText 是一个简单而优雅的开源 Markdown 编辑器，专注于速度和可用性。MarkText 具有简单明了的界面，并支持实时预览，让用户可以获得无干扰的写作体验。其支持各种主题，并支持多种笔记模式，可以输出 HTML 和 PDF 文件等。MarkText 支持在 MACOS、Windows、Linux 系统使用。

Github：https://github.com/marktext/marktext

4. Trilium ​

Trilium Notes 是一个分层的笔记应用，专注于建立大型个人知识库。其具有以下特性：

  • 笔记可以排列成任意深的树。单个笔记可以放在树中的多个位置
  • 丰富的所见即所得笔记编辑功能，包括带有 markdown 自动格式化功能的表格，图像和数学
  • 支持编辑使用源代码的笔记，包括语法高亮显示
  • 笔记之间快速导航，全文搜索和笔记挂起
  • 无缝笔记版本控制
  • 笔记属性可用于笔记组织，查询和高级脚本编写
  • 同步与自托管同步服务器
  • 具有按笔记粒度的强大的笔记加密
  • 关系图和链接图，用于可视化笔记及其关系
  • 脚本-请参阅高级展示
  • 可用性和性能均能很好地扩展至超过 10 万个笔记
  • 针对智能手机和平板电脑进行触摸优化的移动前端
  • 夜间主题
  • Evernote 和 Markdown 导入导出
  • Web Clipper 可轻松保存 Web 内容

Github：https://github.com/zadam/trilium

5. Joplin ​

Joplin 是一个免费的开源笔记和待办事项应用，可以处理大量组织成笔记本的笔记。笔记是可搜索的，可以直接从应用或自己的文本编辑器复制、标记和修改。笔记采用 Markdown 格式。该应用适用于 Windows、Linux、macOS、Android 和 iOS。

Github：https://github.com/laurent22/joplin

6. lx-music-desktop ​

lx-music-desktop 是一个基于 Electron 17 + Vue 3 的音乐软件。其支持在 Windows、Mac OS、Linux、Android 平台上运行。

Github：https://github.com/lyswhut/lx-music-desktop

7. YesPlayMusic ​

YesPlayMusic 是一个高颜值的第三方网易云播放器，支持 Windows / macOS / Linux。其具有以下特性：

  • 使用 Vue.js 全家桶开发
  • 网易云账号登录（扫码/手机/邮箱登录）
  • 支持 MV 播放
  • 支持歌词显示
  • 支持私人 FM / 每日推荐歌曲
  • 每日自动签到（手机端和电脑端同时签到）
  • Light/Dark Mode 自动切换
  • 支持 Touch Bar
  • 支持 PWA，可在 Chrome/Edge 里点击地址栏右边的 ➕ 安装到电脑
  • 支持 Last.fm Scrobble
  • 支持音乐云盘
  • 自定义快捷键和全局快捷键
  • 支持 Mpris

Github：https://github.com/qier222/YesPlayMusic

8. Cider ​

基于 Electron 和 Vue.js 的全新跨平台 Apple Music 体验，从头开始编写，同时兼顾性能和视觉效果。

Github：https://github.com/ciderapp/Cider

9. ZY Player ​

ZY Player 是一个跨平台桌面端视频资源播放器，其具有以下特性：

  • 全平台支持：Windows、Mac、Linux
  • 支持 IPTV, 卫视直播
  • 视频源支持自定义, 支持导入, 导出
  • 支持海报模式和列表模式浏览资源
  • 播放历史, 自动跳转历史进度
  • 收藏夹支持导入,导出, 支持同步追剧
  • 支持精简模式, 摸鱼划水
  • 一键搜索所有资源, 支持历史搜索记录
  • 导出资源下载链接
  • 支持第三方播放器播放
  • 显示豆瓣评分

Github：https://github.com/Hunlongyu/ZY-Player

10. Nylas Mail ​

Nylas Mail 是一个使用 Electron、React 和 Flux 构建的开源、可扩展的邮件客户端。它被设计为易于扩展，并且有许多第三方插件可以为客户端添加功能。其兼容上百种邮件提供商，作为桌面应用它可以离线运行。适用于 Mac, Windows 和 Linux。

Github：https://github.com/nylas/nylas-mail

11. PicGo ​

PicGo 是一个用于快速上传图片并获取图片 URL 链接的工具。其具有以下特性：

  • 支持拖拽图片上传
  • 支持快捷键上传剪贴板里第一张图片
  • Windows 和 macOS 支持右键图片文件通过菜单上传 (v2.1.0+)
  • 上传图片后自动复制链接到剪贴板
  • 支持自定义复制到剪贴板的链接格式
  • 支持修改快捷键
  • 支持插件系统，已有插件支持 Gitee、青云等第三方图床
  • 支持通过发送 HTTP 请求调用 PicGo 上传（v2.2.0+)

Github：https://github.com/Molunerfinn/PicGo

12. Awesome Electron ​

Awesome Electron 是使用 Electron 创建应用的有用资源。包含文章、图书、视频、播客、文档、工具等资源。

Github：https://github.com/sindresorhus/awesome-electron

精品书籍 ​

前端精品书籍: https://gitee.com/mewcoder/fe-book

上次更新于: