Skip to main content

Sarah Drasner

DOM Blacksmith, UX Smelter, Code Forger.

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”

Article

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website … Read article “The Importance of Context-Shifting in UX Patterns”

Snippet

“Shake” CSS Keyframe Animation

This assumes the use of an autoprefixer.

.face:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

See the Pen “Shake” CSS snippet for CSS-Tricks by Sarah Drasner (@sdras) on CodePen.… Read article ““Shake” CSS Keyframe Animation”