前言
掘金是一个优秀的社区,每天都会产出非常多的优秀文章。 首页推荐的内容涉及太多领域, 收集一周之内,优秀的前端文章,以便自己和有类似需求的同志,能更高效的学习和成长。
如有遗漏,敬请谅解
本文下面的题材默认不会收集:
- 面试
- 算法刷题
文件上传,搞懂这8种场景就够了
- 作者: 阿宝哥
- 赞: 800+
- 推荐指数: ★ ★ ★ ★ ★
- 推荐理由:8种上传,单文件,多文件,文件目录,压缩文件目录,拖拽,剪贴板,大文件分块,服务端上传。覆盖广,并有代码示例,文件上传之SDK。
宁不会真以为咱前端仔只会切图吧?!喏,给你 2021 最酷网页设计指南!
- 作者: 掘金安东尼
- 赞:800+
- 推荐指数: ★ ★ ★ ★
- 推荐理由: 虽说是一篇译文,其新拟态,磨砂玻璃设计,3D 色彩,微动画,不对称布局等确实赏心悦目。
疯狂操作 CSS3 实现 60 FPS 动画效果,CodeReview 时同事直呼:细节!
- 作者: 掘金安东尼
- 赞: 300+
- 推荐指数: ★ ★ ★ ★
- 推荐理由: 采用css提升动画性能。循序渐进,生动有趣。 分贫民版,小V版,大V版,终极版。 与我优化了进度条,页面性能竟提高了70% 思想上有很多相同之处。 css3动画,基本都是通过
will-change
,transform
opacity
这些手段来手续。 更多采用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+
- 推荐指数: ★ ★ ★
- 推荐理由:不一样的单例模式,异步单例模式,一步一步的完善,浅入深出,有一定新颖性,提供了一种编程思路。