All Blog Posts
Browse the following posts, or view all tags.
-
Published on
Gated Content, Broken Locks
Some sites gate their content by hiding it with CSS. Whether you open the site incognito or normally, the full content appears to be beyond reach. But it's not—anyone can swing open the gate.
-
Published on
Flexbox Holy Albatross with Variable-Width Columns
The Holy Albatross technique allows a flex container to auto-wrap from multiple columns to a single column at a target container width. Let's modify the original code to control the number and widths of columns.
-
Published on
How to Download and Optimize Google Fonts
Self-hosting fonts can improve your site's performance while also respecting your users' privacy in the era of the GDPR. Learn how to download, subset, and optimize any Google Font for your projects.
-
Published on
Custom Markdown Components in 11ty
Ever wanted to nest Markdown in HTML? In 11ty, you can easily do this with paired shortcodes and a custom Markdown library parser.
-
Published on
HTML Input Validation with JavaScript
If you want to use a standalone HTML input to accept user input and store it locally in your app's state, you can use the checkValidity, reportValidity, and setCustomValidity methods to validate the user's input and provide feedback.
-
Published on
Creating a Fluid Type Scale with CSS Clamp
Fluid typography allows each font size in a modular scale to vary responsively between a min and max. Learn the math behind fluid typography and how to programmatically generate a fluid type scale with CSS clamp and Sass.
-
Published on
Modern Techniques for Writing Better CSS
CSS has come a long way since the early days of web development. Learn how to write better CSS using modern strategies like the :is and :where pseudo-class functions, logical properties and values, clamp, gaps, and aspect-ratio.
-
Published on
Managing Keyboard Focus for Load-More Buttons
Load-more buttons are more accessible than infinite scrolling, but they also steal keyboard focus when new content loads in. We can fix this problem by manually focusing the first newly inserted result.
-
Published on
Configuring Web Fonts in 11ty with Global Data
Rather than using static font-face declarations for web fonts, you can take advantage of global data in 11ty to create a single source of truth for fonts and reuse those values in your templates and CSS.
-
Published on
Optimizing Images with the 11ty Image Plugin
While imagery can enrich your content, it can also slow down your site if it's not used responsibly. Learn how to use the official 11ty image plugin to create optimized and responsive images.
-
Published on
Add Comments to a Static Site with Netlify Functions and the GitHub API
Comment systems can be a pain to set up, but they don't have to be. Learn how to use the GitHub Issues API to create a custom comment system powered by Netlify functions.
-
Published on
Managing Complex State in React with useReducer
React's useState hook works well for managing simple state. But once your component starts to grow, useReducer may be a better fit for managing state.
-
Published on
NFTs Are a Problem
While NFTs are being hailed as the future of digital ownership, they're also the source of many problems. NFTs are artificially scarce, make it easier to commit fraud, undermine the intellectual property rights of content creators, and encourage consumptive mining practices.
-
Published on
Accommodating the Longest Text in a Label with CSS Grid
Suppose a label renders strings of different lengths, but you want it to always reserve space for the longest text to prevent layout shifts. You can do this using a CSS grid trick.
-
Published on
Represent State with HTML Attributes, Not Class Names
Developers often use class names to represent a change in a component's state, but this leads to redundant (and sometimes inaccessible) markup. Instead, we should use native HTML attributes to represent state and style those discrete states with the CSS attribute selector.
-
Published on
Passing Object Arguments to Liquid Shortcodes in 11ty
Currently, 11ty doesn't allow you to pass object arguments to shortcodes in Liquid. As a temporary workaround, you can assemble and parse a JSON string to pass along to the shortcode as an argument.
-
Published on
Dynamically Importing Components with React.lazy
Not all static imports are immediately needed, and unnecessary imports can be costly. With React.lazy, you can dynamically import components at run time to reduce the size of your static bundle.
-
Published on
Automate Netlify Redirects in 11ty
Tired of listing all of your Netlify redirects by hand? Generate them programmatically with a bit of 11ty templating magic!
-
Published on
Awaiting Multiple Promises with Promise.all
Often, you need to wait for multiple independent async tasks to finish before resuming where your code left off. Learn how to use JavaScript's Promise.all method to await multiple async operations, such as batch file uploads.
-
Published on
Cleaner Type Predicates with Derived Types
In TypeScript, type predicates allow you to narrow down an abstract type to a more concrete type with a simple assertion. Together with derived types, they can greatly reduce repetition in your code.
-
Published on
The 62.5% Font Size Trick
Once you get used to thinking in rems for font sizing, you'll find that it's easy to express familiar powers of two. But for other values, you may find it helpful to use the 62.5% font size trick.