Sara's Mugshot

Sara Soueidan

is a Front-End Web Developer from Lebanon

Sara's Talk

A Smashing Case Study

11:30 on Tuesday, 19 September

In this talk, Sara will share a lot of things that she has learned while building the new Smashing Magazine. She has been challenged to come up with techniques that she was never using before, as well as what she thought she’d never have to use, including some techniques that are definitely more hacky than anything.

Sara's Workshop

The Front-End Espresso Shot

09:00 - 16:30 on Wednesday, 20 September

CSS has seen a lot of new feature releases in the last few years. Keeping up with everything can sometimes be overwhelming. It’s even harder for many designers and developers to ditch the tools and frameworks they’re already familiar with and relying on, in favor of new, native “frameworks” with a less than familiar syntax. But doing so is the way forward.

CSS’s native features like Flexbox and Grid as well as CSS Variables provide a lot more power and flexibility than any previous frameworks or tools did—power than we should embrace and put to good use today moving forward.

In this workshop, we will cover a range of topics from SVG usage as an image system to CSS features, building progressively enhanced page layouts with the newest CSS layout techniques, creating truly scalable, responsive typography, theming using CSS Variables, and creative visual effects using CSS transformations, blend modes and filters, and making sure our components have at least the minimum level of accessibility.

You'll walk away with knowledge they can apply right away, including:

  • Creating creative page layouts with the new CSS Grid framework.
  • Component-level layout enhancements using CSS Flexbox.
  • Using CSS’s native feature detection @supports to leverage the new layout techniques, all the while providing basic fallback for non-supporting browsers.
  • Using CSS custom properties to create and support multiple themes, including providing an accessible theme for less accessible designs.
  • Using math in CSS to create scalable, responsive typography for our responsive designs: CSS viewport and relative units inside calc().
  • Using CSS transforms and shapes to break out of the box and create creative, non-rectangular layouts.
  • Make peace with the occasional responsible usage of CSS hacks, without compromising the accessibility of the user interface.
  • Implementing SVGs in a responsive workflow, including basic icon animations.
  • Enhancing and styling UI elements (such as form elements) accessibly and using animated SVGs.
  • Learn how to use SVG to display, style and apply powerful image effects to other image formats!
  • Strong focus on semantics and accessibility using ARIA roles and attributes where needed.
  • Learning how all the new CSS features open up more flexible possibilities for designing and making decisions in the browser.
  • We'll also be getting an overview of CSS graphical effects such as filters and blend modes, allowing us to give our designs that extra punch, making design and experimenting in the browser more accessible to us.

You will be challenged with a series of creative exercises, applying all the above techniques to solve real-world design challenges.

A bit about Sara

Named ‘Developer of the Year’ in the 2015 net awards and ‘Open Web Evangelist’ by Microsoft, Sara Soueidan is an independent front-end web developer, author and speaker from Lebanon. She runs workshops across the globe, and is renowned for her high-quality technical articles that she writes for the biggest publications in the Web industry, including Smashing Magazine and net Magazine.

Sara helps companies and agencies build Web sites and applications, with strong focus on HTML5, SVG, CSS, JavaScript, progressive enhancement, and performance. She believes the Web should be accessible by everyone, and strives to build experiences that work well enough for everyone. When she’s not working, you’ll probably find her reading or catching up with the latest in the Web industry on her Twitter, while sipping a cup of her favorite fruit-flavored green tea.

Sara on the web

Don't miss out. Come see Sara Soueidan and other inspiring speakers at Source Up! 2017.

Early Bird tickets (10% off) start at R 5,850 (~USD 450) to learn from the world's leading front-end design experts in Johannesburg, South Africa.

Other great folks speaking at Source Up!