0025.jpg

【实践经验】

1、探索微前端的场景极限

https://www.zhihu.com/column/p/355419817

本文主要介绍总结了一些基于 qiankun 的微前端应用场景与实践

2、3 种在任何浏览器中使用 CSS 网格的后备方案

https://mp.weixin.qq.com/s/13XGOWNGbmEIJ5cpBJ_Shw

在本文中，我们将探讨最重要的三种技术。它们将帮助我们在 Grid 布局上轻松兼容旧版浏览器，这样我们就可以根据可用的浏览器功能，调整我们的网页设计。这一切都将是渐进式适应的。

3、Flutter Web在美团外卖的实践

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

在多形态业务场景下，如何保障多端体验的一致性，是前端技术领域一个比较受关注的方向。美团外卖前端技术团队基于 Flutter Web 探索跨端（App\PC\H5）的解决方案，真正实现“Write Once & Run AnyWhere”。本文系该团队的实践经验总结，希望能对大家有所帮助或者启发。

4、8000字总结的前端性能优化

https://mp.weixin.qq.com/s/9cHJ7tfemE3d4Xs9uR8gyg

5、我在架构设计和代码开发中的一些常用原则

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

经过这么多年的发展，在软件设计过程，目前沉淀下来的原则有很多，但很多情况下，很多原则为了普适性，总结得会比较抽象，一旦太过抽象，对原则的解释和理解就会因人而异，譬如：高内聚低耦合原则，大家都懂，但是如何落地和执行却是很难说完全达成一致。因此，需要针对一些实际的场景中的问题去总结和补充，在大的原则下具化形成大家容易理解一致的相对明确原则。
本文介绍了作者在工作中遇到的一些问题而总结和使用到的一些常用原则。

6、前端工程化之H5性能优化篇

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

7、实现Web端自定义截屏

https://juejin.cn/post/6924368956950052877

本文作者跟读者分享下在做web端”自定义截屏功能”时的实现思路以及详细过程。

8、使用Vue3的CompositionAPI来优化代码量

https://juejin.cn/post/6917592199140458504

本文作者跟大家分享下利用Vue3的CompositionAPI优化过程中踩到的坑以及所采用的解决方案，欢迎各位感兴趣的开发者阅读本文。

【基础夯实】

1、慎用JSON.stringify

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

JSON.stringify 在实际应用中确实很方便的解决了我们很多问题，比如简单的深拷贝等。但我们在使用时候，也需要知道它有哪些不足之处，在目标值如果是一些特殊值的情况下，可能序列化后的结果会不符合我们的预期，这个时候就需要慎用。

2、编写高质量可维护的代码：编程范式

https://mp.weixin.qq.com/s/NmWPziVRnCvBsd-_hOG84Q

命令式、声明式、面向对象本质上并没有优劣之分，面向对象和命令式、声明式编程也不是完成独立、有严格的界限的，在抽象出各个独立的对象后，每个对象的具体行为实现还是有函数式和过程式完成。在实际应用中，由于需求往往是特殊的，所以还是要根据实际情况选择合适的范式。

3、Koa2 + Mongodb(从0到1)搭建项目

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

本文适合于新手利用Koa2 + Mongodb从0到1搭建一个node项目，比较基础。

4、关于 z-index，你可能一直存在误区

https://mp.weixin.qq.com/s/gxck9-n4Vi-vMLhNf2dnuA

z-index 这个属性表面看上去很简单，但如果想搞清楚其工作原理的话，其实是有不少值得探讨之处的。本文从层叠上下文（stacking contexts）和一些实际案例出发，谈一谈 z-index 的内部工作原理。

5、你不知道的 Proxy

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

作者将从 6 个方面入手，带读者一步一步揭开 Proxy 对象的神秘面纱。阅读完本文，你将了解以下内容：

  • 代理的作用；
  • Proxy 对象与 Reflect 对象的相关知识；
  • Proxy 对象的 6 个使用场景；
  • 使用 Proxy 对象时的一些注意事项；
  • Proxy 在开源项目中的应用。


6、容易被忽略的5个HTML技巧

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

许多开发人员每天都在使用 HTML，但他们并没有试着提升自己的技能水平，没有想过真正用好一些鲜为人知的 HTML 特性。
以下是你应该了解的 5 个 HTML 标签和属性：

  • 延迟加载图像
  • 输入建议
  • 图片标签
  • Base URL
  • 文档刷新

【实用工具】

1、前端开发者必备的12个工具

https://mp.weixin.qq.com/s/9E1s11KYzmc7E2rb7fRTeg

本文为读者介绍了12个好用的chrome扩展工具，日常前端开发中经常用，希望对读者有所帮助
image.png

2、总结18个webpack插件，总会有你想要的！

https://juejin.cn/post/6844904193589772301

3、前端工程师必备的17个实用网站

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

4、发现一个 20k+ start 的 Git 可视化工具！

https://mp.weixin.qq.com/s/qyC-EUHhoOecEDXgY2oMBA

【动态与研究关注】

1、从 Chrome 源码 video 实现到 Web H265 Player

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

现在绝大多数的网站已经从Flash播放转向了浏览器原生的Audio/Video播放，那浏览器是如何加载和解析多媒体资源的，这对于web开发者来说是一个黑盒，本文就跟大家一起来看一下浏览器具体是怎么实现的。
image.png

2、刨根问底，揭开 Vue 中 Scope CSS 实现的幕后（原理）

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

作者将会围绕以下 3 点，和读者一起从 Vue 的 Scope CSS 的最终呈现结果出发，深入浅出一番其实现的底层原理：

  • 什么是 Scope CSS
  • vue-loader 处理组件（.vue 文件）
  • Patch 阶段应用 ScopeId 生成 HTML 的属性


3、JS 项目中究竟应该使用 Object 还是 Map？| 项目复盘

https://juejin.cn/post/6941232930945499173

本文将会探讨一下 Object 和 Map 的不同，从多个角度对比一下 Object 和 Map：

  • 用法的区别：在某些情况下的用法会截然不同
  • 句法的区别：创建以及增删查改的句法区别
  • 性能的区别：速度和内存占用情况

希望读完本文的你可以在日后的项目中做出更为合适的选择。

4、Chrome 88已经支持aspect-ratio属性了，学起来

https://www.zhangxinxu.com/wordpress/2021/02/css-aspect-ratio/

aspect-ratio属性以一种更表面更浅显易懂的方式让开发者可以轻松设定元素的高宽比，是一个会让很多CSS开发者兴奋的属性。

5、V8 9.0 版本都有哪些新东西？

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

V8 9.0 版本已经来到了测试阶段，将在数周内和 Chrome 90 Stable 一起发布，本文介绍一下这个版本中的一些亮点。

6、业界鼓吹的「前端智能化」有什么落地案例吗？

https://www.zhihu.com/question/396472350/answer/1602841014

【程序之外】

1、寻找你愿意忍受的痛苦

http://www.ruanyifeng.com/blog/2021/02/weekly-issue-147.html

很多人建议，寻找人生方向时，你应该听从自己的内心，寻找真正热爱的事情。现在觉得，更现实的建议应该是，寻找你愿意忍受的痛苦。 你在哪一个方向上，愿意心甘情愿地、经年累月地吃苦，具有最大的忍耐，”虽九死其尤未悔”，那就是你应该选择的方向**。

2、如何写出高质量的技术文章？

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

本文作者通过自身经历分享总结了他是如何写出高质量技术文章的，值得一读。
image.png