我在掘金收藏前端文章分享✨

前言

转眼间2020年已到尽头，发生很多事，也正式加入掘金也有一年时间，从一枚小菜鸟，逐步上手开发~，在这里学习到很多知识点，吸取big佬文章里面的精华从而自我提升。 相信有很多小伙伴，也是有同样的疑问，普通的发展环境，初生牛犊，无大佬带，也不知从何学习，这时候我们就可以结合自己项目以及大佬们文章的总结等等，自己去优化提升去尝试（哈哈哈，自己也是这么摸过来的，当然走弯路少不了），也是一种方式吧，慢慢发现有一番云雨。本文主要适宜1到3年的初中级前端工程师（大佬的话可以路过路过~），不敢说资源最好，最全，适合每一个人，但是内容质量上让我满意的，可能有些资源我也未必看完，看懂，看细，以及有些更好的文章看过，hxdm可以评论区留下你们的评论添加（本人一名前端Vuer所以没有收藏React文章，R的xdm可以去看篇幅 整合篇）。 废话不多说，建议收藏慢慢品。

有部分文章内容有相似，可以对比选择性具体查看即可。

CSS

CSS基础篇

• CSS3新特新总结

• 100道近两万字帮你巩固css知识点

• 一行代码实现十种常见布局

• Grid 布局

• 48张小图带你领略flex布局之美

• 网页布局都有哪种？一般都用什么布局？

• 被低估的CSS滤镜：drop-shadow

• 你的垂直居中有问题？我竟无法反驳 🤦🏻‍♂️

• 何谓高质感，FWidget

• 你可能还不知的 7 个 CSS 好用的属性

• CSS盒模型之内边距、边框、外边距 十九问 （持续更新）

• 8个硬核技巧带你迅速提升CSS技术

CSS技巧篇

• CSS的常用套路
• CSS技巧
• 灵活运用CSS开发技巧
• 72个炫酷的CSS技巧
• 66 个CSS 特效
• CSS 幻术 | 抗锯齿
• 10个 CSS动画库!
• 三行CSS为掘金添加暗黑模式支持
• CSS精髓：这些布局你都学废了吗？
• 一些CSS特效网站整理
• CSS性能优化的8个技巧

CSS动画篇

• 苹果营销页几个有趣的动画
• 手把手教你实现「京喜工厂」的CSS动画效果
• 十大酷炫屌的图像悬停特效
• CSS 之使用径向渐变实现卡券效果
• 利用CSS改变图片颜色的多种方法
• 眼前一亮的HOVER效果
• 简单实用又不花里胡哨的鼠标滑过样式
• 教你使用CSS3实现新拟态UI
• 10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
• 纯 CSS 制作赛博朋克 2077 “故障风”按钮

Sass，Less，Stlus等预处理器可自行查询官网文档学习学习。

适配

• 移动端适配及PC端适配心得总结体会(二) (可能比较全

JavaScript

JS基础篇

• 【JS 进阶】你真的掌握变量和类型了吗

• JavaScript中的垃圾回收和内存泄漏

• JavaScript 闭包入门（译文）

• JS 万字总结 重量级干货！！！

• 1.1w字 ｜ 初中级前端 JavaScript 自测清单 - 2

• JS 原型与原型链

• 6k字一文搞懂Javascript对象，原型，继承

• 想自学JS吗？想提升JS底层原理吗？76张脑图带你彻底搞懂原生JS

• 1.6万字带你回忆那些遗忘的JS知识点

• 前端基础重建 --- 1. JS数据类型及各种情况下的转换

• 你不知道的 JSON.stringify() 的威力

• 前端如何入门和进阶？万字指南让你不再迷茫！

• [译] 理解 JavaScript 中的执行上下文和执行栈

• 全面分析toString与valueOf

• 如何写出一个惊艳面试官的深拷贝

• 原生JS灵魂之问, 请问你能接得住几个？(上)

• 原生JS灵魂之问, 请问你能接得住几个？(中)

• 原生JS灵魂之问, 请问你能接得住几个？(下)

• 「前端进阶」彻底弄懂前端路由

• 前端表单数据那些事

• 「前端进阶」彻底弄懂前端路由

• JavaScript中的这些骚操作，你都知道吗？

• 当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?

• 你不知道的轮播图细节~

• 如何利用 JavaScript 实现并发控制

Array

• 「数组方法」从详细操作js数组到浅析v8中array.js
• 【干货】js 数组详细操作方法及解析合集
• JS数组奇巧淫技
• 解锁各种js数组骚操作，总有你想要的！
• 数组的遍历你都会用了，那Promise版本的呢
• 25个你不得不知道的数组reduce高级用法

ES6+

• ES6、ES7、ES8、ES9、ES10新特性一览

• 1.5万字概括ES6全部特性(已更新ES2020)

• 近一万字的ES6语法知识点补充

• 理解 async/await

• 与Promise血脉相连的async/await

• 9k字 | Promise/async/Generator实现原理解析

• 要就来45道Promise面试题一次爽到底(1.1w字用心整理)

• 嘿，不要给 async 函数写那么多 try/catch 了

• 手撕 Promise

• 「硬核JS」深入了解异步解决方案

• 面试精选之Promise

• ES2020 已定稿！赶紧上手实践一下吧（真实场景例子）

• 通过Object.defineProperty数据拦截对比，体验一下proxy有多优秀

设计模式

• 手把手教你项目中使用：JavaScript设计模式
• 不知道怎么封装代码？看看这几种设计模式吧！
• 前端渣渣唠嗑一下前端中的设计模式（真实场景例子）
• 发布订阅模式，在工作中它的能量超乎你的想象
• “浅尝”JavaScript设计模式
• 一看就会的JS封装篇 💐

JS优雅篇

• JavaScript 复杂判断的更优雅写法
• 如何写出优雅的 JS 代码，变量和函数的正确写法
• 结合实际场景聊聊大部分前端都不会使用的数据结构Map

JS部分API手写

• 手写源码系列

技巧篇

• 灵活运用JS开发技巧
• 15条JS技巧
• 269个JavaScript工具函数，助你提升工作效率（新）
• 一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧
• 分享一些前端常用功能集合

正则篇

• JS正则表达式完整教程
• 正则表达式不要背
• 简单正则一手掌握

TypeScript

• 结合实例学习 Typescript
• TypeScript免费视频图文教程（2W字）
• "无 Typescript" 编程
• 一文读懂 TypeScript 泛型及应用（ 7.8K字）
• 【TS 演化史 -- 破晓】一步一个脚印带你入门 TS
• 让人眼前一亮的 10 大 TS 项目

Vue

基础篇

• Vue组件封装利器——slot插槽
• vue中的修饰符
• 听说你熟练使用Vue，那这9种Vue技术你掌握了吗？
• 万字总结Vue(包含全家桶)
• vue全家桶开发的一些小技巧和注意事项
• Vue知识点整理
• 史上最强vue总结---面试开发全靠它了
• 总结vue知识体系之高级应用篇
• vue中Axios的封装和API接口的管理
• 封装 axios 拦截器实现用户无感刷新 access_token
• Vue 权限控制(路由验证)
• 优美的v-for列表加载动画：vue动画钩子实践
• 10分钟彻底搞懂单页面应用路由
• 🚩四年前端带你理解路由懒加载的原理
• 手把手从零开始---封装一个vue视频播放器组件

Vue项目实战篇

• 基于Vue的前端架构，我做了这15点
• 总结我对Vue项目团队开发的一些基本配置封装分享
• 搭建一个vue-cli4+webpack移动端框架（开箱即用）
• Vue二次封装axios为插件使用
• 「vue模块化按需编译，突破编译瓶颈」
• vue项目部署的最佳实践
• Vue 项目里戳中你痛点的问题及解决办法（更新）

Vue Test与优化

• 学习Vue应用测试，让你的项目更加健壮和稳定
• 总结我对Vue项目上线做的一些基本优化
• Vue2.6.10(Vue-cli4)项目打包性能优化实践
• Vue 应用性能优化指南

Vue3.0

• 1W+字的Vue3官方教程笔记 | 同步导学视频
• 1【🚨万字警告】了不起的Vue3（上）
• 1【🚨万字警告】了不起的Vue3（下）
• 万字长文带你全面掌握Vue3
• Vue 3.0 来了，我们该做些什么？
• 傻瓜式入门vue3
• Vue3文档【Vue2迁移Vue3】
• 使用Vue3重构Vue2项目
• Vue Router 4.0

Vue源码系列篇

• Vue(v2.6.11)万行源码生啃，就硬刚！
• 🚩Vue源码——异步组件是如何使用
• 🚩Vue源码——nextTick实现原理
• 通俗易懂的vue虚拟（Virtual ）DOM和diff算法

Vue番外篇

• Vue 3.0 Ref-sugar 提案真的是自寻死路吗？

Vue技巧篇

• 分享8个非常实用的Vue自定义指令
• 性能优化之图片懒加载
• 30行写一个Vue图片懒加载指令
• 封装Vue组件的一些技巧
• Vue 项目一些常见问题的解决方案
• 开源推荐|我不能没有的5个Vue.js库
• Vue 开发必须知道的 36 个技巧【近1W字】
• 前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人
• 10个简单的技巧让你的 vue.js 代码更优雅🍊
• 绝对干货~！学会这些Vue小技巧，可以早点下班和女神约会了
• 实战技巧，Vue原来还可以这样写
• vue.js 使用技巧总结
• 10个Vue开发技巧助力成为更好的工程师(二)

Vue组件库

• VUE组件汇总

Vue面试篇

• 你不知道的React 和 Vue 的20个区别
• 面试官：vue是什么？
• 公司要求会使用框架vue，面试题会被问及哪些？

性能优化篇

• 工作中如何进行前端性能优化(21种优化+7种定位方式)
• 前端菜鸟让接口提速60%的优化技巧

Webpack与Babel

• 重新认识 package.json

• 基于webpack打包多页应用,对前端工程化的思考

• 源码篇（三）：手写webpack版mini源码分析项目构建过程

• 重学webpack(性能优化的配置)

• 【webpack 性能优化】编译速度从 50S 到 7S

• Webpack优化——将你的构建效率提速翻倍

• 用「增量」思想提升代码检查和打包构建的效率

• 面试官：webpack原理都不会？

• Webpack，SplitChunk

• webpack4.0 基本使用

• 手写webpack核心原理，再也不怕面试官问我webpack原理

• 你可能不知道的9条Webpack优化策略

• Webpack中publicPath详解

• Babel

• 从babel讲到AST

HTTP与安全

• HTTP灵魂之问，巩固你的 HTTP 知识体系
• 浏览器灵魂之问，请问你能接得住几个？
• 看图学HTTPS
• 你必须要懂的Web安全
• 零距离接触websocket🚀

数据结构与算法篇

• 前端算法渣的救赎之路🚀
• 写给前端的算法进阶指南，我是如何两个月零基础刷200题
• Web开发应该知道的数据结构
• 「算法与数据结构」你可能需要的一份前端算法总结
• JavaScript 算法
• JS 变量存储？栈 & 堆？NONONO!
• 分分钟学会前端sku算法（商品多规格选择）

Node

• 🕵️‍♂️一起认识Deno
• 一篇文章构建你的 NodeJS 知识体系
• Node.js入门系列（一）
• 深入理解Node.js 中的进程与线程
• 【进阶篇】koa+Mysql的全栈之旅
• 写给前端的 Nest.js 教程——10分钟上手后端接口开发
• Node - 从0基础到实战企业官网
• Jenkins打造强大的前端自动化工作流
• 基于 Express 应用框架的技术方案选型浅谈

面筋

• 2万字 | 前端基础拾遗90问
• 2万5千字大厂面经
• 2020最新：100道有答案的前端面试题（上）
• 看完跳槽少说涨 5 K，前端面试从准备到谈薪完全指南（近万字精华）
• 十几道大厂全栈面试题总结
• 由浅入深，66条JavaScript面试知识点
• 2020年前端面试复习必读文章
• 前22年的Loser，后4年和自己赛跑的人 | 最惨前端面经
• 面试官：你了解过移动端适配吗？
• 这些前端基础题你能答对几道？
• 霖呆呆的中大厂面试记录及2年前端薪资对比
• 霖呆呆的近期面试128题汇总(含超详细答案)
• 如何拿下政采云 P6 前端 Offer
• 4年前端跳槽总包居然翻了一倍
• 送你21道高频JavaScript手写面试题
• 面试分享：两年工作经验成功面试阿里P6总结
• 金九银十：一年前端的面试分享
• 技术面试最后反问面试官的话
• 阿里巴巴前端面试经验分享

工程化

• 前端开发规范梳理(全面记录)
• 前端开发风格指南
• 编写高质量可维护的代码：一目了然的注释
• 手把手带你入门前端工程化——超详细教程
• 推荐几个大厂的前端代码规范，学会了，你也能写出诗一样的代码！

小程序

• 近两万字小程序攻略发布了
• 小程序canvas绘制海报

知识体系and书单

• 树酱的前端知识体系构建（上）
• 2020 年前端分类推荐书单【结合思维导图】
• 前端必备javascript书籍测评【含红宝书和绿皮书】

工具与插件

• 【译】73个超棒且可提高生产力的 NPM 包🚀🌱
• 这些神仙代码库值得每一个前端开发者收藏
• 推荐一些奇奇怪怪的好东西
• 白嫖 11 个超火的前端必备在线工具，终于有时间上班摸鱼了
• 前端一键自动部署工具🛠
• 脱离切图仔，一键智能化生成代码教程
• [实用技巧]推荐一些非常棒的前端网站
• Chrome DevTools中的骚操作
• 聊聊前端开发日常的协作工具（全）
• 推荐11款开发中超实用的工具
• 前端神器Plop-自动生成模版
• 8 种用于前端性能分析工具
• 是时候抛弃Postman了，试试 VS Code 自带神器插件👏👏👏
• 前端小工具集合
• 前端高效开发必备的 js 库梳理
• VS Code 快速使用指南
• 12 个学习前端必备的神仙级工具类项目与网站

Git、SVN、Npm

Git

• 🛠Git 常用操作总结
• 一张脑图带你掌握Git命令
• 三年 Git 使用心得 & 常见问题整理
• 字节研发设施下的 Git 工作流

SVN

• SVN常用命令

Npm

• npm 用法
• npm 技巧

项目篇

• Vue 和 Express 实现迷你全栈电商应用
• vivo 商城架构升级-SSR 实战篇
• 十分钟就能搭建的个人博客，含部署上线
• Vue、Node全栈项目面向小白的博客系统
• Vue、Nuxt服务端渲染、NodeJS全栈项目面向小白的完美系统
• node实战系列：帮黄老师完善饿了吗项目
• 10 个 GitHub 上超火和超好看的管理后台模版，后台管理项目有着落了

折腾篇

• 从破解某设计网站谈前端水印(详细教程)
• 2020更新，Vue仿探探拖拽卡片的效果
• 可视化拖拽组件库一些技术要点原理分析
• 100 行 js 代码下载抖音无水印视频

整合

• 写给初中级前端的高级进阶指南
• 一个合格(优秀)的前端都应该阅读这些文章
• 前端最实用书签【看完可以提涨薪啦】

最后

2020倒数一星期，结束我们的"鼠"实不易，在2021中"牛"转乾坤。祝大家跳槽涨薪成功，找准自己前进的方向，以及自己合适的发展平台，冲冲冲🚀🚀🚀🚀； 最后，最后，再次非常感谢在发文的大佬们，感谢有你们的输出，掘金也因你们而精彩🌈（当然少不了在沸点活跃的你们，才有摸鱼不枯燥~😋）。