This is a friendly reminder to keep leading slashes in mind in .gitignore files.
The other day, I pulled down a project and couldn’t get the CSS to build because files were missing. It turned out another developer created a new resources/css/vendor directory to override styles for third-party components. A fine name, but vendor was ignored so they were quietly missing from the repository. We updated .gitignore to use /vendor instead and all was well.
# Ignores all vendor files
vendor
# Only ignores vendor at the project root
/vendor
During my latest redesign, I replaced Hugo’s default code highlighting with Torchlight. In this post, I’ll explain how I set up Torchlight CLI for my Hugo site. (Although this can be applied to any static site.)
Read more
Nat Eliason on ideas and fermented jalapeños:
Good ideas require boredom. If you constantly ingest new information, the existing information can never be digested.
Coming up with ideas is a passive undertaking, not an active one. You can’t summon good ideas like a genie. They sneak up on you when your mind has enough space to wander.
Local storage tends to be the obvious place to persist data locally in a web application. We tend to grab straight for localStorage, but it’s not the only tool in our workbox. Another option is sessionStorage. Let’s review their similarities and differences, and determine when to use which.
Read more
Elise Hein compiled a few arguments in favor of using CSS attribute selectors more often. Two examples stood our for me.
Consider existing attributes. Whenever we add state we should take a step back and consider if we can leverage a standard. I often add an .is-active class to links in navbars. However, there’s an ARIA attribute for that. In addition to using a standard, our site becomes more accessible.
a[aria-current="page"] { }
Make invalid states impossible with data attributes. In HTML, we could accidentally end up with a card that .is-small.is-large. Using a data attribute enforces a single value for the attribute.
.card.is-small { }
.card.is-large { }
// vs
.card[data-size="small"] { }
.card[data-size="large"] { }
Read the full post on Elise Hein’s blog.
This blog’s design has remained roughly the same the past two years. I tweaked the style a lot, but changes were incremental and stay true to the neutral black and white style. Codebases rot over time, and small changes slowly but surely introduce technical debt. I started cleaning house, and before I knew it I was embarked in a full redesign.
Read more
I shiver at the sight of a function packed with too-many-to-read-at-a-glance arguments without a description.
Read more
A few weeks ago a spec change for an application we’re working on forced us to refactor part of the codebase. It was food for thought about the flexibility granular interfaces provide, and choosing the right abstraction at the right time. This is a short writeup on the thought process we went through as we updated our logic to support a new feature now and allow more options in the future.
Read more
How to write HTML in Hugo without losing markdown capabilities.
Read more
Sometimes you want to store data in your Alpine component without wrapping it in a JavaScript proxy (which is how Alpine keeps everything reactive).
For example, third party libraries might have issues when wrapped in a proxy. Chart.js is one of those. If you store a Chart.js instance in Alpine data, the chart will error.
Read more