0071.jpg

【低代码】

1、前端物料在低代码研发模式下的探索

https://mp.weixin.qq.com/s/j4XNGS1t1k3WYUZSxt1K2A

我们知道技术的本质是将 idea 落地，技术面向的用户一般是开发者，而低代码或者零代码其实也是一种技术手段，但低代码面向的用户则不一定是开发者，它的目标用户是想要实现 idea 的任何人，低代码是实现 Citizen Developer(全民开发者) 的关键。低代码通过抽象和交互升级隐藏了很多技术细节，抹平了开发者和非开发者的知识差异，让非开发者也能亲手实现自己的 idea，这就是赋能，因此低代码的本质其实是跨专业能力的赋能。

2、(低代码)可视化搭建平台数据源设计剖析

https://juejin.cn/post/6973946702235615269

本文围绕低代码平台以及数据源设计来展开分析, 希望对大家有所帮助。

3、开放与收敛 - 搭建系统的资产体系设计

https://zhuanlan.zhihu.com/p/396327885

【实践经验】

1、万字长文：我是如何把Skia的体积缩小到1/8的？

https://mp.weixin.qq.com/s/gs1CBWpnPpbK2fD9tQKEKw

本文希望可以通过简单通俗的语言和大家探讨渲染器背后的核心技术，如果你也有类似的需求希望能给到足够的启发。

2、【Web动画】科技感十足的暗黑字符雨动画

https://mp.weixin.qq.com/s/g3uZ5F6aRes2lcq7n1xVGQ

本文将使用纯 CSS，带大家一步一步实现一个这样的科幻字符跳动背景动画。类似于这样的字符雨动画：
image.png

3、CSS sticky实现返回顶部

https://juejin.cn/post/6992018973856383013

本文借助 CSS sticky 实现了一个自动显示返回按钮的小交互，本身代码量并不复杂，其实是一点点想象力，把比较相似的效果联想起来，多多尝试，可能会带来不一样的解决方案。下面总结一下实现要点：

  1. CSS sticky 可以实现粘性滚动效果，可以设置负值
  2. transformY(100vh)可以偏移1屏幕高度，不影响占位
  3. 浮动可以脱离文档流，不影响高度
  4. 负的 margin 可以抵消浮动的环绕效果
  5. scroll-behavior: smooth 可以实现平滑滚动
  6. 兼容性取决于 sticky，不兼容IE

4、0 到 1 掌握：Vue 核心之数据双向绑定

https://juejin.cn/post/6844903903822086151#heading-0

当被问到 Vue 数据双向绑定原理的时候，大家可能都会脱口而出：Vue 内部通过 Object.defineProperty方法属性拦截的方式，把 data 对象里每个数据的读写转化成 getter/setter，当数据变化时通知视图更新。虽然一句话把大概原理概括了，但是其内部的实现方式还是值得深究的。

本文就以通俗易懂的方式剖析 Vue 内部双向绑定原理的实现过程，然后再根据 Vue 源码的数据双向绑定实现，来进一步巩固加深对数据双向绑定的理解认识。

5、如何避免JS内存泄漏？

https://mp.weixin.qq.com/s?__biz=MzIzOTU0NTQ0MA==&mid=2247504499&idx=1&sn=aa1f18decca199b2a920ceb346467d3e&scene=21#wechat_redirect

很多开发者可能平时并不关心自己维护的页面是否存在内存泄漏，原因可能是刚开始简单的页面内存泄漏的速度很缓慢，在造成严重卡顿之前可能就被用户刷新了，问题也就被隐藏了，但是随着页面越来越复杂，尤其当你的页面是 SAP 方式交互时，内存泄漏的隐患便越来越严重，直到突然有一天用户反馈说：“操作一会儿页面就卡住不动了，也不知道为什么，以前不这样的呀”。

这篇文章通过一些简单的例子介绍内存泄漏的调查方法、总结内存泄漏出现的原因和常见情况，并针对每种情况总结如何避免内存泄漏。希望能对大家有所帮助。

6、 前端组件化实战之 Button

https://mp.weixin.qq.com/s/jbm22j7XpiUTBG4AvNIdjg

本文你将会收获以下的内容：
image.png

7、微前端实战总结篇

https://www.tuicool.com/articles/ymiamin

【基础夯实】

1、一个神奇的前端动画 API requestAnimationFrame

https://juejin.cn/post/6991297852462858277

本文主要学习 requestAnimationFrame API ， 顾名思义，请求动画帧，也称 帧循环。

2、5000字带你全面深入理解JS中的Stream API

https://mp.weixin.qq.com/s/3nP8GKUtCnq6w9MJRfH-SQ

Streams API能够让我们直接处理通过网络接收的数据流或通过本地任何方式创建的数据流。以往我们请求媒体资源的时候，得到的都是二进制流，浏览器会自动转换成相应的编码格式然后再呈现出来，如果要处理它的话一般使用Blob对象包装后再进行操作。现在使用Streams API我们可以直接处理它，下面列举了一些可以实现的功能：
视频特效：读取视频流，然后通过管道与转换流连接起来，逐帧进行转换处理，实现诸如水印、剪辑、添加音轨等功能。
数据解压缩：压缩包、视频、图片解压缩等。
图像转码：流处理可以是基于字节的，因此可以逐个字节地处理请求到图片资源，来对它进行转码。例如JPG转PNG等格式转换。

3、JavaScript常用八种继承方案

https://juejin.cn/post/6844903696111763470#heading-0

本篇详细解析JS中的各种继承方式和优缺点进行，希望看完本篇文章能够对继承以及相关概念理解的更为透彻。

4、前端鉴权必须了解的5个兄弟：cookie、session、token、jwt、单点登录

https://mp.weixin.qq.com/s/3nmr-lawC44nm8Gg9EY1FA

本文你将看到：

  • 基于 HTTP 的前端鉴权背景
  • cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式
  • session 方案是如何实现的，存在哪些问题
  • token 方案是如何实现的，如何进行编码和防篡改？jwt 是做什么的？refresh token 的实现和意义
  • session 和 token 有什么异同和优缺点
  • 单点登录是什么？实现思路和在浏览器下的处理

5、只需一行CSS代码，让长列表网页的渲染性能提升几倍以上！

https://mp.weixin.qq.com/s/jTltKfd1NUyQEPVqISyRTw

长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。

因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。而以上的方式无论哪种，都需要写大量的js或者css逻辑去实现。

而现在，我们多了一种方式——content-visibility。只需要一行CSS代码，就可以实现可见网页只加载可见区域内容，使网页的渲染性能得到数倍的提升！

【实用工具】

1、AlloyTeam 的渐进式 eslint 配置适用于 React / Vue / TypeScript 项目

https://github.com/AlloyTeam/eslint-config-alloy

AlloyTeam ESLint 规则不仅是一套先进的适用于 React/Vue/Typescript 项目的 ESLint 配置规范，而且也是你配置个性化 ESLint 规则的最佳参考。

2、Mac 效率工具

https://juejin.cn/post/6981607475266977822#comment

【动态与研究关注】

1、2021 GMTC北京站 - 大前端工程提效分享与总结

https://mp.weixin.qq.com/s/MjDpBLU_22UJnFEABXtI4Q

2021GMTC一共分为16个专场演讲，几乎涵盖了目前大前端所有领域，感谢公司和秋实提供的机会，在7月4日有幸参加了大前端工程提效专项的分享，本次专场分为以下四个议题：

  • MBC 业务标准化容器在美团的实践
  • SmartFeed 多端模板渲染架构体系
  • 贝壳中台化建设下的前端体系探索
  • 字节跳动的现代 Web 开发实践

这四场专业各有侧重点，干货满满，本文是对本次专场的分享与总结。


2、一文读懂 @Decorator 装饰器——理解 VS Code 源码的基础

https://mp.weixin.qq.com/s/jzLO37bKYwLlPlVXTnzPfQ

Decorator 装饰器是 ECMAScript 的语言提案，目前还处于 stage-2 阶段，但是借助 TypeScript 或者 Babel，已经有大量的优秀开源项目深度用上它了，比如：VS Code, Angular, Nest.Js(后端 Node.js 框架), TypeORM, Mobx(5) 等等

3、如何写好前端业务代码？

https://mp.weixin.qq.com/s/Ykz4J—-n5iSoqKfmcxhRw

在开始写业务之前，理应先想清楚需求和业务逻辑，设计出合理的数据结构，对代码进行好的分层，这样在一定程度上可以写出可维护性更高的代码。

【程序之外】

1、庆祝万维网向公众开放30周年纪念

https://mp.weixin.qq.com/s/Ch_g7wBf_sp9ZDProguRkA

1991年8月6日，Sir Tim Berners-Lee 首次向全世界向各大新闻组公开介绍了万维网项目：
WorldWideWeb（WWW）
https://www.cs.princeton.edu/~chazelle/courses/BIB/web-announce.htm
Tim 在他发布的消息中说到 “Try it”。之后，数以亿计的用户享受着万维网带来的便利。
image.png

2、作为技术总监，我是如何失去团队掌控的？

https://mp.weixin.qq.com/s/JxDTdFS0cso329H9gMk73A

所吸取的教训总结：

  • 建立更全面的考核反馈体系对认识团队至关重要
  • 不要局限于经验，沟通胜于一切
  • 反思每一次战术失误，保证下一次的精确打击
  • 专人专事，专职管理的人，就不要陷入开发细节中，一旦大量精力投入了开发，这将是致命的风险