Changing the game: Sara Soueidan on new web technologies

Learn practical frontend solutions for creative design challenges at Generate New York on 28 April! In her opening keynote Sara Soueidan will share some of the lessons and techniques she learned building websites for clients over the past three years. Book your ticket today!

Unusually, net's Skype chat with Sara Soueidan takes place in a tantalising series of five- or six-minute chunks. It's not that she's too busy to talk, but that's as long as her home internet connection in Lebanon is inclined to give us. "It's like this most of the time," Soueidan smiles. "It actually sometimes benefits me in my work, because I tend to focus on performance a lot more. Whenever I'm building anything I get to test it on an actual bad connection!"

She seems remarkably unfazed by the situation, given that she works on the web. As a freelance frontend developer Soueidan has risen to prominence over the last couple of years, building up a strong portfolio of client work, garnering praise for her articles on CSS and SVG, and establishing a presence on the global events circuit. "What I love about my job is the variety," she says. "The variety of what I get to work on, who I get to work with, and where I get to do the work. Like sometimes I get a lot of work done in a plane or during a layover in an airport in a strange city somewhere." 

Global pursuits

It's not as footloose and fancy-free as it sounds; holding a Lebanese passport means the vast majority of Soueidan's business trips require a visa. Paperwork takes around a week, and the application process can take three or four. Most embassies require her to leave her passport for this period, so if she's speaking at a conference in January she won't be able to travel anywhere in December, for example. She's had to decline a lot of invitations for this reason.

• Choose a website builder: 16 top tools

"It gets stressful. It gets really tiresome," she sighs. "It's usually worth it because I very much enjoy speaking at conferences and meeting new people, but the process has been getting a lot more stressful recently." 

She sounds so wearied by the situation that it prompts us to ask if she's considered moving. She's had offers – jobs in London, San Francisco, Amsterdam and Berlin have all been on the table – but it's not enough to tempt her. 

"I don't have anything outside. I'm not going to leave everything and everyone I love behind just so I can work for some big company abroad and make more money, or get some passport that would allow me to travel with a little bit more ease," she responds. "No, it's not something I'm thinking about doing at the moment."

A virtual gold mine

Thankfully, the languages of the web cause fewer headaches. When Soueidan got her first taste of HTML at around 14 in an IT class, it just made sense. "It all looked very, very familiar to me even though I had never seen that kind of markup before." 

Despite this, when picking her major it was not Soueidan's first choice. "I wanted to do architecture," she announces. "But we weren't particularly rich back then, so I had limited options when it came to what major I could choose. The one that sounded the least boring was computer science."

It wasn't until after college that Soueidan really revised her opinion. A developer friend recognised her potential and decided to teach her CSS. After 10 lessons she was hooked, and started to explore JavaScript. She discovered Codrops ("It felt like I had found a gold mine. I fell in love with web development even more when I found their website") and CodePen, which had just launched.

Then, around the start of 2013 and in search of a challenge, she decided to recreate all the 3D animations in Windows 8 using just CSS. She wrote her first article explaining her process, and it amassed over 20,000 views in three weeks. The work won her her first client.

After the success of that first article, Soueidan embraced her natural teaching ability and started writing more and more, before moving into running workshops. "When you're learning something new, you have this fresh perspective and you're able to explain it in a much clearer way to other people that are also just getting started with it," she enthuses. "I love breaking complex topics into very simple, digestible ideas. Every time I learn about something new and I'm excited about it, I want to share my excitement with people." 

Old and new

The topic Soueidan has been so effectively breaking down for people recently is SVG. She's become known as something of a guru on the subject, but when we ask her about it, it's clear her enthusiasm has moved on to other things. "I'm starting to stray away from SVG," she says carefully. "I spent a lot of time digging into it before. I now think of it as just one of the many useful tools we have at our disposal." 

She explains that in her current project – a redesign of Smashing Magazine – SVG enabled her to create content that was visually appealing, but also accessible and performant. As she continues, she seems to warm up a little and we see a twinkle of that previous passion. "I think it's the most ideal way for that situation; it's extremely powerful. It enables us to think of creative ways to display images."

However, with great power comes great responsibility, and there are some lingering bugs in basic features that need to be fixed if SVG is to become truly useful. "I don't use CSS animations on SVG elements unless I know the animation is very trivial. If I really need an animation to work everywhere I have to use JavaScript, and I know that a lot of people also eventually resort to JavaScript because of the browser inconsistencies and lack of support for the basic features." 

So SVG is on the back-burner. What is getting Soueidan fired up these days? "What interests me the most now is CSS Grid. The syntax is a bit usual, a bit different to what we're used to with CSS, but it's definitely much better than everything we've had so far. Even Flexbox. Grid is definitely what I'm going to be using for layouts in the future." 

She explains that Grid is so exciting because it abstracts the layout from the DOM, meaning you can place your DOM elements in any visual order you want, all from the style sheet. It's the latest in a range of technologies that are changing the game when it comes to web design. 

"Combine it with features like CSS Regions and Shapes, plus things like vertical writing modes or CSS transforms, and you've got a set of tools that enable you to break outside the norm to create pages that are no less creative than those we see in print design. I've always been into print design so the ability to see the same creative designs on the web is extremely exciting."

Finding a spark

Those who have met Soueidan or seen her speak often comment on her energy. Her conference talks seem to run at 100mph. When she's interested in something, her enthusiasm is palpable. "Sometimes I know I have a lot of stuff that I want to do the next day and I really want to do it, I mean I'm excited about doing it, so I start early," she enthuses. "Sometimes I start even before I eat my breakfast."

It seems like her energy knows no bounds, but we ask, half joking, how she manages to keep it up – especially as it seems like every professional has their own burnout horror story. There's a long pause. 

"Actually I lost my inspiration for a while. I was on the verge of a burnout, literally. I did have a short period of depression as well. I wasn't excited about anything on the web any more. When you're doing something you love, it's very easy to overdo it and I tend to do this a lot. I end up exhausting myself without realising it. Now I'm starting to be more aware of myself and my energy and my time. Time is very important here."

Thanks to a combination of returning offline pursuits – Soueidan is a keen artist and nature-lover – and more conscious time management, things have got a lot better. Last year she decided she would take every December off as a 'reading month', to read a few books, learn new topics and work on any side projects. 

In the end, Soueidan's natural affinity for the web also played a part in restoring her energy. "Learning new things is one of the things that gets me back on track. If I find there is a new technology that everyone's talking about and it's exciting, it's usually enough. I just need that small spark and that is enough to bring me back." 

This article was originally featured in net magazine issue 287; buy it here.

Sara Soueidan will share a ton of techniques and practical tips in her opening keynote of Generate New York on 28 April. Register today!

Related articles:

• 9 free design newsletters for 2017
• What's the best programming language to learn first?
• 21 top examples of JavaScript