牧涯前端学习笔记

Appearance

前端开源学习项目 ​

前端充电宝 · 语雀 (yuque.com)

前端知识进阶 (yuque.com)

分享几个🏵️前端知识和面试网站🏵️ - 掘金 (juejin.cn)

大厂开源库 ​

公司开源软件合计：https://www.oschina.net/company

腾讯

蚂蚁集团：https://github.com/ant-design

阿里巴巴：https://github.com/alibaba

字节跳动：https://github.com/bytedance

美团

京东

网易

百度

快手

滴滴

B 站

携程

小红书

满帮

用友

Boss 直聘

360

微博

SHEIN

数字天堂

Meta(facebook)

谷歌

微软官方开源库

组织团队框架开源库 ​

Vue 官方库和相关生态

React

UmiJs

Apollo

开源的语言学习练习项目 ​

CSS 学习项目 ​

You-need-to-know-css ​

寻找到使用或者是学习 CSS 的灵感：CSS-Inspiration ​

  • 介绍

    • 这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。

    • 包含了：布局(Layout)、阴影(box-shadow、drop-shadow)、伪类/伪元素、滤镜(fliter)、边框(border)、背景/渐变(linear-gradient/radial-gradient/conic-gradient)、混合模式（mix-blend-mode/background-blend-mode)、3D、动画/过渡(transition/animation)、clip-path、文本类、综合、CSS-Doodle、SVG 等内容。

  • 网址

  • 总结了一些常用的 CSS 样式，记录一些 CSS 的新属性和一点奇技淫巧：css_tricks

各种 CSS 实现的效果：animista ​

  • 介绍

    • 该项目里面有各种 CSS 实现的效果，还有代码演示，方便直接复制代码，还可以复制压缩后的代码，如果你在找某个 CSS 的效果的话，可以到这里找找看。

  • 网址

各种加载效果的 CSS 代码片段：spinkit ​

十天精通 CSS3 ​

  • 介绍

    • 这是前端大佬大漠出的一个免费的 CSS3 教程，对于有一定 CSS2 经验的伙伴，能让您系统的学习 CSS3，快速的理解掌握并应用于工作之中。

    • 里面的内容有讲解，还有代码演习，学完之后，可以练习所学的 api ，真的很不错。

  • 网址

跨浏览器的 css3 动画库：Animate ​

  • 介绍

    • 是一个有趣的，跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好使用方便。

    • animate.css 的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类 animated 和相应的类添加到元素上就行了。

  • 网址

CSS 技巧：css-protips ​

CSS 油画 ​

30diasDeCSS：30 个小项目带你玩转 CSS3 动效 ​

JavaScript 学习项目 ​

vanillawebprojects：HTML+CSS+JS 三件套练手项目合集 ​

  • 介绍

    • 新手上路最开始用的就是基础的 HTML+CSS+JS 三件套，而在框架和库越来越多的现在，更多的时候使用它们来提高效率是常见的选择。

    • 这个项目则是反过来，是使用老三件套实现的一些小项目合集，不管是为了更好理解框架，还是为了验证一下自己的知识水平，重新操刀老三件套都不失为一个好选择，要知道不管是什么框架和库，基础都是由这三板斧搭建起来的。

  • 网址

Front-End-Checklist：前端开发的学习清单 ​

  • 介绍

    • 该项目是详尽的关于前端开发的清单，它列出了将 HTML 页面投入生产之前需要进行测试的所有元素。

    • 它基于众多前端开发人员的多年经验，其中一部分整合自其他的开源清单。

    • 内容包含：

      • Head

      • HTML

      • Webfonts

      • CSS

      • Images

      • JavaScript

      • Security

      • Performance

      • Accessibility

      • SEO

  • 网址

聚合代码片段 30s 学会 JS：30-seconds-of-code ​

  • 介绍

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

    • 30-seconds-of-code 收录了大量 JS 代码片段，而这些代码片段可能会解决前端工程师的需求问题。在线访问 www.30secondsofcode.org/ 可搜索相关的 feature 对应的代码片段。

    • 超过 100 个代码段，涵盖了 JavaScript 中的各种内容，从典型的算法，到你可能会发现自己需要完成的常见任务。非常值得一看！

    • 该项目讲的是满足你所有开发需求的简短代码段，里面都是些经常会用到而且是非常经典的代码，非常值得学习！

    • 比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

  • 网址：

JavaScript 的编码经验和规范：Clean Code JavaScript ​

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

  • 网址

https://developer.mozilla.org/zh-CN/

JavaScript 速查表：Modern JavaScript Cheatsheet ​

前端开发者的知识清单：Front-End Checklist ​

JavaScript 开发者应懂的 33 个概念：33-js-concepts ​

使用原生 JavaScript 在 30 天内完成 30 个项目：JavaScript 30 ​

现代 JavaScript 教程 ​

编程游戏：bitburner ​

编程语言实现所有算法库 ​

JavaScript 算法学习 ​

最佳实践：javascript-testing-best-practices ​

各种语言构建自己的应用：build-your-own-x ​

JavaScript 算法与数据结构：javascript-algorithms ​

  • 介绍

    • 每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有 YouTube 视频) 。

    • 数据结构包含了 链表、双向链表、队列、栈、哈希表(散列)、堆、优先队列、字典树、树、优先队列、二叉查找树、AVL 树、红黑树、线段树、树状数组、图、并查集、布隆过滤器

    • 算法包含了 算法主题 和 算法范式。

    • 其中算法主题又包含了：数学、集合、字符串、搜索、排序、链表、树、图、加密、机器学习。

    • 算法范式：算法范式是一种通用方法，基于一类算法的设计。这是比算法更高的抽象，就像算法是比计算机程序更高的抽象。

    • 算法范式包含了：BF 算法、贪心法、分治法、动态编程、回溯法、Branch & Bound 等等。

    • 这项目还出了对应的教学视频，总共 81 个视频讲解，每个视频大概 5 - 10 分钟左右，还能学习英语哦

  • 网址

算法可视化工具：algorithm-visualizer ​

  • 介绍

    • 算法可视化工具是一个交互式的在线平台，可以从代码中可视化算法。

    • 通过可视化方法学习算法变得容易得多。

    • Algorithm Visualizer 是一款有趣的在线开源工具，内含多种算法并进行了直观可视化呈现, 让学习算法和数据结构更加直观。

    • 目前支持的算法包括回溯法、加密算法、动态规划、图搜索、贪婪算法、搜索算法、排序算法等。

    • Algorithm Visualizer 的目录区，选择任何算法，中间就会动态演示，日志输出区记录每次搜索的过程。

    • 该算法可视化工具是一个用 React 编写的 web 应用程序。它包含 UI 组件并将命令解释为可视化。

    • 如果你是算法初学者，强烈推荐这个「算法可视化」工具 Algorithm Visualizer，很清晰地绘制了每一个基础算法的原理和运作流程。

  • 网址

各种语言数据结构和算法必知必会的 50 个代码实现：algo ​

  • 介绍

    • 数据结构和算法必知必会的 50 个代码实现。

    • 包含数组、链表、栈、队列、递归、排序、二分查找、散列表、字符串、二叉树、堆、图、回溯、分治、动态规划 等。

    • 每个代码实现有解释，测试用例。

    • 该仓库是《数据结构和算法之美》《设计模式之美》专栏作者创建的

  • github：https://github.com/wangzheng0822/algo

计算机科学算法的 JavaScript 实现：awesome-algorithms ​

在线书籍《十大经典排序算法》：JS-Sorting-Algorithm ​

  • 介绍

    • 一本关于排序算法的 GitBook 在线书籍 《十大经典排序算法》，使用 JavaScript & Python & Go & Java 实现。

    • 包含冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。

  • 网址

大前端技术学习博客 ​

算法，每日练习的一个项目：daily-algorithms ​

  • 介绍

    • 算法，每日练习的一个项目。

    • ★ 表示 easy，★★ 表示 medium，★★★ 表示 hard；

    • 题目主要来自 leetcode，可能会适当变换题设，改变难度；

    • 对于 ★ 和 ★★ 难度的题目，每天的量会随机出现 1~5 个，尤其是 ★ 的题目，比较简单。

  • 网址：https://github.com/barretlee/daily-algorithms

  • 更多算法练习搜索：Search · algo (github.com)

比较流行的编程语言的文档集合：DevDocs ​

所有演示应用程序之母：realworld ​

  • 介绍

    • 对于大多数的 “Todo” 示例来说，它们只是简单介绍了框架的功能，并没有完整介绍使用该框架和相关技术栈，构建真正应用程序所需要的知识和视角。

    • RealWorld 解决了这个问题，它允许你选择任意前端框架（React，Vue 或 Angular 等）和任意后端框架（Node，Go，Spring 等）来驱动一个真实的、设计精美的全栈应用程序 “Conduit“

  • 网址

基础到进阶的 JavaScript 知识：javascript-questions ​

  • 介绍

    • 该仓库包含了从基础到进阶的 JavaScript 知识，利用该仓库你可以测试你对 JavaScript 知识的掌握程度，也可以帮助你准备面试。

    • 从基础到高级：测试您对 JavaScript 的了解程度，稍微刷新一下知识或为编写代码面试做准备！

  • 网址

Grab 团队的实际操作经验，了解基本概念及 Web 项目使用的工具和库：Grab Front End Guide ​

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

  • 网址

数据结构与算法、计算机基础、编程练习等多种学子资料：Coding Interview University ​

JavaScript 语言演示如何写解析器，将代码转为抽象语法树 AST，然后再写编译器，将其转为汇编语言 ​

Node 开源学习项目 ​

介绍

网址

  • github：

  • 官网：

node 官方 ​

node-api-cn：Node.js API 中文文档项目 ​

node-in-debugging：Node.js 调试指南 ​

  • 介绍

    • 这是一个 Node.js 调试指南的书。

    • 里面讲到当程序出现性能瓶颈时，如何结合代码去推测可能出问题的地方，展现程序的性能瓶颈的方法。

    • 比如用 perf、火焰图、红蓝差分火焰图 去分析和定位问题。

  • github：https://github.com/nswbmw/node-in-debugging

nodebestpractices：Node.js 最佳实践 ​

  • 介绍

    • Node.js 最佳实践

    • 这是对 Node.js 最佳实践中排名最高的内容的总结和分享

    • 这里是最大的汇集，且每周都在增长。 当前，超过 50 个最佳实现，样式指南，架构建议已经呈现。每天都有新的 issue 和 PR 被创建，以使这本在线书籍不断更新。

    • 大部分的条目包含额外的信息。大部分的最佳实践条目的旁边，您将发现链接，它将呈现给您示例代码，博客引用和更多信息

  • 目录

    • 项目结构实践 (5)

    • 异常处理实践 (11)

    • 编码规范实践 (12)

    • 测试和总体质量实践 (8)

    • 进入生产实践 (16)

    • ⭐ 新: 安全实践(23)

    • Performance Practices (coming soon)

  • 网址

deep-into-node：深入理解 Node.js：核心思想与源码分析 ​

  • 介绍

    • 这个项目是关于：深入理解 Node.js：核心思想与源码分析。

    • 源码分析包括（libuv, v8）, 需要有一定的 C、C++基础。 Node.js 的源码到处闪烁着开发者的智慧和追求极致的精神。 包括但不限于：

      • 系统架构

      • 设计模式

      • 性能优化

      • 奇技淫巧

    • 本书通过分析 node 核心模块的实现，向读者阐述 node 异步 IO，事件循环的核心思想。帮助开发者更好的使用 Node.js。

    • 通过追溯 node 社区开发 issue, 探讨 node 的变迁和演进，学习 node.js 的设计哲学。

  • 网址

Nodejs-Roadmap：Nodejs 技术栈 ​

  • 介绍

    • 这个项目是作者从事 Node.js 开发以来的学习历程，旨在为大家提供一个较详细的学习教程，侧重点更倾向于 Node.js 服务端所涉及的技术栈，如果本文能为您得到帮助，请给予支持！

    • Node.js 由 Libuv、Chrome V8、一些核心 API 构成，如下图所示：

    • 以上展示了 Node.js 的构成，下面做下简单说明：

    • Node Standard Library：Node.js 标准库，对外提供的 JavaScript 接口，例如模块 http、buffer、fs、stream 等

    • Node bindings：这里就是 JavaScript 与 C++ 连接的桥梁，对下层模块进行封装，向上层提供基础的 API 接口。

    • V8：Google 开源的高性能 JavaScript 引擎，使用 C++ 开发，并且应用于谷歌浏览器。如果您感兴趣想学习更多的 V8 引擎知识，请访问 What is V8?

    • Libuv：是一个跨平台的支持事件驱动的 I/O 库。它是使用 C 和 C++ 语言为 Node.js 所开发的，同时也是 I/O 操作的核心部分，例如读取文件和 OS 交互。来自一份 Libuv 的中文教程

    • C-ares：C-ares 是一个异步 DNS 解析库

    • Low-Level Components：提供了 http 解析、OpenSSL、数据压缩（zlib）等功能。

    • 以上只是做一个初步的认知，如果你想深入了解 Node.js 那么多每个点都是值得你深入研究的。

    • 无论是内容还是阅读效果，都很好，是值得推荐的一个学习 Node 的开源项目。

  • 网址

NeteaseCloudMusicApi：网易云音乐 Node.js API service ​

  • 介绍

    • 网易云音乐 Node.js API service

    • 功能特性

      • 总共有 206 个 api ！

      • 比如：

        • 登录刷新登录发送验证码校验验证码注册(修改密码)获取用户信息 , 歌单，收藏，mv, dj 数量获取用户歌单获取用户电台获取用户关注列表获取用户粉丝列表获取用户动态获取用户播放记录获取精品歌单获取歌单详情搜索搜索建议获取歌词歌曲评论收藏单曲到歌单专辑评论歌单评论 mv 评论电台节目评论 banner 获取歌曲详情获取专辑内容获取歌手单曲获取歌手 mv 获取歌手专辑获取歌手描述获取相似歌手获取相似歌单相似 mv 获取相似音乐获取最近 5 个听了这首歌的用户获取每日推荐歌单获取每日推荐歌曲私人 FM 签到喜欢音乐等等。。。复制

    • 如果你想做一个 音乐 类的开源项目，可以好好看看这个项目哦。

  • 网址

node-elm：基于 node.js + Mongodb 构建的后台系统 ​

  • 介绍

    • 这是基于 node.js + Mongodb 构建的后台系统。

    • 整个项目分为两部分：前台项目接口、后台管理接口，共 60 多个。涉及登陆、注册、添加商品、商品展示、筛选排序、购物车、下单、用户中心等，构成一个完整的流程。

    • 目标功能

      • IP 定位 -- 完成 城市列表 -- 完成 搜索地址 -- 完成 上传图片 -- 完成 添加商铺 -- 完成 添加食品 -- 完成 测量距离 -- 完成 搜索美食，餐馆 -- 完成 根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成 评价列表 -- 完成 食品详情 -- 完成 商家详情 -- 完成 购物车功能 -- 完成 登录、注册 -- 完成 修改密码 -- 完成 用户信息 -- 完成 添加、删除、修改收货地址 -- 完成 下单 -- 完成 ✨✨ 订单信息 -- 完成 红包 -- 完成 商铺管理 -- 完成 食品管理 -- 完成 管理员权限验证 -- 完成 超级管理员 -- 完成 订单管理 -- 完成 流量统计 -- 完成 前后台路由同构 -- 完成 部署上线 -- 完成

  • 网址

awesome-nodejs：Node 包和资源 ​

TypeScript 学习项目 ​

前端学习资源项目 ​

前端资源汇总仓库

  • 介绍：GitHub 最全的前端资源汇总仓库（包括前端学习、开发资源、数据结构与算法、开发工具、求职面试等）

网址

大前端博文 ​

Node.js 最佳实践中排名最高的内容的总结和分享：nodeBestPractices ​

其他 ​

各种编程语言指导：build-your-own-x ​

计算机科学学习资源：computer-science ​

  • 介绍

    • 不管你是一个从事编程的人，还是一个已经在业界自学的开发者， OSSU 的课程为所有想要学习计算机科学的人提供了大量的免费学习资源。

    • OSSU 课程是使用在线材料进行的完整的计算机科学教育。它不仅用于职业培训或专业发展。

    • 它适用于那些希望对所有计算学科具有基本概念的正确，全面的基础，以及那些拥有该学科，具有意愿和（最重要的是！）良好习惯的人，可以在很大程度上依靠自己的力量来接受这种教育来自世界各地的学习者社区。

    • 它是根据本科计算机科学专业的学位要求减去通识教育（非 CS）要求而设计的，因为假定遵循此课程的大多数人已经在 CS 领域以外接受了教育。

    • 这些课程本身是世界上最好的课程，通常来自哈佛大学，普林斯顿大学，麻省理工学院等

  • 网址

  • 如何使用特定的语言 / 技术开发适当的应用：realworld

免费的编程书籍：free-programming-books ​

学习如何设计大型系统：system-design-primer ​

  • 介绍

    • 学习如何设计大型系统。为系统设计面试做准备。

    • 如果你正在寻找高级软件工程（或更高的）职位，那么拥有设计大型系统的能力是很有价值的，很多大型技术公司都希望你具备这一能力。

    • 这也是一个重要技巧，如果你打算为你正在做的任何工作构建任何大型系统的话。

    • 这份指南提供了大量的信息来帮助你做好准备。

  • 网址

精选的 Python 框架，库，软件和资源的精选清单：awesome-python ​

  • 介绍

    • 精选的 Python 框架，库，软件和资源的精选清单。

    • Python 内建了一系列不同的库、框架和技术的列表。

    • 对那些想要学习一种新的编程语言或仅仅想要提高对已有 Python 的了解的人来说，这是一个极好的指南。

  • 网址

机器学习框架，库和软件的列表：awesome-machine-learning ​

前端面试题 ​

Front-end Developer Interview Questions ​

技术面试的网站：Tech Interview Handbook ​

技术类精华书单推荐 ​

免费提供的编程书籍：free-programming-books ​

开发人员的学习路线图：Web Developer Road Map ​

  • 介绍

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

  • 网址

软件与架构相关的设计模式的精选列表：awesome-design-patterns ​

介绍

  • 该仓库包含了软件与架构相关的设计模式的精选列表。在软件工程中，设计模式（Design Pattern）是对软件设计中普遍存在（反复出现）的各种问题，所提出的解决方案。这个术语是由埃里希·伽玛（Erich Gamma）等人在 1990 年代从建筑设计领域引入到计算机科学的。

网址：https://github.com/DovAmir/awesome-design-patterns

软件开发人员都应该知道的技术知识的集合：Every Programmer Should Know ​

介绍

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

基于前端 Web 界面构建库的开源学习项目 ​

Vue ​

vue3 ​

  • 组合式 API 征求意见稿 | Vue 组合式 API (vue3js.cn)

  • Vue3 版 Notion：lotion

    • 介绍

      • lotion 用 Vue3 实现的 Notion

      • 基于 Block 的编辑器；

      • 拖拽可重新排序；

      • 基础的 Markdown 语法支持；

      • 输入 / 可使用命令菜单和快捷键；

    • 网址

  • 数据库仪表盘：directus

    • 介绍

      • Directus 一个管理 SQL 数据库的实时 API 和应用程序仪表板。特性：

      • 特性

        • 先进仪表盘：无代码 Vue.js 应用无需培训成本即可上手；

        • REST & GraphQL API：在任意 SQL 数据库上快速创建 Node.js API；

        • 纯 SQL 管理：适用于所有 SQL 数据库，无迁移成本；

        • 支持多款 SQL 数据库：MySQL、PostgreSQL 等等

        • 支持本地或者云上使用

        • 可扩展，支持自定义；

    • 网址

  • 页面可视化搭建：tmagic-editor

  • 代码片段管理：massCode

    • 介绍

      • massCode 允许你使用多级文件夹以及标签来组织代码片段。每个代码片段都有片段-标签，这提供了更高层次的组织，也更方便你来复用代码。

    • 网址

  • vue2 element 项目转成 vue3 element plus 代码转换工具 gogocode

  • Vue3 库聚合网站

  • vue3 源码阅读

  • Vue3 开源学习项目

  • Vue3 实战项目学习写法

  • Vue.js 源码分析

    • 介绍

      • 目前社区有很多 Vue.js 的源码解析文章，但是质量层次不齐，不够系统和全面，这本电子书的目标是全方位细致深度解析 Vue.js 的实现原理，让同学们可以彻底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0，并且之后会随着版本升级而做相应的更新，充分发挥电子书的优势。

      • 这本电子书是作为 《Vue.js 源码揭秘》视频课程的辅助教材。电子书是开源的，同学们可以免费阅读，视频是收费的，25+小时纯干货课程，如果有需要的同学可以购买来学习

    • 网址

  • Vue3 和 Vite3 使用的库

    • 目前 vue3 和 vite3 都是一个 monorepo 仓库，且都是使用 pnpm workspace 来进行仓库管理的；

      • 所以了解 monorepo 和 pnpm workspace 对源码的阅读也是有很大的帮助的；

    • vitest：快速单元测试框架

    • chalk：终端修改输出字符样式

    • picocolors：终端修改输出字符样式

      • 介绍

        • 为什么选择 picocolors：

        • 无依赖包；

        • 比 chalk 体积小 14 倍，速度快 2 倍；

        • 支持 CJS 和 ESM 项目；

        • 因为 picocolors 包比较小，所以功能边界没有 chalk 的全面，但是用在一些自研等绝大部分的需求中是完全可以满足的。

      • 网址

    • prompts | enquirer | inquirer：实现命令行交互式界面

    • commander：构建 CLI 应用程序

      • 介绍

        • 完整的 node.js 命令行解决方案。

        • 你想写一个功能较多的 cli 工具，也是可以选择 commander 和 yargs 的；

        • 不过一些中小型的 cli 工具我还是推荐 cac 的；

      • 网址

    • yargs：构建 CLI 应用程序

    • cac：构建 CLI 应用程序

      • 介绍

        • 用于构建 CLI 应用程序的 JavaScript 库；

        • 通俗点讲，就是给你的 cli 工具增加自定义一些命令，例如 vite create，后面的 create 命令就是通过 cac 来增加的；

        • 因为该库较适用于一些自定义的工具库中，所以只在 vite 中使用， vue3 并不需要该工具；

        • cac 的优势：

          • 功能强大：启用默认命令，可以像使用 git 的命令一样方便去使用它，且有参数和选项的校验、自动生成 help 等完善功能；

          • 超轻量级：没有依赖，体积数倍小于 commander 和 yargs；

          • 易于学习：只需要学习 4 API cli.option、cli.version 、cli.help cli.parse 即可搞定大部分需求；

      • 网址

    • semver：语义化版本号管理

      • 介绍

        • 语义化版本号管理的 npm 库；semver 在 vue3 框架源码和 vite 工具源码中都有使用；

        • 说直白一点，你在开发一个开源库的时候，肯定会遇到要提醒用户不同版本号不同的情况，那么如何去判断用户版本过低，semver 就可以很好的帮助你解决这个问题；

        • semver 内置了许多方法，比如 判断一个版本是否合法，判断版本号命名是否正确，两个版本谁大谁小之类 等等方法；

      • 网址

    • minimist：命令行参数解析工具

    • magic-string：操作字符串和生成源映射

      • 介绍

        • 一个用于操作字符串和生成源映射的小而快的库；

        • 它最主要的功能就是对一些源代码和庞大的 AST 字符串做轻量级字符串的替换；

        • 在 vite 工具源码和 @vue/compiler-sfc 中大量使用；

      • 网址

    • fs-extra：文件操作库

    • chokidar：文件监控的库

      • 介绍

        • 一款专门用于文件监控的库；chokidar 只在 vite 工具源码中有使用；

        • 其实 Node.js 标准库中提供 fs.watch 和 fs.watchFile 两个方法用于处理文件监控，但是为什么我们还需要 chokidar 呢？

        • 主要是由于 兼容性不好、无法监听、监听多次 等大量影响性能的问题

      • 网址

    • fast-glob：快速批量导入、读取文件的库

    • debug：小型 JavaScript 调试程序库

      • 介绍

        • 一个模仿 Node.js 核心调试技术的小型 JavaScript 调试程序，在适用于 Node.js 和 Web 浏览器 都可使用；debug 只在 vite 工具源码中有使用；

        • 说直白点就是你可以使用 debug 来对你的程序进行 毫秒级别时间差的统计 对你程序代码进行优化；

      • 网址

    • dotenv：将 .env 文件 中的环境变量加载到 process.env 中

      • 介绍

        • 一个零依赖模块，可将 .env 文件 中的环境变量加载到 process.env 中

        • dotenv 只在 vite 工具源码中有使用；

      • 网址

    • esbuild：基于 Go 语言开发的 JavaScript 打包工具

      • 介绍

        • 一个基于 Go 语言开发的 JavaScript 打包工具，被 Vite 用于开发环境的依赖解析；

        • 相比传统的打包工具，主打性能优势，在构建速度上可以快 10~100 倍

      • 优势：

        • 没有缓存机制也有极快的打包速度

        • 支持 es6 和 cjs 模块

        • 支持 es6 modules 的 tree-shaking

        • 支持 ts 和 jsx

        • sourcemap

        • 压缩工具

        • 自定义的插件开发

      • 网址

    • rollup：JavaScript 模块打包器

      • 介绍

        • 一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，我们熟悉的 vue、react、vuex、vue-router 等都是用 rollup 进行打包的。

        • 在 vite 中的生产环境（Production） 就是基于 rollup 打包来构建主要代码的。

      • 网址

    • ws：WebSocket 客户端和 服务器

      • 介绍

        • 一个简单易用、速度极快且经过全面测试的 WebSocket 客户端和 服务器 实现；完全可以是 Socket.io 的替代方案；ws 只在 vite 工具源码中有使用。

        • 说直白一点就是通过 ws，咱们可以实现服务端和客户端的长连接，且通过 ws 对象，就可以获取到 客户端发送过来的信息 和 主动推送信息给客户端。

      • 网址

    • connect：最早期的 HTTP 服务器框架

      • 介绍

        • 一个最早期的 HTTP 服务器框架，亦可称为中间件插件；express 就是基于此框架做的扩展；

        • 注意：从 vite2 开始官方已从依赖 koa 转成 connect 了；

      • 网址

    • esno：基于 esbuild 的 TS/ESNext 的 Node.js 运行时

    • tsup：由 esbuild 支持的打包工具

      • 介绍

        • 一个轻小且无需配置的，由 esbuild 支持的打包工具；

        • 它可以直接把 .ts、.tsx 转成不同格式 esm、cjs、iife 的文件，快速打包你的工具库；

      • 网址

    • vitest：快速单元测试框架

  • https://github.com/search?q=Vue

  • https://github.com/search?q=Vue3

React 开源项目 ​

  • 真·代码库：codebases

    • 介绍

      • Codebases 是大型项目的源码（代码库）的集合，它使用 React.js 构建，收录诸如：Bestbuy、Postman、Trello、Udacity、Coursera、Skillshare、Invision、Telgram 等等项目的前端源代码。你可以通过阅读代码来学习编程技巧，不过不建议直接在生产环境中使用它们。

    • 网址

  • React 视频库：remotion

    • 介绍

      • Remotion 是个基于 React 的视频库，允许用户利用 Web 技术（CSS、Canvas、SVG、WebGQL 等等）来创建视频。而官方给出了各类视频是如何通过 Remotion 进行创建的示例，如果你想要创建一个视频，不妨试试 Remotion。

    • 网址

  • React.js 构建的 Web IDE UI 框架

  • 从 0 实现 React18

    • 介绍

      • 从零实现 React v18 的核心功能，特点如下：

      • 👬 与 React 源码最接近的极简实现

      • 💪 虽然实现极简，但功能完备，当前可跑通官方测试用例数量：25

      • 🚶 按 Git Tag 划分迭代步骤，记录从 0 实现的每个功能

    • 网址

  • 高仿网易云音乐

  • 高仿 B 站 web 移动端

    • 介绍

      • 高仿 B 站 Web 移动端，基于 SSR 服务端渲染模板，使用 React 16.8，Typescript 开发，后端服务使用 Express 实现。

      • 该项目实现了首页、分类页、排行榜、搜索、视频详情页、 UP 主页、个人中心、直播、直播列表、分类、直播间等功能。

    • 网址

  • 高仿 Instagram

    • 介绍

      • 一个仿 Instagram 项目，前端使用 React、状态管理使用 Redux、路由使用 React Router、表格管理使用 Formik、动画使用 React Spring、Websocket 管理使用 Socket.io、后端使用 Express、数据库使用 MongoDB。

    • 网址

  • 高仿 Stackoverflow

  • 高仿 Spotify

    • 介绍

    • 网址

      • github

      • 官网

svelte ​

  • 网址

  • 介绍

    • 全新的构建 Web 界面的方法

    • Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

    • 与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。

全栈 Web 框架：Remix ​

electron 开源项目 ​

javascript 开源 ​

typescript 开源 ​

  • 面向教师的会议视频工具：nettu-meet

  • 手绘风画图工具：tldraw

    • 介绍

      • tldraw 是一个能让你画出手绘风的绘图工具，它还能识别笔重，根据你的鼠标压力呈现不一样的笔触（参考下下图），当然你也可以基于它绘制流程图。tldraw 除了常规的桌面 App 之外，只支持网页端绘图，以及它有对应的 VS Code 扩展可在 VS Code 中绘图。

    • 网址

  • 人脸、肢体跟踪：kalidokit

    • 介绍

      • kalidokit 可用于跟踪肢体、脸部动作，兼容 Facemesh、Blazepose、Handpose 和 Holistic。作为 Vtuber 网络应用、Kalidoface 和 Kalidoface 3D 的核心，KalidoKit 是为绑定 3D VRM 模型和 Live 2D 而设计的。

    • 网址

  • 最简 vue3 模型：mini-vue

    • mini-vue 通过构建自己的 mini-vue3 来深入学习理解 vue3 源码。作者表示，像这种工业级别的库，源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑，不利于使用者学习。而此项目将 vue3 源码中最核心的逻辑剥离出来，大家只要关注核心逻辑的实现即可。

    • 网址

  • 3D 建模：plasticity

    • 介绍

      • Plasticity 是一款 3D 建模工具，供艺术家们使用的 CAD。虽然它尚在 Beta 版本，有些功能缺失，但是它主打快速、高效建模，而且界面有着不同于工业风的高颜值。

    • 网址

  • JSON 数据可视化：jsonvisio.com

    • 介绍

      • JSON Visio 是 JSON 数据可视化工具，它可以无缝地在图形上展示数据，而无需重构任何东西，直接粘贴或导入文件即可。如它的 logo 所示，它的数据将变成类树形呈现。

    • 网址

  • 快速查看 JSON 文件：jsonhero-web

    • 介绍

      • JSON Hero 是一个开源、高颜值的 JSON 浏览器，可以让你快速浏览、搜索和浏览 JSON 文件。特性：

      • 功能

        • 多种 JSON 查看方式：列视图、树视图、编辑器视图

        • 自动推断字符串内容，并提供有用的预览

        • 创建推断 JSON Schema 来校验 JSON

        • 快速扫描相关值来检查边缘情况

        • 支持键值来检索 JSON 文件

        • 键盘可访问

        • 路径支持可轻松共享 url

    • 网址

  • Web 3D 图形 API 教程：WebGPU

  • Web UI 组件库：layui

    • 介绍

      • Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约，而内在丰盈，利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。

      • MIT 协议开源

    • 网址

  • 拖放，调整大小和多点触控手势，具有惯性和捕捉功能：interactjs

    • 介绍

    • 网址

      • github

      • 官网

低代码开源项目 ​

  • Appsmith

    • 介绍

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

    • 网址

    • 介绍

    • 网址

      • 官网

      • GitHub

  • Amis

    • 介绍

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

    • 网址

  • LowCodeEngine 低代码引擎

    • 介绍

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

    • 网址

  • Element UI 表单设计及代码生成器

    • 介绍

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

    • 网址

  • H5-Dooring

    • 介绍

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

    • 网址

  • Yao

    • 介绍

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

    • 网址

  • mometa

    • 介绍

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

    • 网址

  • NocoBase

    • 介绍

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

    • 特点

      • 开发组织内部管理系统

      • 通过无代码开发，满足大部分业务需求

      • 无代码开发在操作上足够简单，满足非开发人员；在功能上足够灵活，接近原生开发

      • 可以非常方便的进行扩展开发

      • 私有部署，掌控全部代码和数据

    • 网址

  • sparrow

    • 介绍

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

    • 网址

  • vite-vue3-lowcode

  • 华炎魔方

    • 介绍

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

    • 网址

  • Awesome Lowcode

网络抓取工具开源收集：awesome-web-scraping ​

用各种语言编写的很酷的开源项目 ​

机器学习资源收集：awesome-machine-learning ​

计算机科学学习的 Github 仓库 ​

Python 学习 ​

Released under the MIT License.

Copyright © 2022-2023 MuYa