The Cleanest Trick for Autogrowing Textareas
Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in
The Raven Technique: One Step Closer to Container Queries
For the millionth time: We need container queries in CSS! And guess what, it looks like we're heading in that direction.
ARIA in CSS
Jeremey reacting to Sara's tweet, about using selectors instead of classes when the styling you are applying is directly related to the ARIA state.
Netlify Background Functions
As quickly as I can:
How to Detect When a Sticky Element Gets Pinned
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.
JavaScript Operator Lookup
Okay, this is extremely neat: Josh Comeau made this great site called Operator Lookup that explains how JavaScript operators work. There are some code
A Continuous Integration and Deployment Setup with CircleCI and Coveralls
Continuous Integration (CI) and Continuous Deployment (CD) are crucial development practices, especially for teams. Every project is prone to error,
How to Create a Commenting Engine with Next.js and Sanity
One of the arguments against the Jamstack approach for building websites is that developing features gets complex and often requires a number of other
Quick LocalStorage Usage in Vue
localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I've personally
This page is a truly naked, brutalist html quine.
Here's a fun page coming from secretGeek.net. You don't normally think "fun" with brutalist minimalism but the CSS trickery that makes it work on this page is
compute cuter
Get that desk more cuter, fam. Amy (@sailorhg) has this perfectly cute minisite with assorted desktop backgrounds, fonts, editor themes, keyboard stuff, and
Little Things on My Personal Site
I updated my personal website the other day. Always a fun project since it's one of the few where it's 100% just me. It's my own personal playground with no
Comparing Static Site Generator Build Times
There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade
Anima 4.0: Go Straight From Design to React in the Design Handoff
Imagine this scenario: You get an email from the design team. It contains a link to a high-fidelity prototype of a React app they want you to build. You click
WordPress and Jamstack
I recently moderated a panel at Netlify's virtual Jamstack Conf that included Netlify CEO Matt Biilman and Automattic founder Matt Mullenweg. The whole thing
WooCommerce Payments, Now with Support for Subscriptions and Saved Cards
A little while back we shared the news that WooCommerce shipped a beta payments feature as part of its 4.0 release. It's a free plugin with no monthly costs
Smarter Ways to Generate a Deep Nested HTML Structure
A look at using HTML preprocessors to generate HTML, particularly deeply nested HTML, which is useful for a variety of interesting browser art and experimentation.
"Durable"
Looks like the word "durable" is an emerging term in the world of serverless. As I understand it, it's like allowing for state in places you wouldn't normally
Announcing the 2020 State of CSS Survey
Last year's State of CSS Survey yielded interesting results. There's the quick adoption of features, like calc() and CSS custom properties. There's also the
Comparing Styling Methods in 2020
Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It's in the context of Next.js, which is somewhat important as Next.js has some
The failed promise of Web Components
Lea has some words:
Our Best Posts on Web Components
A grouping of hand-selected posts from our site about Web Components. We've published a very useful article series from Caleb Williams, so that's here, but also sprinkled in some other informational and link posts on the subject.
The :focus-visible Trick
Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.
People Problems
Just the other day, Jeremy Keith wrote that problems with performance work isn’t only a matter of optimization and fixing code, but also tackling people
Layoutit Grid: Learning CSS Grid Visually With a Generator
Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add
Balancing on a Pivot with Flexbox
Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question
Looking at AWS Amplify
AWS Amplify is a collection of tools from AWS to help you build applications.
On the Web Share API
I think the Web Share API is very cool (here's our coverage). In a nutshell, it taps into the native sharing features on whatever platform you're on, if that
CSS Media Queries Guide
CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles based on those things.
Parsel: A tiny, permissive CSS selector parser
If you've ever thought to yourself, gosh, self, I wish I could have an Abstract Syntax Tree (AST) of this CSS selector, Lea has your back.
There's a good reason why experienced devs say "it depends" so often
I feel like Jerod Santo really understood what I was trying to say in Weaved Webs, when I was trying to cover the emerging WordPress ("versus") Jamstack
Some Industry Podcasts
It's called The Clearleft Podcast if you can believe that. It gets into new (at least to me) concepts like Design Ops and Design Sprints, which are loaded
The Paper Prototype Rule
I’ve been lucky to have worked with some of the best designers in the industry, including Zhenya Rynzhuk, Louis Paquet, Maria de la Paz Vargas, and of course,
POW
As a connoisseur of web trickery, this is a must share:
Make Your Own Dev Tool
Amber Wilson on making bookmarklets to help yo-self. She shows off one that injects an accessibility script — I like this approach, as it means you don't have
Some New Icon Sets
I've bookmarked some icon sets lately, partly because I can never find a nice set when I need to. I figured I'd even go the extra mile here and blog them so I
The Flavors of Object-Oriented Programming (in JavaScript)
In my research, I've found there are four approaches to Object-Oriented Programming in JavaScript. Which methods should I use? Which one is "the best" way? Here I'll present my findings along with information that may help you decide which is right for you.
ooooops I guess we’re* full-stack developers now
This is a written version of my talk from Jamstack Conf London 2019.
Linearly Scale font-size with CSS clamp() Based on the Viewport
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc().
Web Technologies and Syntax
JavaScript has a (newish) feature called optional chaining. Say I have code like:
Using Markdown and Localization in the WordPress Block Editor
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Jamstack Conf
Here's an important detail here: It's free!
Accessible Web Animation: The WCAG on Animation Explained
It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to
ztext.js
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
Enforcing performance budgets with webpack
As you probably know, a single monolithic JavaScript bundle — once a best practice — is no longer the way to go for modern web applications. Research has
Optimizing CSS for faster page loads
A straightforward post with some perf data from Tomas Pustelnik. It's a good reminder that CSS is a crucial part of thinking web performance, and for a huge
Changing Emoji Skin Tones Programmatically
So, you know how many emoji have different skin tones? Emoji skin tones are extremely popular, especially over text and on social media. The raised black fist
Weaved Webs
There is a bit of an irony with Jamstack.
What is the Value of Browser Diversity?
In 2018, Rachel Nabors made the point that browser diversity is similar to biological ecosystem diversity. There are literal advantages to more diversity.
Form design
A very digestable guide from Geri Reid on building forms. Not the code, but the design and UX principles that should guide the code.
Interaction Media Features and Their Potential (for Incorrect Assumptions)
The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user’s input device.
Modifying Specific Letters with CSS and JavaScript
Changing specific characters can be a challenge in CSS. In this article, we'll explore several ways to modify specific letters using CSS and JavaScript.
Defining "View Source"
Last time there was a little flurry of activity around the concept of "View Source," I did get the sense that not everyone was on the same page about what
Setting up and Customizing the Ant Design System in a Nuxt App
I don’t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has
Jetpack 8.9: Take Donations, Capture Email Subscribers, AMP integration, and More
Jetpack 8.9 shipped on September 1 and it shows why the plugin continues to be the premier way to take a WordPress site from good to holy smokes! Several new
AVIF has landed
Everybody is talking about AVIF today because of Jake's blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web
One Action, Multiple Terminal Windows Running Stuff
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
Working with JavaScript Media Queries
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this:
All the Ways to Make a Web Component
This is a neat page that compares a ton of different libraries with web components. One of the things I learned after posting "A Bit on Web Components
Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS
We're living through a weird era where there are tons of JavaScript libraries that were meant to be used as <script> tags that expose available globals.