Front-End Meets UX: An Interview with Sara Soueidan
Sara Soueidan chats about the intersection of front-end development and UX, why she prefers Vue to React, and how she boosts her productivity with rope jumping
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 Sara 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), Sara has been developing a new workshop that is focused on designing and creating universal UI components.
Building reusable, universal components
“A while ago Zach Leatherman retweeted someone who was asking for dependency-less vanilla JavaScript components,” Sara 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 Sara always tries to avoid, unless they’re absolutely necessary. Each component has its own UX considerations. By way of an example, Sara 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.”
Sara plans to do exactly that with every single component that she has time to cover during the workshop (this includes buttons, mobile interactions, navigation systems, tooltips 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.”
Adding delightful behaviour with SVG
One of Sara’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 requires an extra HTTP request, or CSS pseudo-elements, meaning it requires writing a lot more CSS. Sara, however, recommends using SVG. “Add an SVG path — which would be inlined in the HTML — and 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, like 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 fine-grained 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,” Sara warns. “But with SVG, you can use the most powerful attributes: the viewBox attribute and the preserveAspectRatioattribute, 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 Sara 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 much.”
Vue vs React
Sara 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.”
Sara 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.”
At the intersection of front-end and UX
Front-end developers are increasingly needing to make these kinds of considerations in their work: adding bells and whistles has to come second to great user experience. Developers are getting improve on the user interface and the UX design with their work, for example by reminding the designer to use proper focus styles and requesting to ensure the interface works for keyboard users. Or by making a site work offline with features like Service Workers (which Sara highly recommends everyone tries to do, as it’s much simpler than anyone might think).
This is why Sara has added the term ‘UX’ to her job title, which may be a little unusual for a front-end developer, but for somebody who works at the intersection of both disciplines it makes perfect sense.
The decision was inspired by Paul Boag’s article ‘Why you should want to be a user experience developer’. “Paul talks about how a front-end developer plays a major role in making or breaking the user experience,” Sara explains, “and that it falls to them to make the page load faster, have proper semantics in place and ARIA roles wherever needed.” The article resonated with Sara’s idea of her job responsibilities and what she works on with her clients. She just kept nodding.
Zach Leatherman, Eric Bailey, and Paul Boag aren’t the only prominent people Sara namedrops during our interview. She rattles through names: Jeremy Keith, Marcy Sutton, Heydon Pickering. This is how she learns and sharpens her skills. She follows a lot of people in the community who post the latest news, publish articles and books, and work on CSS and SVG specifications. “Being on Twitter can be extremely exhausting,” she sighs, “but it’s one of the most useful things that I do as a freelancer who wants to keep up with everything in their field.”
Now the user experience consultancy Sara provides just comes as a (free) extra with her front-end development work. It’s her job as a developer, she argues, to make responsible decisions and not to focus on CSS-only solutions when you should be using semantic markup. “I’ve seen too many cases of UI interactions that are not accessible. Sometimes you need ARIA roles for a component to behave correctly and work with screen readers. Refusing to use markup and JavaScript and favouring just CSS-only solutions can break the accessibility of the interface and therefore affect the overall user experience in a negative way.”
Preventing burnout
In light of her UX expertise and her focus on promoting efficient code, it’s no surprise the Lebanon-based front-end developer is a sought-after speaker and workshop host around the world — at conferences and in-house at companies like Netflix. She’s also had some high profile client work, including the front-end foundation for Smashing Magazine’s recent redesign.
In the past her busy schedule has led to burnout but she’s learned to prevent it by not working as much as she used to, prioritising and only accepting opportunities that align with her personal goals. She now works four to six hours a day on average, depending on the projects and deadlines. Her most productive time is early in the morning. “I get up around 5am for the morning prayer and spend about an hour not doing anything computer-related but then, between 6 and 9am, my brain is extremely on fire. None of my clients are awake at this time, I don’t use Twitter, and remove all distractions.”
To increase her productivity Sara takes a lot of breaks. “Every time I scratch off one task on my to-do list, I reward myself by getting up and doing a light exercise — maybe it’s 10 burpees or five to 10 minutes of rope jumping. It allows me to keep up my energy physically and mentally.” She tries to balance her time between 50 per cent at her desk and 50 per cent outside, which can include going for a drive or cooking. Or recording a different kind of webinar with Smashing Magazine’s Vitaly Friedman, The Pizza Show, which covers everything but work — recent recipes they’ve discovered, places they’ve visited, things they’ve learned that aren’t related to work.
So what’s next? Sara has one last surprise up her sleeve. “I’m working on something extremely exciting with someone really big in the community. I can’t tell you much, but let’s just say that we’re going to be building useful things for people.”
This article originally appeared in issue 310 of net magazine in 2018 and has been reviewed by Sara before republication.
