Observable
阅读评论
Observable 几周前发布了。据我了解，它有点像 CodePen 和 Medium 的混合体，你可以在其中创建“笔记本”来探索数据，制作漂亮的可视化效果。
来自网络各处我们正在阅读并有一些想法的内容。有我们应该知道的链接吗？告诉我们！
CSS 网格布局模块第 2 级
阅读评论
CSS 网格的第二次迭代已经在进行中，公共编辑器草案于上周发布！虽然它绝不是最终的 W3C 建议，但这份草案是围绕许多我们自第一级发布以来一直希望看到的重大概念展开讨论的开始，包括子网格
在某些情况下，可能需要多个网格项的内容彼此对齐。本身也是网格项的网格容器可以将其行和列的定义推迟到其父网格容器，使其成为一个子网格。在这种情况下，子网格的网格项参与父网格容器的网格大小调整，允许两个网格的内容对齐。
2018 年 Web 动画研讨会日期公布
阅读评论
“我涨工资了！”
这是我去年最喜欢的来自Web 动画研讨会的引言，当时我和 Val 涵盖了性能、工具和为 SVG、CSS、JS 和 React 创建动画。
现在我们正在为 2018 年的另一轮 Web 动画研讨会做准备！但这次我们只提供两个研讨会，因为我们两人都已不再从事全职咨询工作。
Stimulus
阅读评论
一个用于您已有的 HTML 的适度 JavaScript 框架。
这将吸引任何对需要 JavaScript 生成 HTML 感到不安，但又希望使用现代框架来解决现代问题（如状态管理）的人。
我想知道这是否会成为 WordPress 或 CraftCMS 主题等东西的一个好答案，这些主题设计为服务器端，但像任何网站一样，都可以从客户端 JavaScript 增强中获益。Stimulus 并不是真正为处理SPA而构建的，而是与Turbolinks配对。这样，您仍然可以使用 JavaScript 替换页面内容，但所有路由和 HTML 生成都在服务器端进行。有点像老派与新派的结合。
PixelSnap
Web 驱动的增强现实：动手教程
阅读评论
Uri Shaked 从 Google 的 Project Tango 的早期开始到最近 Mozilla 的A-Frame实验，撰写了他关于 Web 上的 AR 之旅的文章。前端开发人员可能会对 A-Frame 感兴趣，因为它使用的方式——它是一种类似于 HTML 的声明式语言！我特别喜欢 Uri 描述第一次尝试 AR 时感受的这一部分
能够在真实空间中放置虚拟物体，即使你四处走动也能让它们保持在原位，在我看来，我们正在进入恐怖谷，物理世界与游戏之间的界限开始变得模糊。这是我第一次体验 AR，无需标记或特殊道具——它开箱即用，无处不在。
在浏览器中素描
阅读评论
Mark Dalgleish 详细介绍了他在seek 的团队如何尝试构建一个 React 组件库，然后将其转换为 Sketch 文档。但这为什么重要呢？好吧，Mark 这样描述了他的团队面临的问题
…大多数设计系统仍然存在一个根本缺陷。设计师和开发人员继续在完全不同的媒介中工作。因此，如果没有持续的手动努力来保持它们同步，我们的代码和设计资产将不断地越走越远。
对于使用设计系统的公司来说，我们的行业似乎仍然停留在设计工具上，这些工具本质上是为错误的媒介构建的——完全无法将我们的开发工作反馈到下一轮设计中。
然后，Mark 描述了他的团队如何继续开源html-sketchapp-cli，这是一个用于将 HTML 文档转换为 Sketch 组件的命令行工具。其想法是，这最终将使每个人不必有效地将样式从 React 组件复制粘贴回 Sketch，反之亦然。
看起来这是对 React 到 Sketch 的第二次重大尝试。上一次流行的是 Airbnb 的React Sketch.app。我们通常认为设计工具的最终结果是代码，因此看到人们在反方向移动中找到新的价值，这令人着迷。
使用 CSS 网格布局重新创建 GitHub 贡献图
阅读评论
Ire Aderinokun 着手构建 GitHub 贡献图——即带有许多绿色方块的表格，指示您对项目的贡献程度——使用 CSS 网格
正如我使用 CSS 网格布局时总是会发现的那样，我最终得到的 CSS 比使用几乎任何其他方法都要少得多。在本例中，我的 CSS 中与布局相关的部分最终少于 30 行，只有 15 个声明！
我对这样的帖子感到非常兴奋，因为它展示了 CSS 网格可以多么有趣。同样，Jules Forrest 也在这方面进行了一些出色的实验，她在其中重新构想复杂的印刷版面，甚至奇特的菜单设计。
使用 SVG 的纵横比
阅读评论
我非常喜欢 Noam Rosenthal 的这个小技巧
<style>
.aspectRatioSizer {
display: grid;
}
.aspectRatioSizer > * {
grid-area: 1 / 1 / 2 / 2;
}
</style>
<div class="aspectRatioSizer">
<svg viewBox="0 0 7 2"></svg>
<div>
Content goes here
</div>
</div>那里发生了两件事
- 一旦你给一个
<svg>一个viewBox，它就会全宽，但高度仅为viewBox值中隐含的纵横比。viewBox值本质上是 SVG 内部坐标系的“顶部、左侧、宽度、高度”，但当它本身没有高度时，它会产生调整元素本身大小的副作用。这就是用来“推动”父元素进入纵横比的方式。如果父元素必须伸展（例如，内容比适合的内容多），它仍然会伸展，这很好。 - CSS 网格用于将两个元素放置在彼此的顶部，并且源顺序将内容保持在顶部。