前言
掘金是一个优秀的社区，每天都会产出非常多的优秀文章。 首页推荐的内容涉及太多领域， 收集一周之内，优秀的前端文章，以便自己和有类似需求的同志，能更高效的学习和成长。
如有遗漏，敬请谅解
本文下面的题材默认不会收集：
- 面试
- 算法刷题
文件上传，搞懂这8种场景就够了
- 作者： 阿宝哥
- 赞： 800+
- 推荐指数： ★ ★ ★ ★ ★
- 推荐理由：8种上传，单文件，多文件，文件目录，压缩文件目录，拖拽，剪贴板，大文件分块，服务端上传。覆盖广，并有代码示例，文件上传之SDK。
宁不会真以为咱前端仔只会切图吧？！喏，给你 2021 最酷网页设计指南！
- 作者： 掘金安东尼
- 赞：800+
- 推荐指数： ★ ★ ★ ★
- 推荐理由： 虽说是一篇译文，其新拟态，磨砂玻璃设计，3D 色彩，微动画，不对称布局等确实赏心悦目。
疯狂操作 CSS3 实现 60 FPS 动画效果，CodeReview 时同事直呼：细节！
- 作者： 掘金安东尼
- 赞： 300+
- 推荐指数： ★ ★ ★ ★
- 推荐理由： 采用css提升动画性能。循序渐进，生动有趣。 分贫民版，小V版，大V版，终极版。 与我优化了进度条，页面性能竟提高了70% 思想上有很多相同之处。 css3动画，基本都是通过
will-change,transformopacity这些手段来手续。 更多采用css优化性能可以查看文章仅使用CSS提高页面渲染速度
2021年你可能不知道的 CSS 特性（下篇）
- 作者: 淘系前端团队
- 赞：600+
- 推荐指数： ★ ★ ★ ★
- 推荐理由：介绍了CSS一些新特性，CSS 等比缩放，css原生支持嵌套，CSS Houdini 变量等等。 新特性，先了解一波。
不为人知的 CSS 技巧
- 作者: gyx_这个杀手不太冷静
- 赞：100+
- 推荐指数： ★ ★ ★ ★
- 推荐理由：纯css实现打字效果，平滑滚动，吸顶，优化滚动体验，动态文字提示等等。 不乏一些实用的技巧，值得节俭和学习。
产品经理：鸿蒙那个开场动画挺帅的 给咱们页面也整一个呗
- 作者： 手撕红黑树
- 赞： 800+
- 推荐指数： ★ ★ ★ ★
- 推荐理由：以鸿蒙开机动画为切入点，用多种方式实现了其开机动画。爱国情怀真的是好啊。
CSS 奇思妙想 | 全兼容的毛玻璃效果
- 作者： chokcoco
- 赞： 400+
- 推荐指数： ★ ★ ★ ★
- 推荐理由： 全兼容的毛玻璃效果，都全兼容了，那你还不拿着直接用？
- 核心实现：
backdrop-filter=>background-attachment: fixed+filter: blur()=>moz-element()+filter: blur()=>background
2K Star！超过 50 个专题、450 个好项目，大半年来推荐过的重磅项目合集
- 作者：天明夜尽
- 赞： 200+
- 推荐指数： ★ ★ ★
- 推荐理由：覆盖React源码，JavaScript, TypeScript, Flutter，小程序，监控等等工具或者项目合集，有空没空看一看，也许会有意外的收获。
Vite 特性和部分源码解析
- 作者： 政采云前端团队
- 赞：50+
- 推荐指数： ★ ★ ★
- 推荐理由：从整体流程上分析了一些Vite的编译流程。 整体还是偏浅，期待深度篇。
源码浅析-Vue3中的13个全局Api
- 作者： Tz
- 赞： 100+
- 推荐指数： ★ ★ ★
- 推荐理由：Vue3中的13个全局Api，并附详细的源码解析。
手写系列-实现一个铂金段位的 React
- 作者： 清汤饺子
- 赞： 100+
- 推荐指数： ★ ★ ★
- 推荐理由：虽然号称铂金段位，其真实实力应该属于黄金段位。其一步一步的实现了极其简易的React的重要部分，值得一读。
一个40岁老程序员的前端学习之路｜2021 年中总结
- 作者： 俺老刘
- 赞： 100+
- 推荐指数： ★ ★ ★
- 推荐理由：倒出大龄程序员的心声。40岁，很多程序员成为了管理，很多程序员成为了专家，很多程序员转行了，还有很多程序员还战斗在一线，年轻人的时代，我们应该怎么面对和生存。
使用 vscode 省时的6个插件
- 作者： Jimmy
- 赞： 100+
- 推荐指数： ★ ★ ★
- 推荐理由：工欲善其事,必先利其器，提高效率的6个工具。 6个，还不够。
「微信小程序」生成水印原理与插件编写
- 作者： 我不是外星人
- 赞： 100+
- 推荐指数： ★ ★ ★
- 推荐理由：比较新颖，简单实用。
- 核心实现：先用canvas生成单图，然后利用背景
background-repeat:repeat平铺即可。
三天三夜，整理了30张高清思维导图 | 带你重温ES6（下）
- 作者： LBJ
- 赞： 100+
- 推荐指数： ★ ★ ★
- 推荐理由：以图的形式展开ES6的特性，一览全局，省时省力。
3千字长文canvas实现任意正多边形的移动（点、线、面）
- 作者： Fly
- 赞： 50+
- 推荐指数： ★ ★ ★
- 推荐理由：徒手画图。 点与点之间的距离，点与直线的关系，向量的旋转你清楚几个？ 本文一一道来。
三千文字，也没写好 Function.prototype.call
- 作者： 云的世界
- 赞： 200+
- 推荐指数： ★ ★ ★
- 推荐理由：一个
call延伸了10多个知识点，看完都不敢说自己能会写call了。 读完此文，对面试官的手写call，你就可以先加上几个问题，基于哪个ES版本，考不考虑node环境，考不考虑严格模式，eval能不能用。
觉醒吧，异步单例模式 - 不一样的单例模式
- 作者： 云的世界
- 赞： 50+
- 推荐指数： ★ ★ ★
- 推荐理由：不一样的单例模式，异步单例模式，一步一步的完善，浅入深出，有一定新颖性，提供了一种编程思路。