在使用 chrome 的 lighthouse 对网站进行测速之后，发现有一条优化提示：推迟屏幕外的图片加载。之前有看到过要实现这样的效果需要使用 lazy loading，图片懒加载，但是需要使用 js 的方式来实现，由于本人十分懒惰，不想用太复杂的代码，于是在网上搜索了一番，发现 <img> 标签原生支持懒加载。
浏览器在加载图片的时候本身是 async 异步的，不会阻塞浏览器的加载进程，但是屏幕外的图片加载仍然会消耗带宽，这样在带宽有限的情况下，会影响重要组件的加载，例如 CSS、JavaScript 等，进而拖慢页面的加载。
因为疫情的原因，线上视频会议软件异军突起，成为了在家办公的主要沟通渠道。而最近抖音上“蚂蚁呀嘿”恶搞换脸的小视频也突然火了起来，那我就想了想能不能在视频会议的时候换张脸活跃下气氛？在 Github 上一番搜寻之后发现还真有办法，有一个开源的 Python 人工智能换脸的库，那正好趁着这个机会研究一下前端 WebRTC 实现视频通话功能，外加换脸操作。先看一下效果吧：
在编写网站的时候，或多或少都会用到一些网络上的字体，CSS 3 中虽然加入了对 Web Fonts（网络字体）的支持，但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下，在 Web Fonts 加载时，使用该字体的地方会显示空白，直到字体下载完成之后才会显示，这时通过改变 CSS 中的 font-display 属性，就可以避免这个问题。
年前我看到合成大西瓜小游戏火了，想到之前从来没有研究过游戏方面的开发，这次就想趁着这个机会看看 JavaScript 游戏开发，从原生角度上如何实现游戏里的物理特性，例如运动、碰撞。虽然之前研究过物理相关的动画库，但是我打算试试不用框架编写一个简单的 JavaScript 物理引擎，实现小球的碰撞效果。
为什么不用现成的游戏库呢？因为我觉得在了解底层的实现原理之后，才能更有效的理解框架上的概念和使用方法，在解决 BUG 的时候能够更有效率，同时对自己的编码技能也是一种提升。在对 JavaScript 物理引擎的研究过程中，发现写代码是次要的，最主要的是理解相关的物理、数学公式和概念，虽然我是理科生，但是数学和物理从来不是我的强项，我不是把知识还给老师了，而是压根就没掌握过 ^o^。过年期间花了有小半个月的时间在学习物理知识，现在仍然对某些概念和推导过程没有太大的自信，不过最后还算是做出了一个简单的、比较满意的结果，见下图。
微信 8.0 更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和头像也会随之震动。本着作为前端工程师的职业精神，我就想看看能不能实现一个类似的特效。折腾许久之后，做出来的效果如下：
如果你用 JavaScript 写过项目或者参加过面试，那一定遇到过不少令人匪夷所思的问题。JavaScript 早期的规范不统一，也没有严格的标准，再加上它的语法灵活多样，有些看起来就不正确的代码却能正常执行，一些看起来符合逻辑的代码，运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG，更重要的是，很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。那么这篇文章就总结了 5 个 JavaScript 比较坑的问题，以及它们出现的原因和解决方法。
距离鸿蒙 OS 2.0 发布已经过去一些日子了，看到鸿蒙系统强大的设备共享能力，我觉得未来它一定能够成为主流的操作系统。在利用了分布式系统的优势之后，多个设备间可以共享应用程序界面和数据，并且对于开发者，也可以使用一套代码编写应用，就可以在多种设备终端上运行。
一开始我并没有太关注鸿蒙系统，以为它只能使用 Java 开发应用，跟前端好像没啥关系，但是看了开发文档后，发现 UI 部分既支持纯 JavaScript 开发，也支持纯 Java 开发，还可以 Java 跟 JavaScript 混合开发。鸿蒙应用的开发跟 Android 的开发很像，只是把概念重新定义了一下。它分为 FA（Feature Ability）和 PA（Particle Ability）两种应用模式，FA 是带有用户界面的，PA 则是运行在后台的服务程序，可以想象成安卓里的 Activity 和 Service，不过也略有不同。FA 支持使用 Java 和 JavaScript 两种方式开发 UI 界面。如果使用 Java，则跟 Android 一样，使用 xml 定义布局或者 Java 代码定义布局，每个页面都是一个 PageAbility，使用 Java 编写业务代码，不同的页面之间传递数据依然使用 intent。而这里如果使用 JavaScript UI 框架的话，那么写法跟 Vue 应用基本一模一样，同样支持 data、props、computed、watch 和 functions（methods），也能创建自定义的组件，这样 web 前端工程师就很容易转型成为鸿蒙 UI 开发工程师，不得不说华为在已有概念上做的整合，还是相当厉害的。
你是不是在面对市面上众多的技术的时候，不知道选择哪个才能对自己的职业和未来发展有所帮助？有这样的想法是正常的，因为随着科学的发展，现在的编程技术已经到了百花齐放的地步了。
那么这么多的技术和领域，我们到底应该选哪一个才比较好呢？
好多人都想知道，前端工程师到底要需要掌握什么技能、到什么程度，才能去找工作？最简单的答案：
把 html、css、 js 基础学扎实，再掌握 vue 或 react 前端框架之一就可以了。
真的是这样吗？技术上看似乎没问题，但是找工作不只要从技术上下手，还要从个人目标和公司的招人标准综合进行考量。那么接下来，我们从这几个方面来分析一下，前端工程师找工作的必要条件，然后给大家分享一套有逻辑、有结构的面试回答技巧。
我第一次使用 TypeScript 是 16 年在读研的时候，学校的算法课是使用 TypeScript 实现的。当时只知道 TypeScript 是 Angular 开发的必备语言，没想到还能这么通用。后来在写作业的时候，发现 TypeScript 也并不是特别难，只不过是给 JavaScript 加上了类型信息，让代码不那么容易出错，并且支持高级的面向对象编程范式，让 JavaScript 变得跟 Java/c# 差不多。接下来，这篇文章就给你揭开 TypeScript 的面纱，对它来一个宏观上的认识，然后介绍一下如何编写并运行 TypeScript 程序，如何定义类型，另外假设你有 JavaScript 基础。
前端工程师了解后端的功能和作用之后，能更好的和后端工程师进行沟通，减少沟通成本，另外也有助于向全栈工程师方向发展。在开始之前，先回顾一下应用的构成：
前后端数据的交换一般是基于 HTTP 协议。HTTP 协议包括客户端和服务端两个实体，客户端发送请求给服务端，服务端返回响应给客户端。在 HTTP 中，数据称为资源，可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。
作为一名前端工程师，经常在写完 HTML 以后，才觉得真正的噩梦要开始了，啊，写 CSS 的时候，面对满屏乱飞的组件，真想手动给他们挪到该在位置上…… 都说 CSS 很难掌握，最愁给页面编写样式，其实都是因为还没有形成一个对 CSS 宏观的了解，只要有了正确的学习方法、设计思维，再通过不断的积累，就能轻松的掌握它。接下来我会把掌握 CSS 的 5 个技巧整理一下，让你在以后编写 CSS 的时候不再发愁。
在 CSS flexbox 布局出现以前，如果要控制 HTML 元素的布局，要用到很多种奇葩的方式。在水平方向上得用float控制左右对齐，稍一不注意，就会有浮动的元素飞来飞去~。在垂直方向上就更是百家争鸣了：要么手动计算高度然后算出中心点，要么用 line-height 和 height 的结合，要么用十之八九不生效的 vertical-align 属性等等等等。自从 flex-box 出现以后，一切似乎就豁然开朗了，水平垂直各种花式对齐，空间分配由你做主。当然，要用好它，用对它也不是一件容易的事，今天就给你说说 flex-box 布局，看完之后你也能熟练的运用它！（博客中的示例都是真实的 HTML 代码，可以使用 chrome 开发者工具查看属性。(此文为了演示某些 flex 示例，在小屏幕下会有横向滚动条)
在写 CSS 的时候你一定遇到过有些样式明明写对了，也选择了正确的 html 元素去应用这些样式，可是就是不生效，这是为什么呢？因为在选择同一个 HTML 元素的时候，不同的选择器有不同的优先级，优先级低的选择器的样式会被优先级高的覆盖。
Hello, 今天教你写一个渐变背景生成器。我会用这个例子来解释 react 的 state，状态管理，还有事件处理。这个小工具提供了两个颜色选择器，分别可以选择渐变的两个颜色，渐变的角度是 75 度，线性渐变。另外还有一个重置按钮可以把渐变恢复成初始值。
你在写 HTML 页面的时候肯定知道，html 标签的属性都是固定的，比如 a 标签的 href, input 里边的 type 属性。这些属性都是内置的，不方便扩展和复用。而用 React 创建组件的话，可以给它定义一些更符合语义和逻辑的属性，比如颜色、尺寸等。
Hello! 今天来带你走进 React 的大门！我第一次听说 React 是我在美国读研的时候，室友选了 web programming 这节课，然后遇到了关于 react 的好多问题，就是总也配置不好。我看他那个时候 React 的配置特别麻烦，要引入一堆依赖，像 bower, babel 等等... 还有文档写的也不清楚。有一次他刚开始做一个作业，问了我一个问题，大概是有一个组件显示不出来，结果看了半天我也不知道是怎么回事啊，因为我也没学过。后来他自己研究出来了，是因为这个组件在使用的时候没有大写。
如果你看了上期视频的话，那么你应该学会了怎么在本地搭建一个 docusaurus 博客，但是你不能只在本地来看这个博客吧，得让全世界来欣赏你的杰作，所以说咱们得把这个博客部署到服务器上。部署有两种方式：
我以前总也找不到一个满意的博客系统，wordpress 这个程序又大，然后配置也不方便。占用的服务器的资源也多。我就想有没有一个又简单又快速的博客平台，后来发现了一些静态的网站生成器，像 hexo 这种，但是发现上面的主题又不好看，又懒得自己去写。后来就有一阵子我就直接把博客就发布在了其他的第三方的博客平台上。现在发现了这个 docusaurus, 它的主题跟我之前看到的一个大佬 Dan Abramov，它的 overreacted.io 博客，风格是一模一样的，因为他是 react 的作者之一，估计这个他们这个样式都是互相借鉴，它这个主题可以切换暗黑和白天模式，比较好看。安装和部署也特别简单，我的博客也是用它这个搭建的。
本篇文章适合所有想提升英语尤其是阅读能力的人，因为我自己程序员，所以我来拿自己的亲身经历来帮助大家发现自己提高英语技能的方法。
先说在中学时，虽然一开始我对英语很有兴趣，而且也考过几次高分，但是到了后来就慢慢的不喜欢学习了，高考的时候英语正好卡在 90 分的及格线上，然后高考分数只够上了一个专科，开始了程序员之路。
其实我学英语的动机并不是因为技术文档都是英文的，那时候还只知道阅读别人翻译好的中文文档，有错误和疏漏有时候都不知道。当时工作的时候，我突然决定读一个专升本，于是报考了北大的网络教育学院，然后顺利入学了。第二学期，我们都需要考学士学位英语俗称英语三级，才能拿到学位证，满分 100 分拿到 60 分及格才过关，这个到毕业前每学期都可以考一次。我第一参加考试时是裸考，以为比四级会简单些，谁知多年不用的英语水平早就下降了，结果只考了 56 分。我就看着这差 4 分的成绩到干瞪眼！为嘛老天爷对我这么不公平，差这么一点点(可能比 59 好点吧)。然后就突然激发起了我的斗志，我要努力学英语！
好多小伙伴有疑问，就是说有哪些值得去关注的前端网站，我知道大家可能都苦于找不到一些有价值的,还有值得信赖的网站去学一些比较货真价实的前端技术。生怕有哪些水文或者是一些乱七八糟的网站，把咱们的这个知识给误导了。这里呢我准备了几个我经常关注的一些网站，一部分是国外的，然后有一部分是国内的，因为国内的好多的都是质量参差不齐，但国外的话普遍的质量比较高（事实如此）。不过呢，咱们国内的也有一些比较好的平台，我在这里给咱们一共准备了 11 个可以关注的网站。
这段日子在 B 站上收到小伙伴最多的要求就是出一个前端学习路线，我能够充分的感受到大家抓耳挠腮加挠墙的迷茫~所以在这里给大家总结了一套前端学习路线。先从初级前端工程师所需的技能开始，然后一路升级到高级工程师该掌握的技能，层层相扣，让大家在工作中能游刃有余。最后附上我自己是如何从一个后端工程师转成了前端工程师^^。希望我的经历能对大家有帮助。
注意：这篇文章中有推广链接，对你的阅读体验并没有影响，不过如果你通过链接购买了商品，那么会帮助 UP 主恰饭，以支持 UP 创作更多优质的内容。谢谢支持🍙！
俗话说知己知彼百战不殆，要成为一名前端大神，首先知道它是做什么的。单纯从工作角度看，无非就是写写前端样式，连接下后台 api，解析解析数据，然后显示给用户，核心逻辑是这样没错，只是这中间掺杂着无数个边边角角的问题，比如框架选择、性能优化、兼容性调整、工程化等等。不过呢，这些并不需要一次性掌握，随着一次一次完成工作任务，解决 bug，这些自然而然就学会了~
在正式开始之前，咱们先把心态放平，就像玩游戏，游戏满级也不是一天两天的事，满级之后也才是一个新的开始。。。无尽的追求完美~。时间上，掌握前端工程师的基本技能大概需要 4 个月到 1 年的时间（看自己的意志力和上进心），之后就是在工作实践中不断的提升自己，时刻关注业界新闻，保持在科技的最前沿。工作是一个长期的事情，咱们静下心来慢慢学。