I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference really, except it's blue instead of red and this one pretty rad checkbox: Show only variable fonts.… Read article
Sponsored by
Mailchimp
You might reach for <input type="number> when you're, you know, trying to collect a number in a form. But it's got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn't one (like how a credit card number has spaces), because it's really just a string of numbers. Even more importantly, there are a variety of screen reader problems.
Hanna Laakso documents the problems for GOV.UK. This is what they landed on:… Read article
Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I came across some CSS they show off that looked like this:
:root {
--fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
--fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));
...
}See anything weird there? That code is using mathematical operators, but there is no calc() function wrapped around it.
Just as my curiosity … Read article
Have you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos?
Some folks call it a pop-up. Others call it a lightbox. Bootstrap calls it a modal. I mention Bootstrap because I want to use it to make the same sort of thing. So, let’s call it a modal from here on out.
Why Bootstrap? you might ask. Well, a few reasons:
Burke Holland thinks that to "build applications without thinking about servers" is a pretty good way to describe serverless, but...
Nobody really thinks about servers when they are writing their code. I mean, I doubt any developer has ever thrown up their hands and said “Whoa, whoa, whoa. Wait just a minute. We’re not declaring any variables in this joint until I know what server we’re going to be running this on.”
Instead of just one idea wrap it … Read article
The first rule of animating on the web: don't animate width and height. It forces the browser to recalculate a bunch of stuff and it's slow (or "expensive" as they say). If you can get away with it, animating any transform property is faster (and "cheaper").
Butttt, transform can be tricky. Check out how complex this menu open/close animation becomes in order to make it really performant. Rik Schennink blogs about another tricky situation: border-radius. When you animate … Read article
A fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We’re Watching Big Tech. Great work from Upstatement. The content looks amazing, but of course, around here we're always interested in the design and tech as well. There is loads to adore, from the clean typography, interesting layout, and bold angled hover states on blocks, to the tasteful dots motif.
The footer is clever as well, in how it appears to slide out from … Read article
You know what the best thing is about building and running automated browser tests is? It means that the site you're doing it on really matters. It means you're trying to take care of that site by making sure it doesn't break, and it's worth the time to put guards in place against that breakages. That's awesome. It means you're on the right track.
My second favorite thing about automated browser tests is just how much coverage you get … Read article
Some commentary from Zack Bloom on the Cloudflare Blog, looking at requests to CDNJS for versions of jQuery.
What we don’t see is a decline in our old versions which come close to the volume of growth of new versions when they’re released. In fact the release of 3.4.1, as popular as it quickly becomes, doesn’t change the trend of old version deprecation at all.
Sorta makes sense. We make CDNJS easy to use at CodePen, where people … Read article
With a name as big as React, it's bound to cause some Stream-Crossing Confusion, as I like to call it. How do you center a <div> in React? Dave Ceddia:
… Read articleReact cares exactly zero about styling. Think of it as generating the barebones HTML. React will put elements on the page, but everything after that is the job of CSS: how they appear, what they look like, how they’re positioned, and how centered or uncentered they are.
“How
Your app is up and running! Now what? Seamlessly connect it to your marketing data.
