久等了，2024年下半年前端专业学习记录

张鑫旭
1,783 阅读19分钟

学习记录第4波，前面的几次学习记录可访问学习记录专栏了解。

即使年岁渐长，也依然不放弃对前端的好奇心。

2024.7.15-7.21

本周学习了CSS Custom Highlight API。

目前所有现代浏览器都已经支持此API。

这个API虽然以CSS开头，但是要实际应用，需要对JavaScript有一定积累的开发人员才能驾驭。

实现CSS纯文本高亮需要下面四步：

  1. 创建Range对象（使用JS）；

  2. 使用第一步创建的range创建Highlight对象（使用JS）；

  3. 使用HighlightRegistry方法注册上一步创建的Highlight对象（使用JS）；

  4. 使用::highlight()伪元素让设置注册的文本选区样式（使用CSS）；

这里有个案例：CSS HighLight API隐藏部分手机号码demo

效果图：

更详细的内容参加这篇文章：“今日学习CSS文本自定义高亮API”

2024.7.22-7.28

本周学习内容源自实际项目。

特效音除了音量设置，还有淡入淡出效果，如下图示意：

之前没处理过，暂时没头绪，这周正好有空，提前技术预研。

播放的淡入淡出，可以使用Howler.js，或者使用原生的Web Audio API中的GainNode去实现。

但是，转码合成需要对音频底层数据进行处理，需要特定的算法，好在，算法其实不算太难，和之前的音频音量设置、剪裁等处理逻辑大同小异。

详见我整理的这篇文章：“MP3音频淡入淡出播放和转换的JS实现”，内含多个demo页面。

2024.7.29-8.4

本周学习View Transitions API.

View Transitions API可以实现类似keynote神奇移动一样的效果，类似于快照前后页面的状态，发生变化的元素有过渡效果。

支持若干JavaScript方法和CSS伪元素特性：

JavaScript 方法与属性

  • startViewTransition()

  • updateCallbackDone

  • ready

  • finished

  • skipTransition()

CSS 规则和伪元素

  • view-transition-name

  • ::view-transition

  • ::view-transition-group()

  • ::view-transition-image-pair()

  • ::view-transition-old()

  • ::view-transition-new()

由于相关内容较多，下周继续学习。

2024.8.5-8.11

继续View Transitions API的学习。

View Transitions可以轻松实现过去不太好实现的动画效果。

例如倒序后列表的移动，在过去，在改变列表的顺序的时候，如果希望有动画效果，需要元素绝对定位，然后动态修改每一个元素的left,top值，比较麻烦，对布局限制也大。

现在有了View Transitions API，事情就简单多了，因此视图动画他无需设置元素的具体的定位值，它是根据新旧快照前后的位置变化实现的动画效果。

所以事情就变成了：

  1. 给所有列表元素设置一个唯一的view-transition-name；

  2. 执行startViewTransition()然后改变位置；

结束了，就这么两步，非常简单。

无论是DOM位置变化实现的倒序，还是CSS属性在视觉上实现的倒序都可以有动画效果。

如下GIF录屏所示：

数据驱动的元素删除动画也是类似，有了View Transitions API，不再是硬邦邦的元素突然消失，而是淡出外加移动，只需要：

兼容又高效。

关于View Transitions API更多内容，可参见我撰写的这篇文章：“页面级可视动画View Transitions API初体验”

2024.8.12-8.18

本周自驾游休假，放空自己是为了更好的成长。

2024.8.19-8.25

休假结束，进入正常的工作与学习节奏。

本周学习内容是CSS滚动动画，此特性出来已经有1年了，Safari迟迟未支持，想想，不等了，学起来吧。

这个CSS特性可以实现任意元素（包括滚动区域外元素）相对于滚动进度、或者相对于滚动区域位置的动画效果，非常牛逼。

下面是我做的demo效果录屏示意：

滚动区域外元素动画示意：

还可以和container容器查询配合，实现元素是否可滚动的检测。

详见我整理的这篇文章：“不能落后，好好缕缕CSS滚动动画”

2024.8.26-9.1

1. SVG滤镜学习

本周学习SVG光源滤镜，种类非常多，漫反射<feDiffuseLighting>，远光<feDistantLight>，点光<fePointLight>，聚光<feSpotLight>等，不同的元素对应不同的光源算法。

相关内容涉猎较多，本周继续学习，看看能否在日常开发场景中有所应用。

2.scrollend事件

浏览器新支持了scrollend事件，不过Safari还未支持，有些遗憾。类似滚动到某个位置，导航高亮的效果就更容易实现了。

本周整个demo自己尝试下。

2024.9.2-9.8

本周继续SVG光影滤镜的学习。

<feSpecularLighting>是镜面反射，配合点光源，可以实现高光反射效果，就像这样。

<feDiffuseLighting>是漫反射，在点光源（灯泡），平行光源（太阳），聚光光源（手电筒）下的视觉表现效果：

光源亮度，角度等都是有参数可以调整。

对应的光源元素分别是<fePointLight>, <feDistantLight>, <feSpotLight>，这5个元素就构成了SVG的光源特效表现。

更详细的内容参见整理的文章：“搞懂SVG中各种Light相关的光源滤镜”

2024.9.9-9.15

1.弹动效果的实现

源自实际开发需求。

我一开始使用的是Tween缓动算法，GitHub - zhangxinxu/Tween: tween.js

但最终实现的效果都没有剪映那般爽气。

后来仔细对比，发现短而有力的弹动是 10-15-9-10这样的变化，而Tween短发实现的弹动是5-10-12-9-10这种，过于悠长，不够有力。

所以，需要调整实现，然后我就用了个简单粗暴的算法，直接逐帧枚举，这样：

const arrScale = [1.0, 1.07, 1.28, 1.3, 1.3, 1.05, 0.95, 1.0, 1.0, 1.0, 1.0, 1.0];

然后每一次render绘制的索引依次+1就可以了。

下图是最终实现的效果：

2.scrollend事件

Chrome和Firefox浏览器都已经支持scrollend滚动停止事件了。

这可是个好东西，期盼已久，详见：“来了来了，scrollend滚动停止事件也支持了”

3.普通元素的垂直居中

之前使用align-content控制元素的垂直对齐仅适用于Flex或Grid元素，而现在，Block元素也能使用啦！

例如：

<ul>
  <li>《HTML并不简单》这本书不错</li>
  <li>感谢正版支持《CSS新世界》</li>
</ul>

ul {
  height: 150px;
  border: solid;
  align-content: center;
}

此时的渲染效果如下图所示，真就垂直居中了。

我只能说——Nice！

更多细节参见我撰写的这篇文章：“好消息，align-content垂直居中也适用普通元素啦”

2024.9.16-9.22

所有现代浏览器都已经支持浏览器原生的静态方法Object.groupBy()了，如下图所示，Safari浏览器支持最晚，今年4月份才开始支持。

这就意味着最晚明年，就算不使用Polyfill代码，也能在生产环境使用该方法了。

Object.groupBy()可以让可枚举对象，根据某个键进行自动分组。

挺实用的一个方法，具体可参见我撰写的这篇文章：“实用的JS对象分组静态方法Object.groupBy()”

2024.9.23-9.29

最近Chrome进行了第4批CSS数学函数的支持，包括mod()/rem()/round()，其中round()函数尤为的实用。

通过不同的参数设置，可以实现多种取值方法，例如（以JS API示意）：

  • Math.ceil()

  • Math.floor()

  • Math.round()

  • Math.trunc()

可以解决小数像素导致的渲染模糊，缝隙等问题，还可以用来模拟CSS动画中的steps()函数效果。

详见我整理的这篇文章：“时隔两年，Chrome也支持round等CSS数学函数了”

2024.9.30-10.6

国庆节快乐，钓鱼钓high天。

2024.10.7-10.13

CSS @property规则

Safari浏览器也已经支持@property规则了，如下图所示：

@property规则属于CSS Houdini中的一个特性，可以自定义CSS属性的类型，这个特性在现代CSS开发中还是很有用的，最具代表性的例子就是可以让CSS变量支持动画或过渡效果。

例如默认情况下，使用background渐变实现的背景本质上是图像，是无法应用transition过渡效果的。但如果将渐变背景的颜色提取成CSS变量，并使用@property规则重新定义，那过渡效果就有了。

<canvas></canvas>

@property --end-color {
  syntax: "<color>";
  inherits: false;
  initial-value: black;
}
canvas {
  background: linear-gradient(skyblue, var(--end-color));
  transition: --end-color .2s;
}
canvas:hover {
  --end-color: pink;
}

效果示意：

详见我整理的这篇文章：“Nice! Safari也支持CSS @property规则了”

2024.10.14-10.20

这周面向全公司分享了精品课程《高效时间管理》，其中有一个PPT是讲六个视野的，这里，我有一些自己的思考。

在之前的讲师备注里，这一页PPT是简单带过的，但是我深入学习时间管理相关的理论和策略之后，反而认为这一页是最重要的。

如果不把这一页好好讲讲，我估计，很多学员，就算把GDT理论部分的那套方法学到手，他的时间利用效率并不会有明显的提升。

很简单，因为每个人的视野不一样，他所认为的重要的事情就不一样。而时间管理最重要的事情就是把大多数的时间和精力用在你认为重要的事情上。

所以，如果你认为重要的事情，实际上从你的职业生涯发展帮助并不是重要的，那么你的GTD再怎么使用，你的职业发展成就也不会很高的，这就是视野决定了高度。

拿我们这个行业举例，很多前端，他的视野高度只有一楼高度，项目视野，也就是认为把手上的项目做完最好是最重要的事情，然后，当我们的行业饱和不景气，求职机会变少的时候，比方说这两年，这部分人会发现找不到工作。

因为视野限制了他的高度。项目这个东西，尤其中小公司的那些项目，他所需要的前端技术要求就那么高，对产品品质的要求也就那样，非常狭隘，如果视野就局限在这个里面，你就会自我感觉良好，觉得自己很厉害，实际上并非如此。

而我刚进入行业，我认为什么东西最重要呢，不是项目，而是自己的专业技能水平，因为当时的目标，是三年内成为资深前端技术，也就是前端技术很厉害的人，所以我就会研究各类前端技术，哪怕项目中不会使用。同时会在项目中积极使用创新的技术，会关注代码质量，会关注边界，来不及就主动加班，因为专业成长是我认为最重要的事情。

因为这是三楼视野，最终，他所获得的成就就比一楼视野的高，哪怕公司倒闭，行业再不景气，我也有立足之地。

包括我对外的技术分享，写了那么多书，他也是视野决定的。

这个高度就更高了，涉及到了人生价值观，其实这里有提到，我认为，人死后，尘归尘土归土，过了几年几十年，就算你过得很开心很快乐，很享福，一帆风顺，没有任何磨难，但是如果没有给社会，给这个世界留下什么，从历史的长河角度看，你和路边的石头没有任何区别，这个人生就没有任何意义，所以我的人生价值信条就是，人生的意义不在于获得了多少，而是留下了多少，这是我不断分享输出的原动力，因为这能体现我的人生价值，在我看来是非常重要的事情。

所以我在做时间规划的时候，就去优先做重要的事情，所以我的业余时间，每天回家之后，都会做输出，专业的或生活的，会优先安排，而其他所有事情都往后排，所以在同事看来，我是个时间管理专家，不是的啊，只是我把大部分的时间都用在了创造价值这件事情上。

这个过程肯定舍弃了很多东西，举个例子，我是绝对不会自己去做饭的，所谓的精致生活，健康饮食我都认为不重要，不是我的追求，我一定叫外卖，我对周围环境的整洁与否并不在意，例如我的办公桌厚厚的灰尘，从来不擦，东西脏乱，从不整理，我觉得这种事情对于我的人生一点也不重要。

所以，说来说去说这么多，我认为反而可能，这一页，GTD的六个高度，这个东西才是最终决定大家时间管理最终学习效果的关键所在。

2024.10.21-10.27

  1. JS中非常雷同的用法

之前的小测题目，这周花了点时间整理了下。

  • Object.is()和===的区别在于NaN和+0/-0的比较；

  • 数组at/直接索引的区别在于负数的时候，前者等于数组长度+负数的值，后者直接就是undefined；

  • substring/slice的区别在于负数以及第1个参数比第2个参数小的情况。

具体见这篇文章：“Object.is/===、数组at/直接…”

2. Pixi.js中ColorMatrixFilter各滤镜效果

接到新需求，关于视频去重的，使用滤镜是一个成本比较低，效果比较好的手段。

但是Pixi.js的官方文档只有文字描述，没有具体的效果示意。

于是，自己花时间做了个demo，可以运行ColorMatrixFilter各个滤镜效果，共有十几个，例如，对比度这里：

本周再花点时间整理成文。

2024.10.28-11.3

好好研究了下Pixi.js中ColorMatrixFilter各类滤镜效果。

演示页面您可以狠狠地点击这里：Pixi中ColorMatrixFilter各个滤镜方法效果demo

可以感受不同滤镜下的图片渲染效果。

更多内容见整理的这篇文章：“Pixi.js中ColorMatrixFilter自带滤镜效果一览”

2024.11.4-11.10

本周学习了SVG feColorMatrix滤镜，尤其是其中的matrix矩阵计算和对应渲染效果之间的关系。

首先，luminanceToAlpha这个自带效果可以让白色变透明，就像这样效果：

做了个颜色变换矩阵生产工具：feColorMatrix元素matrix实时生成与预览工具

调整参数值，可以看到对应的效果。

研究了下常见的颜色滤镜效果对应的matrix的values属性值，例如Polaroid颜色效果：

<filter id="colorMatrixPolaroid">
  <feColorMatrix in="SourceGraphic" type="Matrix" values="
     1.438 -0.062 -0.062 0 0
    -0.122 1.378 -0.122 0 0
    -0.016 -0.016 1.483 0 0
    -0.03 0.05 -0.02 1 0" 
  />
</filter>

更多内容参见我整理的这篇文章：“趁热打铁，SVG feColorMatrix滤镜gogogo!”

2024.11.11-11.17

  1. CSS calc-size和interpolate-size

好消息，height:auto、width:fit-content这些以前无法触发transition过渡效果的CSS声明，现在也能动画啦，就是使用calc-size()函数或interpolate-size属性。

详见我的文章：“这啥?CSS calc-size和interpolate-size,真学不动了”

2. selectionchange事件

最近做的项目用到了一个比较冷门的DOM事件API selectionchange事件，文本选区变化时候触发。

selectionchange事件只能绑定在document上，以及原生的可输入元素上，是不能绑定在普通元素之上的。

兼容性不错。

更多细节参见：“JS文本选区变化selectionchange事件实践小记”

2024.11.18-11.24

今日学习subgrid子网格布局，subgrid非常适合那种比较规整的多层次嵌套的布局。

比如最近开发龙门的项目排版页面，其中的项目描述是等高对齐的关系：

就非常适合使用subgrid进行处理。

如此这般：

.container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: .5rem;
}

就可以跨列表对齐了：

更多内容参见我的这篇文章：“CSS Grid布局中的subgrid的适用场景”

2024.11.25-12.1

1 - color-mix颜色函数

目前所有现代浏览器都已经支持color-mix()这个颜色函数了：

这个函数可以实现关键字颜色值的半透明表示，是其他CSS、JS语法都无法取代的实用特性（from颜色相对语法除外）。

正如某同行所言：已经有主题色变量约定的情况下，用color-mix混合白色达到减淡透明度的效果真的很实用。例如：

background-color: color-mix(in srgb, var(–color-fill1-8, #fef4e8) 32%, white);

更多内容参见：“CSS好用的color-mix颜色函数也可以使用啦”一文。

2 - 基于音素的英文时长算法

在AI视频合成的时候，一段tts语音往往涵盖好几句话，但是字幕显示的时候是依次显示的，于是，如何准确地在对应的时间显示字幕片段就需要额外的算法处理。

如果是中文还好，可以按照字数来处理，因为每个中文都会发音，最终的结果大差不差，用户通常无感知。

但是英文则不同，很多字母是不会发音的，或者连续几个字母只发一个音，此时，再根据字符数机械地处理，很容易会遇到视频发音和字幕不同步的问题。

所以，就需要额外的更精准的算法，在业界，称为“音素算法”。

具体的算法实现参见此文：“英文单词朗读基于音素预估时长的JS算法”

2024.12.2-12.8

font-palette动画和palette-mix()函数

font-palette属性与彩色字体相关，支持已久，最近，Chrome浏览器还支持了色板颜色混合和动画效果。

其中混合使用的是palette-mix()函数，和color-mix()函数语法较为相似，兼容性如下图所示：

实现效果截图示意：

同时还支持色板之间的transition过渡和动画效果。

详见此文：“font-palette支持动画和palette-mix()混合函数了”

2024.12.9-12.15

本周学习了CSS相对颜色语法，可以解构现有颜色，轻松实现相邻色、反色、半透明色等效果，有效减少项目的CSS颜色变量数量。

目前所有现代浏览器均已支持：

还挺实用的特性，详见此文：“全新的CSS相对颜色语法-使用from和calc()”

2024.12.16-12.22

本周学习如何使用JS获取系统的软硬件信息，例如内存、CPU/GPU、电量、蓝牙、掉线与否等。

例如内存获取使用navigator.deviceMemory，离线与否使用navigator.onLine。

更多学习知识参见此文：“如何使用JS获取系统内存、CPU/GPU、电量等信息”

2024.12.23-12.29

所有现代浏览器又悄咪咪地更新了一个HTML新特性，就是select元素里面可以使用hr元素创建分隔线了。

例如：

<select is="ui-select">
  <option>选项1.1</option>
  <option>选项1.2</option>
  <hr>
  <option>选项2.1</option>
  <option>选项2.2</option>
</select>

渲染结果：

更多内容参见此文：“HTML select下拉框支持hr元素啦”

---------------

以上，下一波学习记录预计今年7月份更新，记得点赞关注。

avatar
文章
阅读
粉丝