成长是做你没做过的事情，改变是做你不愿意做的事情，突破是做你不敢做的事情。
【实践经验】
1、羚珑视频编辑器开发总结
https://mp.weixin.qq.com/s/m0QHH_UxZnJ1cEuBdSEuHQ
该视频编辑器的主要作用是用户可以通过操作静态的PSD从而得到我们想要的动态设计效果，对比AE等复杂的视频编辑软件，学习成本大大降低，且动效的可复用性、移植性等也减轻了用户的工作量。
视频编辑器的实现主要分为 5 个部分，视频预览区、动效添加区、参数编辑区、图层操作区、场景操作区，如下图其他部分的每一个操作都会映射到视频预览区，且各个部分数据共享。除此之外，编辑器的每一步操作都需要被“记住”，便于编辑的人回退、还原其操作。
2、Vue SSR 性能优化实践
https://mp.weixin.qq.com/s/twg5mrzg7tSrbkvDQHsziQ
这里借用一张图，把一个 SSR 请求的生命周期分为三个阶段，主要是把执行渲染的部分从整体中抽出来。
本文分享围绕着 Vue SSR 和相关业务增长的背景，向大家展示作者做过了哪些尝试，以及一些踩坑经历，希望能给中小规模的团队带来一定的参考价值。
3、中了源码的毒，给你一副良药
https://mp.weixin.qq.com/s/xp7YhhzbhMC7d-FQkIU3BQ
本文介绍了如下读源码的思路与技巧：
- 站在巨人的肩膀，提前阅读一些项目相关的优质文章；
- 汇总学习或工作中遇到的问题，带着问题进行源码学习；
- 明确阅读源码的主线或切入点；
- 尽可能从简单的示例出发来分析每个功能点；
- 先梳理清楚主要流程，不要太在意细节，避免把整个线路拉得太长；
- 在阅读源码过程中，要多多画图，这样理解起来会更加直观。
4、前端场景下 CI/CD 的探索与实践
https://mp.weixin.qq.com/s/Y-i20dQgSPu86KFVC7wNTA
2019 年前后 DevOps 的理念已经瓜熟蒂落，形成了大体上通行的行业标准。根据 2019 Accelerate State of DevOps Report，高效的 DevOps 效能在各处落地。类似于 Gatsby 和 Zeit 等各种 Serverless 架构的前端生成、托管平台们也实现了普及，托管运维对前端的友好度和对能力的扩充都发展了很多。
本文介绍了在字节跳动，前端的 CI/CD 已经非常便捷：可以在每次代码提交后执行预置的任务，比如代码风格及质量检查、安全检查、构建产物检测、部署到集成环境、对部署后的环境跑各种测试（兼容性测试、真机测试、性能测试等）、产出各种检测报告，也可以在几分钟内快速完成版本的上线、回滚、切换等操作。这种便利性有力的保障了字节跳动多个产品的快速迭代，为用户提供更为安全稳定的服务。
但是，时间往回退几年，那时的体验非常糟糕：开发完 feature 后，需要把 MR 链接发给同事，请他们帮忙Code Review，接着再去编译平台发起编译，编译完成后，再去云平台发起测试上线或者小流量上线，验证没问题后再发起正式上线……整个过程非常依赖人工，流程的推进基本靠点对点沟通，费时且易出错。
5、【webpack 性能优化】编译速度从 50S 到 7S
https://juejin.im/post/6887863430510968839#heading-14
6、垃圾代码和优质代码的区别？
https://mp.weixin.qq.com/s/6AoP4gqEN1HjqMIbYwO3pQ
7、前端组件化埋点的实践
https://juejin.im/post/6889238969616171022
【基础夯实】
1、浏览器是如何工作的：Chrome V8让你更懂JavaScript
https://segmentfault.com/a/1190000037435824#comment-area
2、你可能不知道的Animation动画技巧与细节
https://mp.weixin.qq.com/s/7Oz8cM7MqMkoal1T9ZHXnA
前端在实现动画效果时往往常用的几种方案：
- CSS3 transition / animation - 实现过渡动画
- setInterval / setTimeout - 通过设置一个间隔时间来不断的改变图像的位置
- requestAnimationFrame - 通过一个回调函数来改变图像位置，由系统来决定这个回调函数的执行时机，比定时修改的性能更好，不存在失帧现象
在大多数需求中，CSS3 的 transition / animation 都能满足我们的需求，并且相对于 js 实现，可以大大提升我们的开发效率，降低开发成本。
本篇文章将着重对 animation 的使用做个总结：
3、软件开发必修课：你该知道的GRASP职责分配模式
https://mp.weixin.qq.com/s/IaxAnWfVqe3mM0bHFVV5Gg
软件在本质上是复杂的，软件本身的复杂性在于除了要解决问题域，还要解决非功能性需求和软件域特有问题：安全性、可用性、可维护性、可扩展性、性能、一致性、容错性、稳定性、可重用性、幂等、兼容等等，软件开发者的任务就是制造“简单”的假象。如何组织复杂的系统？把复杂的事物分解到不同的层次中，层次代表了不同级别的抽象，一层构建于另一层之上，每一层都对上层屏蔽内部复杂度。
4、让你30分钟快速掌握vue 3
https://juejin.im/post/6887359442354962445
经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React hook一样的写Vue，可以自定义自己的hook，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。
- setup()
- ref()
- reactive()
- isRef()
- toRefs()
- computed()
- watch()
- LifeCycle Hooks(新的生命周期)
- Template refs
- globalProperties
- Suspense
5、【建议收藏】CSS晦涩难懂的点都在这啦
https://juejin.im/post/6888102016007176200
6、聊一聊二维码扫描登录原理
https://segmentfault.com/a/1190000022223293
扫二维码登录现在比较常见，比如微信、支付宝等 PC 端登录，并且好像每款 APP 都支持扫码登录，不搞个扫码登录都不好意思。作为技术人员，不知道您对这背后的实现逻辑是否敢兴趣，反正我是一直都对这背后实现好奇。
7、BAT大佬推荐使用的HTML5的十个功能
https://mp.weixin.qq.com/s/nrw8fTHpi1CXAPs0_NjG4g
本文出了十个HTML5过去没用过但现在发现有用的功能，还创建了一个工作示例流程。希望您也觉得它有用。
点击演示实例：https://html5-tips.netlify.app/
8、解决实际问题的24个ES6代码段
https://mp.weixin.qq.com/s/an_pXkV_1CC_rrt8AX4qtQ
这篇文章基于实际使用场景总结了 24 个 ES6 代码段，可用来解决项目中可能遇到的一系列问题。
9、Vue 中 Axios 的封装和 API 接口的管理
https://mp.weixin.qq.com/s/eHCq-9yKZ6nBkCzoWtUP9A
本文详细介绍如何对axios进行封装和使用。
10、不可错过的Webpack核心知识点
https://mp.weixin.qq.com/s/8De2fcrrj_ZwP5ov5ZVDnA
【实用工具】
1、没有这 29 款插件的 Chrome 是没有灵魂的
https://mp.weixin.qq.com/s/LAO3ShOfy8X17VNuwQjoOw
相信很多人都在使用 Chrome 浏览器，其流畅的浏览体验得到了不少用户的偏爱，但流畅只是一方面， Chrome 最大的优势还是其支持众多强大好用的扩展程序（Extensions）。
文中的很多插件都很有用，看完保证你工作效率、心情提高1倍。
2、10 个你可能还不知道 VS Code 使用技巧
https://mp.weixin.qq.com/s/Pjvu1sbWjh5HxfoX9U-HTQ
一些有能够提高我们的日常工作效率的技巧。
【动态与研究关注】
1、GitHub：再见，master！
https://mp.weixin.qq.com/s/_xcdHGetYmXf84DZgg6_pg
近日，GitHub宣布，自2020年10月1日起，在GitHub平台上创建的所有源代码存储库都将默认命名为 main ，而非原本的 master 。
GitHub 以及庞大的 Git 社区都在考虑重命名源代码存储库的默认分支名称，而GitHub 选择用 main 取代 master ，来作为自己存储库的默认分支名称，并将分为几个阶段进行更改，以尽可能减少对现有项目的破坏。GitHub 建议用户：如果您尚未重命名默认分支，可以考虑等到今年年底。我们正在投资开发工具，用来重命名现有存储库的默认分支，从而给维护者和贡献者提供无缝的体验。
2、npm v7.0.0 发布 - 带来数个重大更新
https://mp.weixin.qq.com/s/3fY5_U-KosJNDdwXjHDnEg
npm 7带有一些期待已久的功能，其中包括：
Workspaces：npm CLI的一组功能，可支持从单个顶级软件包中管理多个软件包- 自动安装
peerDependencies：在npm 7之前，开发人员需要自己管理和安装peerDependencies。 新的peer dependencies可确保在node_modules树中peerDependencies的位置处或之上找到有效匹配的peerDependencies。 package-lock v2和对yarn.lock的支持：新的package-lock格式将释放确定性可复制构建的功能，并且包括npm完全构建软件包树所需的一切。在忽略npm 7的yarn.lock文件之前，npm cli现在可以将yarn.lock用作软件包元数据和分辨率指南的来源。
3、前端前沿观察，Cookie 居然可以这样整了
https://juejin.im/post/6889231003697709070
Chrome 87 版本中我们无需再引入这样的代码了，取而代之的是新的 API：cookieStore。这是一个异步的 API，可以很方便地获取设置以及监听 Cookie 的改变。
如今我们只需一句话就可以获取想要的内容了。
cookieStore.get 有两种函数签名，前者我们可以通过传入 cookie 的属性去匹配想要的内容，后者则是直接传入 name 获取。API 很符合直觉，比之前的方式不知道好到哪里去了。
当然除了获取单个 cookie 之外，新的 API 还提供了获取多个 cookie 的方式。比如说现在我想获取所有属于某个 domain 的 cookies，就可以使用如下方式：
4、使用 tabindex 配合 focus-within 巧妙实现父选择器
https://juejin.im/post/6889234341264949255
使用 tabindex 配合 :focus-within 巧妙实现父选择器。:focus-within，表示一个元素获得焦点，或，该元素的后代元素获得焦点。划重点，它或它的后代获得焦点。
利用它，我们可以实现类似这样的功能，通过元素的子元素的获焦（focus事件），触发该伪元素，从而实现一个狭义的父选择器。
5、开源富文本编辑器技术的演进
https://zhuanlan.zhihu.com/p/268366406
开源富文本编辑器哪家强？
CKEditor是发展时间最久的，跨越了编辑器技术的第一阶段和第二阶段，从CKEditor 4到CKEditor 5更是经历完全的重构，从根本上解决协同编辑的问题。
Quill.js也可以称为老牌的编辑器了，受众非常大，从市面使用Quill.js的产品（石墨文档、ClickUp）也可以看出它的可塑性非常强。
ProseMirror可以说是非常稳定的编辑器，知乎上也有人专门拿它和Slate做过对比，况且有Confluence做背书自然差不了。
最晚出来的Slate，则一路大刀阔斧的重构，目前整体架构异常优雅和简洁，又搭载了TypeScript，感觉势头非常强劲。
6、CIO创享｜彭文华：数澜、宜信、贝壳三种数据中台建设模式探讨
https://mp.weixin.qq.com/s/SIaMurS8ncc53CehdZq9JQ
【程序之外】
1、视觉设计中发现的 11 种视错觉
https://mp.weixin.qq.com/s/zGdXBq4RDLaPYduEHJiHFg
相信你在平常生活或工作中遇到过一些神奇的场景，这些场景会让人产生一些视觉上的错觉。作者在本文中介绍了 11 种视错觉：
- 三角形分割错觉（Triangle-bisection Illusion）
- 垂直中线错觉 (Vertical Horizontal Illusion)
- 马赫带效应 (Mach Bands)
- 赫林错觉 (Hering Illusion)
- 赫尔曼网格 (Hermann Grid)
- 同时对比错觉 (Simultaneous Contrast Illusion)
- 蒙克·怀特错觉 (Munker-White Illusion)
- 水彩错觉 (Water Colour Illusion)
- 贾斯特罗错觉 (Jastrow Illusion)
- 康士维错觉 (Cornsweet Illusion)
- 缪勒-里尔错觉 (Müller-Lyer Illusion)
2、贵重：如何在助推业务发展中成就自我
https://mp.weixin.qq.com/s/OYl8xOyzNScgEzJoYWtHZg
沃伦·巴菲特给我们很好的定义了什么是成长，什么时候改变，什么是突破。成长就是做你没做过的事情。改变是做你不愿意做的事情。突破是做你不敢做的事情。按照这样的定义，再回头过去看一年的是不是有成长，是不是有突破，是非常清晰的，以及对于未来，也会有更清晰的目标。
**
更多精彩资讯，欢迎扫码入群交流~🚀**🚀🚀**
注：所有资讯均来自网络，不代表编者观点。
若有收获，就点个赞吧
0 人点赞
