【实践经验】
1、如何利用设计模式改善业务代码？
https://my.oschina.net/u/4662964/blog/4702495
在业务部门的开发中，大多数的我们在完成的业务的各种需求和提供解决方案，很多场景下的我们通过 CRUD 就能解决问题，但是这样的工作对技术人的提升并不多，如何让自己从业务中解脱出来找到写代码的乐趣呢，我做过一些尝试，使用设计模式改善自己的业务代码就是其中的一种。让代码变得更加简洁和提升健壮性，从代码中寻找一些欢乐。
2、云音乐前端体验优化实践
https://mp.weixin.qq.com/s/0q0E3fIxdii5e-AgjXskdA
本次分享主要围绕云音乐在 C 端性能体验的部分实践经历，包括评估标准和监控能力建设，以及在网络、容器等方面的性能优化实践。
我们选择了以 Lighthouse 为主进行度量，Performance API 和其他手段为辅的方式。
其中体验基线（及格线）的定义是在如下 CPU 和网络统一限制环境下，Lighthouse 测试稳定达到80分+。
选择 Lighthouse 为主的度量标准主要依据是：
- 易于理解。由于 Lighthouse 排除真实环境中硬件、网络等干扰因素，关注纯开发侧性能， 能够拿到开发易于理解、对优化有直观帮助的指标数据。
- 关注用户真实体验。Lighthouse 面向感官性能，而不只关注加载快慢，这和我们关注用户真实体验的原则一致。
- 有助于团队快速形成正向循环。性能分析报告和优化建议有助于团队在之前积累不足的背景下快速获得体验优化的正向反馈。
- 由于能够评估第三方页面，方便我们了解当前行业的整体情况，进行横向评估和对比。
3、从浏览器渲染层面解析css3动效优化原理
https://aotu.io/notes/2020/10/13/css3-optimization/
在h5开发中，我们经常会需要实现一些动效来让页面视觉效果更好，谈及动效便不可避免地会想到动效性能优化这个话题:
- 减少页面DOM操作，可以元素使用CSS实现的动效不多出一行js代码
- 使用绝对定位脱离让DOM脱离文档流，减少页面的重排(relayout)
- 使用CSS3 3D属性开启硬件加速
那么，CSS3与动效优化有什么关系呢，本文将从浏览器渲染层面讲述CSS3的动效优化原理
4、CSS变量对JS交互组件开发带来的提升与变革
https://www.zhangxinxu.com/wordpress/2020/07/css-var-improve-components/
例如实现下图所示的变量效果：
相关代码如下，可以看到，我们只需要一层div标签，DOM层级简单了，然后，需要修改的HTML变化项仅仅是一个--percent自定义属性而已。
5、桌面端混合开发总结
https://juejin.im/post/6890659144718614542
本文所讲解的桌面端开发主要采用了 Hybrid 混合的开发模式（一种在原生应用容器中嵌入 Web 浏览器的开发模式），这种模式混合了 Natiive 和 Web 开发的优点。在某些高性能的业务场景中（例如 IM 聊天、音视频、直播等）可以采用 Native 进行开发，而在一些功能迭代相对频繁的业务场景中则可以采用 Web 进行开发（开发成本低）。除此之外， Web 开发在跨平台、动画、动态化、富文本编排等方面能力相对出色。
6、Echarts在Taro微信小程序开发中的踩坑记录
https://juejin.im/post/6891921635125755911
笔者在使用Taro进行微信小程序开发时发现，当引入Echarts图表库时，微信检测单包超限2M，本文记录了所采取的一系列优化措施。
【基础夯实】
1、JavaScript ES12 新特性抢先体验
https://mp.weixin.qq.com/s/T2IkxRp_PXkhk8T_ciLvjw
在今年ES2020发布了，而ES2020（ES12）也预计将在明年即2021年年中发布。每年的新特性都会经历四个阶段，而第四阶段也就是最后一个阶段，本文即将介绍的即提案4中的相关新特性，也是意味着这些新特性将很大程度的出现在下一个版本中。
特性抢先知：
- String.prototype.replaceAll 新增replaceAll
- Promise.any
- WeakRefs
- 逻辑运算符和赋值表达式
- 数字分隔符号
2、🚩Vue源码——nextTick实现原理
https://juejin.im/post/6891309786290192391
nextTick 函数异步执行传入的函数，是一个异步任务。异步任务分为两种类型。
主线程的执行过程就是一个 tick，而所有的异步任务都是通过任务队列来一一执行。任务队列中存放的是一个个的任务（task）。规范中规定 task 分为两大类，分别是宏任务（macro task）和微任务 （micro task），并且每个 macro task 结束后，都要清空所有的 micro task。
用一段代码形象介绍 task的执行顺序。
for (macroTask of macroTaskQueue) {handleMacroTask();for (microTask of microTaskQueue) {handleMicroTask(microTask);}}
3、你知道几种前端动画的实现方式？
https://juejin.im/post/6891077408854654983
大致有如下几种：
- GIF图片
- 序列帧
- css animation
- Lottie 动画
- WebGL与Canvas
- 游戏动画引擎
4、如何打造一款标准的JS SDK？
https://mp.weixin.qq.com/s/Qzz1YBCjNQHDnB-ZCjXTkg
SDK全称是“Software Development Kit”，直译就是软件开发工具集。说的再通俗点就是一个面向开发者，针对特定领域的软件包。比如Java SDK（JDK），就是一个Java领域的软件包。基于它，开发人员就可以快速构建自己的Java应用。比较规范的SDK一般都会包含若干的API、开发工具集和说明文档。
JS SDK也无外于此，不过鉴于JS语言本身的特性，基于Ta封装的SDK更多常见于UI组件库、统计分析、web服务接口封装、前端稳定性和性能监控等场景。岳鹰前端监控SDK[1]即属于前端稳定性和性能监控这一领域范畴的SDK。
本文通过岳鹰前端监控SDK的实际案例，介绍如何基于JavaScript来开发SDK，并分享一些设计原则以及实现技巧。
5、介绍一种全新的clipPath Sprites小图标技术
https://www.zhangxinxu.com/wordpress/2020/10/clip-path-sprites-icon/
目前流行的SVG小图标技术是SVG Sprites技术，此技术笔者6年前就率先在国内进行了介绍：“未来必热：SVG Sprites技术介绍”，这里再介绍另外一种同样需要用到SVG元素的Sprites技术，称之为“clipPath Sprites技术”。
6、这一次彻底掌握深拷贝
https://juejin.im/post/6889327058158092302
本文的主要任务就是带你彻底理解Javascript的深拷贝。不会只给你一个最终的代码，而是带你一步一步地去实现，理解为什么要这么实现。毕竟只有自己懂了的东西，才能够印象深刻，以后也不会轻易遗忘。
7、CSR、SSR、Prerender 原理全解密
https://juejin.im/post/6844903971664953352
做前端的同学们肯定或多或少听说过CSR，SSR，Prerender这些名词，但是大多肯定只是停留在听说过，了解过，略懂一点，但是，你真的理解这些技术吗？这些名词具体是什么意思呢？为什么会产生这种技术，要解决的问题是什么呢？每种技术背后的原理又是什么呢？这篇文章你会找到一些答案～
8、微信小程序入门教程之一：初次上手
http://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html
这是一个小程序入门的教程之一，目标是你读完这个教程，就能学会怎么写小程序。该教程分成四次连载，感兴趣的小伙伴可以在本教程里找到其他三篇文章～
9、如何编写健壮的 TypeScript 库？
https://mp.weixin.qq.com/s/PWnkfkQ4KhjnvE1BGCPtow
【实用工具】
1、这个项目可以让你在几分钟快速了解某个编程语言
https://juejin.im/post/6891816004721049607
有没有什么办法让我们快速了解一个编程语言的语言呢？
答案是有的！
Github 有一个 叫做 learnxinyminutes-docs 的开源项目可以帮助你X分钟快速了解某个编程语言。
- 项目的 Github 地址：github.com/adambard/le…
- 项目配套的在线网站地址：learnxinyminutes.com/
2、阿里开源首个 Serverless 开发者平台 Serverless Devs
https://www.serverless-devs.com
Serverless Devs 是一个开源开放的 Serverless 开发者平台，致力于为开发者提供强大的工具链体系。通过该平台，开发者可以一键体验多云 Serverless 产品，极速部署 Serverless 项目。
Serverless Devs 包括 Serverless Devs Tool （Serverless 开发者工具）和 Serverless Devs App Store（Serverless 应用中心）:
• Serverless Devs Tool 是一款可以让 Serverless 开发者开发和运维效率翻倍的工具。通过使用该工具，开发者可以更简单、更快速的进行应用创建、项目开发、测试、发布部署等，实现项目的全生命周期管理
• Serverless Devs App Store 是一个集 Serverless 应用在线搜索，一键部署以及资源可视化编辑于一体的应用中心产品。该应用中心拥有海量的生产级项目模板、案例模板，开发者可以自由选择，并将项目一键部署到指定的云平台上
3、【译】73个超棒且可提高生产力的 NPM 包
https://mp.weixin.qq.com/s/pQXA3gfVPyr0-4H8tqrOEA
【动态与研究关注】
1、Ant Design Pro V5 已经支持预览
https://juejin.im/post/6891897976717836302
在经过了很长时间的准备下，Pro V5 已经基本完成， 但是仍然有很多地方不是很完善，在新版本中我们进行了很多预设，对于数据流和布局更是进行了大刀阔斧的改进。
layout 是这次的最大改动，首先是进行了样式上的更新，支持混合模式来期望适应更多的场景。新的风格仍然会以科技的风格为主，在原来的基础上优化尺寸和体验细节，设计更加简洁，匹配更多业务场景，具体的改动可以看这里。
2、前端智能化 2020 年中总结和反思
https://juejin.im/post/6891816708387831816
3、2020年全网最全：iOS+Android设计规范及适配总结
https://mp.weixin.qq.com/s/5wxpHfqox_NLmVXSwLlERw
如何用iOS的设计稿适配安卓
现在绝大多数公司限于人力物力的限制，不能把iOS和安卓的设计稿全部执行出来，因此就存在一稿两用的情况；设计师以iOS版本的设计稿来适配安卓，下面我们来看一组有趣的数学换算题：
1080/1.5=720，720/1.5=480，12422208/1.15=10801920，也就是说，12422208（iOS@3倍尺寸）与10801920（安卓尺寸）是可以等比缩放的，所以，iOS与Android的尺寸是可共用1242*2208px。因此，以iOS设计尺寸进行设计是可以适配Android的。
另一种方式，就是把750×1334px等比例调整尺寸到安卓1080×1920px，对各个控件进行微调，重新提供标注（用dp标注）。也就是需要提供两套标注，一套给iOS，一套给Android。
4、六问教育 OMO
https://legacy.iyiou.com/p/131815.html
OMO 即 Online-Merge-Offline，字面意思是线上与线下的融合。OMO 的背后有几大驱动因素，移动支付的普及、线上+线下流量获取和数据化、真实世界数据化、物流生产自动化等等。
而教育行业的 OMO 模式是指以提升教学效果与体验为核心，通过互联网、人工智能和大数据等新技术打通各环节的数据，并深度融合线上与线下的学习场景，实现标准化的流程与个性化的服务。
一言以蔽之，OMO 模式可实现从教研、师训、管理、获客到交付，教育行业全流程的变革。
5、2020年电商行业研究报告
[https://mp.weixin.qq.com/s/7DQVL204ubzYJ7IOvpkekw
](https://mp.weixin.qq.com/s/7DQVL204ubzYJ7IOvpkekw)
【程序之外】
1、新冠痊愈后，TCP/IP之父要建立太空互联网
https://mp.weixin.qq.com/s/BFFu8mqKL3bqyptOgyHR4g
1998年， NASA 阿波罗计划的元老成员、太空通讯专家 Adrian Hooke 召集了包括 Cerf 在内的另外八个人，探讨一组很大的课题：未来的太空探索需要什么，有哪些是现在可以着手开始做的？
其中的一个重要问题，就是提高太空通讯的效率。Hooke 的小组思考，能否结合地球上的互联网的技术和逻辑，去改进太空通讯？
你可以这样理解：当时的太空通讯系统，在很大程度上是割裂和独家的。比方说A国发了一颗担负某个特定职责的卫星，而B国的另一项宇航任务临时需要中继通信，而A国卫星正好在中间，会发现两个系统的通讯方式不兼容，无法协同工作。
半个世纪以前，地球上为数不多的网络也是这样的。而 Cerf 被誉为互联网之父之一，正是因为 TCP/IP 作为底层协议，才成就了后来的全球互联网。到了太空中，人类也需要一个和 TCP/IP 扮演相似角色的底层协议，那将会是搭建星际互联网的基石。
Hooke 主导了后来的星际互联网底层协议计划，而 Cerf 成为了团队的重要技术专家，一直在做出贡献。这项事业，到今天已经持续超过20年。
2、在Ant Design 4.0里，我们如何追求快乐的工作
https://mp.weixin.qq.com/s/QUqy1-g0FElqOs9cQFFWHA
我们将快乐拆成两部分，一部分是快感，一部分是乐趣，基于此，我们衍生出了 Ant Design 四个价值观，设计首先是自然的，其次是确定的，第三，设计是要有意义的，第四，设计是能让用户和产品不断成长的，它是具有生长性的。
ETCG 2.0几个字母分别代表不同的意义，第一个是功能范例，第二个是模板，模板是我们基于业务的抽象，目的是帮助新手或者帮助不同设计师保持设计的一致性，指引页面如何设计，比如这是典型的列表页，由高级搜索和表格组成。今年在模板的基础之上又做了一层更大的精进，我们做了抽象和规范衍生出了模板组件。一行模板组件，当无法满足你的需求时，只要一行代码，就可以得到一个完整的序列。
3、腾讯文档 | 全平台系统设计
https://mp.weixin.qq.com/s/X4-EEyrr5VY6XDCsc0cSuA
随着移动设备的生产力逐步加强，手机、折叠屏、平板、电脑之间的界限变得模糊，端与端的差距也在缩小。同样是去年，苹果正式推出 iPadOS 系统，对键鼠的灵活支持让移动端的便捷和桌面端的超强生产力进一步融合。而从应用的开发而言 Electron、Flutter 等跨系统框架层出不穷，开发者也在不断尝试在不同平台上用一套代码提供同一套服务，减少系统隔阂所带来的维护成本。尽管全平台系统设计的概念还不成熟，但我们可以看到打造流畅的全平台体验的必要性。这也许会成为下一代应用的基础规则，正如当初的响应式设计。
全平台设计的原则
此时此刻，一个腾讯文档的白领用户可能正在工位写报告或通勤的路上查阅文档，一名学生可能在电脑上写论文或者去打印店打印，一位老师则可能刚刚发了一份在线统计表格到群里让各位家长在手机上填写。腾讯文档需要尽可能多地覆盖渠道和场景，支撑用户真正做到随时随地打开文档，快速完成当下的任务。但值得注意的是，在全平台的设计当中我们并不追求完全的一致，而是整体感知的和谐。一致的界面可以降低认知成本，但用户在不同环境也会有不同预期，例如在性能更强大的设备上自然希望能够完成更复杂的任务。那么腾讯文档如何保持其“效率”的特征？为此我们确立了以下设计原则：确保内部感知的一致性，让各端效益最大化。
更多精彩资讯，欢迎扫码入群交流~🚀**🚀🚀**
注：所有资讯均来自网络，不代表编者观点。
若有收获，就点个赞吧
0 人点赞
