CSS-Tricks 编年史 VI

我在上一篇编年史中提到的 Twitter 卡片功能已经实现了。现在，当有人在 Twitter 上分享 CSS-Tricks 的链接时，您会看到“查看摘要”链接，点击该链接可以提供一些关于文章的额外上下文信息。

我所要做的就是启用一个复选框，通过 WordPress SEO 插件添加元数据，并在 Twitter 上申请。

---

BD 大会非常有趣。我喜欢他们举办活动的巨大 盖洛德酒店。我的新演讲进行得非常顺利。研讨会也还不错，但算不上杰作。我现在处在一个奇怪的境地，我既想把它当作一项个人挑战，努力制作出精彩的研讨会，又想放弃研讨会。

---

ConvergeFL 也非常有趣。我第二次做了工作流程的演讲，这次演讲更加完善了。现在我回到家待几周，然后再次出发前往纽约参加 未来网页设计 大会。这将是我第一次去纽约。

在 ConvergeFL，我参加了由 JD Graffam（及其团队）在 SimpleFocus 进行的眼动追踪研讨会。之后，我们对 CSS-Tricks 进行了一项眼动追踪研究。我们邀请了四个人，每个人都按照一个大约 40 分钟的脚本进行操作。我将在尽快分享更多关于此的信息。

我不得不在 The Lodge 中添加分页功能，因为突然间有人报告说主视频列表导致他们的 iOS 设备崩溃。我怀疑这与 这里记录的问题 完全相同。

我还为那里的视频添加了一个“标记为已观看”功能，这样您就可以在观看视频时将其勾选，并记住您观看的位置。

那里现在已经发布了 157 个视频。只剩最后一个总结视频了，我希望很快就能拍摄并发布。

---

我为使用图标字体创建了一个 完整的测试演示，并将其添加到 这篇博文中。在我的测试中，使用 OS X Mountain Lion 上的 VoiceOver，最佳方法仍然是使用 span 和伪元素。

---

我更新了标题中的 Treehouse 徽标，使用 SVG。我可以这样做，因为此网站仅支持 IE 9+。我可以添加一个回退方案，但由于支持级别的原因，我没有必要这样做。这只是一个友好的提醒，SVG 对于矢量图形来说非常棒。更重要的是，它并不奇怪或难以使用。您使用 SVG 的方式就像使用 JPG、GIF 或 PNG 一样

<img src="logo.svg" alt="Logo">

或者

div {
  background: url(logo.svg);
}

---

我将在今年 2 月在 Webstock（新西兰）发表演讲。演讲嘉宾名单与我通常参加的网页设计会议有所不同。Jim Coudal、John Gruber、Jason Kottke……哇！太棒了。

---

我编写了一系列六个媒体查询，用于处理当今非常常见的情况

1. 小屏幕非视网膜屏幕
2. 小屏幕视网膜屏幕
3. 中等屏幕非视网膜屏幕
4. 中等屏幕视网膜屏幕
5. 大屏幕非视网膜屏幕
6. 大屏幕视网膜屏幕

它在 Twitter 上引发了一些讨论，但在那里有点脱离上下文。主要用例是：提供适合特定场合的特定“英雄”资源。也许就像 The Lodge 一样，使用大屏幕背景图像。我并不是建议我们为这些场景创建不同的布局，而是建议为它们提供一些智能资源是一个好主意，并且您可以通过智能媒体查询开始这样做。