文章和教程

• Vue 学习笔记
• Node 学习笔记
• React 学习笔记
• Angular 学习笔记
• RequireJS 学习笔记
• Webpack 学习笔记
• Gulp 学习笔记
• Python 学习笔记
• Egret 引擎学习笔记
• 流解决，TCP 和 UDP，WebRTC 和 Blob 学习笔记

博客

• 前端回忆录 | 前端笔记本 – 一个前端博主记录的心得和总结
• Hasnode – Hashnode 是在您的集体域 free 上收费创立开发者博客并通过咱们的寰球开发者社区与读者分割的最简略办法！👩‍💻👨‍💻
• Dev.to – DEV 是一个由软件开发人员组成的社区，他们聚在一起互相帮助。
• Hackernoon – 一个独立的技术媒体网站

必须具备 Chrome 扩大程序

• DailyDev – 在 Chrome 默认标签中获取无关 Dev 社区的最新消息。
• WhatFont – 理解网站应用的是哪种字体。
• ColorPick Eyedropper – 只需放下笔，即可晓得网站应用的是哪种颜色。
• Wappalyzer – 理解任何网站的技术栈
• Web Developer – 该扩大程序领有大量工具。
• React Developer Tools – React 开发者工具是 Chrome DevTools 扩大，用于开源 React JavaScript 库。它使您能够查看 Chrome 开发者工具中的 React 组件层次结构。

前端性能剖析工具

• PageSpeed Insights – PageSpeed Insights 可能针对挪动设施和桌面设施生成网页的理论性能报告，并可能提供对于如何改良相应网页的倡议。
• Lighthouse – Lighthouse 是一个开源的自动化工具，用于改良网络应用的品质。您能够将其作为一个 Chrome 扩大程序运行，或从命令行运行。您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，而后生成一个无关页面性能的报告。
• Pingdom – 在线网站速度检测工具是由一家网站监测服务公司推出的网页速度检测工具，帮忙用户找出影响网站速度的起因，并给出改善网页性能的可行性计划，对于有网站的用户来说十分实用。
• Sitespeed.io – Sitespeed.io 是一款开源的 Web 性能测试工具，用来掂量 Web 网站的综合性能，帮忙开发和测试人员剖析网页的加载速度和渲染性能。
• Calibre – Caliber 是一款多功能的性能监控套件，可帮忙你监控和审核网站的性能。它还容许你通过指定测试服务器的地位，治理模仿的广告首选项甚至模仿挪动设施来模仿事实条件。它还容许你设置估算，并通过为你提供性能降落来帮忙你将估算放弃在估算之内。
• SpeedTracker – SpeedTracker 是一个运行在 WebPageTest 之上的工具，可在你的网站上进行定期的性能测试，并直观显示各种性能指标随工夫变动的形式。这使你能够一直评估网站，并查看新性能如何影响网站的性能。你还能够定义估算并通过电子邮件和 Slack 获取警报。

VS 代码必须具备扩展名

• Compile Hero – Compile Hero 是一款简略易上手用于一键编译 Less, Sass, Scss, Styl, TS, TSX, Jade, Pug 或 JS 等文件的编辑器工具。
• NPM – 此扩展名可帮忙您治理 Package.json 并在未装置依赖项时提供正告，也会有所帮忙与版本控制。
• Prettier – Prettier 是一种自以为是的代码格式化程序。它通过解析代码并应用本人的规定（思考最大行长）从新打印代码，从而实现统一的款式，并在必要时包装代码。
• 彩虹括号 – 通过对环境中设置的每个支架进行色彩编码，能够轻松找到失落的标签。
• VS 代码大图标 – 通过利用适当的图标集来按类型直观地辨认文件，从而组织环境。
• 占位符图像 – 诸如 unsplash.it 和 placehold.it 之类的服务十分有用。当初，您能够通过间接在 VS Code 中增加占位符图像来节省时间
• Vetur – 官网 VueJS 扩大
• ESLint – 该扩大程序应用装置在关上的工作区文件夹中的 ESLint 库。
• 实时服务器 – 启动具备实时从新加载性能的开发本地服务器，用于动态和动静页面。
• Visual Studio IntelliCode – 此扩大程序会将最相干的实现倡议移到顶部。
• Chrome 调试器 – 此扩大程序可让您从 VS Code 外部调试在 Chrome 浏览器中运行的 JavaScript 代码。
• Microsoft Edge 调试器 – 在 Microsoft Edge 浏览器中调试 JavaScript 代码
• Firefox 调试器 – 在 Firefox 中调试 Web 应用程序或浏览器扩大
• Bracket Pair Colorizer 2 – 可自定义的扩大程序，用于为匹配的支架着色

VS 代码主题

• One Dark Pro – Atom 的标志性 Visual Studio Code 的“One Dark”主题
• 资料主题 – Visual Studio Code 当初最史诗般的主题
• 地平线主题 – 一个精美 ​​ 的 Visual Studio 代码双重主题

DOCS 和备忘单 😁

• MDN Web Docs – MDN Web Docs 网站提供无关 Open Web 技术的信息，包含网站和渐进式 Web 应用程序的 HTML，CSS 和 API。
• DevDocs – 针对开发人员的疾速，离线和收费的文档浏览器。在一个 Web 应用程序中搜寻 100 多个文档。
• DEVHINTS – 大量的备忘单。
• FLEX-Malven – CSS Flex 布局的可视备忘单。
• GRID-Malven – CSS 网格布局的可视备忘单。

🌐 如何运作？

• 互联网如何运作视频 – 互联网如何运作？
• 互联网的工作原理简介视频 – 对于互联网如何工作的简要阐明？
• DNS – DNS 如何工作？
• HTTPS – HTTPS 如何工作？

对于 HTML 和 CSS

• Layout Demo – 学习 CSS 页面构造布局
• freeCodeCamp – 学习 Web 开发的收费课程。
• Flexbox Froggy – 一款可帮忙您学习 CSS Flex 的游戏。
• CSS 技巧 -Flexbox – Flexbox 残缺指南。
• Grid Garden – 一个学习 CSS Grid 的游戏。
• CSS 技巧 - 网格的残缺指南 – CSS 网格的全面指南，着重于网格的所有设置父容器和网格子元素。
• Learn CSS Grid – Jonathan Suh 撰写的综合指南，可帮忙您理解和学习 CSS Grid Layout。
• 我能够应用 – 最新的浏览器反对表，用于反对台式机和挪动 Web 浏览器上的前端 Web 技术。
• HTML Dog – 简单明了。
• Marksheet – 有限数量的教程
• ODIN 我的项目 – 惊人的学习形式。
• CSS 成果 – CSS 动画。
• 关键帧 – 应用可视工夫线编辑器创立根本或简单的 CSS @keyframe 动画。
• Animista – 玩筹备好应用 CSS 动画的汇合。
• 难以上网 – 面向残缺初学者的敌对 Web 开发教程。
• BEM – BEM 命名备忘单。
• Autoprefixer – Autoprefixer 是一个 PostCSS 插件，可解析您的 CSS 并增加供应商前缀。
• CSS 格式化程序 – 在线 CSS 格式化程序，CSS Beautifier。
• 占位符 – 如何应用咱们的占位符。只需在咱们的 URL 后指定图像尺寸，您将取得一个占位符图像。

📝 在线 IDE，编辑器

• goormIDE
• CodeSandbox
• CodePen
• Repl.it
• JSFiddle

📷 图像资源

• Unsplash – 收费图片和照片。
• Pexels – 收费的图片。- 删除照片数据 - 在互联网上共享照片之前，先从照片中删除集体数据。
• LottieFiles – LottieFiles 是专为 -Lottie 设计的动画汇合 - 搅扰开发人员的日子曾经一去不复返了。
• removebg – 删除图像背景。
• Pixabay – 收费图片或视频。

👓 可及性

• 辅助性能博客 - 中 – 七个易于实现的准则 - 设计更易拜访的网站的准则。
• 可拜访性备忘单 – 通用设计的实用办法，使每个人都能够拜访您的网站 / webapp。

Windows 的终端

• Windows 终端
• FluentTerminal
• 超级

📺YOUTUBE 频道

• Traversy Media
• freeCodeCamp.org
• 代码进化
• Fireship
• The Net Ninja
• Wes Bos

🖋 字体和印刷术

• Google 字体 – 收费和易于应用的网络字体的第一资源。
• FontPair – 字体对可帮忙设计师将 Google 字体配对在一起。丑陋的 Google 字体组合和配对。
• Fontjoy – Fontjoy 帮忙设计师抉择最佳的字体组合。混合并匹配不同的字体以实现完满的配对。
• Fonts Arena – 收费字体，高级字体的收费替代品，针对您的研究成果。

🎨 插图

• unDraw – 浏览以找到适宜您须要的插图，而后单击下载。
• freepik – 收费的图形资源。
• DrawKit – 手绘矢量插图和图标资源，非常适合您的下一个我的项目。

💧 图标

• Font Awesome – 矢量图标和社交徽标。
• Ionicons – 开源且由 MIT 许可的图标包。
• icons8 – 以 PNG 和 SVG 下载收费图标。
• flaticon – SVG，PSD，PNG，EPS 格局或图标字体的收费矢量图标。
• 简略图标 – 1463 个风行品牌的收费 SVG 图标。

前端框架学习资源

⚡JAVASCRIPT

• freeCodeCamp – 最好的免费资源，用于交互式学习 JavaScript。
• JavaScript.info – 实用 JavaScript 教程。
• JavaScript 设计模式
• MDN 的 JavaScript 参考
• Eloquent JavaScript – 这是一本无关 JavaScript，编程和数字奇观的书。您能够在此处在线浏览。
• JavaScript30 – 30 天香草 JS 编码挑战。在 30 天内应用 30 个教程构建 30 件事。
• DOM 操作参考
• JavaScript 的工作形式
• JavaScript 事件参考
• 最充沛的函数式编程指南 – 应用 JavaScript 进行函数式编程的杰出入门。
• Functional-Light JavaScript – 本书探讨了将函数式编程（FP）利用于 JavaScript 的外围原理。
• 代码学校 – 从根底到最佳实际。与 JavaScript 相干的不同课程。
• 函数式编程 – 通过应用 map，filter，concatAll，reduce 和 zip 以交互方式学习函数式编程的基本原理。
• 在线学习 JavaScript – 带有距离的重复性抽认卡应用程序的交互式 JavaScript 课程。
• Exercism JavaScript Track – Exercism 收费提供集体练习和基于导师的学习。

⚡ React

为什么要 React？

• Facebook 上的 JS 利用
• React：从新思考最佳做法
• React
• React 文档 - 疾速入门局部 – 根本
• 学习 React 之路 – 根本

ES2015 +

• 学习 ES6（ECMAScript 2015) – 根本
• 摸索 ES6 – 高级
• 摸索 ES2016 和 ES2017高级

路由

• React Router Docs – 根本

状态治理

Redux

• Redux 入门 – 根本
• 应用习用的 Redux 构建 React 应用程序 – 高级

捆绑包

Webpack

• Webpack 入门

建设货色

• 几个我的项目构想
• React-TodoMVC
• 疏导 React 我的项目
• 建设天气利用
• React + Redux 中的 SoundCloud 客户端 – 对于 React 生态系统的入门常识：1，2 和 3。
• 应用 JSON Web 令牌（JWT)身份验证构建 React / Redux 利用
• 想深刻理解 React 吗？

🎮API

• Quotes REST API – 他们说 So 在数据库中有超过一百万条报价，这是世界上最大的此类数据库。Quotes API 提供了一种简略的办法来拜访数据。
• OpenWeather – 来自 OpenWeatherMap 的简略，疾速，收费的天气 API，您能够拜访以后的天气数据，每小时，5 天和 16 天的天气预报。
• 公共 API – 面向开发人员的 1000 多种收费公共和凋谢 REST API 的汇总列表。
• SWAPI –《星球大战》API。
• JSONPlaceholder – 收费应用伪造的在线 REST API 进行测试和原型制作。

⚡NODEJS

• Node.js 教程 – Net Ninja 的 Node.js 解体课程教程。
• 您不晓得 Node.js
• Node 的艺术 – 涵盖基础知识的入门教程。
• NodeSchool – 您也能够本人进行互动的自助式讲习班。
• Node 模式 – 无关与 Node.js 相干的代码和网络模式的简短书籍。
• 学习 Node – 一个高级培训课程，用于学习如何应用 Node.js，Express 和 MongoDB 构建利用。
• Node Way – 存在用于编写可保护模块，可伸缩应用程序和易于浏览的代码的 Node.js 最佳实际和领导准则的残缺哲学。
• Express.js 平安提醒 – 如何保留和爱护应用程序。
• Awesome Nodejs – 令人欢快的 Node.js 软件包和资源。
• nodebestpractices – 大量的构建 Node 应用程序的最佳实际。对于大型项目很重要。

😐 学习 GIT

• Git 手册 – Git，GitHub，DVCS，天哪！理解 Git 的所有术语和基础知识。
• 备忘单 – 放弃这些不便！参考表涵盖了 Git 命令，性能，SVN 迁徙和 bash。提供多种语言。
• 学习 Git 分支 – 间接从 Web 浏览器尝试 Git 命令。领有一些您行将成为收藏夹的性能：分支，增加，提交，合并，还原，筛选，从新设置！
• 可视化 Git – 看看引擎盖下！应用收费浏览模式和一些构建的场景，摸索 Git 命令如何影响 Web 浏览器中存储库的构造。
• Git-It – 您曾经下载了 Git，当初呢？将 Git-It 下载到您的计算机上，您将取得一个入手教程，该教程将教您间接在本地环境中应用实在存储库上的命令来应用 Git。

实战案例

• 🎹 用键盘 8 个键演奏一首蒲公英的约定送给本人或月亮代表我的心送给她
• 基于 Vue3.0 Composition Api 疾速构建实战我的项目
• 大型前端我的项目要怎么跟踪用户行为和剖析函数调用链追踪计划
• 微信小游戏跳一跳辅助
• 编写 React 和 Omi 单文件组件的 VSC 语法高亮插件
• 6000 万数据包和 300 万数据包在 50M 内存应用环境中求交加
• 大厂面试题分享：如何让 (a===1&&a===2&&a===3) 的值为 true?
• NodeJS 实现《你画我猜》小游戏
• 应用 PHP 的 CodeIgnitier 框架编写新闻客户端
• 极大进步国人开发效率超实用的 VSCode 插件
• 我如何用前端技术失去 XXOO 网站的 VIP
• 我如何用最简略的前端技术揭示那些灰色产业背地的原理
• 腾讯 Omi 框架和 Omil 应用文档
• iPhone X 的适配计划

筹备面试（问题）

• 174 道 JavaScript 面试题，助你查漏补缺 – 有用的前端相干问题列表，可用于面试潜在候选人。
• 66 道前端算法面试题附思路剖析助你查漏补缺 – 有用的前端相干问题列表，可用于面试潜在候选人。
• 104 道 CSS 面试题，助你查漏补缺 – 有用的前端相干问题列表，可用于面试潜在候选人。
• 📝《切图仔面试宝典》
• 前端程序员常常漠视的一个 JavaScript 面试题
• try catch 引发的性能优化深度思考
• 对于 Vue，React，Preact 和 Omi 等框架源码的解读
• CSS 的各种布局
• 深入浅出 Jest 框架的实现原理