Category: Design

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 that hue. Lightness is “normal” at 50% and adds white or black as you go toward 100% and 0%, respectively. I’m sure that’s not the correct scientific or technical way of explaining it, but that’s the brain logic.

There are still issues with using HSL, which Brian Kardell explains in depth. I’m far from a color expert, but I think I see what Brian (and Adam) are saying in that article. Say you have three different colors and they all have the exact same lightness in HSL. That doesn’t mean they are all actually the same lightness. That’s kinda weird, particularly when you’re using this color format as part of a system of colors.

The good news is that there are color features already specced as a CSS Level 4 module that help with this: Lab and LCH. Check out the example from Adam where the colors in Lab have values that reflect their actual lightness much more accurately to how we perceive it.

Brian:

There are color spaces like Lab and LCH which deal with the full spectrum and have qualities like perceptual uniformness. Thus, if we want great color functions for use in real design systems everyone seems to agree that having support to do said math in the Lab/LCH color spaces is the ideal enabling feature.

In the bug ticket for Chrome, Tab thinks these would be almost trivial to implement.

Note that lab()/lch()/gray() can all be eagerly converted into our existing color infrastructure; they don’t introduce any fundamentally new concepts, they’re just a better way to specify colors, more closely associated with how our eyes actually function rather than being closely tied to how rgb pixels function.

The conversion functions to turn it into rgb are a little bit of code, but it’s just some exponentials and a bit of matrix multiplication, and it’s well-documented in the spec.

This should be a GoodFirstBug sort of thing, I think.

The post The Best Color Functions in CSS? appeared first on CSS-Tricks.

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 up exporting and animating on the web.

See the Pen
zebra page 2
by Sarah Drasner (@sdras)
on CodePen.

You can do this too! There are two basic animation effects we’ll cover here: the parallax effect that takes place on hover (with the ability to turn it off for those with vestibular disorders), and the small drawing effect when the page loads.

Parallax with drawing layers

I mentioned that part of the reason I enjoy drawing on the iPad is the ability to work in layers. When creating layers, I take care to keep certain “themes” on the same layer, for instance, the zebra stripes are on one layer and the dots are on own layer under beneath the stripes.

I’ll extend the drawing beyond the boundaries of where the line from the layer above ends, mainly because you’ll be able to peek around it a bit as we move the drawing around in the parallax effect. If the lines are sharp at any point, this will look unnatural.

Once I’m done creating my layers, I can export things as a Photoshop (PSD) file, thanks to Procreate’s exporting options.

The same drawing opened in Photoshop.

Then I’ll join together a few, so that I’m only working with about 8 layers at most. I use a photoshop plugin called tinyPNG to export each layer individually. I’ve heard there are better compression tools, but I’ve been pretty happy with this one.

Next, I’ll go into my code editor and create a div to house all the various images that are contained in the layers. I give that div relative positioning while all of the images inside it get absolute positioning. This places the images one on top the other.

<div id="zebra-ill" role="presentation">   <img class="zebraimg" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport6.png' />   <img class="zebraimg" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png' />  … </div>
#zebra-ill {   position: relative;   min-height: 650px;   max-width: 500px; }  .zebraimg {   position: absolute;   top: 0;   left: 0;   perspective: 600px;   transform-style: preserve-3d;   transform: translateZ(0);   width: 100%;   }

The 100% width on the image will confines all of the images to the size of the parent div. I do this so that I’m controlling them all at once with the same restrictions, which works well for responsive conditions. The max-width and min-height on the parent allow me to confine the way that the div shrinks and grows, especially as when it gets dropped into a CSS Grid layout. It will need to be flexible, but have some constraints as well and CSS Grid is great for that.

Next, I add a mousemove event listener on the parent div with JavaScript. That lets me capture some information about the coordinates of the mouse using e.clientX and e.clientY.

const zebraIll = document.querySelector('#zebra-ill')  // Hover zebraIll.addEventListener('mousemove', e => {   let x = e.clientX;   let y = e.clientY; })

Then, I’ll go through each of the drawings and use those coordinates to move the images around. I’ll even apply transform styles connected to those coordinates.

const zebraIll = document.querySelector('#zebra-ill') const zebraIllImg = document.querySelectorAll('.zebraimg') const rate = 0.05  //hover zebraIll.addEventListener('mousemove', e => {   let x = e.clientX;   let y = e.clientY;      zebraIllImg.forEach((el, index) => {     el.style.transform =        `rotateX($ {x}deg) rotateY($ {y}deg)`   }) })

See the Pen
zebra page
by Sarah Drasner (@sdras)
on CodePen.

Woah, slow down there partner! That’s way too much movement, we want something a little more subtle. So I’ll need to slow it way down by multiplying it by a low rate, like 0.05. I also want to change it a just bit per layer, so I’ll use the layers index to speed up or slow down the movement.

const zebraIll = document.querySelector('#zebra-ill') const zebraIllImg = document.querySelectorAll('.zebraimg') const rate = 0.05  // Hover zebraIll.addEventListener('mousemove', e => {   let x = e.clientX;   let y = e.clientY;      zebraIllImg.forEach((el, index) => {     let speed = index += 1     let xPos = speed + rate * x     let yPos = speed + rate * y          el.style.transform =        `rotateX($ {xPos - 20}deg) rotateY($ {yPos - 20}deg) translateZ($ {index * 10}px)`   }) })

Finally, I can create a checkbox that asks the user if want to turn off this effect.

<p>   <input type="checkbox" name="motiona11y" id="motiona11y" />   <label for="motiona11y">If you have a vestibular disorder, check this to turn off some of the effects</label> </p>
const zebraIll = document.querySelector('#zebra-ill') const zebraIllImg = document.querySelectorAll('.zebraimg') const rate = 0.05 const motioncheck = document.getElementById('motiona11y') let isChecked = false  // Check to see if someone checked the vestibular disorder part motioncheck.addEventListener('change', e => {   isChecked = e.target.checked; })  // Hover zebraIll.addEventListener('mousemove', e => {   if (isChecked) return   let x = e.clientX;   let y = e.clientY;      // ... })

Now the user has the ability to look at the layered dimensionality of the drawing on hover, but can also turn the effect off if it is bothersome.

Drawing Effect

The ability to make something look like it’s been drawn on to the page has been around for a while and there are a lot of articles on how it’s done. I cover it as well in a course I made for Frontend Masters.

The premise goes like this:

  • Take an SVG path and make it dashed with dashoffset.
  • Make the dash the entire length of the shape.
  • Animate the dashoffset (the space between dashes).

What you get in the end is a kind of “drawn-on” effect.

But in this particular drawing you might have noticed that the parts I animated look like they were hand-drawn, which is a little more unique. You see, though that effect will work nicely for more mechanical drawings, the web doesn’t quite yet support the use of tapered lines (lines that vary in thickness, as is typical of a more hand-drawn feel).

For this approach, I brought the file into Illustrator, traced the lines from that part of my drawing, and made those lines tapered by going into the Stroke panel, where I selected “More options” and clicked the tapered option from the dropdown.

Screenshot of the Illustrator Stroke menu.

I duplicated those lines, and created fatter, uniform paths underneath. I then took those fat lines and animate them onto the page. Now my drawing shows through the shape:

Here’s what I did:

  • I traced with Pen tool and used tapered brush.
  • I duplicated the layer and changed the lines to be uniform and thicker.
  • I took the first layer and created a compound path.
  • I simplified path points.
  • I created clipping mask.

From there, I can animate everything with drawSVG and Greensock. Though you don’t need to, you could use CSS for this kind of animation. There’s a ton of path points so in this case, so it makes sense to use something more powerful. I wrote another post that goes into depth on how to start off creating these kinds of animations. I would recommend you start there if you’re fresh to it.

To use drawSVG, we need to do a few things:

  • Load the plugin script.
  • Register the plugin at the top of the JavaScript file.
  • Make sure that paths are being used, and that there are strokes on those paths.
  • Make sure that those paths are targeted rather than the groups that house them. The parent elements could be targeted instead.

Here’s a very basic example of drawSVG (courtesy of GreenSock):

See the Pen
DrawSVGPlugin Values
by GreenSock (@GreenSock)
on CodePen.

So, in the graphics editor, there is this clipping mask and a group that is clipped by them with fat uniform lines underneath:

From here, we’ll grab a hold of those paths and use the drawSVG plugin to animate them onto the page.

//register the plugin gsap.registerPlugin(DrawSVGPlugin);  const drawLines = () => {   gsap.set('.cls-15, #yellowunderline, .cls-13', {     visibility: 'visible'   })      const timeline = gsap.timeline({      defaults: {       delay: 1,       ease: 'circ',       duration: 2     }		     })   .add('start')   .fromTo('.cls-15 path', {     drawSVG: '0%'   }, {     drawSVG: '100%',     immediateRender: true   }, 'start')   .fromTo('#yellowunderline path', {     drawSVG: '50% 50%'   }, {     drawSVG: '100%',     immediateRender: true   }, 'start+=1')   .fromTo('.cls-13', {     drawSVG: '50% 50%'   }, {     drawSVG: '100%',     immediateRender: true   }, 'start+=1') }  window.onload = () => {   drawLines() };

And there we have it! An initial illustration for our site that’s created from a layered drawing in the Procreate iPad app. I hope this gets you going making your web projects unique with wonderful hand-drawn illustrations. If you make anything cool, let us know in the comments below!

The post How to Turn a Procreate Drawing into a Web Animation appeared first on CSS-Tricks.

CSS-Tricks

, , , ,
[Top]

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 is what makes the internet cool. I’d bet none of these people have ever met each other.

And this is just one example. Mike has designed hundreds of these posters, and Pete has animated a number of them. Here’s another lovely example.

The post The Modern Lovers appeared first on CSS-Tricks.

CSS-Tricks

,
[Top]

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 comprehensive, we might consider performance testing to be part of all this, ala SpeedCurve or Calibre to mention some web services.

I’ve liked what Harry Roberts has said lately about performance budgets. They don’t need to be fancy; they just need to prevent you from bad screwups.

[…] most organisations aren’t ready for challenges, they’re in need of safety nets. Performance budgets should not be things to work toward, they should be things that stop us slipping past a certain point. They shouldn’t be aspirational, they should be preventative.

Direct Link to ArticlePermalink

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

CSS-Tricks

, , ,
[Top]

Hilarious Versions of Popular Movie Posters

[Top]

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).

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

CSS-Tricks

,
[Top]

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 chuck it on the right half of the screen. That and just a handful of other simple things are handled really nicely by Moom.

Doing life tasks with JavaScript is only gonna get bigger and bigger. I love controlling and querying Spotify with GraphQL.

Direct Link to ArticlePermalink

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

CSS-Tricks

, , ,
[Top]

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™.

The post Eleventy Love appeared first on CSS-Tricks.

CSS-Tricks

,
[Top]

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 to my laptop, I want an online service.

NetNewsWire on my Mac

Well! I found out that NetNewsWire syncs with my favorite website for RSS: Feedbin. The syncing works flawlessly. Both unread items and all the organization. In fact, the UI for organizing feeds is so nice in NetNewsWire that I managed everything there and was pleasantly surprised how it all synced perfectly with Feedbin.

Feedbin on the web

I know a lot of people miss Google Reader, but I think we’ve arrived at an even better place after all these years. The Google Reader UI for Google Reader was OK, but the main benefit was that it was the central place where everything synced together. That meant people could experiment by building readers and could use whatever they wanted. Feedbin clearly has APIs that can handle those types of things, so perhaps it could become that central hub service, which would be awesome.

I use Reeder on iOS, which also syncs with Feedbin. The central hub is real.

Reeder on iOS

I know a lot of people love Feedly too, which is also good. I just click with Feedbin better. I particularly like the Feedbin feature where it gives me an email address I can have newsletters sent to, letting me subscribe to a ton of them the same way I do with sites.

The post NetNewsWire and Feedbin appeared first on CSS-Tricks.

CSS-Tricks

,
[Top]

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 good? My favorite attribute of a third-party component is when it takes something hard and makes it easy. Particularly things that recognize and properly handle nuances, or things that you might not even know enough about to get right.

Perhaps you use some component that does pop-up contextual menus for you. It might perform browser edge detection, such as ensuring the menu never appears cut off or off-screen. That’s a tricky little bit of programming that you might not get right if you did it yourself — or even forget to do.

I think of the <Link /> component that React Router has or what’s used on Gatsby sites. It automatically injects aria-current="page" for you on the links when you’re on that page. You can and probably should use that for a styling hook! And you probably would have forgotten to program that if you were handling your own links.

In that same vein, Reach UI Tabs have rigorous accessibility baked into them that you probably wouldn’t get right if you hand-rolled them. This React image component does all sorts of stuff that is relatively difficult to pull off with images, like the complex responsive images syntax, lazy loading, placeholders, etc. This is, in a sense, handing you best practices for “free.”

Here’s a table library that doesn’t even touch UI for you, and instead focuses on other needs you’re likely to have with tables, which is another fascinating approach.

Anyway! Here’s what y’all said when I was asking about this. What makes a third-party component awesome? What do the best of them do? (besides the obvious, like good docs and good accessibility)? Some of these might be at-odds. I’m just listing what people said they like.

  • Plug-and-play. It should “just work” with minimal config.
  • Lots of editable demos
  • Highly configurable
  • “White label” styling. Don’t bring too strong of design choices.
  • Styled via regular CSS so you can BYO own styling tools
  • Fast
  • Small
  • Is installable via a package manager
  • Can be manually instantiated
  • Can be given a DOM node where it can go
  • Follows a useful versioning scheme
  • Is manintained, particularly for security
  • Has a public roadmap
  • Is framework-agnostic
  • Doesn’t have other dependencies
  • Uses intuitive naming conventions
  • Supports internationalization
  • Has lots of tests

Anything you’d add to that list?

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

CSS-Tricks

, , ,
[Top]