除了我对他们将从 SEO 中获得的收益极度羡慕之外，Rachel 在这里说得非常正确。学习 CSS 有些支柱，比如语言语法、选择器、布局和流程，一旦学会，就会解锁你的 CSS 荣誉勋章。

我要补充一点，如果你真的想学习 CSS，给自己一个有现实世界利害关系的项目（比如个人网站），这样你用 CSS 做的事情会让你感觉很重要，并激励你做有趣的事情并把它做好。

继续阅读 →

在 Clearleft 新闻通讯的 新年版 中，Jeremy Keith 链接到 Danny Hillis 在考虑一个能运行一万年的钟时所考虑的设计原则。

以下是该页面的部分内容 继续阅读 →

我喜欢布鲁斯在这里的立场

如果新一代的 JavaScript 开发人员对良好 HTML 的重要性没有很好的理解，那么我作为一名 DOWF（Dull Old Web Fart，老旧的网页老兵）有责任解释它。

然后他指出了良好 HTML 带来有意义的好处的几个非常实际的情况。也许好处不是合适的词，更多的是要求，因为其中大部分都集中在可访问性上。

我希望我已经向你展示了选择正确的 HTML 不是纯粹的学术练习……

语义化 HTML 将为许多用户提供可用性益处，帮助你将工作做好未来，可能提高你的搜索引擎结果，并帮助残疾人使用你的网站。

我认为可以称 HTML 为简单。与你在构建网站的旅程中会学习的许多其他事物相比，也许它就是简单的。更重要的是要把它做好。

继续阅读 →

我们发布了 2018 年 CodePen 上最受欢迎的 Pens、帖子和合集！这里绝对是不可思议的作品——非常值得探索。

请记住，CodePen 有一个三级点赞系统，因此，虽然点赞旁边的数字反映了点赞该项目的用户的数量，但每个点赞的总价值可能是 1、2 或 3 个点赞。这个列表也是一个寻找很棒的人在 CodePen 上关注的好地方，我们正在努力让在 2019 年关注人们变得更加有趣。

我真的很喜欢 Dan Abramov 的这篇文章。他将自己的工作定义为 UI 工程师，我尤其喜欢他写的关于他学习经历的部分

我最大的学习突破不是关于某个特定技术。相反，当我努力解决某个特定的 UI 问题时，我学到了最多。有时，我后来会发现一些库或模式帮助了我。在其他情况下，我会想出自己的解决方案（好的和不好的都有）。

正是这种理解问题、尝试解决方案并应用不同策略的结合，才让我的人生中获得了最令人满意的学习体验。这篇文章只关注问题。

然后他将这些问题分解成十几个不同的领域：一致性、响应式、延迟、导航、陈旧性、熵、优先级、可访问性、国际化、交付、弹性，以及抽象。这是一个关于 前端开发人员每天需要关注的内容 的相当不错的列表，但我也觉得，除了“关心组件设计和 CSS 的人”之外，这也许是我对自己技能的最佳描述。

我也喜欢 Dan 关于可访问性的说法

无法访问的网站不是一个小众问题。例如，在英国，五分之一的人口受到残疾的影响。(这是一个不错的图表。) 我也亲身感受到了这一点。虽然我只有 26 岁，但我很难阅读字体细小且对比度低的网站。我尽量减少使用触控板，并且我害怕有一天我不得不通过键盘来浏览实施糟糕的网站。我们需要让我们的应用程序对有困难的人来说不糟糕——好消息是，有很多低垂的果实。它从教育和工具开始。但我们还需要让产品开发人员更容易做正确的事。我们能做些什么来让可访问性成为默认选项，而不是事后才想到？

这是一个很好的提醒，前端开发不是一个要解决的问题，但我认为 Dan 的文章比我在这方面的观点更有帮助，也更不刻薄。

无论如何，我们都希望有可访问的界面，这样每个浏览器都可以访问我们的工作，利用美观且一致的移动交互、瞬时性能以及团队可以用来轻松地将组件拼凑在一起的设计系统。但只有当其他人认识到 UI 和前端开发是一个值得的领域时，这些才有可能实现。

我们现在已经进入未来，因此，当然，我们正在研究使用超越典型让页面更精简和像疯了一样缓存的技术的奇特新策略来加速网页。

几年前，一项策略是 InstantClick

在访问者点击链接之前，他们会将鼠标悬停在该链接上。在这两个事件之间，通常会经过 200 毫秒到 300 毫秒（在这里测试你自己）。InstantClick 利用这段时间预加载页面，这样当你点击时，页面就已经在那里了。

聪明，但不像现代可以做到的那样先进。例如，InstantClick 没有考虑到有人可能不想预加载他们没有明确要求的东西，尤其是在网络速度很慢的情况下。

Addy Osmani 写了一份文档，称之为“预测性获取”

… 鉴于任意入口页面，一个解决方案可以计算用户访问给定下一页或一组页面的可能性，并在用户仍在查看当前页面时为他们预取资源。这有可能提高后续页面访问的页面加载性能，因为页面很可能已经在用户的缓存中。

想想看：我们可以将分析数据输入到混合中，让机器学习去处理它。Addy 还指出了其他早期的尝试，比如 Gatsby 的 Link 和 WordPress 插件。

另一个竞争者是谷歌的 Quicklink

Quicklink 试图让后续页面的导航加载得更快。它

• 检测视窗内的链接（使用 Intersection Observer）
• 等到浏览器空闲时（使用 requestIdleCallback）
• 检查用户是否没有使用缓慢的连接（使用 navigator.connection.effectiveType）或启用了数据节省功能（使用 navigator.connection.saveData）
• 将链接的 URL 预取到链接中（使用 <link rel=prefetch> 或 XHR）。提供对请求优先级的某些控制（如果支持，可以切换到 fetch()）。

那里没有使用机器学习或分析，但也许是最聪明的。我真的很喜欢只在使用可能性足够高的情况下进行预取的理念；无论如何，浏览器都是空闲的，网络也可以处理它。

这是 Codrops 的 Mary Lou 在过去一年中整理的一份出色的创意和艺术浏览器演示列表。

知道你可以以一种相当跨浏览器友好的方式设计一个 <select> 并且不会损害可访问性，这让人感到很暖心。为 记录这一点 点赞，Scott！

我刚读了 一篇写得很好 的故事，讲述了 WooCommerce 在 CodeinWP 博客上的起源。WooCommerce 起初是 WooThemes，一家由两位从未见过面的家伙创办的“高级主题”公司。两年后，他们雇佣了几名员工，并推出了 WooCommerce，两年后，它的下载量突破了一百万次。毫无疑问，这是一个重大的成功故事，但它是一个协作的、基于远程工作的成功故事，并非一夜之间完成。又过了两年，Automattic 收购了他们，WooThemes 部分被剥离。

现在，WooCommerce 成为 Automattic 项目已经 3-4 年了，它的下载量接近 6000 万次，其中 400 万次是活跃的。他们说这个数字大约占网络上所有电子商务的 30%。哇哦。我使用过 WooCommerce 很多次，它总是能很好地完成我的任务。

这真是太疯狂了：Adrian Roselli 只使用 CSS 就制作了一系列相当复杂的维恩图。结合使用 Firefox 开发者检查器，以及 CSS 网格和 shape-outside 属性，就可以做到这一点，而且不需要大量的 hack。

我还觉得，Adrian 将这篇文章中的代码片段设计成看起来像老式显示器非常可爱，就像 Chris 最近 拆解的那样。