我们有视窗单位（例如 vw、vh、vmin、vmax），而且它们大多很棒。 始终可以使用一个相对于整个屏幕的单位很酷。 但是当你问人们他们想要修复 CSS 中的什么时，视窗单位 始终在列表中。 问题是人们用它们来做一些事情，比如在移动设备上将重要按钮定位在屏幕底部。 如果以错误的方式执行此操作，可能会花费你 800 万美元。

继续阅读 →

Donnie D’Amato 构建了一个围绕论点 的网站，即“数字设计师仍然期望使用网格，而经验丰富的版面工程师已经超越了它。” 这个想法不是我们永远不应该字面意义上地使用 display: grid;，而是严格遵守整个页面网格并不是必需的。 Brad 的反应很有趣，因为他是比我参与更多项目的人

与设计师之间最常见、最令人困惑的对话之一是“不，覆盖设计草图的粉红色线条对于事物在浏览器中的实际工作方式并没有那么有用。”

[…] 将你透明的粉红色 12 列网格扔进垃圾桶。

Brad Frost，“指向 gridless.desgn 的链接帖子”

Donnie 认为这一切都符合响应式设计的精神，我倾向于同意，只是浏览器技术自从响应式设计诞生以来已经发展了很多，现在可能是 称之为新事物 的时候了。“内容驱动设计”是 Donnie 的标题之一，这是一个不错的短语。

这一切也引起了 Michelle 的共鸣

像 flexbox 和 Grid 这样的 CSS 布局功能使我们能够构建更灵活的布局，这些布局优先考虑内容。 我们谈论 CSS 中的内在和外在大小 - 基于内容和上下文的大小。 有望的容器查询规范将赋予开发者更多权力。 但对我来说，感觉设计过程仍然停留在过去。

Michelle Barker，“是时候抛弃设计网格了吗？”

当 容器查询真正到来时，整个页面布局将真正成为濒危物种。 Donnie 知道

[…] 在使用 [浏览器窗口大小] 断点之前，你应该真正考虑所有其他选项。 问一下，该组件是否预期始终与页面大小相关（标题、模态等）？ 然后断点可能是可以接受的。 但是，放置在页面深处的组件不应使用断点来告知其布局。

任何使用 GitHub 进行关键应用程序的公司都需要一个可以在需要时快速恢复的备份。 网络攻击、人为错误或强制推送只是可能导致 GitHub 数据丢失的一些场景。 在紧急情况下，你不能浪费时间询问哪个开发人员拥有最新版本的代码。 你需要恢复你的代码，而且你需要立即恢复。

继续阅读 →

看起来 差不多 9 年前，Airbnb 首次发布了他们的 JavaScript 样式指南。 在 GitHub 上获得 112k 个星后，它似乎成为了 Babel / ES Lint 的事实上的 预设。 但它并不是唯一一家拥有公开 ES Lint 设置的公司。 Katy 最近 分享 了 Mapbox 的设置。

ESLint 插件将有助于保持你的代码一致并提高代码质量，但它们也是极好的教学工具。 当我遇到一个插件时，我会很高兴地阅读每个规则，以了解启用或禁用它的好处。

Katy DeCorah，“共享的 ESLint 配置”

在编写时进行复杂的代码 linting 是那些多年来真正提升了开发游戏的事情之一。

对那些新的 GitHub 社交媒体图片的解释

[…] 我们的自定义 Open Graph 图片服务是一个小型的 Node.js 应用程序，它使用 GitHub GraphQL API 收集数据，从模板生成一些 HTML，并将它管道到 Puppeteer 以“截取”该 HTML 的屏幕截图。

Jason Etcovich 在 GitHub 博客上发表的 “构建 Open Graph 图片的框架”

从 HTML 和 CSS 生成模板化图片真的很令人满意。 这是制作社交媒体图片的完美方法。 如果你像 GitHub 一样大规模地这样做，这里有一些很好的技巧可以加快速度。

继续阅读 →

Hemanth HM 非常简洁地展示了 ES2021 功能。 真是太快了，我们还记得 ES2015，现在已经过去了五年半了。

有一些新功能，比如“在数字中随意添加下划线”。 我很喜欢。 就像 1_000_000_000 与 1000000000 相同，但更易读。 说实话，我几乎不理解其他功能。

有趣的是，观察 JavaScript 卡车向前发展新功能，同时也在那些经常编写 Go 的人周围，在我看来，从哲学上讲，它有多么截然不同。 就像 Go 中只有一种循环，一个 for 循环，就是这样，而 JavaScript 有很多 - 四种 仅用于数组！ Go 故意不添加语法糖，而 JavaScript 似乎沉迷于它。 糖是一种可怕的毒品。

 Joshua Comeau 深入 了 styled-components 的工作原理，方法是重新构建基本原理。 一段有趣且有用的旅程。

styled-components 似乎是 React 中 CSS 市场的最大玩家。 尽管身处那个世界，但我还没有被它完全说服。 我是基础的忠实粉丝：通过唯一的类名来实现范围样式。 我还喜欢它与热模块重新加载一起工作，因为它完全发生在 JavaScript 中。 但我通过 css-modules 获得了这些，并且我喜欢通过 css-modules 获得的文件分离和 Sass 支持。 不过，我开始接受一些事情（一点）。

• 即使使用 css-modules，你仍然需要考虑名称。 即使它仅仅是 .root 或任何其他东西。 使用 styled-components，你将样式直接附加到组件，并且不需要真正命名任何东西。
• 使用 css-modules，你仅将样式直接应用于 HTML 元素。 使用 styled-components，你可以将样式应用于自定义组件，它将通过在稍后传播 props 来将样式附加。
• 由于样式实际上位于 JavaScript 文件中，因此你可以使用 JavaScript 内容 - 三元运算符、属性访问、高级数学等。

也许 我喜爱 Astro 的头号原因是，它将 JavaScript 组件创作体验带到了 Static Site Generator 世界，而无需任何 JavaScript（除了你明确选择加入的那些部分）。 这种以 HTML 为首的策略也是我喜欢 Eleventy 的原因。 只是，Eleventy 虽然很棒，但我更喜欢使用更现代的组件和更现代的模板。 另外，我喜欢 Astro 组件中触手可及的构建时 JavaScript 访问权限。

但是，如果 Eleventy 也提供 JavaScript 模板呢？ 它确实提供了一些 - 有一个插件 eleventy-plugin-vue（官方），它看起来正在朝着那个方向发展。 但是，这是 Ben Holmes 对它的另一种看法：Slinkity。 我将引用要点

• 🚀 解锁组件框架（React、Vue 和 Svelte）用于编写页面模板和布局模板。 因此，你可以将现有的 .html 或 .liquid 文件转换为 .jsx 文件，并立即开始使用 React 构建网站上的路由。
• 🔖 包含强大的简码 将组件插入现有页面。 将类似于此的行添加到你的 Markdown、HTML、Nunjucks 等，然后见证奇迹发生：{% react './path/to/component.jsx' %}
• 💧 在客户端上水合这些组件驱动的页面。 换句话说，所有你的 动态状态管理 将在开发和生产中发挥作用，无需额外设置。
• 🔗 （可选）将你的网站变成一个单页面应用程序。 这为动画页面转换、页面间持久状态以及更多功能打开了大门！

它似乎将 Astro 的氛围带到了 Eleventy。 它甚至使用 Snowpack，这是 Astro 团队的构建工具。

Dave:

petite-vue 是 Vue 项目的一个新的分支，专门为渐进增强而构建。 在 5kb 时，petite-vue 是一个轻量级的 Alpine（或 jQuery）替代方案，可以“撒在”你的项目上，无需额外的捆绑步骤或构建过程。 添加一个 <script> 标签，设置一个 v-scope，然后你就可以开始使用了。 这是我的菜。

我们许多人仍然喜欢 jQuery，但不喜欢事物会变得多么脆弱，完全将交互式功能和 HTML 分开。“关注点分离”在当时感觉是对的，但最终过于教条。 像 JSX 这样的创作语言一开始感觉不对，现在感觉相当正确，许多 JavaScript 模板也已经跟进。 但是，往往需要使用重量级框架。 无框架方法开始出现，比如 Alpine.js，它允许我们将交互式技术直接撒入 HTML 中。 Vue 一直以来都可以撒入，在一定程度上，但现在使用 petite-vue 变得更厉害了。

这是一篇来自 2015 年的非常棒的旧帖子，介绍了设计的九种状态，以及我们在构建界面时如何考虑所有边缘情况。 Vince Speelman 写道

继续阅读 →