Search
compute cuter
30.10.2020
Get that desk more cuter, fam. Amy (@sailorhg) has this perfectly cute minisite with assorted desktop backgrounds, fonts, editor themes, keyboard stuff, and other accessories. These rainbow cables are great.
And speaking of fonts, we’re still plucking away at this microsite for coding fonts...
Core Web Vital Tooling
26.10.2020
I still think the Google-devised Core Web Vitals are smart. When I first got into caring about performance, it was all: reduce requests! cache things! Make stuff smaller! And while those are all very related to web performance, they are abstractly related. Actual web performance to users are things...
Run Gulp as You Open a VS Code Project
13.10.2020
When I open my local project for this very site, there is a 100% chance that I need to run this command before anything else: gulp. I set that up fresh less than a year ago so I’m on the latest-and-greatest stuff and have my workflow just how I like it. I did a few more tweaks a few months...
ztext.js
22.9.2020
Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a bunch of copies of the glyphs on top of each other that are offset by some...
One Action, Multiple Terminal Windows Running Stuff
8.9.2020
Many development environments require running things in a terminal window. npm run start, or whatever. I know my biggest project requires me to be running a big fancy Docker-based thing in one terminal, Ruby on Rails in another, and webpack in another. I’ve worked on other projects that...
Using @property for CSS Custom Properties
3.9.2020
Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string.
So rather than something like this:
html {
--stop: 50%;
}
…can be declared with more details like this:
@property --stop {
syntax:...
Deeper DX
27.8.2020
Shawn Wang thinks there are deeper, perhaps more uncomfortable, places to go with developer experience (DX) beyond the surface-level stuff that we recently covered. Sure, sure, documentation, CLIs, good demos. But there are much harder questions to answer that are part of the real DX. Shawn lists...
Let’s Make Generative Art We Can Export to SVG and PNG
19.8.2020
Let’s say you’re a designer. Cool. You’ve been hired to do some design work for a conference. All kinds of stuff. Website. Printed schedules. Big posters for the rooms. Preroll slides. You name it.
So you come up with an aesthetic for it all — a design vibe that ties it...
zerodivs.com
10.8.2020
Pretty neat little website from Joan Perals, inspired by stuff like Lynn’s A Single Div. With multiple hard-stop background-image gradients, you don’t need extra HTML elements to draw shapes — you can draw as many shapes as you want on a single element. There is even a stacking order...
Promise.allSettled
3.8.2020
The Promise object has many useful functions like all, resolve, reject, and race — stuff we use all the time. One function that many don’t know about is Promise.allSettled, a function that fires when all promises in an array are settled, regardless of whether any of the promises...
A Look at What’s New in Chrome DevTools in 2020
31.7.2020
I’m excited to share some of the newer features in Chrome DevTools with you. There’s a brief introduction below, and then we’ll cover many of the new DevTools features. We’ll also look at what’s happening in some other browsers. I keep up with this stuff, as I create Dev Tips, the largest...
Running spot instances effectively with Amazon EKS
14.7.2020
I know this is a little outside the normal scope of CSS-Tricks stuff, but I find the whole concept of spot instances fascinating. Here’s the gist from a very-non-expert (me). You can just buy and pay for web servers, for example, Amazon EC2. You can save a bunch of money if you buy them...
How to delete all node_modules directories from your computer
8.7.2020
Nice tip from Chris Ferdinandi:
My node_modules directories contained 50mb of stuff on the small side, and over 200mb of files in some cases. Over a few dozen projects, that really adds up!
Two dozen projects with 200 MB worth of node_modules? That’s nearly 5 GB of space for...
USA.css
6.7.2020
Lots of fun with gradients from Bennet Feely: stars, stripes, banners, bursts… I love being able to use nice patterns with either no image requests at all, or very little SVG.
And important reminder: Bennet does all sorts of cool stuff. I’ve probably used Clippy about a million times....
Some Performance Links
3.7.2020
Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger.
Web Performance Recipes With Puppeteer
Puppeteer is an Node library for spinning up a copy of Chrome “headlessly” (i.e. no UI) and controlling it. People use it...
CSS background-repeat: round
23.6.2020
The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat:...
Making My Netlify Build Run Sass
9.6.2020
Let’s say you wanted to build a site with Eleventy as the generator. Popular choice these days! Eleventy doesn’t have some particularly blessed way of preprocessing your CSS, if that’s something you want to do. There are a variety of ways to do it and perhaps that freedom is part...
Chrome 83 Form Element Styles
3.6.2020
There have been some aesthetic changes to what form elements look like as of Chrome 83. Anything with gradient colorization is gone (notably the extra-shiny <meter stuff). The consistency across the board is nice, particularly between inputs and textareas. Not a big fan of the new <select...
Increment Issue 13: Frontend
30.5.2020
Increment is a beautiful quarterly magazine (print and web) published by Stripe “about how teams build and operate software systems at scale”. While there is always stuff about making websites in general, this issue is the first focused on front-end¹ development.
I’ve got...
The Many Bad (and Good!) Patterns for Close Buttons
27.5.2020
Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this:
<a class="close" onclick="close()"×</a
Why is that bad? There is no href there, so it really isn’t a link (close buttons aren’t links). Not to mention the missing href makes this...