Sara Soueidan — Independent web UI developer, author, speaker, and educator working at the intersection of design and code, helping front-end designers and developers build innovative, inclusive, and accessible web experiences using modern HTML, CSS, and SVG.
70 articles from this blog
A developer shares lessons learned from a year of studying and teaching web accessibility, emphasizing semantic HTML as the foundation.
A case study on implementing accessible data visualizations using SVG for the Khan Academy 2018 Annual Report website.
An overview of multiple methods to implement accessible icon buttons, covering HTML semantics, ARIA attributes, and screen reader compatibility.
A tutorial series explaining SVG filters, covering various filter primitives like feMorphology and feComponentTransfer for visual effects.
A technical exploration of a CSS-Tricks challenge: how to create nested link functionality using a clever <object> element hack to work around HTML specification limitations.
Explores semantic HTML markup approaches for FAQ sections and accordions, focusing on accessibility and progressive enhancement without JavaScript.
A developer's reflection on overcoming perfectionism to write more freely, sharing the importance of blogging for learning and personal growth.
A developer explains why they switched from HEX and RGB to the HSL color format in CSS for better color management and workflow.
A guide to SVG filters, covering basics, practical applications, and resources from a talk by Sara Soueidan.
A deep dive into designing and building accessible toggle switches for UI themes, covering markup, semantics, and accessibility considerations.
The author details converting their personal website into a Progressive Web App using Service Workers for offline viewing and a native app-like experience.
A case study on optimizing complex SVG illustrations for performance and accessibility by using inline SVG techniques.
Using SVG's viewBox and preserveAspectRatio attributes to crop and scale images as a fallback or alternative to CSS object-fit.
Explains the key differences between auto-fill and auto-fit keywords for responsive column sizing in CSS Grid layouts.
A developer shares their experience migrating from Jekyll to Hugo due to slow build times, detailing the process and benefits.
Explains how to simulate relative positioning for elements within an SVG by using nested SVGs, addressing the lack of a CSS box model.
A guide on converting icon fonts to SVG icons, covering tools and steps for modern web development.
Explains how to prevent unstyled SVG scaling issues when CSS fails by using presentation attributes and style inheritance.
![Animated SVG vs GIF [CAGEMATCH]](https://alldevblogs.blob.core.windows.net/thumbs/article-bf394fd0caec-full-90ec0a41.webp)
Compares animated SVG and GIF formats, highlighting SVG's advantages in quality, scalability, and performance for vector-based graphics.
A developer's guide to optimizing SVG creation and export for web projects, focusing on cleaner code and better designer-developer workflows.
