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 (and in need of a cloud storage service to store her wise words in!). 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.
“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.”
“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.
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.
Need to upgrade your web design toolkit? Head to our guides to the top web hosting services and website builder tools around.
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.