Interview: Sara Soueidan

Sara Soueidan

Get free updates of new articles, interviews & roundups here, or subscribe to our RSS feed.

Sara Soueidan If you’ve ever searched for information about SVG or CSS, chances are big that you came across articles written by Sara Soueidan. Sara is a non-coffee drinking freelance front-end developer, writer and speaker from Lebanon, who is very well known for her thorough articles and speeches about SVG and CSS. A year and a half after receiving her Bachelor in Computer Sciences, she started with web development. It didn’t take long before she was hooked and started her blog. Nowadays Sara published many articles on her blog, created a complete CSS reference on CoDrops, wrote a chapter in Smashing Book 5 and inspires many people with her conference talks and workshops.

General

Are you on a Windows- or Apple computer?

I’m on a Macbook Pro 15".

What is your favorite internet browser?

Google Chrome.

What kind of phone do you use?

iPhone 6

Which software do you use to write code?

Sublime Text. I use Codekit for compiling Sass to CSS.

How do you pronounce your name correctly?

Sara Soueidan's Biography

Bachelor in Computer Science (graduaded) 2011
Freelance front-end developer 2013 - present
SaraSoueidan.com 2013 - present
Speaker at conferences and workshops 2014 - present
Codrops CSS Reference 2015 - present
Book: Smashing Book 5 2015

Personal

1.Can you tell a bit about yourself for the people who don’t know you?

I’m a freelance front-end developer, writer and speaker from Lebanon. I have a BS in Computer Sciences that I got from the Lebanese University in Beirut, and have been working as a freelance developer since 2013. I love writing and teaching and have always enjoyed breaking down complex topics into simple, digestible ideas (I used to do it a lot in school and even in college to help my friends understand certain subjects), so I combined both passions into writing articles and tutorials on front-end development. This led, after a while, to speaking at conferences and giving workshops on the same topics I write about—again, the reason being that I love doing this.

I’m also a bird person (I raised more than a dozen throughout my life ^^), not very fond of cats, and I’m a tea drinker who has never tasted coffee in her life.

2.What was your first encounter with HTML/CSS/JS and what did you like so much about it?

My first encounter with HTML was in eighth grade, 15 years ago. I took a Computer class and among many things my teacher taught us was HTML. We learned the basic tags like '<p>', '<html>', '<body>', '<img>'s that were mostly laid out into '<table>'s and using '<font>'(!). The class was so basic that we never even learned what a '<div>' was.

For reasons I don’t know, HTML and I just clicked! It felt like I was speaking some sort of native language that my brain felt extremely comfortable with. I found myself writing and creating a small web page at home even when I wasn’t asked to. I really enjoyed writing HTML. But as I finished the eighth grade I took no other classes until I got to the university, so that was a few years I spent without touching code.

In university, we also took basic classes in HTML, CSS and JavaScript, among other classes like PHP and My SQL, Java, etc. I never attended the front-end development classes. I used to skip a lot of classes. (I’m not proud of that.) I was introduced to CSS and JavaScript about a year and a half after graduation, when I started getting into web development.

3.What made you decide to study computer sciences?

Unlike many other designer and developer stories who knew they were in love with design and computers and therefore decided to study those majors in college, my decision to study Computer Sciences had nothing to do with that. As a matter of fact, one of the reasons I skipped so many classes was that I did not really want to study CS and I was really close to switching majors more than once.

I decided to study CS after having exhausted all other options. My parents weren’t particularly rich and there weren’t many universities that they could afford to get me in to. So my options were filtered first by which uni I got to study in, uni location, years it took to get a degree per major, and a few other criteria had to be taken into account. I finally, reluctantly, chose Computer Sciences.

During my first year in uni I wanted to switch to a Physics major. The second year I was about to switch to Architecture, until one day something (good) happened that led me to decided to continue my CS studies. And so I did.

In short: me getting into Computer Sciences was not particularly planned or expected. It just happened, and now I’m thankful that God kept me on that road back then (by introducing that “good incident” into my life), otherwise I wouldn’t be here now.

4.What were your plans after graduating?

I didn’t have any particular plans. When you study a major you’re not feeing very passionate about, you tend to not make a lot of plans for post-graduation. :)) I frankly thought I would get back to college at some point to study another major I liked—which is something I still think about doing even today, because I love learning and the only plan I ever made for my future was to never stop learning. Now that I’m in a field that requires me to do just that, I couldn’t be any happier. ♥

Even my work as a web developer came unexpectedly and was unplanned and unthought of. After a year and a half not knowing what to do after graduation, a close friend of mine suggested that I “have a look” at web development, knowing how much I enjoyed HTML back in school. I decided to give it a shot.

It was my friend introduced me to CSS and JavaScript, and taught me the basics from scratch. I started getting more interested and Googling answers to many questions I had, until I got hooked. A little less than a year later, I started writing articles, and decided to continue down this path and work as a web developer.

5.How does your bachelor in computer sciences contribute in your daily activities?

It almost doesn’t. 95% of what I know in the web development field today is self-taught. The only university takeaway I can think of is thinking as a programmer. For example, the Java classes I took in college contributed a lot to my understanding of JavaScript today, even though they are very different, but the basic programming methodologies are the same. Java was one of the very few classes I enjoyed and attended back then. I also loved Assembly language classes, and it was classes like those that built a—albeit thin—basis for working with programming concepts today.

6.On which activities/hobbies do you like to spend your time when you’re not working?

This is a tough one and I smiled when I read the question. The thing is: web development is also my hobby. When I’m not working, I’m either reading about it (articles that I want to follow up with), tweaking my website (which is never finished), cleaning up my desktop, drive, bookmarks, etc. and doing “maintenance” in preparation for upcoming work.

So, yeah, not really a time away from work—as you can see. This is something I need to work on and change because it is definitely not good for my overall health. That said, when I really need to turn the laptop off and rest my eyes, I like watching movies, exercising, and looking up new healthy smoothie recipes to try out. I also got a watercolor kit a while back in hopes that I’d get back to drawing/painting at some point.

7.Do you consider yourself more of a front-end developer, a writer or a speaker? What do you like most?

It’s a 1:1:1 ratio. I am a third of each. I love developing, I enjoy writing, and I particularly love speaking; getting to talk about the topics I love in spoken words is always more enjoyable than doing it in written form.

Developer

8.Can you name the advantages and disadvantages of being a freelance front-end developer?

There are many of each. The main advantages (in order of relevance to me) are:

  1. Being in control of my time. I highly appreciate that I get to set my own schedules, take breaks whenever I want (and most importantly: whenever I need to). Sometimes, after long projects, I feel like I need more than just a couple of days off, so I simply take more than a couple of days off. Waking up and going to sleep whenever I want to. Being able to speak at as many conferences as my time “allows” me to… etc.
  2. Getting to choose the work I want to do when I want to. This is also strongly tied to (1). Sometimes I want to write (when the inspiration hits), sometimes I want to work on a personal side project, and when an interesting client projects comes along I give it all the time it needs. The variety in the work I get to do is something I wouldn’t trade for anything.
  3. Being able to work from practically anywhere, including the comfort of your own home, on the balcony, at airports, in coffee shops, etc. This also contributes to variety.

So, in short, main advantages are: flexible time and variety in work—both in the work itself and where I get to do it.

There are some disadvantages to being a freelancer too, of course. To name a few important ones:

  1. No stable flow of income + having to take care of *all* aspects of your business, not just the part you enjoy the most (coding).
  2. Overworking. It’s usually very hard to separate work hours from other hours of the day, which can lead to exhaustion and eventually you find yourself wanting to just run away from the whole thing. This is possibly the most important point I need to work on. My eyes suffer from this the most.
  3. Not going out much. I’m an introvert and working from home makes my situation even more introverted, so to speak. That’s why speaking at conferences is important to me because it gets me out of this and into the real world where I get to talk to people more. My conferencing days are usually the most social days of my entire year.

These are the main three disadvantages. I’m sure I could think of more, but I’ll keep it short for brevity’s sake.

9.What makes being a freelance front-end developer so much fun?

The Freedom!

10.How do you ensure that all the websites you build look great in all browsers (also the older ones) and on all devices, and how do you test cross-browser/device compatibility?

I don’t support IE8 and below anymore. Most of my clients don’t either. So I usually test on IE9+ using virtual machines. I also own an Android phone which I test on as well.

Unfortunately, my connection does not allow me to use BrowserStack which requires a minimum connection speed to work properly.

BUT fortunately, when you take a progressive enhancement approach, you don’t really need to worry too much about devices and browser capabilities as much. I haven’t had any issues in these regards so far.

11.How do you ensure that all the website you build are future proof?

Progressive enhancement! The most important approach, in my opinion. I start mobile-first for all client work, use as little JavaScript as I can (only add when needed, go vanilla whenever I can, etc.), and any additional features I add I make sure the syntax is as stable as possible. Some exceptions exist and for those I use tools like Autoprefixr to take care of older browsers (e.g: Flexbox).

12.Front-end development is evolving fast. How do you keep up with the latest front-end development techniques?

I follow a group of people on Twitter, and have gotten back to using RSS lately to keep up with articles that can easily get lost in Twitter’s noise. I highly recommend following and subscribing to Smashing Magazine, CSS-Tricks and Codrops—they always share the best resources.

13.Which resources would you advice to somebody who just starts learning front-end development and how did you learn yourself the skills you know today?

Resources: Smashing Magazine, CSS-Tricks and Codrops. I particularly love how all three of these always share articles from other places as well, so you always get the best of the best by following these three. I also recommend setting up a Twitter account and following them there, and, with time, you build a network and/or a list of talented people who both inspire and share great resources that also help you keep up with what’s happening in the dev world.

I learned the skills I have by reading and coding and breaking down other people’s demos to learn how they work and then trying those things I learned in demos of my own. I’m not particularly good at taking and completing courses (remember skipping classes?) so I never took any courses, but I do recommend that, if anyone wants to take some, try lynda.com.

There is no better way to learn anything than by trying it yourself. Find an idea you like, turn it into side project, and work on it—you will learn loads in the process. Also, Google is your best friend for that.

14.Have you ever considered learning more about back-end development languages (instead front-end development languages only)?

I have, but I don’t anymore. I developed Wordpress themes for 6 weeks the first year I started out, the reason being that I wanted to create an app for me to collect my favorite recipes. I started in the wrong place, obviously, but my background knowledge in PHP from college allowed me to do it without any particular hardship, but the more I dug in the more I realized I’m not very fond of the back-end, and it felt more like a chore than something I enjoy doing, so I stopped.

At some point, I also thought about learning Node.js because it’s basically JavaScript, and might even look into it again in the future, but it is not on my list of top things to learn today. I like to focus my energy on one area and do well in that area, otherwise I’d feel scattered and unfocused.

Writer

15.What made you decide to start your own blog?

Documenting my own ideas. Some of the articles I used to write started out as notes I took when I experimented with CSS or tried new things out. My first blog post was a tutorial on how to create Windows 8-like animations using CSS3 and jQuery. That was one of my most popular posts and it was my first ever experiment with CSS animations. I decided to document what I did and give it a tutorial form so I could share it on my blog, and the rest just happened the same way afterwards.

16.How do you come up with the topics for the articles you publish, and how do you make sure you’re covering new/unknown techniques and methods?

This is a tough question that I get a lot. I don’t have any special recipes or ways for getting ideas. I get a lot of “dry” times when I don’t know what to write about. Most topics come from ideas I see here and there that inspire me or trigger some sort of reaction in my head that I want to express in a blog post. If there is a topic I want to see documented but can’t find a good resource about, I write about it. Sometimes I do find resources but I don’t like the way the content is laid out, or I simply want to add my own ideas and style to it. Sometimes people ask me for specific topics, and sometimes I just think “I like this topic. I’m going to write about it.” There is no magic or specific recipe behind it that I follow to come up with ideas.

17.You publish a lot about CSS and SVG. What makes you so passionate about these technologies?

When I think about it, I think it all goes back to my love for print design. I’m not a designer nor have I ever taken any design classes (I wish I did), but I’ve always been fascinated by print design.

As a kid, I loved picking up magazines just to have a look at the pictures, and was also always captured by the creative layouts used on different pages, the fonts, the big, bold headlines, and variety in the topics covered. It made me want to work in the creative field when I grew up, even if I wasn’t a creative myself.

My first CSS fascination was with the introduction of CSS Shapes and Exclusions and CSS Regions. I fell in love with them at first sight, simply because they enabled us to create magazine-like layouts on the web. So I started learning more about them and eventually writing about them too.

After that came the Codrops CSS Reference which had me digging into CSS specifications more than I ever thought I would. I like CSS and what it enables us to do, after all, it is what makes our nice designs on the web look like they do. And that’s why I write so much about CSS.

Months after, I started reading up on SVG. I also fell in love with SVG because I loved the ability to manipulate and have full control over the contents of an image—which is something we’re not really used to on the web with other image formats.

I used to draw a lot when I was younger, and, at some point during my teenage life thought about becoming a cartoon animator when I grew up so I could animate those drawings I did. SVG gives me the ability to draw whatever I want, and then control it anyway I want. It does not have any restrictions on shapes like CSS and HTML do, and it is such a big world with so many possibilities. It’s overwhelming, but in a good way. So I started digging into it more and more, reading, writing...

18.How did you become an author for Smashing Book 5 (how did this process go?)?

Vitaly approached me about writing a chapter for the Smashing Book after having written the article about Styling and Animating SVGs with CSS on Smashing Magazine and giving all those talks about SVG. I didn’t hesitate to say yes.

I started writing after we signed the contract. The process was very smooth. I finished the first draft of the chapter two weeks after I started. Then it was reviewed. I made some changes and additions for the second draft which was then reviewed and the chapter was ready for copyediting after that. Copyediting didn’t take more than a couple of days, and we were done with my chapter before the specified deadline.

19.What was it like to write a chapter for Smashing Book 5?

The idea of writing for print was something I had been thinking about for a while. It felt more “professional” than writing for my blog, and it certainly was. I learned a lot about the process of writing for print, which is beneficial since I hope to write my own book at some point in the future, and having an idea about the process definitely helps.

Writing the chapter was also an opportunity for me to dig deeper into some SVG topics that I had been reading about but never got to actually try out myself. I had to make sure all the information was accurate and so I had to do extra research, and had to put the concepts I learned into practice to make sure I got all of them right. It was really great.

20.You said on your blog that writing the CSS Reference on Codrops taught you a lot about CSS and publishing it was “extremely overwhelming and nerve-wrecking”. How did you experience the process of writing over 300 articles, did you figure on forehand that it would take around 7-8 months to finish and what would you do different if you had to do it all over again?

I knew writing the reference would take a lot of time, but I also knew I would learn a lot in the process, so I was all in and ready for that. I wouldn’t change a thing about how it went.

I still feel nervous when I publish a new article, and the feeling is usually stronger when the article is one I have spent a lot of time and effort on. That’s why publishing the reference was so nerve-wrecking because it was the biggest writing project I had worked on, and the nervousness was multiplied by 300 times. :)

21.Do you have plans on writing a book all on your own?

Yes. I don’t know when that will happen, though. But one thing’s for sure: if/when I do, I want to be the one to design the book to satisfy my love for design and print design in particular.

Speaker

22.Has speaking at conferences and giving workshops always been your dream?

I wouldn’t call it a “dream” because I never expected to actually do this. When I got the first email inviting me to speak at FOWD London, my first reaction was “No!”. Of course, I didn’t reply as soon as I got it so I never really said No, but it was the first thought on my mind. I didn’t expect to do it. Everyone I knew encouraged me to do it so I thought “Okay, why not.. I guess.”, and I ended up saying yes.

The first time Vitaly asked me to give a workshop at Smashing Conf I told him I don’t think I had enough to talk about. Little did I know that I would wish I had more time after the workshop to cover everything I wanted to cover! Giving workshops is great, and I definitely want to do it more. It gives me the chance to share what I know in a more practical way. Sharing, teaching, practical examples, and all the time I have to talk about SVG? That’s something I definitely love.

All that said, I did always want to do something that included some sort of public speaking, so you could say that it was a small part of what I dreamt of.

23.How did you end up at your first conference talk (CSSConf 2014) and how did you experience it?

After my visa application for FOWD London was refused, some of my friends asked me to apply for CSSConf. By the time the visa was refused, I was feeling ready to start speaking and was excited by the idea, so I thought I’d try applying for CSSConf and for another visa.

I applied for CSSConf by sending a talk proposal. After the proposal was accepted, I applied for an American visa. I got it! And it all went smoothly after that.

The experience was amazing. I always, always remember the first few minutes I got on stage—before my talk started and after it did. I was standing on stage with Nicole Sullivan as we were prepping my laptop and I told her that I had forgotten every single word I wanted to say. My mind just blanked out. Then you start with the talk and the words just start coming out of your mouth. By the time I got to the last section of the talk I couldn’t even believe I had made it there. After I finished, I was still in shock of the whole experience that I literally felt nothing—it was like I never even got on stage at all. It took a couple of hours to sink in the idea and start absorbing all the awesome feedback I got. It was a great experience that kickstarted the rest of my speaking.

24.In your first year as a conference speaker, you’ve already spoken at 10 conferences. What makes speaking/teaching about CSS and SVG so much fun for you?

I enjoy teaching, I enjoy sharing what I know, and I’ve never had a problem with speaking in public. Of course, the first few minutes of speaking are always the hardest because you see hundreds of eyes fixated at you, waiting for the words to come out of your mouth, so you feel really intimidated. But the idea of getting on stage and speaking is something I’m very comfortable with, in general. Nervousness never goes away, but it is still a great experience. I’m thankful for all the speaking opportunities I got and hope to do it more in the future.

The best part about any conference is the post-speaking part. The ice is broken with the audience, you all share a common interest (the web), you get to geek out as much as you want without anyone calling you a dork (my young cousin once did, haha), and most importantly: you build relationships, contacts, learn from people and give back to the community.

25.How do you find new topics to talk about on conferences and how do you ensure that the audience doesn’t already know what you’re speaking about?

My conference topics are closely and almost directly related to my article topics. Whatever topics I’m interested it at the moment, I talk and write about.

Regarding the audience: I talk to conference organizers. They usually know what their audience level is and what topics they’re in for. That helps a lot.

26.In your career as a front-end developer, writer and speaker, you’ve already received several awards. Big guys in the industry refer to you or to your articles and many woman (and men) look up to you. How do you deal with all this attention and did you ever dream about a career like this?

I’ve received one award (O’Reilly Web Platform award) and am shortlisted for to categories of the net awards, all of which I’m thankful for and all of which were completely unexpected. I’m thankful for all the attention my work gets, and do my best to keep it up and keep giving back to the community.

When I was a teenager and I used to draw a lot, I always told my family I wanted to be a famous artist. :)) I also always dreamt about a career where I would be doing what I love, even though, back then, I had other things in mind that did not include web development. Today, I do love what I do, and I get to do it for a living. It’s not all rainbows and unicorns, as they say, but I’m extremely thankful and grateful for my work and wouldn’t want it any other way.

27.Can you list some people in the industry who inspire you, who you admire or from who you learn new techniques?

I get inspiration from following a few people whose work I love and want to keep track of. The energy I see in other people helps me build up my own an come up with new ideas. I will avoid naming because I will definitely miss a few, but they are people of whom some create inspiring Codepens, others work for browser vendors and are super nice and helpful, others are developers who always push the boundaries of what is possible with amazingly creative demos.

I do want to name a few people who inspire me in many ways (not necessarily coding-wise): Vitaly Friedman, Daniel Mall, Cameron Moll, Chris Coyier, Jeffrey Way, Harry Roberts, Dmitry Baranovskiy, and Manoela and Pedro (the Codrops team), among many others. Each of them inspires me to be better in a different aspect of my work, every day.

Scroll To Top
Abhishek Sachan
- 2015-08-06 17:39:50

Every question and answer of this interview inspires me to work harder & harder. Thanks for such an inspiring interview. Expecting some more interviews like this with front-en developers.

Karen Menezes
- 2015-10-26 08:08:24

Sara, you are absolutely amazing! I love the excruciating detail in your articles, how you delved into SVG and CSS Shapes in particular. You go so deep, bring out all the complexity, and structure and simplify it so elegantly, it makes it easier to grok everything! Thank you for all your amazing work and look forward to loads more! Also love the CSS Bible you've created for Codrops :D