Hacks Decoded: Sara Soueidan, Award-Winning UI Design Engineer and Author

Welcome to our Hacks: Decoded Interview series!

Once a month, Mozilla Foundation’s Xavier Harding speaks with people in the tech industry about where they’re from, the work they do and what drives them to keep going forward. Make sure you follow Mozilla’s Hacks blog to find more articles in this series and make sure to visit the Mozilla Foundation site to see more of our org’s work.

 

Meet Sara Soueidan!

Sara Soueidan is an independent Web UI and design engineer, author, speaker, and trainer from Lebanon.

Sara has worked with companies around the world, building web user interfaces, designing systems, and creating digital products that focus on responsive design and accessibility. She’s worked with companies like SuperFriendly, Herman Miller, Khan Academy, and has given workshops within companies like Netflix and Telus that focus on building scalable, resilient design.

When Sara isn’t offering keynote speeches at conferences (she’s done so a dozen times) she’s writing books like “Codrops CSS Reference” and “Smashing Book 5.” Currently, she’s working on a new course, “Practical Accessibility,” meant to teach devs and designers ways to make their products accessible.

In 2015, Sara was voted Developer of the Year in the net awards, and shortlisted for the Outstanding Contribution of the Year award. She also won an O’Reilly Web Platform Award for “exceptional leadership, creativity, and collaboration in the development of JavaScript, HTML, CSS, and the supporting Web ecosystem.”

We chatted with Sara about front-end web development, the importance of design and her appreciation of birds.

Where did you get your start? How did you end up working in tech?

I took my first HTML class in eighth grade. I instantly fell in love with it. It just made sense; and it felt like a second language that I found myself speaking fluently. But back then, it was just another class. As I continued my journey through high school, I considered architecture as a major. I never thought I’d major in anything even remotely related to tech. I always thought I’d choose a career that had nothing to do with computers. In fact, before choosing computer science as a major, I was preparing to study architecture in the Faculty of Arts.

Then, life happened. A series of events had me choosing CS as a major. And even after I did, I didn’t really think I’d make a career in tech. I spent 18 months after college pondering what I could do for a living with a CS major in Lebanon, but I didn’t find my calling anywhere.

My love for the web was rekindled when someone suggested I learn web development and try making websites for a living. The appeal of that was two-fold: I’d get to work remotely from the comfort of my home, and I’d get to be my own boss, and have full control over my time and the work that I choose.

After a few weeks of learning modern HTML and CSS, and dipping my feet into JavaScript, I was hooked. I found myself spending more time learning and practicing. Codepen was new back then, and it was a great place to do quick code exercises and experiments. I also created a one-page Web site — because if you’re going to work freelance and accept work requests, you gotta have that!

As I continued learning and experimenting for a few months, I started sharing what I learned as articles on a blog that I started in 2013. A few weeks after I published my first article, I got my first client request to create the UI for a Facebook-like Web application. And over the course of the first year, I got one small client project after another.

My career really kicked off though in 2014. By then, I was writing more, getting more client work, and writing a CSS reference for Codrops. Conference speaking invitations started flooding in after I delivered my first talk at CSSConf in 2014. I gave my first workshop in LA in 2015. And I have been doing what I do now since.

I am grateful things didn’t work out the way I wanted them to after high school.

You’ve been programming for a while now, you’ve co-authored a book about the craft, you’ve created guides like the Codrops CSS Reference — what drives you?

A thirst for knowledge and a craving for variety in work. I don’t think I’d be inspired enough to do any kind of work that doesn’t satisfy both. I also need to feel like I’m doing something meaningful, like helping others. And I’ve been able to fulfill all of these needs in this field. That’s why I fell in love with it.

Being independent, I have full control over my time and the type of work I spend it on. While building websites is my main work and source of income, I do spend a large portion of my time switching between writing, editing, giving talks, running workshops (in-house and at events), making courses (this one’s new!) and working on personal projects.

Everything I do complements one another: I learn, to write, to teach; I code, to write, to speak; I code, to learn, to share. It’s a wonderful circle of creative work! This variety helps keep the spark alive, and helps me rekindle my passion for the web even after frequent burnouts.

I like that I must keep learning for a living! And that I get to also teach (another passion and — dare I say — talent of mine) as part of my job. I teach through writing, through speaking, through running workshops, and even through direct collaboration with designers and engineers on client projects.

I always think that even if I end up changing careers, I would still make some time to fiddle with code and make web projects on the side of whatever else I’d be doing for a living.

When it comes to front-end versus back-end versus full stack, you seem to be #TeamFrontEnd. What is it about front-end web and app development that calls your name (more so than back-end)?

I love working at the intersection of design and engineering! This is the area of the front end typically referred to as “the front of the front end.” It is the perfect sweet spot between design and engineering. It stimulates both parts of my brain, and keeps me inspired and challenged — a combination my brain needs to stay creative.

I find building interfaces fascinating. I love the fact that the interfaces I build are the bridge between people and the information they access online.

That comes with great responsibility, of course. Building for people is not easy because people are so diverse and so are the ways they access the Web. And it’s the interfaces they use that determine whether they can!

It is our responsibility as front-end developers and designers to ensure that what we create is inclusive of as many people as possible.

While this may sound intimidating and maybe even scary, I find it inspiring. It is what gives more meaning to what I do, and what pushes me to keep learning and trying to do better. The front of the front end is where I found my sweet spot: a place where I can be challenged and inspired.

A couple of years ago, I was feeling this so much that I shared that moment on Twitter. Among the many replies I got, this quote by Douglas Adams stuck with me:

We all like to congregate, at boundary conditions. Where land meets water. Where earth meets air. Where body meets mind. Where space meets time.”

What do you love about coding? What’s your least favorite part?

My favorite part is the satisfaction of seeing my code “come to life”. The idea that I can write a few lines of code that computers understand, and that so many people can consume and interact with it using various technologies — present and in the future.

I also appreciate the short feedback loop in modern code environments: you write code or make changes to existing one, and see the results immediately in the browser. It is almost magical. And who doesn’t like a little bit of magic in their lives?

My least favorite part, however, is that it requires so little movement. There is life in movement! One of my favorite yoga teachers once said: “Once you stop moving, you start dying.” And I felt that. Spending so much time in front of a screen is very taxing.

Regular exercise is crucial for my ability to continue doing what I do. But I still sometimes feel like I need more movement during my work sessions. So I got a standing desk a couple of years ago.

Switching between standing and sitting gives my body short “breathers” throughout the day and allows for better blood flow. A balanced lifestyle is crucial to maintaining a good health when you spend as much time in front of a screen. Try to move, drink lots of water, and go outside more.

You’re based out of Lebanon. What’s something many folks may not realize about the tech scene there?

I know this isn’t the answer you’re expecting, but I think what many people don’t realize about the tech scene here is how challenging it is! In Lebanon, we live in a country that has a massive, serious, and ongoing power crisis.

This crisis, as you can imagine, affects almost every facet of our lives, including the digital. You need power to do work. And you need an internet connection to do work. We’ve always had problems with internet speed. And with the fuel shortage, full power outages, and reception problems, having a reliable connection is less likely than before.

But there are some incredibly talented designers and developers still making it work through this all. Living in Lebanon brings daily challenges, but being challenged in life is inevitable.

I try to look on the bright side of everything. Working on a slow connection has its upsides, you know. You learn to appreciate performance more and strive to make better, faster Web sites. You appreciate tech like Service Worker more, and learn to use it to make content available offline. If anything, living here has made many of us more resilient to change, and more creative with our solutions in the face of crisis.

How do you find (tech) supporting communities in Lebanon, if not where does your community live?

I don’t. But that’s mainly because I live in an area with no active tech community. And I live far from where any tech meetups happen. I also don’t know any front-end focused developers in Lebanon. I’m sure they exist; it’s just that, being the introvert that I am, I don’t happen to know any. So my community is mainly online — on Twitter, and in a couple of not-very-busy Slack channels.

Ok, random question. We’ve gotta know about the birds. You’ve raised at least a dozen. What’s the story there?

It all started back in 2009, I think. A close friend had, for whatever reason, decided that I might enjoy taking care of baby birds. So, he got me a baby White-spectacled Bulbul (my favorite bird species currently), with all the bird food I needed to start. He taught me what I needed to know to take care of it. And he told me that, when it grows up, it won’t need to live in a cage because I would be its home. I had no idea back then how much I’d fall in love with that bird.

I’ve raised 10+ birds since. Not a single one of them was kept in a cage. I would raise them and train them so that, when they grew up, they would fly out in the morning — making friends, living like they were meant to, and return home before the end of the day.

They would drink from my tea cup, share my sandwiches, eat out of my plate (mainly rice) and spend most of the day either sitting on my shoulder and head, or napping on my arm. Friends have always told me that I was like a Disney princess with my birds. I’m not sure about that, but it did sometimes feel that way. x)

Here’s a photo of my last two baby birds from a couple of years ago. I took them out in a car drive to “explore the outside world” for the first time.

They just sat there chilling on my arm, as they watched the world (cars, mainly) pass by.

Years after my friend got me my first bird, I asked him why he did, and whether he knew about the connection that was going to happen. His answer was short. He said: “You have the heart of a bird. I knew you’d love creatures that are like you.

Another random question: In an interview, you mentioned mainly working in the morning (6am-10am), and slowing down after lunch. You’re like me! How important is a flexible work day to your workflow? (And how do we convince more people that 9-to-5 work isn’t realistic for everyone? How do we normalize hard work in the morning, meetings and calls in the afternoon?) 

I can’t imagine myself working on a 9-to-5 schedule! That’s actually one of the few reasons I never took a full-time job. As I mentioned earlier, flexibility was a key factor in choosing a freelance career.

I am an early bird. On a typical day, I wake up no later than 5:30 in the morning. So my day starts very early. My brain’s information retention powers are at their highest early in the morning. So I get my best work done during that time. With my brain firing on all cylinders, I make quite a bit of headway with the day’s tasks. What makes this time even more productive is the fact that there are no expectations, nor interruptions: no emails, no client communication, not even any IRL interruptions.

The earlier you start in the day, and knowing that most people are only really productive for about 4.5 hours a day, I believe it makes a lot of sense to slow down after lunch.

I realize this is easier said than done, though. Being freelance gives me this flexibility but I realize others may not have that working full time. But with more companies going fully or partially remote now, I think more people will hopefully get to choose when they work during the day.

You’re working on an accessibility course, can you talk a bit about why you decided to develop this course and the importance of creating more accessible web interfaces?

Before COVID-19 hit, I traveled to run workshops at conferences and in-house at companies. The lockdown had us all, well, locked down, so that was put on temporary hold.

Over the years, I collected some amazing feedback to my accessibility workshop from former attendees. I knew I had useful content that many others would find helpful.

As many events went online, running the workshop online was the sensible plan B. But the fact that my Internet was unreliable made that a little risky — I wouldn’t want my internet connection to fail in the middle of an online workshop! So that plan was put on hold too.

On the other hand, working with designers and engineers on client projects made me realize that there was a big accessibility knowledge gap in most companies I’ve worked with. I love to teach teams I work with about accessibility at every chance I get, but there’s only so much you can share in Zoom meetings and Slack channels. In-house workshops were not always an option, and online training was not feasible at the time.

And last but not least, I noticed that there is quite a bit of misinformation and bad advice circulating the web community around accessibility. You can cover a good amount of information in articles, but I already had a good bunch of content I could start with from the accessibility workshop that I can use as a foundation for a more comprehensive series of teaching materials — sort of like a mini curriculum.

By developing this course I am scratching my own itch. All the reasons mentioned above had me wishing I had created a course that I could share around, especially with client teams, and then with members of the community. So with the time I have in between client projects and speaking, I started working on it!

The course is called Practical Accessibility, and is still under active development, coming in 2022. The content of the course is going to be much more comprehensive than that of the workshop, and it will cover much more ground, and hopefully be a great foundation for anyone wanting to learn how to create more accessible websites.

Of everything you worked on, what’s your favorite?

Out of all the projects I’ve worked on, probably the one that stood out for me is a project for Herman Miller that I collaborated with SuperFriendly on. The project was under NDA, and was discontinued a few weeks after COVID-19 hit and the world realized it was going to change moving forward; so I, unfortunately, don’t have any details to share about the project itself.

But what made this opportunity so special is that this was the first and only project that I was involved in from the very start— from early kick-off meetings and ideation, through research and user testing, UX and UI design, and development. I learned so much working with an amazing group of SuperFriends. The trip to the Herman Miller showroom in Atlanta, where we ran a workshop with the team at Herman Miller, was the last trip most of us took before the big lockdown.

Herman Miller is a furniture company. And what many people don’t know about me is how much I love interior design. I even took an interior design course last year! So, on this project, I got to (1) work with an amazing team (who I get to call my friends now 💕), (2) on a creative project, (3) for a company specializing in making modern furniture, (4) in the field of interior design! How could I not love that?!

The cherry on top of the cake was that I got a generous discount which I used to upgrade my office chair and desk to an ergonomic Herman Miller chair and standing desk. So even my body and health were thankful for this opportunity!

Sara Soueidan desk - Sara' favorite project was working with SuperFriendly and Herman Miller. "The cherry on top of the cake was that I got a generous discount which I used to upgrade my office chair and desk to an ergonomic Herman Miller chair and standing desk. So even my body and health were thankful for this opportunity!"

Final question: What would you tell folks learning a programming language or aspiring to be a front end developer, or any sort of developer. What advice would you give them?

Learn the fundamentals — HTML, accessibility, CSS, and just enough vanilla JavaScript to get started. Build upon those skills with tools and frameworks as your work needs.

Don‘t get intimidated or overwhelmed by what everybody else is doing. Learn what you need when you need it. And practice as much as you can. Practice won’t make you perfect because there is no Perfect in this field, but it will make you better!

This probably should have been the first piece of advice though: Put the user first. User experience should trump developer convenience. Once you let that guide your work, you’re already halfway through to being a better developer than many others.

Oh and last but certainly not least: Create a personal website! Own your content. And share your work with the world!

You can keep up with Sara’s work by following her blog on her personal site here. Stay tuned for more Hacks Decoded Q&A’s!

About Xavier Harding

Xavier Harding is a writer on the content team here at Mozilla. Formerly, Xavier was a journalist where he covered consumer tech and the tech industry. In the past, Xavier’s written for Popular Science, BuzzFeed, Lifehacker, Mic, Newsweek, Fortune and Vox. Most recently Xavier worked at The Markup, but not before earning a Webby Award in 2019 for his story on how one cinematographer properly lights the HBO show Insecure for black faces — a story watched by millions. Now, at Mozilla, Xavier assists on advocacy projects like the Newsbeat, Breaking Bias, and the Dialogues and Debates interview series, which focuses on tech topics like misinformation, contact-tracing and the role technology plays in addressing racial injustices.

More articles by Xavier Harding…