Skip to main content

Sarah Drasner

DOM Blacksmith, UX Smelter, Code Forger.

Article

Visual Regression Testing with CSS Blend Modes

Last week I saw Una Kravets give a very inspiring talk at Generate Conf about using CSS Filters and Mix Blend Modes. One demo in particular got my attention because Una showed us how we could overlay two layouts on top of each other and use blend modes to spot all the differences between them.

I was pretty excited about this idea and got to thinking: could we create visual regression testing with just one line of CSS? Turns out … Read article “Visual Regression Testing with CSS Blend Modes”

Link

Lingo

Article

Creating an SVG Icon System with React

I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of the major gaps for me was the <use></use> element, as most SVG icon systems are built with <use></use>.

I asked Michael if he thought better support might … Read article “Creating an SVG Icon System with React”

Article

Introducing CSS Scroll Snap Points

Before this new CSS I’m about to introduce existed, locking an element into the viewport on scroll required rigging up some JavaScript. As you may know, JavaScript has a well-earned reputation to be tricky when paired with scrolling behavior.

The new CSS Scroll Snap Points spec promises to help, allowing for this kind of behavior using very few lines of CSS.

As happens with very new web tech, this spec has changed over time. There is “old” and “new” properties … Read article “Introducing CSS Scroll Snap Points”

Article

An Interview with Una Kravets

Una Kravets is a front-end developer, writer, and speaker who works on the Cloud Platform Team within IBM Design. She cohosts a podcast called Toolsday, loves to travel, and occasionally does calligraphy. You can find her on the internet @una.

I had the pleasure of talking to Una Kravets one Sunny Sunday, and was super excited to do so because I’m a huge fan of her work. … Read article “An Interview with Una Kravets”

Article

I Learned How to be Productive in React in a Week and You Can, Too

This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard … Read article “I Learned How to be Productive in React in a Week and You Can, Too”

Article

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have no fear! We’ve got you covered. This article explores some of those SMIL-specific features and delves into the alternatives to achieve the same effects with a longer tail of support.… Read article “SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features”

Article

A Guide to 2016 Front-End Conferences

2016 is past!

Check out our always-updated site for upcoming front-end conferences!

It’s difficult to keep track of all of the great talks and conferences happening in our industry. Sometimes you may find out too late that an event is taking place, and it’s a real shame when it’s an something you might have attended. We’ve compiled this list so you can see what’s happening, both in your hometown, and abroad. This list will be updated throughout the year.… Read article “A Guide to 2016 Front-End Conferences”

Link

New Improved Illustrator SVG Export Settings

Article

The Making of the CSS-Tricks Logo Easter Egg Animation

When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interaction.

I’ve been working a ton with the GreenSock Animation Platform and SVG lately. If you are not aware of it, is worth checking out. It’s … Read article “The Making of the CSS-Tricks Logo Easter Egg Animation”