CSS Tricks:

How to Turn a Procreate Drawing into a Web Animation 

I recently started drawing on my iPad using the Procreate app with Apple Pencil. I’m enjoying the flexibility of drawing this way. What usually keeps me from painting at home are basic things, like setup, cleaning brushes, proper ventilation, and other factors not really tied to the painting itself. Procreate does a pretty nice job of emulating painting and drawing processes, but adding digital features like undo/redo, layers, and layer effects.

Here’s a Procreate painting I made that I wound … Read article

The post How to Turn a Procreate Drawing into a Web Animation appeared first on CSS-Tricks.
The Best Color Functions in CSS? 

I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it. 

hsl(120, 100%, 40%)

Hue isn't intuitive, but it's not that weird. You take a trip around the color wheel from 0 to 360. Saturation is more obvious where 0% has all the color sucked out, like grayscale, and 100% is fully rich color at … Read article

The post The Best Color Functions in CSS? appeared first on CSS-Tricks.
Getting Started with Front End Testing 

Amy Kapernick covers four types of testing that front-end devs could and should be doing:

  1. Linting (There's ESLint for JavaScript and Stylelint or Prettier for CSS.)
  2. Accessibility Testing (Amy recommends pa11y, and we've covered Axe.)
  3. Visual Regression Testing (Amy recommends Backstop, and we've covered Percy.)
  4. End to End Testing (There's Cypress and stuff like jest-puppeteer.)

Amy published something similar over on 24 ways, listing out 12 different testing tools.

As long as we're being … Read article

The post Getting Started with Front End Testing appeared first on CSS-Tricks.
The Modern Lovers 

I love stuff like this.

  1. The Modern Lovers, a rock band in the 70's, play a show in Boston, probably having some poster of their own for the show.
  2. Mike Joyce is inspired by the music and combines his love of it with the design style of Swiss Modernism to create a new poster for it.
  3. Pete Barr is inspired by Mike's Swissted project and animates the design for it, giving it a ton of new life.

This … Read article

The post The Modern Lovers appeared first on CSS-Tricks.
Timeless Web Dev Articles 

Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their perspective in some way. Fun! I'm gonna scour the thread and link up my favorites (that are actually articles, although not all of them are super directly related to web dev).

… Read article

The post Timeless Web Dev Articles appeared first on CSS-Tricks.
Eleventy Love 

Been seeing a lot of Eleventy action lately. It's a smaller player in the world of static site generators, but I think it's got huge potential because of how simple it is, yet does about anything you'd need it to do. It's Just JavaScript™.

… Read article

The post Eleventy Love appeared first on CSS-Tricks.
Autumn (macOS window manager) 

I love how nerdy this is. Autumn allows you to write JavaScript to control your windows. Get this window, move it over here. Nudge this window over. There are all sorts of APIs, like keyboard command helpers and doing things on events, like waking up from sleep.

I love that it exists, but for the moment, my window management mostly consists of: grab this window and chuck it on the left half of the screen, and grab this window and … Read article

The post Autumn (macOS window manager) appeared first on CSS-Tricks.
Third-Party Components at Their Best 

I'm a fan of the componentization of the web. I think it's a very nice way to build a website at just about any scale (except, perhaps, the absolute most basic). There are no shortage of opinions about what makes a good component, but say we scope that to third-party for a moment. That is, components that you just use, rather than components that you build yourself as part of your site's unique setup.

What makes a third-party component … Read article

The post Third-Party Components at Their Best appeared first on CSS-Tricks.
NetNewsWire and Feedbin 

NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.)

It's super nice, is fast, and looks great. It has just the right features.

But... I thought, at least at first, that really prefer websites for reading RSS content. I have multiple machines. I have mobile devices. I don't want my RSS to be limited … Read article

The post NetNewsWire and Feedbin appeared first on CSS-Tricks.
Thinking Through Styling Options for Web Components 

Where do you put styles in web components?

I'm assuming that we're using the Shadow DOM here as, to me, that's one of the big draws of a web component: a platform thing that is a uniquely powerful thing the platform can do. So this is about defining styles for a web component in a don't-leak-out way, and less so a way to get global styles to leak in (although that's very interesting as well, which can be done via … Read article

The post Thinking Through Styling Options for Web Components appeared first on CSS-Tricks.