All Blog Posts
Filter by one of the following popular tags, or view all tags.
-
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.
-
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.
-
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.
-
Automate Netlify Redirects with 11ty
Tired of listing all of your Netlify redirects by hand? Generate them programmatically with a bit of 11ty templating magic!
-
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.
-
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.
-
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.
-
Don't Use a Fixed Line Height
In typography, the ideal line height for text depends on a variety of factors, including font size, line length, and font family.
-
11ty: The Good, the Bad, and the... Possum?
An in-depth review of 11ty, an extensible static site generator written in Node that supports a variety of template languages.
-
Premature Optimization: Code First, Optimize Later
Don't optimize your code just because you have an inkling that it's slow. Focus on writing readable, well-tested, and well-documented code; optimize it if you need to.
-
React, Iframes, and a Back-Navigation Bug
If an iframe re-renders in React, it can interfere with back navigation in your browser. The solution? Force the iframe to unmount with a unique key.
-
Make Atomic Git Commits
It can be tempting to lump unrelated code changes into a single commit, but this makes it difficult to debug and time travel in Git. Prefer to write atomic commits that have a single responsibility.
-
How to Format Code on Save in VS Code with ESlint
Never worry about manually formatting your code again. Improve your developer experience by setting up ESLint to format code on save in VS Code.
-
CRLF vs. LF: Normalizing Line Endings in Git
Line endings can differ from one OS to another. Learn the history behind CRLF and LF line endings and how to enforce line endings in Git.
-
How Writing Can Help You Become a Better Developer
Writing is likely one of the last skills you associate with software development. But it plays a key role in everything that we do and can help you build a more successful career.
-
Always Set a Width and Height on Your Images
Dimensionless images can cause layout shifts as they load, hurting your page's performance. By setting a width and height on images, you allow the browser to initialize an aspect ratio for those images and minimize layout shifts.
-
Why You No Longer Enjoy Reading
Reading books isn't something that everyone enjoys. But if you used to like reading but can no longer get past the first chapter of a new book, there may be a few reasons why.
-
Why I Don't Like Tailwind CSS
On paper, Tailwind CSS sounds like a great idea. In reality, it suffers from the same problems that it tries to solve.
-
SVG Tutorial: How to Code SVG Icons by Hand
Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand.
-
Creating a Vertical Rhythm with CSS Grid
Margins are commonly used to space paragraphs in an article, but CSS Grid offers a more intuitive alternative that defines the spacing at the layout level.
