The <span style="font-family: cursive;">Illustrious</span> Author

Sara Soueidan

Shortlisted for Outstanding Contribution of the Year, and named Developer of the Year in the 2015 net awards, Sara Soueidan is a freelance front-end UI/UX engineers, trainer, author and speaker from Lebanon. She works with companies across the globe, building inclusive Web interfaces & experiences with strong focus on accessibility, progressive enhancement and performance. Sara trains teams of designers and developers by running full-day workshops about front-end development— particularly CSS and SVG — both in-house at companies including The Royal Schiphol Amsterdam Airport and Netflix, and at international conferences, where she also speaks about all things front-end. She is also renowned for her in-depth, extensive technical articles that she publishes on her blog and for various online publications. She tweets at @SaraSoueidan.

Article

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit`

One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing … Read article

Article

Building A Circular Navigation with CSS Clip Paths

The CSS clip-path property is one of the most underused and yet most interesting properties in CSS. It can be used in conjunction with CSS Shapes to create interesting layouts, and can be taken to the extreme to create some incredibly impressive layouts and animations like the Species in Pieces project.

While exploring the creation of arbitrarily-shaped UI components using CSS and SVG, it occurred to me that the clip-path property, when combined with SVG paths, can be used … Read article

Article

A Guide to SVG Animations (SMIL)

Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epicRead article

icon-link icon-logo-star icon-search icon-star