有时需要 35 秒才能真正理解一个概念。Mikael Ainalem 在这里提供了这一点，以防您还没有完全理解基于路径的 CSS 属性（如 clip-path 和 shape-outside）背后的概念。

继续阅读 →

自动检测和诊断影响用户 JavaScript 错误使用 Bugsnag。获取全面的诊断报告，立即了解哪些错误值得修复，并在更短的时间内进行调试。

Bugsnag 检测每个错误，并优先处理对用户影响最大的错误。支持 50 多个平台，并与团队已使用的开发和生产力工具集成。

Bugsnag 被 Airbnb、Slack、Pinterest、Lyft、Square、Yelp、Shopify、Docker 和 Cisco 等世界顶级工程团队使用。立即开始免费试用。

TIL 关于 HLS 视频格式

HLS 代表 HTTP Live Streaming。它是由 Apple 开发的一种自适应比特率流协议。在任何派对上随意说出这句话。啊，回到正题：HLS 允许您指定一个播放列表，其中包含不同分辨率的多个视频源。根据可用带宽，可以切换这些视频源并允许自适应播放。

这是一个有趣的旅程，Kitchen Stories 背后的工程团队希望从 Vimeo 播放器 (160 kB) 切换出去，但仍使用 Vimeo 作为视频托管，因为它们通过 Pro 计划提供直接视频链接。相反，他们使用原生 <video> 元素、一个用于处理 HLS 的库和一个包装器元素来给他们一点额外的 UX。

这些视频内容很难跟上！还有另一种名为 AV1 的新格式，显然很重要，因为 YouTube 和 Netflix 都在采用它。Andrey Sitnik 在这里写道

即使 AV1 编解码器仍被认为是实验性的，您也可以利用其高质量、低比特率的功能来满足相当一部分网络受众（使用最新版 Chrome 和 Firefox 的用户）。当然，您不希望让其他浏览器的用户无法使用，但 <video> 和 <source> 标签的属性使实现此逻辑变得容易，并且在纯 HTML 中，您无需使用 JavaScript 来检测用户代理。

这甚至没有提到 HLS，但我认为这是因为 HSL 是一种流协议，它仍然需要以某种格式进行流式传输。

我不会说术语“CSS 算法”已经得到广泛使用，但我觉得 Lara Schenck 可能发现了什么。她定义它为

产生特定样式输出的明确声明或声明集

因此，CSS 算法并不是一个真正组件，其中存在一些父元素及其内部所需内容，但 CSS 算法可以涉及组件。CSS 算法不仅仅是一些棘手的键/值对或计算输出——但它当然可能包含这些内容。

我理解的是，它们是小型的迷你系统。在最近的一篇文章中，她描述了一种基本上涉及两个固定标题栏的情况，并且需要在不同情况下处理它们。在此示例中，页面可以处于不同的状态（例如，登录状态具有 position: fixed; 栏），这不仅会影响标题，还会影响内容区域。将所有这些内容放在一起处理就是 CSS 算法。这可能是我们所有人已经在 CSS 中的工作方式，但现在有一个术语来描述它。此特定示例涉及一些 CSS 自定义属性、基于状态的类、两个选择器和媒体查询。经典的前端开发人员内容。

继续阅读 →

我肯定犯过将网络渲染视为双马拉松的错误。有服务器端渲染 (SSR，就像此 WordPress 站点正在执行的那样) 和客户端渲染 (CSR，就像典型的 React 应用程序一样)。两者都充满了优点和缺点。但是，当然，对话更微妙。仅仅因为一个应用程序是 SSR 并不意味着它不执行动态 JavaScript 驱动的操作。仅仅因为一个应用程序是 CSR 并不意味着它根本不能利用任何 SSR。

这是一个频谱！Jason Miller 和 Addy Osmani 在网络渲染中很好地描绘了这幅图。

我最喜欢的文章部分是他们在文章末尾发布的信息图表表格。不幸的是，它是一个 PNG。因此，我花了几分钟时间并将其<table></table>化，以防对任何人有用。

继续阅读 →

我们最近写了很多关于重构 CSS 的内容，从如何采取缓慢而有条理的方法到获得一些快速胜利。因此，我一直在阅读大量关于此主题的内容，并且不知何故偶然发现了 Harry Roberts 关于重构以及如何降低其带来的潜在风险的这篇文章

重构可能令人恐惧。在足够大或遗留的应用程序上，代码库中可能存在如此多的根本错误，以至于许多重构任务将在整个项目中运行得很深。这对开发人员施加了很大的压力，尤其是在考虑到这是他们“这次做对”的机会时。这可能会让人感到虚弱：“我从哪里开始？”“这需要多长时间？”“我如何知道我是否做对了？”

继续阅读 →

我永远不会告诉你，在 CSS（或某些语法预处理器）中编写 CSS 是一个坏主意。我认为您无需任何工具即可获得完美的生产力和性能。但是，我也认为在 JavaScript 中编写 CSS 是一个好主意，**适用于在任何情况下都使用 JavaScript 构建所有组件的代码库中的基于组件的样式。**

在这篇文章中，Max Stoiber 重点关注为什么要在 JavaScript 中编写 CSS，而不是如何编写 CSS。有一个原因与我产生了强烈的共鸣，那就是**自信**。这就是样式自信对我来说的意义。

JavaScript 中的 CSS 并不是解决这些问题的唯一答案，但正如 Max 与主题的其他文章相关联的那样，它可以导致自然发生良好选择的情况。

继续阅读 →

我喜欢 Adam Laki 的快速提示：CSS 三角形，因为它涵盖了前端技术中无处不在的事实：总是多种方法可以做同样的事情。在这种情况下，绘制三角形可以通过以下方式完成

• 使用 border 和折叠的元素
• 使用 clip-path: polygon()
• 使用 transform: rotate() 和 overflow: hidden
• 使用像 ▼ 这样的字形

我想说，多年来我通常使用最多的绘制三角形的方法是使用边框技巧，但我认为我现在最喜欢的方法是使用 clip-path。像这样的代码对我来说相当清晰、易懂且易于维护：clip-path: polygon(50% 0, 0 100%, 100% 100%); 大脑：中间顶部！底部右侧！底部左侧！三角形！

我的第二种方法是使用 Adam 列表中未列出的选项：内联 <svg>！这种方法几乎同样友好：<polygon points="0,0 100,0 50,100"/>。

CSS 重置已经有 15 年的历史了。事实上，“重置”并不是一个合适的词。Tantek Çelik 在 2004 年的尝试被称为“undohtml.css”，直到几年后 Eric Meyer 将他的版本称为重置，这个词才成为默认术语。当Normalize出现时，它称自己为重置的替代方案，这感觉是对的，因为它不是试图消除所有样式，而是将浏览器在其用户代理样式表中提供的基本样式统一起来。

我们之前在重启、重置和推理中对这段历史进行了回顾。对这每一项——让我们称之为“基本”样式表——都有稍微不同的角度。它试图保留多少UA默认值？它变得多么武断？它考虑了多远的浏览器支持？

随之而来的是CSS Remedy（他们说它还没有准备好使用），它采用了另一种不同的方法

将 CSS 属性或值设置为如果 CSSWG 从头开始创建 CSS，并且不必担心向后兼容性时的值。

继续阅读 →

Keen 是一款分析工具，可以非常轻松地收集数据。但 Keen 的独特之处在于，它不仅旨在帮助您查看这些数据，还旨在与您自己的客户共享这些数据！也就是说，面向客户的指标。

Keen 的工作方式正是您希望的那样：超级易于安装，拥有出色的文档，可以非常轻松地自定义以收集您需要的确切内容，并且至关重要的是，查询它并获取构建所需可视化效果的数据也同样容易。正如您所知：您只会改进您衡量的内容，而您衡量的内容对您的业务和您的客户来说是独一无二的。

这不会让您的大脑稍微兴奋一点吗？您的客户可能希望看到与您的应用程序相关的哪些指标？他们可能为哪些功能付费？

继续阅读 →