保持冷静并阅读 Smashing 杂志

在我们向人们询问 Smashing 的所有时间里，大多数人似乎仍然认为我们是位于美国某个地方的某种大型出版公司——这两种说法都是错误的。 这一切都始于德国弗莱堡，团队由分散在世界各地的人组成——我们大多数人都没有全职为 Smashing 工作。

这是正确的。 远程工作对我们来说非常熟悉，因此在 COVID-19 的当前情况下让每个人都感到不安，我们希望充分利用这些事情，并帮助任何必须远程工作或领导团队的人第一次。 我们的主编雷切尔·安德鲁（Rachel Andrew）准备了一篇很好的文章，以帮助您在我们一起经历这件事时保持联系并继续学习。

您可能已经听说 SmashingConf SF 由于不幸的旅行限制和许多其他原因（遗憾地）被推迟到 11 月。 这对团队来说确实是一个艰难的决定，但我们相信这是最好的前进方式——安全和健康永远是第一位的。

事不宜迟，这里是 Smashing 发生的事情的简短更新，以及社区分享的一些超级创意作品！

阅读愉快——从我的电脑到你的！

以道德为设计理念

经过几个月的努力，“道德设计手册”终于问世了——它正在发货！ 反应已经非常积极，我们很高兴很快与您分享评论。 在网络上还有很多工作要做，但我们希望通过这本书，您将配备足够的工具来慢慢地将公司推向更可持续和更健康的数字足迹！

当然，您可以立即跳转到目录，或下载免费的 PDF 摘录来获得本书的第一印象——我们相信您不会失望的！ 阅读我们的官方发布帖子，了解所有详细信息 →

总是互相学习新事物

我们都有繁忙的日程，但总有时间戴上那些耳塞，听一些让你开心的音乐或播客！ 我们将继续观看^Smashing Podcast 的第 12 集 - 与来自不同背景的人们分享这么多！ 随时欢迎您收听并与我们分享您的问题和想法！

• 以前的 Smashing Podcast 剧集（包括成绩单）
• 在推特上关注@SmashingPod

除了关于我们推迟的 SmashingConf SF 的令人心碎的消息之外，我们的 SmashingConf 以友好、包容的活动而闻名，前端开发人员和设计师聚集在一起参加现场会议和实践研讨会。 从现场设计到现场调试，我们所有的演讲者都喜欢深入细节，并在大屏幕上展示他们自己项目中的有用示例。

以下是您可能希望观看和学习的一些演讲：

第一届 SmashingConf 于 2012 年在弗莱堡举行，因此您可以观看更多演讲。 查看所有 SmashingConf 视频 →

聚焦 React、Redux 和 Electron

标记你的日历！ 下周3 月 19 日，我们将与 Cassidy Williams 主持一场 Smashing TV 网络研讨会，他将解释如何组织现代 React 应用程序并构建一个 Electron 应用程序（使用 React）。 在伦敦时间 17:00 加入我们——我们很想听听您在项目中使用 React 的想法和经验！

SmashingMag 的热门话题

我们每天都会发布一篇关于网络行业当前各种主题的新文章。 以下是我们的读者似乎最喜欢并进一步推荐的一些内容：

• “我们为什么要谈论 CSS4？”
  通过雷切尔安德鲁
  在网络上和 CSS 工作组内部，已经有一些关于我们是否应该指定 CSS 版本的讨论——也许将其命名为 CSS4。 在本文中，Rachel Andrew 总结了这样做的一些利弊，并征求您对该建议的反馈。
• “在图像上设置高度和宽度再次很重要”
  巴里·波拉德
  由于最近浏览器的一些变化，现在非常值得在图像上设置width和height属性，以防止布局变化并改善网站访问者的体验。
• “在 React 项目中设置 Tailwind CSS”
  by Blessing Krofegha
  本文介绍 Tailwind CSS，这是一个 CSS 库，可为您提供构建定制设计所需的所有构建块，而无需自以为是的样式。 您还将学习如何在 React 项目中无缝设置 Tailwind CSS。
• “介绍 Alpine.js：一个微型 JavaScript 框架”
  菲尔·史密斯
  是否曾经建立过网站并使用 jQuery、Bootstrap、Vue.js 或 React 来实现一些基本的用户交互？ Alpine.js 是这些框架的一小部分，因为它不涉及构建步骤，并提供构建基本用户界面所需的所有工具。
• “如何设计单手使用的移动应用程序”
  通过Maitrik Kataria
  今天销售的智能手机中有 90% 的显示屏都大于 5 英寸。 更大的屏幕空间为应用程序制造商和设计师带来了新的挑战和机遇。 让我们看看如何设计单手使用的应用程序可以解决这些挑战。

我们时事通讯的最佳选择

老实说：每隔一周，我们都会努力将 Smashing Newsletter 的问题保持在适度的长度 - 那里有这么多才华横溢的人在从事出色的项目！ 因此，我们也不想让这个每月更新太长，我们将重点放在以下项目上：

PS ：非常感谢 Cosima Mielke 撰写和准备这些帖子！

查找并修复设计中的错误

我们都知道，当我们沉浸在一个项目中时，我们失去了能够捕捉到小的不一致所需的距离：例如，图像周围不正确的边框半径或缺少样式或文本。 如果您在 Figma 中进行设计，免费和开源插件 Design Lint 可以轻松查找和修复此类错误，这样就不会有错误将其投入生产。

Design Lint 检查缺失的文本、填充、描边和效果样式，并在所有图层上捕获不正确的边框半径值。 为了不中断您的工作流程，插件会在您修复错误时自动更新。 该 repo 可在 GitHub 上获得，因此请随意编写特定规则以根据您的需要定制插件。

与...一起学习 CSS 定位！

有没有更好的方法来学习 CSS 定位，就像一群友好的猫一样？ 这可能也是 Ahmad Shadeed 在创建 CSS 定位如何工作的交互式指南时的想法。

该指南教您使用 CSS 将三只卡通猫和它们的毯子放置在一个盒子内，一旦您掌握了这个概念，您就可以开始修改交互式演示，该演示可视化结果在您编辑值时如何变化。 现在谁说学习不能有趣？

亲密，互动短诗

一个鼓舞人心的实验来自法国平面和交互设计专业的学生 Thibaud Giffon：“亲密关系”。 互动短诗利用抽象的图像、声音和文字，从不同角度探索亲密关系。

同情、距离、困惑、触摸——这是构成这首诗的八章中的四章； 每一个都以自己独特的方式反映了这个主题：温暖和谐的波浪或圆圈相互融合，但也有不和谐的弦乐或五颜六色的气泡，它们为自己腾出空间而破裂。 美丽的！

您所有的 SVG 图标都集中在一个地方

拥有一个中心位置来组织您的所有资产总是一件好事，不仅对团队来说 - 跟踪您拥有的东西并快速找到您正在寻找的东西。 免费的跨平台应用程序 Iconset 就是这样一个地方：它可以帮助您收集、自定义、共享和管理所有 SVG 图标集。

为了更轻松地找到您要查找的图标，您可以将图标组织成集合或使用标签，一旦找到所需的图标，您可以将其直接拖到您喜欢的工具中。 真正的节省时间。 Iconset 支持 Dropbox 或 OneDrive 等云服务，因此您的所有图标在团队成员之间始终保持同步。 该应用程序适用于 Mac 和 Windows。

古代英雄的 WebGL 冒险

一个不情愿的英雄执行他从未要求过的任务——这就是基于浏览器的冒险视频游戏赫拉克洛斯背后的故事。 故事发生在古希腊，年轻的赫拉克洛斯偶然发现了属于其中一位神灵的双耳瓶。 他被宣布为被选中的人，并被派去攀登秘密山并将双耳瓶归还给他的主人。

让这款游戏如此引人注目的是英雄与神之间互动的有趣转折（对常见英雄故事的模仿）以及技术背景：Heraclos 是由 Gobelins 学校的一群学生在短短三个月内设计的巴黎的图像——使用 WebGL 和 Cannon.js。 一个很好的例子，说明了网络上的可能性。

使用 Web 技术构建的开源屏幕录像机

你听说过卡普吗？ 如果您经常进行屏幕录制，开源屏幕录像机绝对值得一试。

Kap 采用网络技术构建，可生成 GIF、MP4、WebM 或 APNG 格式的高质量录音。 您可以包含音频（甚至来自您的麦克风）、突出显示点击和修剪录音。 作为奖励，您还可以选择在 Giphy 上分享您录制的 GIF，立即使用 ZEIT 部署它们，或将它们上传到 Streamable。 非常适合技术演示。

Open Peeps，一个免费的手绘插图库

584,688 种可能的组合。 这就是您可以使用 Pablo Stanley 的手绘插图库 Open Peeps 创建的不同角色的数量。

Open Peeps 让您可以混合和匹配不同的矢量元素来创造不同的个性：结合服装和发型，用面部表情改变情绪，用不同的姿势设置场景——可能性是无穷无尽的。 如果您赶时间，Pablo 还准备了一些可立即下载的 Peeps，您可以立即使用。 Open Peeps 在 CC0 许可下发布，因此您可以在个人和商业项目中自由使用这些插图。 为您的设计添加手工风格的好方法。

如何使输入更易于访问

2019 年，WebAim 分析了前 100 万个网站的可访问性，得出了一个令人震惊的结论：无错误页面的百分比估计低于 1%。 为了使我们的网站对依赖辅助技术的人具有包容性和可用性，我们需要正确掌握语义 HTML 的基础知识。 凭借从小处着手、分享和合作的信条，Oscar Braunert 关于包容性投入的文章是一个很好的起点。

本文从 WAI、ARIA 和 WCAG 的基础知识开始，探讨如何使输入更易于访问。 这些提示可以在不改变用户界面的情况下实现，正如 Oscar 所说：“如果有疑问，就去做。 没有人会注意到。 除了你的一些用户。 他们会为此感谢你的。”

面向开发人员的开源字体

高可读性、快速文本扫描、不分心——这些只是开发人员对字体的一些要求。 好吧，免费和开源字体 JetBrains Mono 完美地满足了所有这些要求。

为此，Jet Brains Mono 利用了一些小而强大的细节：与其他等宽字体相比，JetBrains Mono 的高度增加了，而字符的宽度保持标准，以使代码行保持开发人员期望的长度。 为了进一步提高可读性，138 个代码特定的连字减少了噪音，这样您的眼睛需要处理的时间更少，空白变得更加平衡。 聪明的！ JetBrains Mono 有四种权重，支持 145 种语言。

iframe 终极指南

由于有很多文章反对它们，iframe 的声誉并不好。 JavaScript 开发人员 Nada Rifki 有不同的看法：她建议不要让他们的声誉阻止你依赖 iframe。 毕竟，他们有许多合法的用例。

为了帮助您对这个有争议的元素形成自己的看法，Nada 编写了 iframe 终极指南，其中探讨了 iframe 功能以及如何使用它们； iframe 可能派上用场的棘手情况； 最后但同样重要的是，如何保护 iframe 免受潜在漏洞的影响。 一个从不同的角度看待事物的好机会。

控制台命令指南

开发人员调试控制台的功能在过去几年中发生了显着变化——从报告错误的方式到自动记录网络请求和安全错误或警告等信息。 还有一种方法可以让网站的 JavaScript 触发输出到控制台以进行调试的各种命令。 虽然这些功能在浏览器之间大多是一致的，但也存在一些功能差异。

如果您正在寻找有关控制台命令功能的概述，Travis Almand 整理了一份有用的指南。 它涵盖了 Firefox 和 Chrome，并检查了可用于浏览器控制台输出或 JavaScript 的各种命令。 方便的总结。

有用的前端和用户体验位，每周交付一次。

借助工具帮助您更好地完成工作。 通过电子邮件订阅并获取 Vitaly 的智能界面设计清单 PDF 。

你的（粉碎的）电子邮件

在前端和用户体验上。 受到 190.000 人的信赖。