efficient-learn-frontend

🤔 这是什么 ?

  相信大多数人可能和我一样，平时在网上学习（闲逛:sweat_smile:）时突然看到好的学习资源，然后立马收藏起来，比如加入了微信收藏或者是添加入浏览器的书签，但是很少去看，突然有一天碰到一个问题，想起来你之前看到过相关的东西，然后开始在收藏夹和书签翻找，这样很耗时间，所以我想把我平时遇到的好的资源，比如好的文章后或者工具，都保存在这里

📖 每日必读

以下是我基本上每天没事的时候都会逛一逛的网站，可以学习到很多东西，

• web.dev
• Chrome Developers
• CSS-Tricks
• MDN Blog
• JavaScript Weekly
• dev.to
• 阮一峰的网络日志
• CSS Weekly
• V2EX

🧑‍💻 大牛博客

一些技术大牛的博客

• Dan Abramov
• antfu

📑 目录

• 基础
  • JavaScript
    • 节流与防抖
    • 正则表达式
  • CSS
  • HTML
  • TypeScript
  • Node
  • Git
• 前端框架
  • React
  • Vue
• 后端框架
  • Nest
  • Express
  • Koa
• 工程化
  • Webpack
  • Vite
  • Babel
  • Rollup
  • esbuild
  • SWC
• 包管理工具
  • Yarn
  • NPM
  • PNPM
• 规范化
  • JavaScript规范
  • Commit提交规范
  • 语义化版本规范
• AI
• 其他

基础

JavaScript 🔗

一些JavaScript的基础教程

• 现代 JavaScript 教程
• ES6 入门教程

节流与防抖

• Debouncing and Throttling Explained Through Examples
• JavaScript专题之跟着underscore学防抖
• JavaScript专题之跟着 underscore 学节流

事件循环

• JavaScript Visualized: Event Loop

正则表达式

下面是一些正则正则表达式的工具库

• https://regex101.com/
• https://jex.im/regulex/
• https://regex-vis.com/
• https://regexlearn.com/zh-cn/learn
• JS 正则迷你书 个人认为最牛的正则教程，讲的很全面
• 正则表达式30分钟入门教程
• Regex Cheatsheet

CSS 🔗

• 1-Line Layouts

HTML 🔗

• HTML 官方标准

TypeScript 🔗

• 深入理解 TypeScript

Node 🔗

Git 🔗

• Pro Git
• GitHub Actions 官方GitHub Actions教程
• GitHub Actions by Example 通过案例学习GitHub Actions
• 交互式学习Git
• Git Cheat Sheet

前端框架

React 🔗

• React技术揭秘

Vue 🔗

后端框架

Nest 🔗

Express 🔗

Koa 🔗

工程化

• 带你入门前端工程 谭光志woai3c

Webpack 🔗

Vite 🔗

Babel 🔗

• babel-handbook

Rollup 🔗

esbuild 🔗

SWC 🔗

包管理工具

Yarn 🔗

NPM 🔗

• npm cheat sheet

PNPM 🔗

规范化

JavaScript规范

• Airbnb JavaScript Style Guide
• JavaScript Standard Style

Commit提交规范 🔗

语义化版本规范 🔗

笔记

• Obsidian中文社区

AI

• Poe
• framer AI生成网站
• phind The AI search engine for developers.
• forefront chat
• freegpt
• AI工具集
• Stability AI
• BAI Chat

面试

• 小林coding
• 剑指前端 Offer
• 前端进阶之旅
• 山月
• 木易杨前端进阶
• Front-end Developer Interview Questions
• 30 Seconds of Interviews
• 前端面试秘籍
• all-of-frontend
• web前端面试 - 面试官系列
• daily
• Front-End-Interview-Notebook
• 前端面试每日 3+1
• Tech Interview Handbook
• 反向面试

浏览器插件

• LocatorJS option + click页面快速定位到源码
• Relingo 划词翻译
• OpenAI Translator 划词翻译
• 沉浸式翻译
• uBlock Origin 去广告
• Proxy 资源代理
• XSwitch 资源代理

其他

• 计算机教育中缺失的一课 开发工具相关教程
• Randoma11y 一种特别好看的配色方案
• phind 为开发者打造的人工智能搜索引擎
• Discover three.js 一本介绍threejs书籍
• OGDEN's BASIC ENGLISH 英语学习
• 解释 shell 命令
• linux 命令查询