Jamstack Conf 2021
What? Jamstack Conf! It's the best! Learn what's happening and what's next for this hot ecosystem.
Social Image Generator + Jetpack
I feel like my quest to make sure this site had pretty sweet (and automatically-generated) social media images (e.g. Open Graph) came to a close once I found
"Just in Time" CSS
I believe acss.io is the first usage of "Atomic CSS" where the point of it is to be a compiler. You write CSS like this:
Fun Times Styling Checkbox States
We might leave a text input unstyled. We might leave a link unstyled. Even a button. But checkboxes… we don’t leave them alone. That’s why styling checkboxes
EyeDropper API Dropped
I had no idea this was coming but it's pretty neat! Chrome has shipped the EyeDropper API in v95 (Canary, as I write).
Frameworks Helping Image Usage
I recently blogged about how images are hard and it ended up being a big ol' checklist of things that you could/should think about and implement when placing
Improve Largest Contentful Paint (LCP) on Your Website With Ease
Optimizing the user experience you offer on your website is essential for the success of any online business. Google does use different user
Mars Theme: A Deep Look at Frontity’s Headless WordPress Theme
Frontity is a framework for creating de-coupled (or "headless") WordPress sites. In this article, we dive into the process of spinning up such a site, with a detailed overview of the building blocks provided by Frontity and its flagship theme, Mars.
The Story Behind TryShape, a Showcase for the CSS clip-path property
I love shapes, especially colorful ones! Shapes on websites are in the same category of helpfulness as background colors, images, banners, section separators,
Can we have custom media queries, please?
Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it's
Fire SVG animations (SMIL) when the SVG is visible
When requirements read "when visible" your brain should go straight to IntersectionObserver. That's exactly what Zach is doing here to kick off an animation
Early Days for CSS Scoping
There is a working draft spec for CSS scoping now. Other than a weird period where <style scoped> shipped and then was subsequently removed from the
Some Typography Links VII
All-things-typography, from a hard-edged monospaced variable font to fonts in the "Twilight Zone" ... and much, much more.
Application-Specific Links
You know like https:? That's a URL Scheme. You're probably familiar with the concept, thanks to others that come up in front-end development, like mailto:.
Exploring the CSS Paint API: Blob Animation
After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we
Designing for the Unexpected
When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really
How I Made a Generator for SVG Loaders With Sass and SMIL Options
While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a
Architecting With Next.js
Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It's just a little half-day thing. No brainer.
Detecting Media Query Support in CSS and JavaScript
You can't just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:
Native JavaScript Routing?
We can update the URL in JavaScript. We've got the APIs pushState and replaceState:
From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo
I've been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly
HTML is Not a Programming Language?
HTML is not a programming language.
Tabs in HTML?
Brian Kardell shares a bit about the progress of bringing "Tabs" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's tricky.
Cutouts
Ahmad Shadeed dug into shape "cutouts" the other day. Imagine a shape with another smaller shape carved out of it. In his typical comprehensive way, Ahmad
Unicode Arrows
Looks like... 253 of them. I love the little water ⥾ spout one. (U+297e). Because. And I like how it's a fairly useful little site at a great domain and with
Building a Cool Front End Thing Generator
Whether you are just starting out on the front end, or you’ve been doing it for a long time, building a tool that can generate some cool front-end magic can
Stay alert
A few days ago, Chris wrote up his thoughts about how alert(), confirm(), and prompt() were being deprecated by Chrome and collected a bunch of thoughts from
Static vs. Dynamic vs. Jamstack: Where's The Line?
You'll often hear developers talking about “static” vs. “dynamic” sites, or you may have heard someone use the term Jamstack. What do these terms mean, and
Wanna see a whiter white?
Heck of a CSS trick here from Dongsung Kim.
Napkin
We took a surface level look at Pipedream the other day, which really does look cool. It's like a much more modern and fancy version of what Yahoo Pipes was.
WooCommerce With Apple Pay and Google Pay
Got a WooCommerce store? It behooves you to offer a variety of payment methods. Just anecdotally, I'm sure both you and me have been annoyed and even
View Source (on Mobile)
Have you ever wished you could see the HTML source of a web page while on a mobile browser, which generally doesn't offer that feature? If you have a desktop
CSS Nesting, specificity, and you
Here’s Kilian Valkhof on CSS nesting which isn't available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and
Exploring the CSS Paint API: Image Fragmentation Effect
In my previous article, I created a fragmentation effect using CSS mask and custom properties. It was a neat effect but it has one drawback: it uses a lot of
Choice Words about the Upcoming Deprecation of JavaScript Dialogs
It might be the very first thing a lot of people learn in JavaScript:
The Large, Small, and Dynamic Viewports
We've got viewport units (e.g. vw, vh, vmin, vmax), and they are mostly pretty great. It's cool to always have a unit available that is relative to the entire
New Nuxt Features past v2.10
Nuxt offers an incredible developer experience, with a lot of performance and application setup best practices baked in. In recent releases, they’ve been
Efficient Infinite Utility Helpers Using Inline CSS Custom Properties and calc()
I recently wrote a very basic Sass loop that outputs several padding and margin utility classes. Nothing fancy, really, just a Sass map with 11 spacing
How to Build a Full-Stack Mobile Application With Flutter, Fauna, and GraphQL
Flutter is Google's UI framework used to create flexible, expressive cross-platform mobile applications. It is one of the fastest-growing frameworks for
Using Absolute Value, Sign, Rounding and Modulo in CSS Today
For quite a while now, the CSS spec has included a lot of really useful mathematical functions, such as trigonometric functions (sin(), cos(), tan(), asin(),
CSS Logical Properties and Values
Now that cross-browser support is at a tipping point, it's a good time to take a look at logical properties and values. If you're creating a website in
Learnings From a WebPageTest Session on CSS-Tricks
I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance testing on CSS-Tricks. Essentially use the tool, poke
ES2021 Features
Hemanth HM very succinctly shows off ES2021 features. Gosh it doesn't feel like that long ago that all we could talk about is ES2015, and now that's over a
Demystifying styled-components
Joshua Comeau digs into how styled-components works by re-building the basics. A fun and useful journey.
How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust
At Cloudflare, we have a great product called Workers KV which is a key-value storage layer that replicates globally. It can handle millions of keys, each of
Slinkity
Perhaps the #1 reason I love Astro is that it brings the JavaScript component authoring experience to the Static Site Generator world with zero JavaScript
Yet Another Mobile Context Menu With No Indication it Can Scroll
Remember Tyler Hall's personal story of a UX moment where the popup sharing context menu on iOS had no visible indication that the content inside was
Some Typography Links VI
Glitter text — whO (I learned a name for people who go by a one-word moniker like that: Mononymous) created a builder for fancy SVG-based type. It's a custom
WordPress Admin Warnings in the Block Editor
We sent out an email the other week that ultimately had a <video> in the HTML markup. We send the newsletter by creating it here in the WordPress block
Of Course We Can Make a CSS-Only Clock That Tells the Current Time!
Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it into a “digital” clock
How to Get a Pixel-Perfect, Linearly Scaled UI
Dynamically scaling CSS values based on the viewport width is hardly a new topic. You can find plenty of in-depth coverage right here on CSS-Tricks in
Build Complex CSS Transitions using Custom Properties and cubic-bezier()
I recently illustrated how we can achieve complex CSS animations using cubic-bezier() and how to do the same when it comes to CSS transitions. I was able to
A Bashful Button Worth $8 Million
Most of us grumble when running across a frustrating UX experience online (like not being able to complete a transaction because of a misplaced button). We
Jamstack Community Survey 2021
The folks over at Netlify have opened up the Jamstack Community Survey for 2021. More than 3,000 front-enders like yourself took last year's survey, which
Building a Command Line Tool with Nodejs and Fauna
Command line tools are one of the most popular applications we have today. We use command line tools every day, and they range from git, npm or yarn. Command
A Look at Building with Astro
Astro is a brand new framework for building websites. To me, the big thing is that it allows you to build a site like you're using a JavaScript framework (and
The Web’s Worst Default
There are a lot of great defaults when it comes to browsers and the web. Think about all the accessibility features that are baked into HTML so that you don’t
Body Toggle
I appreciate the clarity of this trick that Mikael Ainalem posted over on Reddit:
I've got one question about Jetpack for you.
And maybe an optional follow-up if you're up for it.
The Dilemma of Naming Font Size Variables
Normally, a project will have a set of pre-determined font sizes, usually as variables named in such a way that seeks some semblance of order and consistency.
