Generating responsive utility classes with Bootstrap

I’m a big fan of Bootstrap, I use it a lot. I’ve used it for many years, and with the recent support for theming with CSS variables, and for their utility API, I’ve found I can have the best of both worlds - a rich and capable library of components, along with an extensive class-based approach for making tweaks to...

How to rearrange menu bar icons in Mac OS

This is a tip I re-discover every couple of years, then forget until I find my menu bar getting a bit cluttered up again. Holding down the Command key allows menu icons to be dragged backwards and forwards along the menu bar to order them. This is available for all items other than the control center and date/time, including system...

Logging the DOM state of an element with testing-library

I’m sure this is all over testing-library documentation, but I haven’t had to do this before, so I think it’s worth a quick post about. If I’m writing a testing-library assertion, every now and then the test won’t pass, because the element I expected to be present, was not. Usually, when this happens, a snippet of the DOM will be...

Stretching interactive elements

Stretched links have been a feature of Bootstrap for some time, but it’s quite a useful technique to understand, because the functionality it offers - expanding the tap target of an element, works for any element that can be interacted with with a tap or mouse gesture, not just links. Some common examples include: Buttons Inputs Labels The way that...

Passion projects

Throughout my career, I’ve always had at least one project on the go outside work - call this a personal, learning, or passion project - it all amounts to the same. I’ve got a lot of benefit out of these projects - sometimes, I approach them deliberately to try out a new technique or tool. Sometimes, I just enjoy the...

Procs can be passed to Rails' collection form helpers

Just a quick little way to reformat or otherwise transform a value to be used as the label in a select, radio button, or checkbox collection group in a Rails form: Given I have an enum defined like so: class User enum :distance_unit, { mi: "mi", km: "km" } end And translations defined like so: en: distance_units: km: Kilometer (Metric)...

Avoiding script injection when rendering ERB

Bad (but not obviously so): data = { greeting: "Hello, world!" } ERB.new(" <h1>Show greeting:</h1> <p><%= greeting %></p> ").result_with_hash(data) # => <h1>Show greeting:</h1> <p>Hello, world!</p> The question is - what happens if greeting is something different…like <script>alert('greeting!')</script>? Perhaps, if you’re used to Rails, not what you might expect: data = { greeting: "<script>alert('greeting!')</script>" } ERB.new(" <h1>Show greeting:</h1> <p><%= greeting %></p>...

Streamlining daily blog posts

For quite a while, I managed to find something interesting to write up each work day. Unfortunately, life got in the way, and as is easy to do, this habit stopped. I’m hoping to get back into writing, and I’m trying to do this by making it easier to write up a post without leaving my flow as much. To...

Adding elevation to DOC track dataset

I don’t know if this is interesting to anyone, but on Friday and for an extra hour or two in the weekend, I was playing around with calculating an elevation profile for walking tracks in NZ. I started with a dataset from data.govt.nz from the Department of Conservation (which for AU is responsible for walking tracks and facilities at a...

Rails supports transforming aria hashes into dasherized attributes

TIL that aria- attributes get the same treatment in Rails tag helpers as data-. That is, you can do: link_to "X", y_path, aria: { pressed: true } -> aria-pressed="true" OR link_to "X", y_path, "aria-pressed" => true -> aria-pressed="true" I can’t find any multi-dash aria properties on MDN, but I imagine Rails will follow the same formatting rules of turning underscores...