来自 Burke Holland 和 Sarah Drasner 的巧妙微型网站，突出了 VS Code 一些最酷的功能。所有 15 个都非常酷。以下是一些我见过人们使用/喜欢的其他引人注目的功能

• 那里有一个终端，所以您不需要单独的应用程序。
• 该GitLens 加载项，它显示谁上次更新了代码库中的任何代码行以及何时更新。
• Vim 发烧友也没有被遗忘。
• 实时共享即将推出。
• Solis 似乎是一个非常酷的实时预览加载项。
• 类型检查

就我个人而言，我仍然使用 Sublime。我去年尝试过 VS Code，但失败了。我现在甚至不记得为什么了，这意味着可能该再次尝试了。如果速度慢，可能是因为我使用了太多加载项。

来自Incapsula 的这些免费培训课程为您提供了加速网站和优化内容交付的技术知识和技能。网站性能掌握从这里开始，以一种有趣的、基于测验的在线格式，这些免费培训课程为您提供了加速网站和优化内容交付的技术知识和技能。

您的网站准备好应对 DDoS 攻击了吗？在此处了解。

继续阅读 →

Heydon Pickering 探讨了如何在 React 组件中根据其上下文赋予其特定标题（例如<h1></h1>、<h2></h2> 等），从而确保 DOM 仍然对屏幕阅读器完全可访问。但是，为什么使用正确的标题很重要呢？Heydon 在引言中写道

有一件事在我研究、测试以及与同事和朋友的日常交谈中不断出现，那就是标题的重要性。对于屏幕阅读器用户，标题描述了各个部分和子部分之间的关系，并且在正确使用时，提供了大纲和导航方式。标题是基础设施。

继续阅读 →

Roel Nieskens 发布了一个工具，允许您上传字体文件并查看其内部内容，从包含多少个字符到支持多少种语言。以下是您上传字体后看到的内容，在本例中为 Covik Sans Mono Black

为什么这些数据有用？好吧，就在前几天，我在一个随机的 Dropbox 文件夹中找到了一个字体文件时使用了此工具。此字体具有哪些 OpenType 功能？除了罗马字母之外，里面还有其他字形吗？Wakamai Fondue 立即回答了我的这些问题。

Jonathan Snook 谈到了为<progress> 元素制作动画的复杂性。如果您不熟悉，那就是生成条形图状视觉效果的元素，该视觉效果指示两个值之间的位置

Jonathan 的帖子展示了一种使用 CSS 和少量 JavaScript 为进度值的变化制作动画的方法，同时确保它在每个现代浏览器中都能正确地进行动画处理。他制作的演示看起来非常整洁。我相信这将是我反复访问的帖子之一。

我们最近分享了 Dave Rupert 发布的一篇帖子，该帖子采用了 SVG 方法。Jeremias Menichelli 也有另一种方法，创建环形并将其转换为 React 组件。

我知道愚人节是在这个月的月初，但是，嘿，现在您有一年的时间来准备。更不用说随时都可以开个好玩的恶作剧。

关于这些内容的公平警告……您必须有品位。把别人的订书机放在果冻里非常搞笑，除非它以某种方式是传家宝，或者这个人已经成为办公室恶作剧的目标太多次，以至于不再好笑了。做好事。玩得开心。

setTimeout(function() {
  var text = new SpeechSynthesisUtterance("LOLOLOLOLOLOLOLOL"); 
  speechSynthesis.speak(text);
}, 600000);

CSS-in-JS 领域的新成员！看起来这个想法是为每个组件编写一个单独的 CSS 文件。您必须在组件中工作，这就是整个工作方式。与styled-components、css-modules 和glamorous 在同一领域。

然后您编写:scope { }，这是该组件的基本样式。我想这意味着您不必选择名称！但也意味着您被锁定（几乎任何样式处理设置都是如此）。

然后 CSS 和组件都将被编译，并可能与其合作伙伴工具OptiCSS 一起进行优化。最终结果是超级优化的样式。由于它是“模板感知的”，因此样式可以比任何尝试孤立优化 CSS 的系统更优化。

Chris Eppstein:

使用 CSS 块，以及以 OptiCSS 为核心运行，您可以编写符合人体工程学的 CSS，并让构建过程负责使您的样式表正确地进行范围限定、快速且非常小。

速度、样式范围以及从不/很少有未使用的 CSS 绝对对我来说是最大的好处。迁移到它并非易事，但听起来对于许多大型网站和新网站来说可能是值得的。

一些要探索的设置存储库，以了解它的工作原理：css-blocks-webpack-3 和css-blocks-hello-world。

使用 Bugsnag 自动检测和诊断影响用户的 JavaScript 错误，而无需更改代码或添加 try/catch 块。获取全面的诊断报告，立即了解哪些错误值得修复，并与传统工具相比，在更短的时间内进行调试。

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

Bugsnag 被全球顶尖工程团队使用，包括 Airbnb、Lyft、Square、Yelp、Eventbrite、Shopify、MailChimp 和 Docker。立即开始免费试用。

继续阅读 →

Una Kravets 展示了如何使用 CSS 网格创建布局，并为尚不支持这些网格属性的浏览器提供弹性盒回退。Una 写道

CSS 网格太棒了！但是，如果您需要支持 IE11 及更低版本或 Edge 15 及更低版本的用户的，网格将无法按预期工作……此网站为您提供了解决方案，以便您可以开始渐进增强而无需担心！

继续阅读 →

这是一篇关于滚动条的当前状态以及如何在跨操作系统和浏览器控制其行为的有趣文章。这篇文章还突出了一些我之前不知道的东西，例如Element.scrollIntoView() 和scroll-behavior CSS 属性。

不过，我最喜欢的部分是什么？一定是这段

在现代网络中，过度依赖自定义 JavaScript 来为所有客户端实现相同行为不再合理：“跨浏览器兼容性”的整个理念正在成为过去，越来越多的 CSS 属性和 DOM API 方法正在进入标准浏览器实现中。

我们认为，渐进增强是在 Web 项目中实现非平凡滚动时应遵循的最佳方法。

确保您可以提供尽可能好的最小但普遍支持的 UX，然后牢记现代浏览器功能进行改进。

说到滚动条的跨浏览器行为，Louis Hoebregts 也有一个新的帖子，其中指出浏览器在处理vw 单位时不包含滚动条，并且他提供了一种使用 CSS 自定义属性处理它的好方法。