人生没有过不去的坎，过不去，只是因为腿还不够长。
【实践经验】
1、淘系运营工作台前端体系
2、如何画好一张架构图？
https://zhuanlan.51cto.com/art/202006/618850.htm
所以架构图，即表达“架构”的图，也就是一种架构的表达方式。也即：
架构图 = 架构的表达 = 表达架构的图
3、如何在应用架构中设计微前端方案 - icestark
微前端在 2016 年 ThoughtWorks 的一个技术雷达上面提出后，不断有团队尝试将单体的前端 web 应用按不同维度进行拆分或者组合，再聚合到一个整体的应用架构下面。无论从系统体验优化还是技术架构升级的角度，都对微前端的方案提出了各种高要求。本文将围绕 icestark 对于不同场景的思考和设计，来尝试给出解决方案。
4、淘宝直播三大核心技术揭秘
https://www.infoq.cn/article/S53lclBbxY2Dwg9xOBHh
本文分享内容主要分为四个部分：
- 全民直播大时代的背景介绍
- 直播痛点分析
- 淘宝直播窄带高清技术
- 音视频技术趋势探讨
5、网页骨架屏自动生成方案（dps）
https://mp.weixin.qq.com/s/X2IK5mA6HRcnl2_d9NpNOg
骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。
6、看到赚到！重读vue2.0风格指南，我整理了这些关键规则
https://juejin.im/post/6844904182806216712
- v-for设置键值
- 模版中的复杂逻辑使用计算属性代替
- 避免v-for与v-if混用
- 尽量使用私有属性/方法
- 组件数组必须是一个函数，并返回一个对象
- 为组件样式设置作用域
- 将复杂页面拆分成多个组件文件
- prop应该尽量详细
- 组件名应该由多个单词组成
7、分析网页 JavaScript Bundles 的几种方法
https://mp.weixin.qq.com/s/emJ_LjG7FNR81cxl8BnrMA
分析你网页中的 JavaScript Bundles 大小，并限制网页中的 JavaScript 数量，可以减少浏览器花费在解析、编译和执行 JavaScript 的时间。这可以加快浏览器可以开始响应用户交互行为的速度，从而改善 First Input Delay、Largest Contentful Paint 等几个重要的性能指标。
本文我们来一起看看分析网页中 JavaScript Bundles 的几种方法。
8、总结些 Vue 不错的开发技巧
https://mp.weixin.qq.com/s/GfOAesXbzafIf-LeSb1TWA
本文从列举了 36 个 vue 开发技巧
【基础夯实】
1、HTTP2 详解
https://blog.wangriyu.wang/2018/05-HTTP2.html
2、从过去到未来：关于 HTTP2 的研究
https://juejin.im/post/6844903687840595976
3、你真的懂Promise吗
https://mp.weixin.qq.com/s/bL_EjZ6-gg_v-eS1ymCVAQ
在异步编程中，Promise 扮演了举足轻重的角色，比传统的解决方案（回调函数和事件）更合理和更强大。可能有些小伙伴会有这样的疑问：2020年了，怎么还在谈论Promise？事实上，有些朋友对于这个几乎每天都在打交道的“老朋友”，貌似全懂,但稍加深入就可能疑问百出，本文带大家深入理解这个熟悉的陌生人—— Promise.
4、JavaScript 错误处理大全
https://mp.weixin.qq.com/s/K5nzTWSMgDPq0gO2SIa4Uw
5、不知道怎么封装代码？看看这几种设计模式吧！
https://mp.weixin.qq.com/s/hpRl-gv3sRN8stAjM6zbrQ
用于代码封装的设计模式主要有工厂模式，创建者模式，单例模式，原型模式四种，代码封装有以下几点好处
- 封装好的代码，内部变量不会污染外部。
- 可以作为一个模块给外部调用。外部调用者不需要知道实现的细节，只需要按照约定的规范使用就行了。
- 对扩展开放，对修改关闭，即开闭原则。外部不能修改模块，既保证了模块内部的正确性，又可以留出扩展接口，使用灵活。
6、这才是真正的Git——Git内部原理揭秘！
https://mp.weixin.qq.com/s/jN-CGrf7oosutxLEvxvWiw
本文以一个具体例子结合动图介绍了Git的内部原理，包括Git是什么储存我们的代码和变更历史的、更改一个文件时，Git内部是怎么变化的、Git这样实现的有什么好处等等。
通过例子解释清楚上面这张动图，让大家了解Git的内部原理。如果你已经能够看懂这张图了，下面的内容可能对你来说会比较基础。
7、学习Vue3.0，先从搭建环境开始
https://juejin.im/post/6864324361621995533
通过本文，你将学习到以下内容：
- 使用vite初始化Vue3.0项目
- 配置ts
- 配置vue-router
- 配置vuex
- 使用Vue3.0开发一个TodoList示例
8、Webpack漫谈
https://juejin.im/post/6867797346550284296
9、Webpack原理浅析
https://aotu.io/notes/2020/07/17/webpack-analize/
Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。
10、初识 WebRTC
https://xie.infoq.cn/article/d0b8c3b86ca875a384941bc59
WebRTC是Web Real-Time Communication，即网页实时通信的缩写，是RTC协议的一种Web实现。项目由Google开源，并和IETF和W3C制定了行业标准，目前已成为下一代视频通话的标准。
11、新的跨域策略：COOP、COEP
https://mp.weixin.qq.com/s/vVX__t_LLUQ8Zp2kPOXKpg
- COEP: Cross Origin Embedder Policy：跨源嵌入程序策略
- COOP: Cross Origin Opener Policy：跨源开放者政策
我们可以通过 COOP、COEP 来创建隔离环境。保证我们的网站资源更加安全
【动态与研究关注】
1、谷歌发布 Chrome 85 稳定版，引入 PGO，页面加载速度提升 10%
https://mp.weixin.qq.com/s/H9b8VOHcPhkq72fAu7DPyQ
谷歌发布了最新稳定版 Chrome 85。Chrome 85 带来了 Profile Guided Optimization（PGO），这是一种编译器优化技术，可使代码中性能最关键的部分运行得更快。
测试显示，引入 PGO 后，Chrome 页面加载速度平均提高了 10％，并且当 CPU 同时运行许多标签页或程序时，速度甚至得到了更大的提高。
2、首个 Vue 3 组件库发布
https://juejin.im/post/6867515263672123399
3、什么是人工智能自动编程？它只是一个噱头吗？
毫无疑问，人工智能将改变软件开发的方式 —— 我们已经看到了一些尝试将人工智能应用到软件开发所带来的好处，例如“程序代码自动生成”：根据图像生成代码、通过数据模型生成代码……今天我感兴趣的是，一个普通的开发者是否已经有了一些有用的工具，这些工具使用人工智能技术提高了他的生产力。
4、阿里研究员：警惕软件复杂度困局
https://mp.weixin.qq.com/s/L2hviITn-MgKGWzyUdXSjg
对于大型的软件系统如互联网分布式应用或企业级软件，为何我们常常会陷入复杂度陷阱？如何识别复杂度增长的因素？在代码开发以及演进的过程中需要遵循哪些原则？本文将分享阿里研究员谷朴关于软件复杂度的思考：什么是复杂度、复杂度是如何产生的以及解决的思路。
5、从第一代 iPhone 细数到 iPhone 12，iPhone 屏幕尺寸进化历程背后的 app 设计哲学
https://mp.weixin.qq.com/s/a_oa8K17npsOM34O7Nq3Fw
从 2007 年发布的第一代 iPhone 到 2019 年发布的 iPhone 11 系列，iPhone 的屏幕尺寸已涵盖 3.5 寸、4 寸、4.7 寸、5.5 寸、5.8 寸、6.1 寸、6.5 寸七种，传闻将于今年秋季发布的 iPhone 12 还会增加 5.4 寸、6.7 寸两种尺寸。随着时间轴的推移，iPhone 的屏幕尺寸已经变得越来越多，越来越复杂，一个 app 要适配所有的这些屏幕尺寸，在从设计、开发到推广的整个过程中都需要考虑诸多因素。
6、2020-2021 设计趋势ISUX报告 · 多媒体篇
https://isux.tencent.com/articles/multimedia-trend.html
伴随着移动互联网的快速发展，5G通信，人工智能，物联网等新技术的发展也越趋成熟，人们接触信息的效率不断在提高，接受信息的纬度也更广泛，如何消化我们在生活中被大量切割的碎片化时间，如何能让用户更聚焦内容不被打扰，拉长用户的停留时间，我们正身处在一个内容快速消费的时代。长短视频，动画电影，互动装置等形式能够更容易吸引用户的注意力，无论是消费者，创作者或是设计的从业者，制作的门槛降低了，以往是一个团队的输出，现在一个人也能够打造高质量的爆款，人人都是内容的生产者成为了这个时代的标签。文章从设计从业者的角度出发，从摄影摄像，视频动画，动态图形，交互装置等四个纬度来阐述内容设计的制作方法与近几年等风格趋势。
【程序之外】
1、业务前端如何突破困境
作为一个业务前端，完成业务需求的同时，还要处理各种线上问题，加班辛苦忙碌了一年，还要被老板说“思考是不够的”、“没有业务 scene”，出去面试，被问项目，也说不出什么有亮点或者有挑战的东西，想做点牛逼的东西，也没有发现什么有价值的方向，好不容易找到一些方向，还要被老板各种质疑“打压”，最终可能就只是做了一点性能优化工作，抽离了一些可复用的组件……不禁让人感叹，业务难、前端难、做业务的前端更难！
如果你也有这样的感受和困境，我想告诉你，这真的是太正常了，在阿里内部的技术论坛就有多篇关于这个问题的思考，该篇文章参考了多位不同前端领域专家的总结，希望对你有所启发。
2、时间管理的七句话
http://www.ruanyifeng.com/blog/2016/05/time-management.html
- 进程切换非常昂贵，避免多任务，保持单线程
- 研究表明，集中注意力、高效工作，每天最多4小时
- 划分任务的优先级，不要把“急切”当作重要
- 起床后，不要查看邮件和微信
- 避免开会，因为人类已知的最浪费时间的事情，就是开会
- 早晨4点起床，到了中午，你就完成了一天的任务
- 你没空时不会做的事情，有空了也不会做
更多精彩资讯，欢迎扫码入群交流~🚀🚀🚀
注：所有资讯均来自网络，不代表编者观点。
若有收获，就点个赞吧
0 人点赞
