Search
Cloudinary Fetch with Eleventy (Respecting Local Development)
4.12.2020
This is about a wildly specific combination of technologies — Eleventy, the static site generator, with pages with images on them that you ultimately want hosted by Cloudinary — but I just wanna document it as it sounds like a decent amount of people run into this situation.
The deal:
Cloudinary...
How to Get Sticky and Full-Bleed Elements to Play Well Together
4.12.2020
I had a unique requirement the other day: to build a layout with full-bleed elements while one element stays stuck to the top. This ended up being rather tricky to pull off so I’m documenting it here in case anyone needs to re-create this same effect. Part of the trickiness was dealing with logical...
Happier HTML5 form validation in Vue
3.12.2020
It’s kind of neat that we can do input:invalid {} in CSS to style an input when it’s in an invalid state. Yet, used exactly like that, the UX is pretty bad. Say you have <input type="text" required>. That’s immediately invalid before the user has done anything....
How to create a client-serverless Jamstack app using Netlify, Gatsby and Fauna
3.12.2020
The Jamstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
The key aspects of a Jamstack application are the following:
The entire app runs on a CDN (or ADN). CDN stands for Content Delivery Network and an ADN is an Application...
How to Animate a SVG with border-image
3.12.2020
Let’s take a look at how to combine the border-image property in CSS with animated SVGs that move around a border. In the process, we’ll cover how to hand-craft resizable, nine-slice animated SVGs that you can use not only re-create the effect, but to make it your own.
Here’s what we’re...
Minimal Takes on Faking Container Queries
2.12.2020
It’s sounding more and more likely that we’re actually going to get real container queries. Google is prototyping a syntax idea from David Baron and refined by Miriam Suzanne. Apparently, there has already been some prototyping done for a switch() syntax which is like container queries...
Amplify, Amplified
2.12.2020
First, quickly: AWS Amplify has a new Admin UI. Amplify always had a CLI that helps you build projects by setting up stuff like auth, storage, and APIs. That’s super useful, but now, you can do those things with the new Admin UI. And more, like model your data (!!), right from a local...
How to Make an Area Chart With CSS
2.12.2020
You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine a line chart with the bottom area filled in), particularly any in HTML and CSS alone. In this...
Reuters runs the headline Bitcoiners have longed to read
2.12.2020
Mainstream news agencies are beginning to provide positive coverage of Bitcoin, acknowledging its proper significance as an asset as the US dollar nosedives
Painting With the Web
1.12.2020
Matthias Ott, comparing how painter Gerhard Richter paints (do stuff, step back, take a look) to what can be the website building process and what can wreck it:
[…] this reminds me of designing and building for the Web: The unpredictability, the peculiarities of the material,...
A Microsite Showcasing Coding Fonts
1.12.2020
We made one! It’s open source if you want to make it better or fix things.
There are quite a few purpose-built fonts for writing code. The point of this site is to show you some of the nicest options so you can be aware of them and perhaps pick one out to try that suites your taste.
We used...
How to Add Text in Borders Using Basic HTML Elements
1.12.2020
Some HTML elements come with preset designs, like the inconveniently small squares of <input type="checkbox"> elements, the limited-color bars of <meter> elements, and the “something about them bothers me” arrows of the <details> elements. We can style them to match...
Under-Engineered Responsive Tables
1.12.2020
I first blogged about responsive data tables in 2011. When responsive web design was first becoming a thing, there were little hurdles like data tables that had to be jumped. The nature of <table> elements are that they have something a minimum width depending on the content they contain...
Native CSS Masonry Layout In CSS Grid
1.12.2020
Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source...
Super Tiny Icons
30.11.2020
A bunch of SVG icons (of popular things) all under 1KB. SVG is awesome for golfing.
I was going to add a CodePen logo but there is already one in there at 375 Bytes. I’ve got one at 208 Bytes, based on a logo update David DeSandro did for us a couple years back.
Direct Link to Article...
Lots of Ways to Use Math.random() in JavaScript
30.11.2020
Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible for an actual 0 to be returned) and 1 (exclusive, as in, it’s not possible for an actual 1 to be returned).
Math.random(); // returns...
A Complete State Machine Made With HTML Checkboxes and CSS
27.11.2020
State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable to just about any language, including, amazingly, HTML and CSS. In this article, we’re going to do exactly that. I recently built a website...
Exploring What the Details and Summary Elements Can Do
26.11.2020
We’ve mentioned before just how great the <details> and <summary> elements are. They’re great for quickly making accordions that are accessible to touch, mouse, and keyboard input:
CodePen Embed Fallback
<details> and <summary> can even be used to play/pause gifs!...
Three Things You Didn’t Know About AVIF
26.11.2020
AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports and comparisons show good results compared to JPEG and WebP. However, even if browser support is good, AVIF is still on the bleeding edge in regards to encoding and decoding....
Tailwind versus BEM
25.11.2020
Some really refreshing technological comparison writing from Eric Bailey. Like, ya know, everything in life, we don’t have to hate or love everything. Baby bear thinking, I like to say. There are benefits and drawbacks. Every single bullet point here is well-considered and valid. I really...