Code smarter using universal components

[Rss Bot 1]

There aren’t many speakers in our industry whose passion for front end development is as infectious as Sara Soueidan’s: her workshops and talks are so crammed with advice – not least because of the dizzying speed she delivers them – that they regularly leave attendees with their minds blown. The impressive words-per-second ratio even prompted one delegate to tweet how amazing it would be if Soueidan and Eminem competed in a rap battle.

Best known for her outstanding work around CSS and SVG (her SVG workshop, in fact, is her most popular one), Soueidan has been developing a new workshop, set to debut at Generate London in September, which is focused on designing and creating universal UI components.

“A while ago Zach Leatherman retweeted someone who was asking for dependency-less Vanilla JavaScript components,” Soueidan remembers. “Zach said that it would be really nice if we had a universal components repository, so I searched the word ‘universal’ and came up with this definition: a universal component is a reusable component and contributes to and enhances the overall user experience of the interface. It’s accessible and embraces best practices in terms of UX design and code. Ideally it has no dependencies whenever and wherever possible and can be plugged into any or many environments and contexts.”

Universal components don’t require a specific setup or JavaScript frameworks, which Soueidan always tries to avoid, unless they’re absolutely necessary. Each component has its own UX considerations. By way of an example, Soueidan points to an article by Eric Bailey on Smashing Magazine that she’s just read, in which he explains why you shouldn’t be using the placeholder attribute. 

“That’s a fantastic example of the things that I’m going to be covering in the workshop,” she enthuses. “It’s best practice to not use a placeholder when you’re creating input fields because it has a lot of accessibility and UI design problems. So if you’re going to ditch placeholders, you’re going to have to provide a more accessible solution."

Soueidan plans to do exactly that with every single component she has time to cover during the workshop (this includes buttons, mobile interactions, navigation systems, tool tips and accordions). Attendees will explore everything from the UX decision-making process to building the component with markup, semantics and accessibility in mind. 

“I recommend [you] start testing for accessibility on a component level whenever possible. Don’t wait until you’ve built the entire user interface and then start testing. When you break things down into smaller parts, you get better results and it doesn’t feel that it’s a big burden.”

One of Soueidan’s favourite components is the form, which she loves styling with SVG, specifically checkboxes and radio buttons. The typical way to style them would be using a PNG sprite, which is something that requires an extra HTTP request, or CSS pseudo-elements, meaning it requires writing a lot more CSS. Soueidan, however, recommends using SVG. 

“Add an SVG path – which would be inlined in the HTML – then when the box is checked, animate it using the line-drawing technique and combine it with the sibling selector in CSS. It provides a really nifty animation when the user interacts with the checkbox and requires only inlining a very small SVG in your HTML – no extra HTTP request and one line of CSS. It’s visually more appealing as well!”

She loves using SVG in unconventional ways, for example to replace CSS features that don’t have enough browser support. An example of this is the object-fit property, which defines how an element responds to the height and width of its content box and enables you to crop and scale images by giving control over how it squishes and stretches inside its box. 

“If you need to support any version of Internet Explorer, it’s not going to work,” Soueidan warns. “But with SVG, you can use the most powerful attributes: the viewBox attribute and the preserveAspectRatio attribute, my absolute favourites. They can be used to get exactly the same result as object-fit but instead of using CSS, you use SVG and get browser support all the way back to IE9.”

These kinds of tips just burst out of her, yet Soueidan says the more she works with CSS and SVG, the more she struggles to differentiate between what’s common practice and what are novel techniques of her own creation. This means she doesn’t always recognise how useful they could be to other developers. “A lot of the things that I use in my workflow and take for granted are still new and would count as really nifty tricks to someone else but I’m really bad at identifying them. I just have too many.”

As you can probably surmise, Soueidan isn’t one to add trendy new frameworks to her workflow without being sure they’ll boost a site’s efficiency. Whenever a new feature is released she doesn’t dig right in but first tries to get a broad overview to determine if it’s going to help her in her work. She was well aware of both Vue and React about a year ago but only started really learning one of them when she decided that she needed a JavaScript framework, both for client and personal projects. 

“I chose Vue because it’s much more approachable and closer to my mindset,” she explains. “The paradigm shift isn’t as strong as it is with React. I just can’t get my brain to think in the React way, whereas Vue is a lot closer to my way of thinking.”

Soueidan also doesn’t like the way React is being used, which prompted her to tweet that React is the new jQuery, a widely misunderstood statement. “Some people thought that I was hating on React but I definitely didn’t mean it in that way,” she clarifies. 

“React seems to be becoming the go-to choice when building components for a lot of developers, even when it’s overkill and completely unnecessary. This is similar to when everyone used to plug jQuery into all of their projects, even though Vanilla JavaScript or even just CSS was more than enough for the task. I just don’t like the misuse of it.”

Sara Soueidan will be delivering her talk – Using CSS (and SVG) for the good of UX – at Generate. In it, she will show you how UX has a direct impact on how the user feels, whether they find it delightful to use and, most importantly, whether or not they can use it properly.

Generate London takes place from 19-21 September 2018. Get your ticket now.

This article was originally published in issue 310 of net, the world's best-selling magazine for web designers and developers. Buy issue 310 or subscribe to net.

Related articles:

• Get your head around React with these five factors
• 4 ways to create CSS that's modular and scalable
• Changing the game: Sara Soueidan on new web technologies

View the full article