我在 An Event Apart 西雅图玩得很开心!坐在那里,沐浴着来自众多超级聪明人士的信息,真是令人愉悦。
我没有完整地记录下每个演讲,但确实记下了那些让我脑洞大开的时刻。 我将把它们发布在这里!写博客真有趣!再次声明,这些时刻不一定是演讲者陈述的重点,也不一定反映主题的整个过程——它们只是我印象深刻的一些微不足道的时刻。
Jeffrey Zeldman 提到了阅读应用程序 Instapaper(仍然存在!)和 Readability(不存在……但其技术渗透到了原生浏览器技术中)。 他称它们为先锋(酷词!),这意味着它们在警告我们,我们的做法正在将用户推开。 事实证明,这相当正确,因为它们仍然存在,现在又加入了新的技术,比如 AMP 和 原生阅读模式,它们在解决同样的问题。
Margot Bloomstein 指出不一致性会削弱我们评估和建立信任的能力。 当然适用于网站,但也适用于美国某位总统。

Sarah Parmenter 分享了一个令人印象深刻的时刻,她通过电子邮件的力量,联系了 Bloom and Wild(一家鲜花邮件配送服务),告诉他们他们发送的某种电子邮件,虽然无意,但对她来说非常不敏感。 Sarah 本来打算用这个例子,但前一天,Bloom and Wild 实际上接受了她的建议,并实施了一个专门的退出系统。

这不仅让Sarah 为一家公司能够改变他们的系统,使其对客户更加敏感而感到高兴,而且也让很多人感到高兴,正如事件发生后大量正面的推文所证明的那样。 事实证明,你的客户喜欢你,你知道,想到他们。
Eric Meyer 谈到了关于伪元素的一个比较难以理解的事情:如果你使用content: url(/icons/icon.png);
,你实际上无法控制width
/height
。 有一些方法可以解决这个问题,最 notable 的是使用背景图片,但这有点令人费解,因为有一种方法可以将图片添加到页面,但无法调整大小。
实际上,整个演讲都是关于伪元素的,我发现这真是太棒了,因为我八年前也做过同样的事情。 如果你想找一些怀旧的感觉(并且可以接受一些令人尴尬的时刻),这里有一个 PDF 文件。
Eric 还展示了一个演示,其中包含一个非常酷的效果,看起来像一条从粗到细再到粗的边框,这在网络上并不容易实现。 他使用了一个伪元素,但这里把它作为<hr>
元素。
查看 CodePen 上 Chris Coyier 的作品:
CSS 粗细粗线 (@chriscoyier)
在 CodePen 上。
Rachel Andrew 有一个有趣的谈论 Flexbox 的方式。 为了方便理解,
Flexbox 不是你想象中的布局方法。 Flexbox 会查看一些不同的东西,并返回某种合理的布局。 现在 Grid 已经出现了,使用 Grid 来更明确地说明我们在布局方面做了什么,变得更加普遍。 并不是说 Flexbox 不非常有用。
Rachel 经常指出,我们并不知道 web 设计中事物的高度,这非常非常正确。 一直都是如此。 我们越早接受这一点,我们就越好。 我们工作的很大一部分是处理溢出。
Rachel 提出了一个对我来说是新概念的东西,从某种意义上说,它有一个正式的名称。 这个概念是通过 CSS 的“数据丢失”。 例如,将某个东西对齐到某个位置可能会导致某些内容在视觉上隐藏起来,完全无法访问。 想象一下,像这样一些方框,设置在 Flexbox 中,并使用居中对齐

这里没有“数据丢失”,因为我们可以阅读所有内容。 但假设我们其中一些方框包含更多内容。 我们永远无法知道高度!

例如,如果该元素位于页面顶部,则不会触发滚动条,因为它与滚动方向相反。 我们会“丢失”该文本的数据

现在,我们有了可以帮助解决此问题的对齐关键字。 例如,我们仍然可以尝试center
,但可以使用safe center
(unsafe center
是默认设置)来保存自己

Rachel 还提到重叠是 Grid 比 Flexbox 更好的地方。 这里是我对她的演示的拙劣再现
查看 CodePen 上 Chris Coyier 的作品:
使用 CSS Grid 重叠的图形 (@chriscoyier)
在 CodePen 上。
我有点希望能够在不那么明确的情况下做到这一点,但这就是我所能做到的。
Jen Simmons 为我们展示了许多涉及 Grid 和 Flexbox 的不同场景。 她非常清楚地表明,一个网格项目可以是一个 Flexbox 容器(反之亦然)。
也许最令人难忘的部分是 Jen 如何诚实地描述我们是如何实现布局的。 这需要大量的尝试,并使用一些试错法。 意外的惊喜无处不在! 但关于 Grid 的不同大小值和放置可能性有很多需要了解的东西,所以你了解得越多,你就能玩得越多。 在玩耍的过程中,Firefox DevTools 中的布局工具是你的最佳选择。

gap
的 Flexbox 会很酷。在 Una Kravets 的关于集思广益的演讲中,有一个有趣的时刻 最糟糕的想法。

这个想法是,即使集思广益会议应该没有评判,但实际上从来没有。 糟糕的想法本来就应该是糟糕的,所以你所能做的最糟糕的事情就是有一个好主意。 更好的是,从好主意开始是有问题的,因为它很容易让人过早地执着于某个想法,而糟糕的想法则允许更大的自由度,让你在创意空间中跳跃,并最终找到更好的想法。
Scott Jehl 提出了一个有趣的想法,你可以 同时获得内联代码和缓存文件的优势。 这对于我们习惯内联的东西很有用,比如关键 CSS。 但你知道什么东西内联起来也很棒吗? SVG 图标系统。 Scott 在他的演讲中介绍了这个想法,但我想看看我自己是否能尝试一下。
这个想法是,在一个新的页面访问中,会内联图标,但也会将它们放到缓存中。 然后,其他页面可以从缓存中<svg><use>
它们。
这是我的演示页面。 它并不真正适合生产环境。 例如,你可能需要进行另一次处理,通过 Ajax 获取图标并将其注入,以替换<use>
,以便所有地方实际上都以相同的方式使用内联<svg>
。 此外,一个服务器端系统将是理想的选择,以便根据缓存是否存在来显示它们。
Jeremy Keith 提到了不可思议的 素数屎熊,它就像你可能想象的那样,计算量很大。 他在谈到 web workers 的时候提到了它,web workers 本质上是在一个单独的线程中运行的 JavaScript,因此它不会/不能减慢当前页面的操作速度。 我看到 其他人的想法也一样。
我很遗憾没有看到所有的演讲,因为我知道它们都很棒。 有 很多即将到来的演出,其中有一些人也会参加!