A Few Words With Sara Soueidan

Sara Soueidan is a freelance front-end developer and trainer based in Lebanon. She specializes in creating modern front-end foundations with focus on semantics, modern CSS, SVG, responsive design and accessibility. She’s worked with clients including Provata Health and Smashing Magazine, and conducted workshops for (among others) Netflix, TELUS Digital, and the Royal Schiphol Group. In between client projects, Sara writes articles on all things front-end for magazines including Codrops, A List Apart, Smashing Magazine, CSS-Tricks, and more, and will be joining An Event Apart for the first time in 2019.

Tell us a little about what you’ve got going on, Sara.

This year I'm helping a client modernize their front-end architecture and code by creating a library of reusable, accessible UI patterns for their growing product, using the latest techniques in front-end. In between sessions of work, I’m preparing a new accessibility-focused workshop that I’ll be running at a few of events this year, in addition to a series of articles, and a couple of exciting personal projects that I look forward to sharing with everyone by the end of the year.

What tools do you rely on to help you do what you do?

I have a few indispensable tools in my toolkit that I have grown to depend on in my work.

In addition to the classical code editor and browser, I’ve started introducing more accessibility auditing tools into my workflow for accessibility testing.

While I already use VoiceOver on my Mac and the keyboard for testing, I have come to depend a lot on Chrome’s accessibility extensions. The aXe extension combined with Chrome's Accessibility Developer Tools are excellent for doing quick accessibility auditing. They provide me with a clear overview of the state of accessibility of my UI components and suggest any changes or fixes whenever and wherever needed. They are also an excellent high-five and shoulder pat when they report full accessibility success.

For most of my CSS work, and especially CSS layout and fonts, I rely heavily on Firefox’s excellent developer tools. The Flexbox and Grid Inspectors allow you to inspect, examine, debug and modify layout and more. The Fonts editor is also designed to examine variable fonts—also one of CSS’s most exciting new features. These devtools are indispensable for my daily CSS work.

I’ve come to love Sketch for basic UI and component design. I usually team up with my clients’ teams to work on their projects, and most of my clients’ designers use Sketch as the primary design tool. In an attempt to bridge the gap more between my work and theirs, I’ve recently started taking courses all about using Sketch for creating Web interfaces and design systems. This might also allow me to provide similar services to my clients in the future, which is something I look forward to.

I use SVG images a lot in my work for iconography and illustrations and other UI elements. For optimizing the SVG files, I use the SVGO GUI—a simple drag-and-drop window which I use to optimize the icons and images before embedding them in my components.

Productivity-wise, Notion has proven to be an extremely useful tool that is steadily gaining popularity. I use it to draft articles, brainstorm ideas, take learning notes, plan client and personal projects, and more.

We hope your talk at An Event Apart is somewhere in there!

Absolutely! SVG is one of my favorite tools of the trade, and as part of my daily work, I’m also giving a talk all about the powerful format that they are. In it, I’m going to shine the light on one of the Web Platform’s most powerful features: SVG Filters, which are so powerful they can be used to create Photoshop-grade effects in the browser, using a few lines of code.

The talk will include a lot of code, but it has a perfect balance with design as well. We will be doing comparisons and we will see how we can recreate particular Photoshop effects using SVG, step-by-step. Probably the main takeaway, in addition to a lot of inspiration, will be a clear understanding of how SVG filters work, and how you can start using them and experimenting with them to create more portable and flexible graphical effects without resorting to graphics editors.

See Sara’s talk “SVG Filters: The Crash Course” at An Event Apart Boston (May 5-7), Washington DC (July 29-31), and San Francisco (December 9-11). Don't miss your chance to learn from Sara and sixteen other world-class speakers!