与其去琢磨“serverless 到底是什么，跟前端有什么关系”，不如先让我们回到需求的起点，从前端开发的护城河特点说起。不忘初心，牢记使命，前端开发说到底是内容渲染和交互实现。 这篇文章，让我们从一个有趣的产品需求说起，换一个角度去思考“前端的边界到底在哪里”，并从这个前端需求出发，看看技术上又能有多深的实践。

6、京喜小程序首页无障碍优化实践

https://mp.weixin.qq.com/s/2A6msBueXI24u1FcApyMew

本文参考 WCAG 2.1 、WAI-ARIA 和 Web 可访问性与无障碍最佳实践，在京喜小程序首页无障碍优化开发中，总结了一些“无障碍优化”在小程序端的实践，希望以此推动无障碍在小程序更多地落地。

【基础夯实】

1、细数 TS 中那些奇怪的符号

https://www.ershicimi.com/p/4658d26bea644b9c502bc2028e9dff99

2、如何理解这6种常见设计模式？

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

设计模式能够帮助我们优化代码结构，让代码更优雅灵活。有哪些常见的设计模式？如何合理运用？本文分享作者对工厂模式、单例模式、装饰模式、策略模式、代理模式和观察者模式的理解，介绍每种模式的模式结构、优缺点、适用场景、注意事项及代码实现。

3、Git命令行记不住？备忘录帮你搞定

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

文章中整理了一些常用的 Git 操作，老司机可以温故知新，新手可以快速上手。文末提供了入门教程及学习资源～

4、JavaScript 里的奇葩知识

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

久经沙场的“老司机”，虽然写了无数代码，踩过无数的坑，但有些坑，可能一辈子也踩不到，因为根本不会发生在业务代码里。

5、虚拟DOM到底是什么？

https://mp.weixin.qq.com/s/Jr0-2kRSgfHfRZugtRMDBg

这是一篇超详细的对虚拟DOM进行解析的文章。

6、高级程序4：异步函数

https://mp.weixin.qq.com/s/2Sa9eLpNAyn7B0ID_z1rWg

长期以来，掌握单线程 JavaScript 运行时的异步行为一直都是个艰巨的任务。随着 ES6 新增了期约和 ES8 新增了异步函数，ECMAScript 的异步编程特性有了长足的进步。通过期约和 async/await，不仅可以实现之前难以实现或不可能实现的任务，而且也能写出更清晰、简洁，并且容易理解、调试的代码。

7、零距离接触Websocket🚀

https://juejin.im/post/6876301731966713869

Websocket是一个持久化的网络通信协议，可以在单个 TCP 连接上进行全双工通讯，没有了Request和Response的概念，两者地位完全平等，连接一旦建立，客户端和服务端之间可以实时进行双向数据传输。

8、关于 JavaScript 中 null 的一切

https://juejin.im/post/6875832414258757640

在这篇文章中，你将学习关于 JavaScript 中的 null 的一切: 它的含义，如何检测它，null 和 undefined 之间的区别，以及为什么大量使用 null 会造成代码维护困难等。

9、NPM 超详细教程

https://juejin.im/post/6875271902269538312

【动态与研究关注】

1、《JavaScript 20 年》中文在线版发布

https://juejin.im/post/6875221687537926157

由 JS 之父与 ES6 首席作者联合出品的前端必读书《JavaScript 20 年》，历时半年终于完成了中文翻译的在线版！

本书又名《没人比我们更懂的 JavaScript》和《TC39 执政回忆录》，详细记载和解读了自 1995 年语言诞生到 2015 年 ES6 规范制定为止，共计 20 年的 JavaScript 演化经历。全书不仅讲解了大量语言细节层面的演进，更复盘了更高层面上规范制定与标准博弈中的历史成败，是一部讲述人类如何在商业与技术上的竞争合作中促进产业发展的故事。

2、尤雨溪：Vue.js 3.0全球发布会

https://www.ershicimi.com/p/1ac307a88c7a465b67aea4dd13061bed

Vue3.0能否用于正式环境中，可以看看本视频。

3、唐金州：1 小时解读 Vue 3 新特性及核心知识

https://www.bilibili.com/video/BV1mV411m7sD

【你将收获】
1）Vue 3.0 新特性解读
2）学习 Vue 等新技术的方法
3）Vue 3.0 新特性尝鲜
4）Vue 核心知识点讲解

4、Vue.js 3.0 来了，我们该做些什么？

https://juejin.im/post/6874604408030789640

思考下，你会做何选择？

学习，赶紧学习，学不动了也要学！
装不知道，我是一只快乐的鸵鸟，我不知道 Vue.js 更新了，继续摸鱼爽歪歪。
为了下半年的 KPI，冲冲冲！把手头的 Vue.js 项目进行版本升级和重构。
理性评估，有针对性地计划升级事宜。

5、解锁 Vue.js 3.0 超好玩的新特性：在CSS中使用JS变量

https://mp.weixin.qq.com/s/xXdSJKEDg5vj6nDGV-k11A

这次更新诚意满满，不过大家都把关注点放在了Composition-API 上了，没有注意到一些不起眼的边边角角，但就是这些边边角角却可以极大的改善我们的开发体验~

6、尤大 3 天前发在 GitHub 上的 vue-lit 是啥？

https://juejin.im/post/6874383765070675976#heading-14

想对尤大Github上的vue-lit了解的可以看一下这篇文章。

7、Swift正式登录Windows：苹果跨平台语言值几钱？

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

近日，Swift 官方博客宣布将 Swift 正式引入 Windows，并附上了镜像包的下载链接。Swift 是苹果新推出的编程语言，专门针对 OS X 和 iOS 的应用开发。由于之前仅支持 MacOS 和 Ubuntu，所以使用 Windows 电脑的开发者如果想开发 iOS 的应用就只能购买一台 Mac 或安装 Hackintosh（俗称黑苹果）。现在，在 Windows 上使用 Swift 开发终于成为了可能。

【实用工具】

1、盘一盘那些提效/创意的宝藏网站

https://juejin.im/post/6876223169179418637

在线 IDE - CodeSandbox

**
如果你想要在线上练习新的 Vue.js 3.0，或者是你刚学会的 Node.js，而不想在环境搭建上浪费太多时间，那么我推荐你使用 CodeSandbox。
CodeSandbox - codesandbox.io 是一款在线 IDE，可以快速创建各种沙箱环境，帮助你专注于编程本身（如下图）。

快速验证 npm 包 - RunKit

**
在前端最常用的包管理工具就是npm了，如果你想要体验某个npm包的 API 怎么办 - 先安装、再引用、再运行node.js，这太麻烦了！
RunKit - npm.runkit.com 可以帮你在线运行 npm包，下面这个案例展示了如何快速体验 dayjs 包（如下图）。

在线 PS - UUPOOP

UUPOOP - www.uupoop.com 是一个在线PS网站，集成了PS软件的很多功能，完成日常的切图需求已经足够（如下图）。

2、imgcook联合阿里云云开发平台让你5分钟上线一个图片识别应用

https://juejin.im/post/6873384423309049863

我们可以在阿里云云开发平台，使用 imgcook 智能生成一个垃圾识别应用，直接部署上线啦。先看效果：
173a918dedbe4315be88d345f262b33d_tplv-k3u1fbpfcp-zoom-1.gif

本示例演示了基于imgcook 智能生成页面的能力
本示例演示了基于 OSS 浏览器端文件直传的能力
本示例演示了基于 Python 语言开发调用阿里云视觉智能服务的能力

【程序之外】

1、十大可用性原则——如何打造极致的用户体验！

https://mp.weixin.qq.com/s/Nk_-p7I2c_GEobd2r_zmiA

著名的人机交互学博士尼尔森早在1995年就发表了《十大可用性原则》，在当时当做是指导web产品设计的圣经。今天结合互联网产品重新解释一下这些原则。

2、成大器者，胜在思维层次

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

NLP领域的大师罗伯特·迪尔茨把人的逻辑思维分为6个层次，从下到上分别为：环境层、行为层、能力层、信念/价值观层、身份层与愿景层。
一个人思维层次的上限，决定了他的能力高度和解决事情的效果。在一个低维视角的人眼里无法解决的问题，在一个高维视角的人眼里，问题可能就会变得很容易解决，甚至连问题本身都会消失。
今天分享的这篇文章，分享了思维的6个层次、它们之间的关系、逻辑思维层次在管理中的运用，以及如何提升思维层次。

3、前端如何在项目中做出亮点

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

抽象看，他们都是同一个套路：
业务/技术思考 => 发现痛点 => 产出方案 => 拆解实现，最终实现价值。

4、面对复杂业务，if-else coder 如何升级？

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

世界是熵增的（即万物都在缓慢的分崩离析），控制复杂度是我们这些从业者无法推卸的责任和使命。
《百闻技术周刊》035期 - 图9

心力是指不将就的匠心，不妥协的决心，不满足的好奇心、以及不放弃的恒心。

脑力是指那些必要的思维能力、学习能力、思考能力、思辨能力。

之所以说“业务理解—>领域建模—>流程分解—>多维分析”是体力，是因为实现它们就像是在做填空题，只要你愿意花时间，再复杂的业务都可以按部就班的清晰起来。

更多精彩资讯，欢迎扫码入群交流~🚀**🚀🚀**
扫码入群.png

注：所有资讯均来自网络，不代表编者观点。

《百闻技术周刊》035期

【实践经验】

1、Netflix是怎样做系统监控的？

2、写好 JS 条件语句的 5 条守则

3、Web 中文字体性能优化实践

4、从 10 多秒到 1.05 秒！前端性能优化实践

5、划线高亮和插入笔记的技术实现