Nicolas Gallagher

在 Twitter 上，我使用了此处描述的方法，以多种不同的格式发布了公司的 SVG 图标库：优化的 SVG、纯 JavaScript 模块、React DOM 组件和 React Native 组件。

没有唯一的正确方法^©来创建 SVG 图标系统。SVG 图标系统唯一共同点是，以某种方式，某种方法，使用 SVG 来显示该图标。我得找时间写一篇帖子，介绍所有可能性。

不同系统倾向于共享的一件事是某种构建过程，将一个充满 SVG 文件的文件夹转换为更易于以编程方式消化的格式。例如，gulp-svg-sprite 获取您的 SVG 文件夹并创建一个 SVG 雪碧图（<symbol> 块）以在该类型的 SVG 图标系统中使用。Grunticon 将您的 SVG 文件夹处理成 CSS 文件，并且能够将它们增强为内联 SVG。Gallagher 的脚本从中创建 React 组件，就像他所说，这非常适合交付给不同的目标以及性能优化，例如代码拆分。

这体现了 SVG 的多功能性。它只是标记，因此易于使用。

使用 Bugsnag 自动检测和诊断影响用户 JavaScript 错误。获取全面的诊断报告，立即了解哪些错误值得修复，并在极短时间内进行调试。

Bugsnag 检测每个错误并优先处理对用户影响最大的错误。获得对 50 多个平台的支持，并与团队已使用的开发和生产力工具集成。

Bugsnag 被 Airbnb、Slack、Pinterest、Lyft、Square、Yelp、Shopify、Docker 和 Cisco 等全球顶级工程团队使用。立即开始免费试用。

在这篇文章中，Jeremy Keith 对 原型代码和生产代码 做了一个有趣的区分，我整个星期都在思考它。

…每隔一段时间，我们就会使用前端开发的材料——HTML、CSS 和 JavaScript——来生成一些并非旨在用于生产的东西。我说的是原型设计。

有趣的是——在原型设计方面——我们通常的前端优先级可以而且应该抛到脑后。现在的重点是速度。如果这意味着牺牲语义或性能，那就这样吧。如果我正在构建原型并且发现自己思考“现在，这个组件的正确类名是什么？”，那么我知道我的思维方式错了。这个问题对于生产代码可能是有效的，但对于原型来说是浪费时间。

我喜欢 Jeremy 对所有这些的表达方式以及他如何描述这两个环境需要完全不同的思维方式。例如，在原型设计时，我们可能会忽略优化可访问性或性能，甚至让我们的 CSS 标准下降，以便尽快在浏览器中获得一些东西并对其进行测试。

今年早些时候，当我写了一些关于 在浏览器中进行原型设计 的内容时，我回应了一些相同的想法。

我认为，设计师和/或前端开发人员第一次编写代码时，绝不应该在生产环境中进行。在安全的环境中可以随意地对代码进行疯狂操作，这会将您的注意力集中在设计上，并使其与浏览器的约束条件兼容。在此之后，您可以考虑将代码从一堆热气腾腾的垃圾整理成可爱、干净、可用于生产的诗歌。将静态模型转换为交互式原型是第一步，但至关重要的是要有一个下一步来执行您的代码标准。

我们最近介绍了 完全相同的事情，但从一群开发人员的角度来看。

Chris Ferdinandi 发表了他的看法

对于前端开发人员来说，技术技能是最不重要的技能。

JavaScript 的细微差别。如何使用特定的库、框架或构建工具。CSS 中级联的工作原理。语义 HTML。Fizz-buzz。

Chris 比我更进一步。我确实认为，通过理解 HTML、CSS 和 JavaScript，理解得越深越好，并且它是成为优秀前端开发人员的要素之一。但我也同意这远不止于此。事实上，凭借扎实的​​基础技能和非常好的软技能（例如，您擅长主持头脑风暴会议），您可以在他们查看您的语言技能之前获得工作。

这是 Marco Hengstenberg 对可访问的 SVG 标记模式的精彩概述。这是理想的示例

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>

继续阅读 →

.foo {

}

以编程方式，是

if (element has a class name of "foo") {

}

后代选择器是&&逻辑，逗号是||。从那里开始变得更加复杂，包括组合器和伪选择器。看看样式级联的所有方式。

Jeremy Keith

如果您发现无法在 CSS 中选择某些内容，则表示您可能需要向 HTML 添加另一个类名。复杂性仅限于标记，以便使 CSS 更简单、更模块化和更易于维护。

您知道项目管理对任何规模的团队都非常有价值。无论您是小型商店还是成熟的代理机构，您的客户和项目都依赖于可跟踪的交付成果、可靠的沟通以及所需工作的清晰分解。

您可能与过去或正在使用的任何项目管理平台都有爱恨交加的关系。一个平台通常缺少您真正需要的那个功能，这会使该工具变得更好，您的工作也变得更容易。但是您不能把孩子和洗澡水一起倒掉，完全放弃项目管理，对吧？

这就是 monday.com 的用武之地。

继续阅读 →

几年前，我们做了一个 Web 开发人员经济学系列，我们在其中研究了成为 Web 开发人员的各种成本。

1. Web 开发人员经济学：一次性软件成本
2. Web 开发人员经济学：硬件成本
3. Web 开发人员经济学：每月服务成本
4. Web 开发人员经济学：总结

我相信从那时起，一些软件和硬件已经发生了变化，但精神是一样的。拥有完成这项工作所需的东西是要花钱的。

我刚刚写了一篇类似的文章，但从 企业为其所需的软件付费 的角度出发。该链接指向 Medium，但最初是在 CodePen 博客 上发布的。只是尝试一下，看看关于 Medium 的所有喧嚣是什么。

有没有过“Ugh，另一个需要支持的设备？！”的感觉？就像，也许当您听说手腕设备有浏览器时？Ethan 的最新帖子就是关于这个的。

就我个人而言，Apple Watch 对我来说很有趣，不是因为它是一块手表。相反，它之所以有趣，是因为它是一个比普通触摸屏更小的触摸屏，连接到蜂窝天线上，并且不一定处于最可靠的连接状态。它帮助我超越设备，并思考在这些条件下某人将如何与我的工作互动。一旦我做到这一点，我就可以开始相应地设计。

这篇文章很好地提醒我们重新审视响应式设计的理念。我们消费网络方式的巨大变化是 Web 设计和开发转向这种方式的原因。因此，不要再考虑特定的设备。相反，让我们使我们的方法具有响应性和灵活性，然后新的设备就会出现。它们将不可避免地完美地融入其中，而无需我们重新设计或重新编写任何代码。

听起来 Edge 即将关闭 EdgeHTML（为 Edge 提供支持的引擎），并改用 Chromium。在我编写本文时，尚不清楚浏览器是否仍将被称为 Edge。Opera 在 2013 年也做了同样的事情。我们肯定会在微软直接看到更多关于此的信息，以及大量热议。

大概有三大类热议话题

1. 哈利路亚，我不喜欢支持 Edge，这将使我的工作更容易，并为用户改善 Web。
2. 哎呀，这对 Web 来说是不好的。浏览器引擎的多样性对 Web 来说是一件非常好的事情。参见 Rachel Nabors 浏览器多样性的生态影响。
3. 这可能是一件好事，因为联合力量可以组建更强大的团队。如果许多团队各自建造一座 50 米高的塔，也许他们合作可以建造一座 100 米高的塔。

我目前还不确定该怎么想，只是提醒我们企业将始终是企业。