All Blog Posts

Dev tutorials, thoughts on software development, and the occasional off-topic post.

  1. 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.

  2. Represent State with HTML Attributes, Not Class Names

    We often use class names to represent a change in a component's state. But really, we should use HTML attributes and the CSS attribute selector to style those states.

  3. Passing Object Arguments to Liquid Shortcodes in 11ty

    While 11ty doesn't let you pass object arguments to shortcodes in Liquid, you can get around this by assembling and parsing a JSON string.

  4. Dynamically Importing Components with React.lazy

    Certain static imports may increase your bundle size, potentially hurting performance. With React.lazy, you can dynamically import components at runtime.

  5. 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!

  6. Awaiting Multiple Promises with Promise.all

    Learn how to use JavaScript's Promise.all method to await multiple async operations, like batch uploads.

  7. Cleaner Type Predicates with Derived Types

    Type predicates are a powerful TypeScript feature that allows you to narrow down an abstract type to a more concrete type. Together with derived types, they can greatly reduce repetition in your code.

  8. Respecting Font Size Preferences: Rems and 62.5% Base Font Size

    Setting your base font size to 62.5% allows you to think in pixels but use rems to respect users' font size preferences.

  9. 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.

  10. 11ty: The Good, the Bad, and the... Possum?

    A review of 11ty, an extensible static site generator written in Node that supports a variety of template languages.

  11. Premature Optimization: Code First, Optimize Later

    Premature optimization may be hurting the quality of your work. Focus on writing legible code first; optimize it later if you need to.

  12. React, Iframes, and a Back-Navigation Bug

    If an iframe re-renders in React, it can interfere with back navigation in your browser. You can fix this by unmounting the iframe.

  13. Make Atomic Git Commits

    It can be tempting to lump unrelated code changes into a larger commit, but atomic Git commits are more maintainable.

  14. How to Format Code on Save in VS Code with ESlint

    Improve your developer experience by setting up ESLint and configuring VS Code to format code on save for JavaScript, TypeScript, and React projects.

  15. 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.

  16. 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 a developer's life and can help you build a more successful career.

  17. Always Set a Width and Height on Your Images

    Layout shifts can be annoying and may even hurt your page's ranking, but you can minimize them by setting a width and height on images.

  18. 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.

  19. 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.

  20. SVG Tutorial: How to Code SVG Icons by Hand

    Learn the basics of SVGs so you can code your own SVG icons by hand, without always relying on icon libraries.