Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 173 followers
Latest posts
Last updated 14 days ago
JS原生的深拷贝API structuredClone函数简介
14 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11509 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、开门即见山 目前，Web浏览器提供了原生的Object对象深度克隆方法structuredClone()函数。 使用方法很简单，JS代码如下所示： // 创建一个具有值和循环引用的对象 const original...
如何手搓SVG半圆弧，手把手教程
22 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11545 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、还是先说说历史 SVG的曲线绘制在10多年前，我其实有撰文介绍过，也算是当时的热门文章了，见：“深度掌握SVG路径path的贝塞尔曲线指令”。 其中就有提到圆弧指令的绘制语法，不过这篇文章主要是讲贝塞尔曲线的，因此，圆弧指令并未多做介绍。 然后，最近遇到了一个需求，如下图所示，实现下图所示的渲染效果： 由于其中有个动态尺寸的圆环，用来表示走过的百分比进度，因此，这里使用静态的图片是不合适的，而那个动态圆环本身就是需要使用SVG实现的（一是因为端点是圆角，二是因为有路径动画），既然都A了，那B岂不就可以顺便也实现下。 因此，最终决定，总计4个圆环全部都手搓。 而手搓SVG圆环的指令是M…A…组合，具体语法如下：...
Broadcast Channel API简介，可实现Web页面广播通信
24 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11507 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、之前postMessage的局限 在12年的时候，乖乖，12年啊，都十几年前了，我有写过关于postMessage的跨页面通信的文章，见这里。 结果这么多年下来，在生产环境使用上述postMessage通信的机会屈指可数，这种跨页面通信平常的交互式页面是鲜有机会接触的。 然后，现在有多了个Broadcast Channel API，也是实现页面见通信的。 和十多年前的这个通信区别在于，这个是广播式的，而非点对点。...
一个新的CSS媒体查询prefers-reduced-transparency
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11505 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、为故而知新 三年前，我有介绍过渐弱动画的媒体查询prefers-reduced-motion，参见文章“你不知道的CSS media查询与用户体验”的第5小节。 使用示意： @media (prefers-reduced-motion: reduce)...
HTML select下拉框支持hr元素啦
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11503 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、hr元素与下拉分隔线 在过去，<select>下拉元素的子元素，只能是<option>和<optgroup>（下拉选项分组）元素。 而现在，<select>又多支持了一个元素，为<hr>元素。 可以在下拉选项中创建分隔线。 例如： <select is="ui-select">...
如何使用JS获取系统内存、CPU/GPU、电量等信息
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11498 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 目前，浏览器是有能力获取系统的一些信息的，包括内存大小，CPU/GPU、电量等。 一、JS获取内存大小 很简单，下面一行代码即可： navigator.deviceMemory 例如在我的Chrome浏览器控制台的输出结果就是： deviceMemory的兼容性如下截图所示，目前仅Chrome浏览器支持。 二、JavaScript...
全新的CSS相对颜色语法-使用from和calc()
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11455 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 无论是rgb()颜色函数，还是hsl()颜色函数，现在还支持一种使用from关键字的相对语法，可以基于现有的色值设置相似色或互补色。 特别适合用在hover等交互效果的实现上。 一、相对语法本质是解构 先来学习下语法，这语法看起来花里胡哨，其实很简单，一学就会。 例如，设置一个文字颜色为红色： p {...
英文单词朗读基于音素预估时长的JS算法
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11473 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 本文属于工作技术实践经验分享。 一、先说下需求背景 目前TTS语音合成技术非常成熟，再配合一些静态图片，就能轻松合成一个MP4视频。 但有个问题，字幕。 为了节约成本，一个TTS语音包含的文字往往会有上百字，不可能全部一股脑作为字幕显示，需要进行分词，有一种简单的分词方法就是在逗号等标点位置进行分割。 如下图所示： 然后播放到对应时间，显示对应的字幕，就像下面这样：...
哇哦，font-palette支持动画和palette-mix()混合函数了
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11447 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、温故而知新 在学习本文内容之前，大家有必要先了解彩色字体与font-palette属性，见此文：“超酷！CSS font-palette与彩色字体显示” 不然，本文的这些内容学习起来会比较吃力。 什么内容呢？ 介绍font-palette属性两个全新的特性，支持animation和palette-mix()函数。 其兼容性如下：...
CSS好用的color-mix颜色函数也可以使用啦
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11449 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、突然发现，浏览器全支持啦 color-mix()颜色函数去年年初其实我就介绍过了，不过只是简单提了一嘴，见“是时候介绍这几个全新的CSS颜色函数了”一文。 然后，最近发现，这个颜色函数所有现代浏览器都已经支持啦，看看看，绿油油一片大好。 是时候好好介绍这个我认为还挺实用的颜色函数。 二、白加黑的颜色是？ 先通过一个简单的案例预热下对color-mix()颜色函数的认知。 canvas...
CSS Grid布局中的subgrid的适用场景
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11437 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 一、subgrid若干常识性知识 subgrid表示子网格，这个东西不是和Grid布局一起出来的，要滞后数年（CSS Grid Level2的内容），其兼容性么……对外的项目还要等个一两年，如果是内部的中台项目，则可以尝鲜了。 subgrid并不是一个CSS属性，而是 grid-template-columns和grid-template-rows属性支持的关键字，其使用的场景需要外面已经有个Grid布局，否则……嗯，虽然语法上不会识别为异常，但是渲染结果上却是没有区别的。 例如：...
JS文本选区变化selectionchange事件实践小记
3 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11430 本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。 2年前有个中台文档产品有个划词评论的功能，那时候还写了篇文章介绍了相关的技术实现，参见：“划词评论与Range开发若干经验分享” 一直运行的好好的。 突然，就在最近，老板提了一嘴，这手机上怎么没法划词评论。 好了，需求就来了。 当时手机上内置的复制、翻译等tips等与划词评论小按钮会有冲突，以及开发成本等原因（台式机模拟touch长按有些麻烦），就没做。 简单研究了下，事件是通用的，就是selectionchange事件。 一、关于selectionchange事件...