Web Development + Follow

I love it when people redesign “in the open” and write about it. I’d just like to shout out to our own Geoff who has been doing this for 3 months now. He started in late December last year. He’s been sharing stuff like his dev tooling choices, considering performance, considering accessibility, that moment where …

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.

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

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: See anything weird there? That code is using mathematical operators, but there is no …

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 …

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 …

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 …

More than ever, new products aim to make an impact on a global scale, and user experience is rapidly becoming the determining factor for whether they are successful or not.

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 …

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

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, …

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: React cares exactly zero about styling. Think of it as generating the barebones HTML. React will put elements on the page, but everything after that …

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan patterns (as SVG and PNG files), taking care to filter out any that have explicit usage restrictions. The idea was cooked up by Sylvain Guizard during our summer holidays in Scotland. At the very beginning, …

Nicholas C. Zakas: Eventually, I settled on a list of questions I would ask myself for each problem as it arose. I found that asking these questions, in order, helped me make the best decision possible: 1) Is this really a problem?2) Does the problem need to be solved?3) Does the problem need to be …

Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.

I’ve had a bunch of tabs open that just so happen to all be related to typography, so I figured I’d give myself the mental release of closing them by blogging them. How’s that for a blog post format for ya: whatever random tabs you’ve had open for far too long.

Hey how cool! A documentary about Vue! Good timing as it looks like VueConf is happening right now. (Reminder we have a site for conferences to tell you stuff like that). Sarah appears in it (about 21:13) and talks about CSS-Tricks for a second, so we’re officially super famous now and I have already booked …

Looking at the CMS scene today, there are upwards of 150 options to choose from — and that’s not including whatever home-grown custom alternatives people might be running. The term “Content Management System” is broad and most site builders fit into the CMS model. Craft CMS, a relatively new choice in this field (launched in …

Robin recently lamented the common complaint that CSS is frustrating. There are misconceptions about what it is and what it does. There are debates about what kind of language it is. There are even different views on where it should be written. Rachel Andrew has a new talk from An Event Apart DC 2019 available …

Even a simple Card component can be tricky to design an API around. What abstraction are you providing? How much control do you want to give? If you make it too flexible, you aren’t providing much value. If you make it to rigid, you also aren’t providing much value.

I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the one below with just one HTML element and very little CSS without needing SVG or a huge list of points inside the polygon function! Chris was excited about …

Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone’s code? That happened to me the other day. Here’s what I wrote: At the end of it, I honestly couldn’t even explain what it does to myself. LOL, that probably means …

<input type=”number”>, <input type=”date”>, <input type=”search”>, <select multiple>, <progress>, <meter>, <dialog>, <details><summary>, <video>, <div onclick>, <div aria-label>, <a href><div>Block Links</div></a>, aria-controls, role=”tablist” 😬😬😬😬😬😬😬😬😬😬😬😬

Not long ago, I posted about PHP templating in just PHP (which is basically HEREDOC syntax). I’m literally using that technique for some super basic templating I needed to do on this very WordPress site. The main pushback was that this kind of thing can be an XSS vulnerability. In my case, it’s not, because …

A standard e-commerce site has a few common pages. There are product pages, shop pages that list products, and let’s not forget pages for the user account, checkout flow and cart. WooCommerce makes it a trivial task to set these up on a WordPress site because it provides templates for them and create the pages …

Over a decade ago, I did a little three-part video series on Designing for WordPress. Then I did other series with the same spirit, like videocasting the whole v10 redesign, a friend’s website, and even writing a book. Those are getting a little long in the tooth though. You might still learn from watching them …

Think of building sites with Gatsby as an hourglass shape. Gatsby itself is right in the middle. The wide funnel at the top represents the fact that Gatsby can take in data from all sorts of sources. The data could be in markdown files, from a headless CMS or some other API, from a hosted …

Here’s a great thread by Kevin Powell that’s making the rounds. He believes so many folks see CSS as a frustrating and annoying language:

Tim Kadlec: One particular pattern for loading non-critical CSS I’ve seen is the preload/polyfill pattern. With this approach, you load any stylesheets as preloads instead, and then use their onload events to change them back to a stylesheet once the browser has them ready. So you’re trying to make your stylesheet more async, but it causes two …

GraphQL is becoming popular and developers are constantly looking for frameworks that make it easy to set up a fast, secure and scalable GraphQL API. In this article, we will learn how to create a scalable and fast GraphQL API with authentication and fine-grained data-access control (authorization). As an example, we’ll build an API with …