#css / elisehe.in

CSS states with attribute selectors

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.


#css #meta

2022 redesign

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


#php

Named arguments

I shiver at the sight of a function packed with too-many-to-read-at-a-glance arguments without a description.

Read more


#programming #php

Granular interfaces

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


#hugo

Using markdown in HTML (in markdown) in Hugo

How to write HTML in Hugo without losing markdown capabilities.

Read more


#alpine

Non-reactive data in Alpine.js

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


#laravel

Composable seeders in Laravel with callOnce

Laravel 9 is fresh out the door, and it contains a small contribution of mine: a new callOnce method for database seeders.

Read more


#laravel #blade

Laravel Blade & View Models

An overview on view models in Laravel

Read more


#mysql #laravel

Using MySQL `order by` while keeping one value at the end

The other day I needed to sort a dataset in MySQL and ensure one value was always at the end. I never fully understood how order by works, so I did some research on how to solve my problem and how order by behaves.

Read more


#laravel #eloquent

Eloquent findOrFail caveats

I use Model::findOrFail a lot in Laravel. Recently, I realized it’s not always the best option.

Read more