Web Dev Links (April 2023): Color Palettes, Gradients, Typography, Analytics, and More

Gradients and vertical rhythms and shadows, oh my!
Matrix Code
(Markus Spiske)

As a web developer, I’m always looking out for cool new tips, tricks, and techniques for making the most beautiful and performant websites possible. Below are some of my latest discoveries.


Coolors

I’ve used lots of CSS color palette generators over the years, but my current favorite is Coolors. It has the features you’d expect: you can build a palette from scratch or customize an existing one; you can create a palette based on an image; and you can save your palettes (though free accounts are limited to five colors per palette). But it has several other nice features, like auto-blending colors as you create your palette and lots of different ways to adjust and tweak your palettes’ colors.

Coolors also has a contrast checker to help test your color palette’s readability and accessibilty, a font picker, iOS and Android apps, and plugins for Figma and Adobe programs. More features can be unlocked if you pay $3/month for a “Pro” account, but even the free, ad-supported service is chock full of usefulness. And it’s wrapped up in a nice, clean interface to boot.


Easing Gradients

Never underestimate a good CSS gradient’s ability to add some dynamic color to your site and set the mood. A quick Google search will return plenty of CSS gradient generators, but Easing Gradients goes one step further by addressing a fundamental issue with how gradients are currently rendered. Specifically, that gradients aren’t nearly as smooth as they could be, especially gradients between very different colors.

There’s a CSSWG proposal to implement a method for smoothing, or “easing” gradients to help them look more seamless. As the name implies, Easing Gradients replicates the end result of that proposed method by creating a gradient with multiple steps. Here’s the CSS for a “traditional” gradient:

background: linear-gradient(180deg, #f00 0%, #00f 100%);

And here’s the CSS for an “eased” gradient:

background: linear-gradient(
	to bottom,
	hsl(0, 100%, 50%) 0%,
	hsl(353.18, 100%, 49.68%) 8.1%,
	hsl(346.44, 100%, 48.77%) 15.5%,
	hsl(339.56, 100%, 47.33%) 22.5%,
	hsl(332.33, 100%, 45.4%) 29%,
	hsl(324.5, 100%, 43.03%) 35.3%,
	hsl(315.78, 100%, 40.25%) 41.2%,
	hsl(305.72, 100%, 37.08%) 47.1%,
	hsl(294.28, 100%, 37.08%) 52.9%,
	hsl(284.22, 100%, 40.25%) 58.8%,
	hsl(275.5, 100%, 43.03%) 64.7%,
	hsl(267.67, 100%, 45.4%) 71%,
	hsl(260.44, 100%, 47.33%) 77.5%,
	hsl(253.56, 100%, 48.77%) 84.5%,
	hsl(246.82, 100%, 49.68%) 91.9%,
	hsl(240, 100%, 50%) 100%
);

As you can see, the “eased” CSS is quite a bit more involved, so if you’re a stickler for keeping your code as lightweight as possible, you might want to skip it. But if you like your gradients nice n’ smooth, the extra code might be worth it. And for what it’s worth, here’s what the CSSWG proposal’s CSS would look like:

background: linear-gradient(
	to bottom,
	hsla(360, 100%, 50%, 1),
	ease-in-out,
	hsla(240, 100%, 50%, 1)
);

Unfortunately, the proposal hasn’t seen any discussion since 2021, so we might be stuck with Easing Gradient’s more involved code for quite awhile longer.


Gridlover

Web typography has come a long way since the days of web safe fonts and <font> tags. Even so, web typography can be tricky, especially when it comes to developing and implementing a consistent vertical rhythm and typographic scale, both of which are important for text-heavy sites. (If you don’t know why, these articles by Richard Rutter and Tim Brown are good intros.)

Developed by Tuomas Jomppanen and Ville V. Vanninen, Gridlover removes much of the guess-work associated with creating beautiful typography. You select a starting font size, line-height, and scale, and it then generates all of the necessary CSS. You can also specify custom webfonts and content to ensure that everything looks good. Gridlover can be a little buggy if you toggle your settings too much, at which point you might need to restart, but it’s still a great little utility that serves a very specific and useful purpose.

Of course, you may find that you’ll need to deviate from the vertical rhythm once you start implementing it. Even values that are technically/mathematically correct may not look “right” visually. Nevertheless, Gridlover can provide you with a really solid foundation for your website’s text.


Smooth Shadow

Much like gradients (see above), a good drop shadow can be just the thing to spice up your site’s design. Shadows imply depth, which can elevate (npi) a website design and serve to highlight and clarify different parts (e.g., modals, overlays, buttons). Drop shadows can certainly be abused, so if you’re going to use them, you want to ensure that they look as good as possible.

This tool improves the look of your drop shadows by layering multiple shadows together, resulting in a, well, smoother look. Here’s the CSS for a “traditional” drop shadow:

box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);

And here’s the CSS for a “smooth” drop shadow:

box-shadow: 0px 0.3px 0.4px rgba(0, 0, 0, 0.028),
	0px 0.7px 1px rgba(0, 0, 0, 0.04),
	0px 1.3px 1.9px rgba(0, 0, 0, 0.05),
	0px 2.2px 3.4px rgba(0, 0, 0, 0.06),
	0px 4.2px 6.3px rgba(0, 0, 0, 0.072),
	0px 10px 15px rgba(0, 0, 0, 0.1);

As with “eased” gradients, “smooth” drop shadows require more code, but they look richer, deeper, and just better overall — which can easily be worth a few more bytes in my opinion.


Minimal Analytics

Everyone likes to know how their website’s doing in terms of visitors, pageviews, etc. That information’s good to have when it comes to marketing, knowing what to write about, or even just personal validation that you’re not merely shouting into the void. There are plenty of analytics packages out there, but Google Analytics is arguably the most popular. One downside is that even if you’re just using Google Analytics for the most basic functionality (e.g., users, pageviews), you’re still downloading a lot of code that’s not necessary.

Which is where Minimal Analytics comes into play. Developed by Dariusz Więckiewicz, it strips down the Google Analytics code to just the necessary bits. The resulting code is more performant (2 KB as opposed to 200+ KB) as well as a bit more privacy-conscious. (If you want truly private analytics, however, then consider something like Fathom or Plausible.)

Mind you, this minimal code will be of no use if your site uses other Google features, like AdWords. In that case, you’ll need to use Google’s default code. But if you just want some barebones analytics, then this is a pretty good substitute for the real thing.


Tachyon

There are many ways to make your website faster. You can use a more powerful server, implement caching, remove unused/unnecessary code, and of course, optimize your site’s images. You can also implement Tachyon, a small JavaScript snippet that does something clever: When a user mouses over a link, Tachyon downloads and prerenders that URL behind-the-scenes. The idea is that if the user clicks on the link, the page will already be in their browser’s memory, and thus display more quickly.

While other scripts do something similar, one of Tachyon’s advantages is its small footprint: when minified, the code is less than a kilobyte. Note that Tachyon really only benefits Chrome users; prerendering is currently not supported in Firefox or Safari.

Enjoy reading Opus? Want to support my writing? Become a subscriber for just $5/month or $50/year.
Subscribe Today
Return to the Opus homepage