SARA SOUEIDAN

At Prismic, we wanted to set a high quality bar on different aspects including performance, responsiveness, accessibility and browser support. Sara was a perfect fit for that. Sara delivers quality work. She is an exceptional human being and a great team player. She is very transparent and puts all her energy to deliver on time. COMPONENT-LEVEL ART DIRECTION WITH CSS CONTAINER QUERIES Component-level art direction with CSS Container Queries. This article was published on May 9, 2021, and takes approximately 6 minute (s) to read. Container Queries (CQ) allow us to change the styles of a component so it responds to the size of its nearest container. With CQ, we can change how an element looks based on where on a page it is BUILDING A FULLY-ACCESSIBLE HELP TOOLTIP GLOBAL AND COMPONENT STYLE SETTINGS WITH CSS VARIABLES This stylesheet contains the global settings for the project. These settings are usually derived from the design style guide provided by the design team I’d be working with. An example of visual settings defined in a style guide for my current client project. The style guide contains color swatches, brand colors, interaction and UI colors INCLUSIVELY HIDING & STYLING CHECKBOXES AND RADIO BUTTONS Checkboxes and radio buttons are a great example of controls that could benefit from more fun interactions. In 2013, Codrops published a collection of playful experiments using SVG path animations (a.k.a. the line drawing technique) to create more delightful checkboxes and radio buttons. But the Codrops examples were merely a proof-of-concept CREATIVE ADD/REMOVE EFFECTS FOR LIST ITEMS WITH CSS3 Demo 1. Demo 1: Removed items "fall down". Restored items come back in a reverse animation. Newly added items are going to “fall down” from above. This is a very simple but nice effect. Each item starts at a position -400px above their final position, and fall down from that

position.

UNDERSTANDING SVG COORDINATE SYSTEMS AND TRANSFORMATIONS So, using the align and meetOrSlice values of the preserveAspectRatio attribute, you can specify whether or not to scale the viewBox uniformly, how to align it inside the viewport, and whether or not it should be entirely visible inside the viewport.. Sometimes, and depending on the size of the viewBox, some values may have similar results.For example, in the viewBox="0 0 200 300" example ACCESSIBLE ICON BUTTONS An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. These buttons can be found in the majority of app and user interfaces today. CREATIVE ADD/REMOVE EFFECTS FOR LIST ITEM WITH CSS3 ANIMATIONS Creative Add/Remove Effects for List Items. Item Deleted. Undo? Item

Saved

NESTED LINKS WITHOUT NESTING LINKS

SARA SOUEIDAN

At Prismic, we wanted to set a high quality bar on different aspects including performance, responsiveness, accessibility and browser support. Sara was a perfect fit for that. Sara delivers quality work. She is an exceptional human being and a great team player. She is very transparent and puts all her energy to deliver on time. COMPONENT-LEVEL ART DIRECTION WITH CSS CONTAINER QUERIES Component-level art direction with CSS Container Queries. This article was published on May 9, 2021, and takes approximately 6 minute (s) to read. Container Queries (CQ) allow us to change the styles of a component so it responds to the size of its nearest container. With CQ, we can change how an element looks based on where on a page it is BUILDING A FULLY-ACCESSIBLE HELP TOOLTIP GLOBAL AND COMPONENT STYLE SETTINGS WITH CSS VARIABLES This stylesheet contains the global settings for the project. These settings are usually derived from the design style guide provided by the design team I’d be working with. An example of visual settings defined in a style guide for my current client project. The style guide contains color swatches, brand colors, interaction and UI colors INCLUSIVELY HIDING & STYLING CHECKBOXES AND RADIO BUTTONS Checkboxes and radio buttons are a great example of controls that could benefit from more fun interactions. In 2013, Codrops published a collection of playful experiments using SVG path animations (a.k.a. the line drawing technique) to create more delightful checkboxes and radio buttons. But the Codrops examples were merely a proof-of-concept CREATIVE ADD/REMOVE EFFECTS FOR LIST ITEMS WITH CSS3 Demo 1. Demo 1: Removed items "fall down". Restored items come back in a reverse animation. Newly added items are going to “fall down” from above. This is a very simple but nice effect. Each item starts at a position -400px above their final position, and fall down from that

position.

UNDERSTANDING SVG COORDINATE SYSTEMS AND TRANSFORMATIONS So, using the align and meetOrSlice values of the preserveAspectRatio attribute, you can specify whether or not to scale the viewBox uniformly, how to align it inside the viewport, and whether or not it should be entirely visible inside the viewport.. Sometimes, and depending on the size of the viewBox, some values may have similar results.For example, in the viewBox="0 0 200 300" example ACCESSIBLE ICON BUTTONS An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. These buttons can be found in the majority of app and user interfaces today. CREATIVE ADD/REMOVE EFFECTS FOR LIST ITEM WITH CSS3 ANIMATIONS Creative Add/Remove Effects for List Items. Item Deleted. Undo? Item

Saved

NESTED LINKS WITHOUT NESTING LINKS

ABOUT SARA SOUEIDAN

Today, I'm the author of the Codrops CSS Reference and co-author of a book that covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites.. I work with companies and agencies around the world, building Web user interfaces, design systems, and digital products with focus on responsive design, accessibility, performance, and cutting-edge tech. SARA SOUEIDAN’S UPCOMING SPEAKING ENGAGEMENTS, PAST All Past Appearances (54) axe-con March 10–11, 2021 Online. SmashingConf November 11–12, 2020 Online. An Event Apart: Fall Summit October 26–28, 2020 Online. SmashingConf October 13–14, 2020 Online. An Event Apart December 9–11, 2019 San Francisco, USA.

Watch Video.

GLOBAL AND COMPONENT STYLE SETTINGS WITH CSS VARIABLES This stylesheet contains the global settings for the project. These settings are usually derived from the design style guide provided by the design team I’d be working with. An example of visual settings defined in a style guide for my current client project. The style guide contains color swatches, brand colors, interaction and UI colors ACCESSIBLE TEXT LABELS FOR ALL My talk Applied Accessibility: Practical Tips for Creating more Accessible Front-Ends is now available to watch online.This blog post is an extended transcript for a section of the talk, in which I discuss how to create more descriptive button (and/or link) text labels that improve the e-commerce experience for screen reader users, whilst making sure those buttons don’t fail WCAG success TIPS FOR CREATING AND EXPORTING BETTER SVGS FOR THE WEB The less the number of points, the less the path data ( d attribute), and, consequently, the less the overall SVG file size. This is always a good step to take because a smaller file size is better for performance. To simplify a path: Select the path. Go to Object →

MY TYPICAL DAY

Freelance Front-End Web UI/UX Developer - Lebanon. Colin Devroe started a series of “My Typical Day” posts. He tagged Dan Mall (and others) and Dan tagged me (and others). So here’s mine. A couple of years ago I shared what my typical day looks like in the 20th issue of Offscreen mag.Looking back, I realize that some of it has changed, and much of it hasn’t. UNDERSTANDING SVG COORDINATE SYSTEMS AND TRANSFORMATIONS Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports. This article was published on Aug 5, 2014, and takes approximately 18 minute (s) to read. At any point in an SVG drawing, you can establish new viewports and user coordinate systems by either nesting s or using elements such as the