Sara Soueidan Front-end developer / Author / Speaker. Available for hire

  • Migrating from Jekyll+Github Pages to Hugo+Netlify
    During the last 18 months, working on my Web site became a daunting task—be that for developing, redesigning it, writing a blog post, or making updates to my speaking and workshop pages. My then static site generator, Jekyll, is why. And a change has long been overdue... Jekyll became unbearably slow at compiling my Web site after every change I made. Until, at one point, waiting for the site to compile became a torturous, life-sucking process that I wanted to avoid at all costs.

    Read more ››

  • Building a fully-accessible help tooltip
    Today is one of those days that started out with a Google search for yet another accessibility question/concern. I’m working on a new project for my client Provata and part of that project is to build a sweet and seemingly simple help tooltip which explains to the reader/user what the Framingham calculator is. The tooltip is triggered by a small help icon like the one shown in the top right corner of this screenshot:

    Read more ››

  • Four Tips for Getting More Work Done While Traveling
    Staying productive during traveling can sometimes be a challenge. There are some things you can do to make the most out of your transit times and get more work done. Knomo—a UK based company that makes bags for digital nomads and techies like us, asked me to share some tips for staying productive while traveling. I shared four of the most important ones. I hope you find them useful! I will be sharing many more in another blog post too, so stay tuned!

    Read more ››

  • Mimic Relative Positioning Inside an SVG with Nested SVGs
    Positioning elements inside an SVG image is very similar—if not identical—to positioning elements absolutely in HTML. Every element in SVG is positioned "absolutely" relative to the SVG viewport, and the position inside the viewport is governed by the current coordinate system in use. But this similarity in positioning elements should not conceal the fact that there is a fundamental difference between SVG elements and HTML elements: SVG elements do not have a box model like HTML elements do in CSS.

    Read more ››

  • Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG
    If you’re reading this article, then I can probably assume you’ve already decided to switch from using fonts for icons to an SVG icon system. Or maybe you're pondering the idea and want to get an overview of how that would be done and whether or not it's worth it. Either way, this post is here to help you with that. If you’re not already convinced as to why SVG is a better icon system, then I highly recommend reading this article—a cagematch-style comparison between icon fonts and inline SVG for icon systems.

    Read more ››

  • SVG Style Inheritance and the ‘Flash Of Unstyled SVG’
    There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. Yet you might sometimes get some unpredictable results that might frustrate you when working with SVG, if you don’t know the details of how certain features should behave and what to expect from them, as per the specifications. SVG presentation attributes come with a bit of their own behavior which might sometimes surprise you.

    Read more ››

  • 2015 In Review
    Happy new year! 🌟 OK, I felt awkward starting a blog post that way—I confess. ☺️ But this is also an unusual post—not an article about CSS or SVG, and not a lengthy tutorial about web development. It is also the quickest post I ever wrote. This is my first time writing a year in review kind of post. A lot of great stuff has happened in 2015 that I thought are worth documenting and have a look back at a few years from now.

    Read more ››

  • Animated SVG vs GIF [CAGEMATCH]
    SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. But this, of course, only applies to images that are good candidates for SVG, such as: Logos, non-complex, vector-based illustrations, user interface controls, infographics, and icons.

    Read more ››

  • Tips for Creating and Exporting Better SVGs for the Web
    Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in the graphics editor in the process of creating the SVG directly affects the resulting code and hence the work of the developer in charge of embedding, scripting or animating the SVG.

    Read more ››

  • Developer of the Year 2015 net Award
    Last Friday, I gave my first keynote in the UK at Generate Conf. That same day, the net awards were announced. On Saturday, I came back home with an award: the Developer of the Year award. This is a short thank you post to everyone involved. Photo by net magazine. All rights reserved. (Original Photo) A few months ago, many fellow designers and developers nominated me for two net awards: Outstanding Contribution and Developer of the Year.

    Read more ››

  • Screenshot of the Circulus.svg app

    Circulus.svg

    An interactive tool that allows you to customize and download an SVG circular/pie menu. The tool includes a complete guide on using the generated code, animating the menu (with examples) and UX consideration tips.

  • Screenshot of the CSS Blender app

    The CSS Blender

    An interactive tool that allows you upload an image and apply the different CSS background blend modes and preview the result live. It also comes with an option to add text and blend that text with the background image you provide.

  • Screenshot of the SVG Coordinate System Visualizer app

    The SVG Coordinate Systems Visualizer

    Featured by netmag’s Creative Bloq blog as one of the top 10 best web design tools of July 2015, this is an interactive tool that allows you to visualize how the SVG attributes: viewBox and preserveAspectRatio work and interact with each other, providing a better understanding of how SVG coordinate systems work. The tool also comes with a cheat sheet for quick reference and easier understanding.