CSSconf EU


Meet the CSSconf Speakers: Sara Soueidan

Sara Soueidan is a freelance web developer from Lebanon. She is well known in the CSS scene for her great demos and in-depth writing for A List Apart, Dev.Opera and Codrops.

In her talk “Styling and Animating Scalable Vector Graphics with CSS” Sara will demonstrate how SVGs can be styled and animated using CSS, and will share her knowledge about the gotchas, bugs, and tips to help you get started with CSS and SVGs. Sara will also cover responsifying SVGs and using CSS media queries with them. Last but not least she will dive into code and walk through it all the way from styling and animating to responsifying SVGs.

For CSSconf EU, Sara is travelling over to Berlin from Tyre in Lebanon, and answered a few questions for us about her culture, favorite CSS quirks and properties, and getting better at JavaScript.


Hi Sara! You will be touring quite a few conferences this fall. Besides speaking, what are you working on at the moment?

Hey! Yes, I have four conferences in Europe this fall, it’s gonna be really exciting! I have CSSConf EU (obviously), followed by From the Front in Bologna seven days after, and then Fronteers in October, and Codemotion Madrid in November. So these four are going to be taking quite a big part of my time in the next three months.

Besides speaking, I’m currently writing a few articles for several magazines including Smashing Magazine, netmag, and CSS-Tricks, in addition to a project we’re working on at Codrops, which we’ve been working on since the beginning of the year. So my work is focused on writing these days, with a list of todos that involve side projects and some client work that I work on every now and then depending on the amount of time I have.

You live in Tyre, Lebanon. What does the web developer community look like there?

I must admit I don’t know any web developers in my area. I’m sure there are some, but I don’t know any. I know the dev community in Beirut is definitely bigger, but I don’t know anyone there either! Most of my contacts and work is with people and agencies based outside of Lebanon. It’s also worth noting that most of the web developers in Lebanon tend to focus on the back-end; you don’t find a lot of front-end focused developers here. I’m not sure why! But I’ve been contacted a few times by devs in Lebanon and all of them told me the same thing: that they don’t usually meet or know developers focusing solely on the front end.

That said, I do know there are quite a few devs in Lebanon, but the community isn’t as socially active there as it is elsewhere. I hope that someday this will change, though.

Your first conference talk happened earlier this year at CSSconf US. Nicole Sullivan introduced you and told the audience a bit about the conventions and manners in your country – would you mind sharing with our readers as well?

Thank you for bringing that up! One of the first things I worry about when I know I’ll be travelling to speak at a conference now is the hand-shaking convention. In Arabic countries, it is known that Muslim women, particularly veiled ones like me, don’t shake hands with men. It is one of several traditions we have that come with the veil. The veil is kind of like the physical aspect, and with it comes something like a “code of conduct”, and not shaking hands with men is in that “code”. When Nicole introduced me and brought this up at CSSConf US, we forgot to mention how I greet people, so it seemed that a lot of the attendees felt a bit awkward when they came up so say hi because I forgot to give them an alternative for the handshake!

The way we greet men is we put our hand on our chest and say hello with a slight nod of the head. That’s it. It’s very simple. So, instead of offering your hand to shake, you’d just put your hand on your chest and say hello with a nod. That said, women shaking hands with women is normal and totally fine!

Some men offered to shake my hand at CSSConf and I, involuntarily, just put my hand on my chest and apologized for not shaking hands, without actually explaining that the hand-on-chest move is the way I greeted them back. So I’m glad you brought this up because I wouldn’t want anyone to think of me not shaking their hands as an offense to them in any way. It’s not, it’s just our tradition. So please do feel free to come say hi, I’d love to talk to you about CSS and SVG and the likes!

Oh and by the way: I also don’t drink alcohol and refrain from participating in events where alcoholic drinks are served.

We don’t want to spoiler, but… what is the one thing that you wish everyone in the audience takes away from your talk?

I’m hoping that after listening to my talk, everyone would have a good starting point for working with SVG and knowing how to control or manipulate them with CSS. I want to go over some points that hopefully will help save lots of headaches and frustration when dealing with SVG and when styling SVG with CSS. There are certain problems that many devs seem to run into quite often when they work with SVG, and I’d like to address those problems, hopefully providing some useful information for everyone tackling them in their own work.

What is an upcoming CSS feature that you can’t wait to see widely supported by browsers?

That’s a tough question! There are lots of great features that I look forward to. If I were to think of my favorites, those would be CSS masking, filters, and blend modes. I’m not a designer and am not very good with graphics editors, so I’m all for CSS features that allow me to ditch the graphics editor and achieve great visual effects right in the browser, using code.

Can you think of a demo that recently blew your mind? Something on Codepen, or Github, or…?

There are a lot of great demos emerging every day, it’s very hard to list them all here. But if I can go back in time a little bit, I remember one demo that made my jaw literally drop – it’s the Cupcakes! app that Adobe’s CJ Gammon created using all the different CSS features mentioned in the previous question, and more. The demo not only included delicious recipes and photos of cupcakes, but was also a practical and very beautiful example of how CSS masking, clipping, shapes, canvas blend modes, and other features, can be combined for amazing results. Each feature was used in a very subtle way and yet created impressive visual effects which made the app stand out and took its design to the next level.

Will this be your first time in Germany?

No, it won’t be my first time. But it is my first time in 20 years! Indeed, I lived in Germany when I was little. Dortmund was my home for eight years, before my parents moved back to Lebanon 20 years ago. So, the trip is going to be slightly sentimental, and I’m looking forward to it. I don’t speak German as well as I used to when I was 8, but at least I should be able to manage to speak a little and understand people talking to me!

What are you looking forward to exploring in Berlin?

Hmm, I honestly don’t know. I’ll need to do some googling and ask people for recommendations – maybe you could give me some tips and advice? Well, I’ll be looking for Lebanese restaurants, that’s for sure!

Do you have a favorite CSS property, and if yes, what is it?

I think my favorite property is the clip-path property. It’s the one I enjoy using the most. I love how simple it makes it to shape your elements into any shape you want, changing how they look using just one line of CSS. I also love how well it works with SVG, and the combination of both is one my favorite things in CSS.

If you would not work in the web, what else would be your profession?

I’d be an architect. I used to draw when I was younger, and I was slightly fond of math too, and I’ve always been fascinated by architecture and would have definitely studied it as a major if I didn’t get into Computer Sciences in college. As a matter of fact, I was about to enter college for architecture before I changed my mind in the last minute and switched to CS instead.

What CSS quirk has cost you the most nerves so far?

It’s not a CSS quirk per se, but styling form elements is always a pain in the neck. And I’m not a fan of frameworks or plugins, so I always end up having to deal with browser quirks and different implementations and styling, which is never fun (but admittedly, can be satisfying at times).

What’s the thing you like most about your job?

I love being able to connect to so many people from all over the world, who share the same passion. I love being able to work from home, at my own time and my own pace (the best part about being a freelancer). And I love the fact that coding is somehow very similar to drawing: you write some code and get to see the visual result of that code live, just like the visual feedback you can get when you grab a pencil and start drawing on a piece of paper. I love how generous our community is, and how many options we have for doing almost anything in our field (though I have to say, that part can easily become overwhelming, but it’s always interesting and beautiful nonetheless).

Are there things you want to improve about yourself? Maybe anything you’re working on at the moment or are planning to do so in the future?

Of course! I love Javascript, but ever since I started doing web development (which is less than 2 years ago), I haven’t found the right time to really dig into it. I did some JS work for a client a couple of times (most of my other work was CSS-focused), and created a jQuery gallery plugin which is decent enough, but I still need to work on my JS skills a lot. 2014 has been CSS and SVG year for me, and hopefully 2015 will be JS year (at least these are my current plans for that year, but who knows, right?).

I also want to get better at speaking, of course! I know this comes with experience and with time, but it is one of those things I want to improve as well.

You can follow Sara on Twitter, check out her code on Github, or read her articles on her blog.


We are currently offering sponsorship packages and media partnerships for CSSconf EU.
Learn more

Supporters and Media Partners