跳到主要内容

使用通用组件更智能地编码

A black circle on a pink background that reads 'Web components: a revolution in frontend development'.

我们这个行业的发言人并不多,他们对前端开发的热情与Sara Soueidan一样具有感染力:她的工作坊和讲座充满了建议 - 尤其是因为她提供了令人眼花缭乱的速度 - 他们经常让与会者留下他们的头脑被炸了。令人印象深刻的单词每秒比率甚至促使一位代表发推文,如果Soueidan和Eminem在一场说唱比赛中竞争将会有多么惊人。

最出名的是围绕CSS和SVG(她的SVG研讨会,她实际上是她最受欢迎的研讨会)的出色工作,Soueidan一直在开发一个新研讨会,定于9月在Generate London首次亮相,专注于设计和创造通用UI组件。

“不久前,Zach Leatherman转发了一个要求无依赖性的Vanilla JavaScript组件的人,”Soueidan回忆道。 “扎克说,如果我们有一个通用组件库,那将非常好,所以我搜索了'通用'这个词,并提出了这个定义:通用组件是一个可重用的组件,有助于并增强整体用户体验。接口。它是可访问的,并且包含用户体验设计和代码方面的最佳实践。理想情况下,它随时随地都没有依赖关系,可以插入任何或许多环境和环境中。“

通用组件不需要特定的设置或JavaScript框架,Soueidan总是试图避免,除非它们是绝对必要的。每个组件都有自己的UX注意事项。举一个例子,Soueidan指出Eric Bailey在Smashing杂志上发表的一篇文章,她刚刚阅读,其中他解释了为什么你不应该使用占位符属性

“这是我将在研讨会上讨论的事情的一个很好的例子,”她兴奋地说。 “最佳做法是在创建输入字段时不使用占位符,因为它有很多可访问性和UI设计问题。因此,如果您要放弃占位符,那么您将不得不提供更易于访问的解决方案。“

Generate speaker Sara Soueidan sits at her desk wearing headphones and looking deep in concentration.

Soueidan计划在研讨会期间为她有时间报道的每个组件做到这一点(包括按钮,移动互动,导航系统,工具提示和手风琴)。与会者将探讨从用户体验决策过程到构建具有标记,语义和可访问性的组件的所有内容。

“我建议[你]尽可能在组件级别开始测试可访问性。不要等到构建完整的用户界面然后开始测试。当你把事情分解成更小的部分时,你会得到更好的结果,并且不会觉得这是一个很大的负担。“

Soueidan最喜欢的组件之一就是表单,她喜欢使用SVG设计样式,特别是复选框和单选按钮。设置样式的典型方法是使用PNG精灵,这需要额外的HTTP请求或CSS伪元素,这意味着它需要编写更多的CSS。但是,Soueidan建议使用SVG。

“添加一个SVG路径 - 将在HTML中内联 - 然后在选中该框时,使用线条绘制技术对其进行动画处理,并将其与CSS中的兄弟选择器结合使用。当用户与复选框交互时,它提供了一个非常漂亮的动画,并且只需要在HTML中内联一个非常小的SVG - 没有额外的HTTP请求和一行CSS。它在视觉上也更具吸引力!“

她喜欢以非常规方式使用SVG,例如替换没有足够浏览器支持的CSS功能。这方面的一个例子是object-fit属性,它定义了元素如何响应其内容框的高度和宽度,并使您能够通过控制图像在其框内搜索和拉伸的方式来裁剪和缩放图像。

“如果你需要支持任何版本的Internet Explorer,它就不会起作用,”Soueidan警告说。 “但是使用SVG,你可以使用最强大的属性:viewBox属性和preserveAspectRatio属性,我绝对的最爱。它们可以用来获得与object-fit完全相同的结果,但是不使用CSS,而是使用SVG并获得浏览器支持,直到IE9。“

Generate speaker Sara Soueidan walks down a quiet street in Lebanon, looking back at the camera over one shoulder.

这些提示刚刚从她身上迸发出来,但Soueidan说她越是与CSS和SVG合作,她就越努力区分什么是常规做法和她自己创作的新颖技巧。这意味着她并不总是认识到它们对其他开发者有多大用处。 “我在我的工作流程中使用的许多东西都是新的,对于其他人来说,这些东西都算是非常好的技巧,但我很难识别它们。我只是太多了。“

正如您可能猜测的那样,Soueidan并不是一个在她的工作流程中添加时尚新框架的人,而不确定它们是否会提高网站的效率。每当发布一个新功能时,她都不会直接进行挖掘,但首先会尝试进行广泛的概述,以确定它是否能帮助她完成工作。大约一年前,她非常了解Vue和React,但当她决定需要一个JavaScript框架时,才开始真正学习其中一个,无论是客户还是个人项目。

“我选择Vue是因为它更平易近人,更接近我的心态,”她解释道。 “范式转变并不像React那样强大。我不能让我的大脑以React方式思考,而Vue更接近我的思维方式。“

Soueidan也不喜欢React的使用方式,这促使她推文说React是新的jQuery,这是一个被广泛误解的陈述。 “有些人认为我讨厌React,但我绝对不是那种意思,”她澄清道。

“React似乎成为许多开发人员构建组件时的首选,即使它过度使用且完全没必要。这类似于每个人都习惯将jQuery插入到他们的所有项目中,即使Vanilla JavaScript甚至只是CSS对于任务来说已经足够了。我只是不喜欢滥用它。“

Sara Soueidan is giving her talk Using CSS (and SVG) for the good of UX at Generate London.

Sara Soueidan将在Generate上发表演讲 - 使用CSS(和SVG)来实现用户体验。在其中,她将向您展示UX如何直接影响用户的感受,他们是否觉得使用起来很愉快,最重要的是,他们是否可以正确使用它。

Generate London将于2018年9月19日至21日举行。立即获取您的机票

本文最初发布于net的第310期,这是世界上最畅销的网页设计师和开发者杂志。购买问题310 要么订阅网

相关文章:



翻译字数超限