观看 Wix 从网站构建器发展成为开发 Web 应用程序的完整平台非常有趣。 任何人仍然可以使用始终存在的可视化构建器轻松地启动网站，但 Wix Code 不久前推出，作为一种方式，让开发人员对底层代码有更多动手控制，以创建自定义网站。

好吧，随着 Wix Code 最近成为 Wix 的 Corvid，这种演变仍在继续。

继续阅读 →

Ben Frain 刚刚记录了从 Gulp 迁移到 Parcel 的一些笔记，Parcel 是一个相对较新的“Web 应用程序捆绑器”，从快速浏览来看，它类似于 webpack，但没有设置方面的麻烦。 我一直不喜欢 webpack 的一件事是，你必须先告诉它 CSS、HTML 和 JS 是什么，然后才能对这些文件进行任何你想要的修改。 但是，Parcel 替我们做了很多资产管理和配置工作，这非常棒——因此，Parcel 声称它需要“零配置”。

如果你想了解有关 Parcel 的更多信息，那么 Indrek Lasn 有一篇很棒的帖子，详细介绍了 如何开始，甚至展示了 Parcel 通常比 webpack 等替代方案更快的一些方面。 我们还刚刚发布了 Kingsley Silas 的一篇帖子，解释了 如何在 React 中使用 Parcel。

Ivan Akulov 收集了大量有关使用preload 和prefetch 使内容加载速度更快的信息和诀窍。 这本身就很好，但他还指出了我以前没见过的东西——as 属性

<link rel="preload" href="/style.css" as="style" />

据称，这有助于浏览器优先考虑何时下载资产以及加载哪些资产。

这篇文章我最喜欢的是 Ivan 在最后给出的简短总结，它清楚地定义了所有这些不同的标签可以用于什么

<link rel="preload"> – 当你将在几秒钟内需要一个资源时
<link rel="prefetch"> – 当你将在下一页需要一个资源时
<link rel="preconnect"> – 当你知道你很快将需要一个资源，但你不知道它的完整 URL 时

务必查看我们自己关于 预取、预加载和预浏览 的帖子。 在我们的链接中添加这些内容可以显著提高性能，因此请查看它，以便为你的性能工具箱添加更多资源。

Scott O’Hara 最近发布了“包含隐藏”，这是一篇关于 在网络上隐藏内容的不同方式 的不错的演练。 关于网络，从来没有什么是确定无疑的！ 复杂的是，隐藏 引出了一个问题：对谁隐藏？ 对此的不同答案有不同的解决方案

• 对所有人隐藏？ display: none; 或 visibility: hidden; 或 hidden 属性。（但要小心 hidden 属性，Monica Dinculescu 说。）
• 在视觉上隐藏，但对辅助技术可见？ 一个带有少量属性的.screen-reader-only 类，以正确完成工作。
• 对辅助技术隐藏，但在视觉上可见？ aria-hidden="true" 属性/值。

理解所有这些是值得的，因为它完美地说明了为什么 HTML 和 CSS 对于前端 Web 开发来说并不是一种简单的附加技能。 这是至关重要的内容，它没有得到应有的正确处理。

继续阅读 →

An Event Apart 波士顿 即将到来！ 我们正在谈论，比如，不到一个月的时间。 如果你一直没有注册，这可能是你最后的机会，因为时间和座位都很有限。 此外，我们正在谈论由一批令人印象深刻的演讲者在广泛的主题上进行三天纯粹的知识分享。 说真的，只要 查看完整日程安排 并准备好迎接一段美好的时光。

继续阅读 →

WooCommerce 最近对 WordPress 管理员中高度可见的仪表板屏幕进行了 全面大修，并将其作为 新插件 提供，可以从 WordPress 插件目录免费下载。 新的设计当然很漂亮。 我的意思是，每当 WooCommerce 触及管理屏幕时，其他插件开发人员都会密切关注，因为它会影响他们中的许多人如何处理 WordPress 中的 UI。

但真正让我印象深刻的是 WooCommerce 为用户提供的海量数据。 作为在大量 WooCommerce（以及非 WooCommerce）在线商店工作过的人，报告是一个经常出现的问题，很高兴知道 WooCommerce 不仅将其烘焙到他们的产品中，而且设计得如此之好，以至于可以轻松地一目了然地了解销售、产品和客户的见解。

继续阅读 →

这是 Andy Bell 的一个巧妙技巧，他使用 CSS 自定义属性来检查特定 CSS 功能是否受支持，方法是使用 JavaScript。

基本上，他利用了 CSS 检查特定属性的浏览器支持的能力，设置一个自定义属性，该属性返回 0 或 1（布尔值！）的值，然后通知 JavaScript 根据该值执行。

继续阅读 →

Flock 是一款为设计师和开发人员打造的即时通讯和协作工具。 它几乎无需设置，即可将团队的所有对话、约会和文件整合到一个地方，帮助你将更多时间花在最擅长的工作上——构建很棒的东西！

构建软件很难。 考虑到我们大多数设计和开发社区对工具的严格标准，构建每天使用起来都很愉快的软件更加困难。 因此，当我们着手改变人们在现代工作场所的沟通方式时，我们只有一个目标——构建我们客观上会喜欢的产品！

如今，数千个设计和开发团队每天都在使用 Flock，这验证了我们以用户体验为导向的方法，为各种团队构建团队协作工具。 但我们是如何走到这一步的？ 这是我们的故事。

在 Flock，我们的设计师经常与组织中的其他人分享创意和设计资产，使用电子邮件分享指向文件的链接真的很老套，而且速度很慢。 因此，我们首先研究了工作中高效协作的一大挑战——“应用程序切换”问题，即使像共享文件这样简单的事情也必须掌握这种技巧。

“在一个平台上发送电子邮件，在另一个平台上存储文件，在另一个平台上进行实时对话，我们经常需要在这几个应用程序之间切换，以找到并与团队成员共享相关文件。 这是一种无形的浪费时间！”
—Aaron Durham，Flock 设计师

我们意识到，将我们的文件和围绕它们的对话整合到一个地方将为我们节省大量时间和精力，并为 Flock 构建了与 Google Drive、OneDrive、Box 和 Dropbox 的集成。 现在，可以从侧边栏中非常轻松地找到并分享相关文件，并立即与团队讨论，并提供动态预览和权限控制。

我们解决的下一个挑战是，在我们的地理位置分散的设计和开发团队中，从同事那里获得设计和原型反馈所花费的时间。 我们知道，通过纯文本/电子邮件传达创意的视觉反馈很难，因为我们的设计师常常难以理解反馈针对的是插图的哪个部分。

然后，我们想，“如果我们可以跳上电话，并向同事确切地展示我们看到的东西，那岂不是容易得多？” 因此，我们在 Flock 中构建了无缝的视频和音频会议体验，允许我们与一个或多个团队成员开始视频通话，并通过共享屏幕来引导他们了解反馈。

与大多数初创公司一样，我们总是在处理一些项目。 因此，一组设计师和开发人员可能会在为我们最新的产品构建原型，而另一组可能会在为营销活动构建登陆页面。 围绕这些项目的对话需要同时且无缝地进行。 但对于拥有超过一百名明星员工的团队来说，很难跟踪各种项目的对话，并将这些对话保持在正轨上。 我们必须创建一个能够同时实现这两者的系统。

因此，对于每个项目，项目负责人都会在 Flock 上创建一个频道（群组对话），所有参与者都可以在这里讨论项目。 我们为共同兴趣和非正式聊天创建其他频道，因此项目频道中的对话更有针对性，效率更高。

导致可怕的“应用程序切换”行为的另一个原因？ 我们的设计师和开发人员使用很多应用程序和服务，他们必须在一天中的不同时间检查更新。 因此，我们在 Flock 中构建了对第三方服务的集成。 现在，团队成员可以在一个地方——Flock——接收他们所有喜欢的应用程序的通知，并可以选择在需要时采取行动。

我们的应用商店拥有超过 60 个与热门第三方商业应用程序和服务的集成，因此我们可以在一个地方使用我们所有喜欢的工具。 我们可以使用 Zapier 和 IFTTT 将数百个应用程序和 Web 服务连接到 Flock。 从 Dribble 和 Asana 到 Jira 和 GitHub，我们几乎将我们使用的所有服务都连接到 Flock。 最后但并非最不重要的一点是，开发人员可以使用我们的开放 API 构建自定义应用程序和集成。

Flock 的许多早期采用者是设计和开发人员的团队，他们乐于分享反馈。 我们发现，这些团队中的很多团队都与外部顾问或客户合作，尤其是在创意机构中。 这些对话再次在电子邮件、电话上进行，或者有时是口头指示，没有记录供以后参考。

为了确保所有这些对话都可以整合到一个窗口中，我们在 Flock 中创建了访客，这是一种极其简单的方式，可以将外部协作者添加到团队工作流程中，同时在团队内部的对话与访客用户的对话之间保持访问防火墙。 这使得与客户和顾问的协作更加容易，反馈可以实时共享和执行，并且内置的图像标注功能允许设计师在创意上分享视觉反馈。

从一开始，我们的想法就是有效的沟通是每个工作场所的基本工具，它应该比支出带来更多生产力。这就是为什么我们将 Flock 的价格 从免费开始，并提供一个选项，每月只需 4.5 美元/用户即可解锁所有功能，这是我们竞争对手价格的三分之一。

我们的设计师和开发人员在构建 Flock 并成为其首批强大用户方面取得了非凡的成功，采用团队协作平台的商业案例从未如此清晰。无论您是想讨论想法、共享资料、收集来自团队成员和客户的反馈，还是从 Gitlab 获取代码推送通知，Flock 都能正常工作。

立即试用 Flock

切换按钮。开关。无论您想称之为何，它们已经陪伴我们一段时间，并且一直是许多表单界面的主要组成部分。它们甚至内置于许多 CSS 框架中，包括 Bootstrap 和 Foundation。

很容易用二进制方式思考它们：开和关。关和开。点击更改状态然后就完事了，对吧？我的意思是，它只是一个带有样式化视觉表示的复选框。

继续阅读 →

您是否曾经创建了一个经过精心设计的、有想法的设计系统，却眼睁睁地看着它发展成一个不断增长、令人恐惧的代码库？我一直在 朝相反的方向努力，继承了可怕的代码库，并试图从中创建一个有想法的系统。

以下是 Alex Sanders 对该主题的解释，他解释了他在卫报团队如何解决创建设计系统的同时对抗复杂性的任务。

试图通过约定来长时间包含复杂性的系统，最终会趋向于熵，因为约定的一项重要特征是，打破它非常简单。

您甚至不需要恶意。约定不是一道分界线。您可能有一个很好的理由来打破或扩展约定，但一旦一个约定不再完全遵守，随后打破或扩展它的理由就会自动变得更强，因为该约定已经减弱。这种情况发生得越多，它就越弱。

复杂性和熵可以在相同的情况下出现两种结果，但不一定是相互排斥的。有趣的是，我们旨在防止复杂性的最佳意图可能具有某种破坏性。

继续阅读 →