Articles on design engineering
Project case studies, thought processes & design thinking, front-end strategy, techniques and best practices, useful code snippets, and practical tips and tricks focused on HTML, CSS, SVG, accessiblity, and everything in between. Included here are also links to articles published on magazines such as Smashing Magazine, Codrops, A List Apart, and CSS-Tricks. Welcome to my Pensieve.
-
"Yes or No?" — One Checkbox vs Two Radio Buttons.
-
Inclusively Hiding & Styling Checkboxes and Radio Buttons
-
Optimizing keyboard navigation using tabindex and ARIA A micro-case study on implementing keyboard-friendlier article listings for an online publication
-
Global and Component Style Settings with CSS Variables Or how I use CSS variables to create more manageable project styles and more portable patterns
-
What a Year of Learning and Teaching Accessibility Taught Me
-
Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report
-
Creating Accessible Icon Buttons
-
The SVG Filters Series
-
The Refactoring UI Book
-
Nested Links Without Nesting Links
-
How do you mark up an accordion?
-
On Switching from HEX & RGB to HSL
-
SVG Filters: The Crash Course
-
Interview: net Magazine September 2018 Issue #310
-
On Designing and Building Toggle Switches
-
A new Smashing talk. A smashing new experience.
-
Going Offline sarasoueidan.com is now a Progressive Web App!
-
Case Study: Optimizing SVG Text & Image Delivery with Inline SVG When One SVG Embedding Technique Is Not Enough
-
Cropping & Scaling Images Using SVG Documents The SVG snippet that replaces a CSS object-fit declaration
-
Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
-
Migrating from Jekyll+Github Pages to Hugo+Netlify
-
Building a fully-accessible help tooltip ...is harder than I thought.
-
Mimic Relative Positioning Inside an SVG with Nested SVGs
-
Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG
-
SVG Style Inheritance and the ‘Flash Of Unstyled SVG’
-
2015 In Review
-
Animated SVG vs GIF [CAGEMATCH]
-
Tips for Creating and Exporting Better SVGs for the Web
-
Developer of the Year 2015 net Award
-
CSS vs. SVG: The Final Round(up)