【前端资源分享】强烈推荐收藏的前端学习资源

今天分享一些个人收藏的前端学习资源，按一下几个维度简单划分了下，有 3D、框架、构建工具等等。由于这些地址都是我个人收藏的，所以带有一些强烈的主观意识，还有很多优秀的网址没有收录进来，会不断更新的，欢迎大家点赞，收藏。

关于库名的翻译问题，由于是机翻，会存在一些问题，还请见谅。

本文首发于微信公众号：野生程序猿江辰

3D

cesium

地址

关于：用于世界级 3D 地球仪和地图的开源 JavaScript 库

推荐理由：3D 实现的各种地球

推荐指数：⭐️⭐️⭐️⭐️⭐️

vanta

地址

关于：为您的网站提供 3D 动画背景

推荐理由：炫酷，特效，简单，自定义

推荐指数：⭐️⭐️⭐️⭐️⭐️

webgl-fundamentals

地址

关于：从基础开始的 WebGL 课程

推荐理由：从入门到放弃

推荐指数：⭐️⭐️⭐️

框架

dioxus | 二恶英

地址

关于：适用于桌面、Web、移动等的全栈 GUI 库。

推荐理由：使用 Rust 编写的全栈开发框架

推荐指数：⭐️⭐️⭐️⭐️⭐️

构建工具

parcel

地址

关于：用于网络的零配置构建工具

推荐理由：性能更快

推荐指数：⭐️⭐️⭐️⭐️⭐️

esbuild

地址

关于：速度极快的网络捆绑器

推荐理由：性能更快

推荐指数：⭐️⭐️⭐️⭐️⭐️

swc

地址

关于：基于 Rust 的 Web 平台

推荐理由：Rust 带来可靠的性能

推荐指数：⭐️⭐️⭐️⭐️⭐️

图标

Font-Awesome

地址

关于：标志性的 SVG、字体和 CSS 工具包

推荐理由：字体、SVG、CSS

推荐指数：⭐️⭐️⭐️⭐️⭐️

flag-icons | 旗帜图标

地址

关于：SVG 中所有国家国旗的精选集合 - 以及更容易集成的 CSS

推荐理由：这下找国旗图标，要快捷很多了吧？

推荐指数：⭐️⭐️⭐️⭐️⭐️

tabler-icons | 桌面图标

地址

关于：一组超过 4600 个免费的 MIT 许可的高质量 SVG 图标，供您在 Web 项目中使用。

推荐理由：如果有一天 icon-front 无法使用，拥有这么一款开源的 SVG 图库，能否捕获你的芳心？

推荐指数：⭐️⭐️⭐️⭐️⭐️

CSS

You-Dont-Need-JavaScript | 你不需要 JavaScript

地址

关于：CSS很强大，不需要JS也能做很多事情。

推荐理由：有时候，你可能需要挑战下自己，不借助JS，完成CSS的效果

推荐指数：⭐️⭐️⭐️

autoprefixer | 自动前缀器

地址

关于：通过 Can I Use 解析 CSS 并将供应商前缀添加到规则中

推荐理由：完美解决 CSS 前缀问题

推荐指数：⭐️⭐️⭐️⭐️⭐️

daisyui | 黛玉

地址

关于：最流行、免费、开源的 Tailwind CSS 组件库

推荐理由：想找到 Tailwind CSS 写好的组件，选它就对了！

推荐指数：⭐️⭐️⭐️⭐️⭐️

css-protips

地址

关于：一系列技巧，帮助您提升 CSS 技能

推荐理由：实战用的小技巧，或许对你有些帮助

推荐指数：⭐️⭐️⭐️

postcss

地址

关于：使用 JS 插件转换样式

推荐理由：PostCSS是一个通过JS插件转换样式的工具。这些插件可以检查你的 CSS、支持变量和 mixin、转译未来的 CSS 语法、内联图像等等。

推荐指数：⭐️⭐️⭐️⭐️⭐️

动画

animate.css

地址

关于：跨浏览器的 CSS 动画库。使用起来就像一件简单的事情一样简单。

推荐理由：强大

推荐指数：⭐️⭐️⭐️⭐️

popmotion | 流行动作

地址

关于：简单的动画库，提供令人愉悦的用户界面

推荐理由：只有大概 4.5kb 的大小，就能满足动画需求

推荐指数：⭐️⭐️⭐️⭐️

barba | 巴尔巴

地址

关于：在您的网站页面之间创建流畅、流畅的过渡。

推荐理由：只有大概 7kb 的大小，可帮助您在网站页面之间创建流畅且平滑的过渡

推荐指数：⭐️⭐️⭐️⭐️

UI 库

NES | 像素风

地址

关于：NES 风格的 CSS 框架 | 流行 CSSfure ームワーク

推荐理由：你是否想找寻像素风格的组件库，那就选它就对了

推荐指数：⭐️⭐️⭐️⭐️⭐️

代码质量

prettier

地址

关于：Prettier 是一个固执己见的代码格式化程序。

推荐理由：代码难以阅读？美化它

推荐指数：⭐️⭐️⭐️⭐️⭐️

stylelint

地址

关于：强大的 CSS linter，可以帮助您避免错误并强制执行约定。

推荐理由：没有比它更好的约束 CSS 代码

推荐指数：⭐️⭐️⭐️⭐️⭐️

Airbnb JavaScript Style Guide

地址

关于：JavaScript 风格指南

推荐理由：业界最流行的代码风格

推荐指数：⭐️⭐️⭐️⭐️⭐️

eslint

地址

关于：查找并修复 JavaScript 代码中的问题。

推荐理由：自动修复代码

推荐指数：⭐️⭐️⭐️⭐️⭐️

lint-staged

地址

关于：在 git 暂存文件上运行 linter

推荐理由：禁止提交不规范代码

推荐指数：⭐️⭐️⭐️⭐️⭐️

实用网址

Web-Dev-For-Beginners | Web 开发人员入门

地址

关于：12 周 24 节课，Web 开发人员入门

推荐理由：非常适合新手入门

推荐指数：⭐️⭐️⭐️⭐️⭐️

30-seconds-of-code | 30秒代码

地址

关于：满足您所有开发需求的简短代码片段

推荐理由：只需要30秒，基本能覆盖你想要解决的场景问题

推荐指数：⭐️⭐️⭐️⭐️⭐️

Front-End-Performance-Checklist | 前端性能检查表

地址

关于：🎮 唯一比其他运行速度更快的前端性能检查表

推荐理由：想要测试你的网站性能？它是首选

推荐指数：⭐️⭐️⭐️⭐️⭐️

30-Days-Of-React | 30天学习 React

地址

关于：挑战在30天内学习 React 的分步指南

推荐理由：适合新手快速入门 React

推荐指数：⭐️⭐️⭐️⭐️

cdnjs

地址

关于：CDN 资产 - 排名第一的免费开源 CDN，旨在让开发人员的生活更轻松。

推荐理由：排名第一的免费开源CDN，这含量，你懂的

推荐指数：⭐️⭐️⭐️⭐️⭐️

win11React

地址

关于：React 中的 Windows 11

推荐理由：谁敢相信，居然有人在 Web 界面实现了 Win11

推荐指数：⭐️⭐️⭐️⭐️⭐️

babel-handbook | Babel 手册

地址

关于：关于如何使用 Babel 以及如何为 Babel 创建插件的指导手册。

推荐理由：详细的介绍了关于 Babel 的构建原理和如何编写插件

推荐指数：⭐️⭐️⭐️⭐️⭐️

awesome | 惊人

地址

关于：关于各种有趣主题的精彩列表

推荐理由：只要你想学，从来不缺知识

推荐指数：⭐️⭐️⭐️⭐️⭐️

javascript-algorithms | JavaScript 算法

地址

关于：用 JavaScript 实现的算法和数据结构，并附有解释和进一步阅读的链接

推荐理由：适合前端开发人员学习的算法教程

推荐指数：⭐️⭐️⭐️⭐️⭐️