张鑫旭

2024

node 环境中使用 fluent-ffmpeg 每隔一秒视频截图今天学习 SVG 滤镜 feGaussianBlur 和 feDropShadow SVG 滤镜系列之搞懂<feBlend>元素 CSS Nesting 嵌套与@scope 规则也太雷同了吧？CSS initial-letter 属性，嗯……也就这样吧今天才知道，Web 网页也能阻止息屏了不改变音调情况下 Audio 音频的倍速合成 JS 实现 HTML MicroData 微数据结构简介 CSS @scope 他来了使用 JS 快速获取 video 视频任意位置的缩略图时代变了，该使用原生 popover 属性模拟下拉了

2023

纯 JS 实现图像的人脸识别功能 JS 实现图片相似度的判断使用 JS 提取视频中的音频资源本地 MP3 封面图、时长等信息的 JS 读取 cube 格式的 LUT 滤镜也叫 ColorMapFilter 在 pixi 中应用剪映 APP 的视频特效如何在 Web 中 JS 实现 mp4box.js 加 WebCodecs 解码 MP4 视频帧并渲染聊聊 Web 网页中资源加载的优先级纯 JS 实现多个音频的拼接或者合并 JS 改变 AudioBuffer 音量并下载为新 audio 音频又 get 到了，JS 复制图片到剪切板 HTML elementtiming 属性初体验记录 Tips：form 元素 reset 后 input 不触发 change 事件处理做了个纯前端 JPG/PNG 尺寸缩放+压缩的在线工具一言难尽的 registerProtocolHandler()方法 Web referrer 策略详解与防盗链图片的显示狠狠地研究了下 PerformanceObserver API 查漏补缺，我仍未知道的 HTML nonce 和 popover 属性 HTML kbd、var、samp 元素你使用过没？5 分钟快速了解 text-wrap:balance 的作用 CSS 高宽不等图片固定比例布局的三重进化 CSS sin()/cos()等数学三角函数简介与应用我使用 CSS 模拟个假的数字 loading 效果使用纯 CSS 实现噪点效果使用 jsPDF 导出 PDF 文件实践分享 CSS margin-trim 属性是做什么用的？JS audio 加图片序列或 canvas 转 webM/MP4 的实现使用 ImageDecoder API 让 GIF 图片暂停播放 AI 代码辅助工具 codeium 和 copilot 在前端表现对比 CSS 又出了个 revert-layer 全局关键字😂瞎折腾，使用 JS 让中文内容莫名其妙、狗屁不通好奇心驱使下试验了 chatGPT 写 CSS 代码的能力又发现一种无需绝对定位就可以元素重叠的 CSS 技巧一万年了，CSS text-align-last 终于可以用了任意两个点的曲线连接 JS 算法是时候介绍这几个全新的 CSS 颜色函数了奇了怪了，输入法和 JS Enter 回车提交冲突 CSS fixed 固定定位 transofrm 失效及居中小技巧 Chrome 浏览器原生支持的 7 种后台服务简介使用 AbortController abort 中断原生 fetch 或 axios 请求前端原生 API 实现条形码二维码的 JS 解析识别

2022

JS 数组的 copyWithin()语法我看了好几遍才懂 Tips: 使用 CSS 逻辑属性简化我们的书写从今天开始，请叫我 Node 文本节点处理大师 JS 之我用单 img 元素实现了图像 resize 拉伸效果 Web 前端开发中的反向与倒序关于 list-style-type 项目符号你应该知道的事情告别 pointer-events:none 使用 HTML inert 属性真正禁用 2022 年新出了哪些 form 表单新特性？更符合书写习惯的 CSS 媒体查询 Range 语法介绍 2022 最期待且已正式支持的 CSS container 容器查询划词评论与 Range 开发若干经验分享巧用:is()或:where()伪类让 scoped 的 style 依然全局匹配聊聊:autofill 和 autocomplete 自动填充 gitee 上撸了个类似飞书 OKR 输入框的@提及项目来了，来了，CSS :has()伪类她来了 JS replaceAll 和 matchAll 使用指南不指北万物皆可 clip-path，纯 CSS 绘制 0-9 数字超酷！CSS font-palette 与彩色字体显示 CSS 排版为何强？瞧瞧多牛这换行如何继承自定义元素及其他 JS 中扩展新方法基于文字的 URL 锚点定位与::target-text 样式设置介绍一种 CSS 变量未定义语法也 OK 的小妙招如何实现页面刷新后不定位到之前的滚动位置？详解日后定会大规模使用的 CSS @layer 规则 CSS 必学基础：理解 CSS 中的级联规则 JS 与条形码的生成深入 JS new Function 语法小 tips: JS 字体加载失败或完毕的检测 CSS 实现滚动高度自动变小的粘滞效果使用 CSS size-adjust 和 unicode-range 改变任意文字尺寸 ascent-override descent-override line-gap-override 一锅端基于 howler.js 写了个音频播放器组件介绍 8 个和滚动相关的 CSS 属性 CSS accent-color 属性简介被低估的 border-image 属性 CSS overflow-clip-margin 属性简介 CSS :not()伪类选择器已支持复杂参数 HTML inputmode 与 iOS Android 软键盘类型测试 CSS background 背景图标的变色技巧纯 CSS 实现未读消息超过 100 自动显示为 99+还有完没完，怎么又来了个 scrollbar-gutter？

2021

JS 标签模板（Tagged templates）什么时候使用？深入 JS getRandomValues 和 Math.random 方法你不知道的 CSS media 查询与用户体验 flex-end 为什么 overflow 无法滚动及解决方法从 js visibilitychange Safari 下无效说开去密码强度效果最佳实现一定是 HTML meter 元素见多识广，介绍 Web 开发中 current 开头的一些 API 属性 JS 复制文字到剪切板的极简实现及扩展 CSS @counter-style 规则详细介绍 CSS content 新的替换元素规范行为解读兼容 IE 浏览器的图片局部高斯模糊实现 HTML slot 插槽元素深入借助 HTML ping 属性实现数据上报 APNG 在线制作、兼容、播放和暂停不使用 file 类型 input 也能触发文件上传关于《CSS 新世界》这本书 JS WeakMap 应该什么时候使用 polyfill、ponyfill、prollyfill 傻傻分不清楚 SVG 任意基本图形转 path 路径为什么 HTML <picture>元素很少见人使用？为什么 white-space:nowrap 可以让文字一行显示？ogv.js 让 iPhone 支持 webM 视频解析播放利用废弃的 html rel import 实现页面 include 功能借助 SVG 滤镜实现 CSS 无法实现的阴影和模糊效果 JS 判断图像背景颜色单一还是丰富纯 CSS 实现标题栏、表格头水平滚动垂直不滚动如何使用 CSS 禁止元素拖拽？666，看 hr 标签实现分隔线如何玩出花使用 CSS revert 全局关键字还原 display 显示元素输入框 value 属性赋值触发 js change 事件的实现 Promise.all、race 和 any 方法都是什么意思？Safari 不支持 build-in 自定义元素的兼容处理 JS 视频解码 JSMpeg 和 Broadway 开箱测评腾讯开源的酷炫动画播放解决方案 Vap 初体验分享下 input time 输入框的细节知识借助 ffmpeg.wasm 纯前端实现多音频和视频的合成 CSS line-height-step 属性简介使用 CSS text-combine-upright 实现字符的横向合并 CSS line-break 属性与中文标点换行 Chrome 88 已经支持 aspect-ratio 属性了，学起来好消息，CSS text-underline-offset 可以用起来了 CSS ::marker 伪元素简介盘点 HTML 字符串转 DOM 的各种方法及细节如何使用 JS 检测用户是否缩放了页面？直线等图形从中间穿过元素或文字的 CSS 实现了解 CSS revert 全局关键字 Web Components 中引入外部 CSS 的 3 种方法 water.css 项目简介使用 grid-area 等 Grid 布局属性轻松实现元素层叠效果巧用两个 type=range input 实现区域范围选择使用::part 伪元素改变 Shadow DOM 的 CSS 样式一行 CSS 实现全站中文简繁转换巧用 DOM API 实现 HTML 字符的转义和反转义告别 JS keyCode

2020

几个常见功能重合 DOM API 的细节差异纯 CSS 实现微信列表左滑显示按钮的交互效果原来 DOM 还有 toggleAttribute 这样的 JS API 尝试使用 JS IntersectionObserver 让标题和导航联动几行 CSS 让整站支持深色模式的探索与拓展突发奇想，同步单复选框 checked 态岂不点击通杀？HTML 中无标签文本的 CSS 变色技巧介绍一种全新的 clipPath Sprites 小图标技术细说 iOS Safari 下 focus 的行为图片加载失败后 CSS 样式处理最佳实践 ES6 模板字符串在 HTML 模板渲染中的应用如何让文字作为 CSS 背景图片显示？SVG feTurbulence 滤镜深入介绍 HTML enterkeyhint 设置 iOS/Android 键盘 enter 键快速学习 CSS Color Level 4 的色值新语法巧借 CSS var 变量实现任意的 CSS 自定义语法 Polyfill 吊炸天的 CSS attr()新语法 flex:0 flex:1 flex:none flex:auto 应该在什么场景下使用？研究了下 Houdini 中的 CSS Layout API 文字沿着不规则路径排版布局的实现 JS CustomEvent 自定义事件传参小技巧 CSS overflow-anchor 属性与滚动锚定颠覆，原来 background-image 也是支持 CSS 动画的 JS 纯前端实现 audio 音频剪裁剪切复制播放与上传深入理解 CSS background-blend-mode 的作用机制巧用 CSS cross-fade()实现背景图像半透明效果 CSS 变量对 JS 交互组件开发带来的提升与变革使用 CSS text-emphasis 对文字进行强调装饰移动端双指缩放图片 JS 事件的实践心得 CSS gap 属性进化史 SVG 任意图形 path 曲线路径的面积计算 CSS columns 轻松实现两端对齐布局效果快速了解 CSS display:flow-root 声明借助 CSS mask 遮罩显著优化 PNG 图片的尺寸 CSS conic-gradient()锥形渐变简介 ES6 Math 方法和 Number 新特性简介了解 CSS min()/max()/clamp()数学函数 CSS 技术分享: 文字在圆形内沿着弧线边界排版 AVIF 图片格式简介 CSS text-decoration 实现宽度 100%波浪线效果 CSS overflow-wrap 新属性值 anywhere 是干嘛用的？关于 CSS emoji 字体和 OpenType-SVG 我所知道的一些事检测 DOM 尺寸变化 JS API ResizeObserver 简介深入理解 position sticky 粘性定位的计算规则 3D LUT 滤镜颜色映射原理剖析与 JS 实现我是如何通过 CSS 向 JS 传参的 HTML 全局属性列表大全如何使用 JS 把相对地址变成绝对地址？CSS any-hover any-pointer media 查询与交互体验提升 CSS grid-auto-flow 深入理解 CSS overscroll-behavior 让滚动嵌套时父滚动不触发 CSS inherit 是继承，那 initial 和 unset 呢？CSS paint-order 祝大家元旦快乐