雨浣潇湘

前段时间在做富文本编辑器的暗黑模式适配时，遇到了一个有趣的问题：如何优雅地处理第三方 HTML 内容的颜色转换？ 这个问题在很多场景下都会遇到： 富文本编辑器：用户粘贴进来的 HTML 内容 邮件客户端：展示收到的邮件 Markdown 渲染器：渲染用户输入的 HTML 内容聚合平台：展示来自不同来源的文章 这些场景的共同特点是：内容不可控。你不知道用户会粘贴什么样的 HTML，也不知道... 阅读全文…

最近用 AI 实现了一个 Dota2 队长模式 BP 模拟器的前端项目。整个过程中，很明显能发现提示词的质量直接决定了生成代码的可用性，一个模糊的需求可能需要反复修改十几次，而一个精确的提示词往往能一次性生成 90% 可用的代码。结合这次实践，分享一些心得，抛砖引玉。 AI 生成代码的常见问题在开始分享经验之前，先看看 AI 生成代码常见的几类问题： 1. 需求理解偏差场景： “帮我实现一个... 阅读全文…

性能在前端领域的重要性已经是老生常谈了，比如早在 2012 年，亚马逊就发布过一个研究结果：页面加载速度一旦下降一秒，每年就会损失 16 亿美元的销售额。那这个一秒又是怎么统计的呢？ 同样是在 2012 年， Web 性能工作组针对页面加载场景制定了一个加载过程模型，用来衡量页面加载各个阶段的耗时情况，相信这张图大家应该都见过： ... 阅读全文…

闲逛发现 nginx 官网 多了一行字： “Support for HTTP/3.”，距离第一次体验 HTTP3 已经过去了 4 年，4 年前，我们体验 HTTP3 是用 Cloudflare 提供的 quiche 这个库来实现的，如今，nginx 终于通过这个 ngx_http_v3_module 提供了官方支持。 SSL 库方面，最流行的 OpenSSL 决定自己实现 QUIC 支持，按... 阅读全文…

提到显示器，很多同学第一时间想到的可能是分辨率（2K、4K）、尺寸（24、27、32）、面板（IPS、TN、LED）等，常玩游戏的同学可能还会想到刷新率、响应时间等参数。不过色域却常常被大家所忽视，其实色域是一个特别直接的影响视觉体验的参数。 色域是什么？维基百科给的概念是这样的： 色域是对一种颜色进行编码的方法，也指一个技术系统能够产生的颜色的总合。 顶级显示器制造商艺卓是这样解释的：... 阅读全文…

本来是写给同事的一个攻略，感觉可能有同学会用得上，在这里也分享一下。 文中的『车程』不包含游览时间 南山-天涯海角-椰梦长廊-鹿回头-太阳湾（单程 75 公里，车程约 2 小时）路线总览 路线1总览 ... 阅读全文…

去年这个时候，曾经写过一篇文章 Polyfill 的前世今生，总结了常见的 polyfill 方案。受限于当时的认知以及 Babel 版本，有很多疏漏，觉得有必要更新一篇目前（2020.03） polyfill 的一些进展。 core-js@3在我写下上一篇文章之后两周，2019.03.19，Babel@7.4.0 正式发布了。在 Babel@7.4.0 中，提供了对管道运算符、私有方法、T... 阅读全文…

自从去年末在苹果店里看到了 UltraFine 5K 之后，就觉得自己的 AOC U2790VQ 一点都不香了，但是9948的价格哪怕是24期免息也只能告辞。 UltraFine 4K 看起来倒是很合适，但是用惯了27寸，总觉得24寸的屏幕实在太小。看来看去，3000-5000 的价位只剩下3款备选：DELL U2718Q、BenQ PD2700U、LG 27UL850，对比了很久，还是觉得... 阅读全文…

本文所用环境：操作系统： Linux September 5.3.11-1.el7.elrepo.x86_64 GNU/Linux内核版本： centos-release-7-7.1908.0.el7.centos.x86_64 HTTP3目前，最新版本的 nginx （1.17.5） 仍然不能原生支持 HTTP3，好在 CloudFlare 提供了基于 Quiche 和 Borings... 阅读全文…

为了提升页面加载性能，改善用户体验，我们希望我们的静态资源能够长期缓存在用户的浏览器中，为此，我们通常会给静态资源设置一个较长的 max-age ，而在资源内容有更新时，则生成一个名字不同的新文件，以便用户能够及时收到最新的内容。 我们都知道， HTTP 缓存可以分为强缓存和协商缓存，根据我们的配置，强缓存过期后，浏览器会向服务器发出一个校验请求，如果服务器判断资源没有更新过，则通知浏览器使... 阅读全文…