第十三届 CSS-Tricks

嘿，伙计们！CSS-Tricks 迎来了 13 岁生日。现在已经是一个真正的青少年了，怎么样？我 一直 都抓住机会在这个时候做一些联盟地址，所以让我们开始吧！

设计

从技术上讲，我们仍在使用网站设计的 v17 版本。这是我第一次聘请一流的帮助来进行的设计，而且我仍然很喜欢它，所以我没有太多想要对它进行重大更改的想法。尽管它与发布之日相比确实有所不同¹。

例如……

• 搜索体验完全不同，因为它现在由 Jetpack 的即时搜索 提供支持。
• 在 年鉴 页面（例如 background-blend-mode）中，有一个额外的侧边栏可帮助您在页面之间导航
• 我使用 Hoefler&Co 重新设计了排版。 Sentinel 和 Ringside。等宽字体代码段使用的是 Operator Mono，而徽标长期以来一直是 Gotham Rounded，因此它感觉就像一个由字体组成的大家庭。

也许明年我们会再次做一些不同的事情。我的清单中已经开始增加一些我想重新调整的幕后技术内容，有时这些内容与重新设计工作息息相关。

封闭的论坛

这个网站上的论坛已经让我头疼了好几年了。今年早些时候，我终于将它们关闭了。它们仍然存在，可能永远都会存在（因此 URL 会被保留），但是没有人可以发布新主题或回复。

这是一个痛苦的决定。即使在我关闭它们的时候，那里仍然有一些规律的日常活动，我相信对于那些投入时间到这个地方的人来说，关闭它并不是一件好事。以下是我这样做的原因

• 这里没有人，包括我，都会定期查看论坛。我不接受互联网上无监管的公开论坛。
• 垃圾邮件数量在上升。在某些时期，大多数帖子，即使在我从 Akismet 获得的自动垃圾邮件阻止之后，也是需要手动删除的垃圾邮件。即使我们有一名专门的论坛员工，那也不有趣，既然我们没有，这对我来说只是一项随机的工作，我不需要这种时间消耗。
• 论坛代表着一定程度的技术债务。它们需要更新。它们的设计需要在这个网站的上下文中发挥作用。在某一时刻，我删除了所有自定义样式，并让它成为默认主题，这是一个减少技术债务的好方法，但最终还不够。

当然，我可以处理一些工作和一些技术债务。但是，当你把这些东西与论坛对我认为的网站成功没有太大贡献的事实结合起来，就会出现问题。它们不会真正推动页面浏览量或广告需求。没有钱专门雇佣帮助论坛的人员。但这只是其中一小部分。我希望这个网站能帮助人们。我认为，如果我们专注于发布，并尽可能少地分散注意力，我们就能做到最好。我认为互联网上有一些地方更适合论坛式的讨论。

现在，由于它们已经关闭了好几个月，我可以报告说，消除心理压力让我感觉很好，而且几乎没有出现任何重大负面影响。

社交媒体

这是我消除的另一个心理压力：我停止了手动管理 Twitter 帐户 (@css)。我仍然认为，我们拥有一个 Twitter 帐户（以及那个很酷的用户名）是一件好事，但我不再像以前那样直接在上面花费任何时间。

在过去，我会将特色的文章与评论和图形等内容排队，并确保每天都充满了我认为有关网页设计和开发的有趣推文。这很好，但是它开始感觉像一份没有报酬的工作。

我们并没有从 Twitter 获得（或似乎驱动）很多流量。Google Analytics 显示，社交媒体帐户占我们流量的不到 1%。在我的眼中，在“发展”Twitter 上投入时间没有足够的回报。更不用说显而易见的事实：Twitter 可能非常具有毒性，在精神上会让人筋疲力尽。

因此，现在我们所有发布到 Twitter 的帖子都是通过 Jetpack 社交媒体连接自动完成的（我们确实将 Jetpack 用于 大量内容）。我们在网站上点击“发布”，文章就会自动发布到 Twitter。因此，如果您像使用 RSS 提要一样使用 Twitter（只给我看新闻！），您就可以实现这一点。

结果如何？我们的粉丝数量以与以往相同的速度增长。那里的互动率与以往相同，甚至更高。真是太令人欣慰了。做少十倍的工作就能获得相同的益处。

当我想要分享一个带有评论的链接时，我会使用我们一直以来的相同系统：我会把它写成一篇链接博客文章。现在，我们获得了更多益处：长期内容构建，这对我们真正拥有的东西很有利：SEO。

将来有一天，我们可以通过手动编写自动推文文字，使其更加活泼，更清楚地注明作者，以及 #stretchgoal，一个自定义或花哨生成的社交媒体图形来改进这些内容。

打开了设计可能性

我一直对这个网站的一个方面感到满意，那就是有机会对内容进行自定义设计。以下是一些该基础架构的示例。

在任何一篇博客文章中，我们都可以选择一个模板。其中一些模板非常具体。例如，我的文章 The Great Divide 本身就是一个模板。

在代码库中，我有一个 PHP 模板和一个 CSS 文件，它们完全专用于该帖子。我认为，对于您想要给予额外关注的帖子来说，这是一种很好的处理方式，尽管这两个文件的存在确实存在一些技术债务。

我在创作那篇文章的过程中学到了一些东西：要真正打开文章的艺术指导/设计可能性，我需要一个简单的、简化的模板作为起点。因此，这就是我们现在所说的“Fancy Post”，是任何特定帖子可选择的另一个模板。Fancy Post 具有英雄图片和一个用于帖子内容的居中列。从那里，我们可以使用自定义 CSS 来直接在 WordPress 本身中对样式进行设置。

例如，我最近关于 DX 的帖子 的样式设置为 Fancy Post，并在其中应用了 自定义 CSS。

块编辑器本身对我们来说意义重大。那是我 2019 年的目标 之一，我们已经远远超出了我们对它的预期 程度。我认为，在块编辑器中编写和编辑帖子比在旧编辑器中好上百万倍。

最困难的挑战是（实际上仍然是）为遗留内容设置 块转换。但是，一旦你拥有构建和定制块的能力，那么这本身就会在文章中打开大量的设计可能性，而这些可能性在其他情况下会非常麻烦，也会带来过多的技术债务。

我们为设计可能性打开的另一扇门是一个经典的例子：使用类别。WordPress 提供的一个免费功能是能够为各种内容创建模板，只要命名正确，这些模板就能自动生效。例如，我有一个名为 category-2019-end-of-year-thoughts.php 的文件，它可以完全控制我为一组帖子制作登录页面，例如我们的 年末思考 主页。更不用说我们的“指南合集”页面了，这是以编程方式构建 页面合集 的另一种方法。

有很多工具可以用来进行自定义工作，我对这一点感到非常高兴。感觉我们已经用这些工具为自己创造了巨大的潜力，而且仅仅才开始利用它。

说到这一点，我们可以进行自定义设计的另一个方面就是 新书 格式……

电子商务

我们现在再次 使用 WooCommerce。我刚说完块编辑器的优点，以及它有多么有用……WooCommerce 也是如此。感觉我付出了很少的努力，低成本，并且技术债务很少，却获得了所有这些强大的功能。我很高兴这个网站是在 WordPress 上运行的，并使用它提供的众多功能套件。

首先，我可以使用它来销售产品，我们现在就有产品了！Lynn Fisher 为我们的 CSS Flexbox 指南设计了一张海报，并为我们的 CSS Grid 指南设计了一张海报，您现在可以购买并以每张 25 美元的价格运送到世界任何地方。看，使用块编辑器，我可以在这篇文章中直接放置一个海报块

我们使用 WooCommerce 的另一个用途是销售我们的新书，《The Greatest CSS Tricks Vol. I》。如果我们真的把它做成了一个完整的电子书格式，WooCommerce 绝对可以将这些文件以数字方式交付给你，但我们还没有这样做。我们选择了另一条路，就是将这本书作为章节发布在网站上，并设置了一个名为 MVP 支持者的会员付费墙。这本书只是其中的一项好处。

WooCommerce 有助于

• 建立会员系统并销售会员资格。会员资格可以将某些页面锁定为会员专属页面，并具有我可以用来移除广告等事项的编程钩子。
• 销售这些会员资格的订阅，并提供循环计费。
• 销售一次性产品

当然，我只是触及了皮毛。WooCommerce 可以做任何电子商务方面的事情。

分析

它们很好。哈哈！这就是我对我们网站总体分析的担忧程度。我喜欢不时查看一下，确保我们没有出现什么问题或任何可怕的情况，但我们从未出现过（敲敲木头）。我们每月大约有 800 万次页面浏览量，并且同比流量有点像舞蹈。

赞助商

谢谢！谢谢！谢谢！

我必须对我们所有的赞助商说这些话。我们非常幸运能与一系列赞助商合作，我真诚地认可他们，也确实使用他们的产品。我们的赞助商一直在变化，但这些是最重要的赞助商，也是与我们合作时间最长的赞助商。

• Automattic：感谢您为 WordPress 生态系统构建出色的软件。这个网站是通过大量使用这些软件而得以实现的。
• Netlify：感谢您将 Jamstack 世界带入现实。我非常喜欢这种构建网站的方式，我认为 Jamstack 应该是大多数网站的基础。除此之外，您还重新定义了现代开发人员体验。
• Flywheel：感谢您托管这个网站，成为一个高质量的托管服务商，我可以信赖，并且在无数次帮我解决问题。这就是高质量的 WordPress 托管应该有的样子。
• Frontend Masters：感谢您成为一个教育合作伙伴，做出了正确的选择，并且帮助我在人们寻找关于如何进行网络工作的更结构化、更正式的教育时，能够提供最好的答案：去尝试 Frontend Masters。

如果您想通过您的产品触达前端开发人员，这实际上是我的谋生之道，我也可以提供帮助。

我的其他项目

CodePen 也不是什么新事物，它本身已经超过 8 年了。我关于 CodePen 的这个特定方面反复强调：我们有很多想法，有很多工作要做，我们迫不及待地想向您展示未来的 CodePen。2020 年的 CodePen 与过去 2-3 年的 CodePen 大不相同。我们做出的某些技术选择开始发挥作用。团队的氛围非常好，并且以比我几年前认为可能的要快得多的速度完成工作，我们甚至还没有开启一些最大的门户。我知道这很含糊，但我们在 CodePen Radio 上更详细地讨论了一些事情。

ShopTalk 始终如一地保持强劲。朋友们，本周已经是第 420 集了。Dave 让我相信，我们目前的格式很好。我们不是操作手册。您不会听任何特定的节目，因为我们会教您一些我们明确列出的特定主题。更像是现实世界中不同领域的开发人员之间的闲聊，他们在完全不同的情况下开发完全不同的东西，但我们达成一致的意见比我们分歧的意见更多。随着时间的推移，ShopTalk 节目的内容可能会发生变化，但这种格式将会保留，因为这种格式的讨论是有价值的。

生活

我和妻子 Miranda 仍然住在俄勒冈州的本德，女儿 Ruby 两岁半了。她正在午睡，我一边打字一边看着显示器。

我们这里也有病毒，和其他地方一样。令人难过的是，我们已经到了这个地步，而我们当地的医院正在恳求人们在这个假期周末小心，因为他们已经接近满负荷，无法再承受更多了。希望我们能度过这段痛苦的时期。朋友们，请保持安全，保持冷静，感谢您的阅读。

---