leastbad

Actionable ideas for Ruby and Stimulus developers.

Read this first

Introducing jquery-events-to-dom-events (and jboo)

quantum_entanglement_wormholes.jpg

Did you know that jQuery events aren’t events?

It’s true - and it’ll really mess up your night if you need to capture events from legacy jQuery components. Looking at you, hidden.bs.modal.

I needed a way to make $(document).trigger('fart') emit a standard $fart DOM event, so I wrote it:

https://www.npmjs.com/package/jquery-events-to-dom-events

This library is short and sweet, with zero dependencies - including jQuery. It’s just two functions: delegate and abnegate. It is Mutation-First; designed to work great in Stimulus and supports Turbolinks out of the box.

It even has the secret ability to listen for DOM events with jQuery event listeners, but don’t tell anyone.

You can try it now on CodePen or even better, clone a sample Rails project to experiment in a mutation-first context with Stimulus.

The Rails project is called jboo. Don’t read into the name.

Usage

Note: it is...

Continue reading →


My first npm package: stimulus-image-grid

grid-2.jpg

A Stimulus controller for beautiful image grids

I published my first npm package today!

https://www.npmjs.com/package/stimulus-image-grid

With only three optional parameters, this is a simple, drop-in, backend-agnostic, code-free solution that is completely free of CSS opinions. It’s responsive and scales to whatever bounding container you give it.

It’s also performant AF: stimulus-image-grid uses the ResizeObserver so there’s zero screen flicker. It’s compatible with Turbolinks by design and free for personal and commercial use.

Built for StimulusJS

This Stimulus controller allows you to make any configurations for the image grid directly with data attributes in your HTML. Once registered in your Stimulus application, you can use it anywhere you like.

Here is a simple example:

<div data-controller="image-grid">
  <img src="https://placehold.it/350x300/EEE04A/ffffff">
  <img
...

Continue reading →


Introducing Optimism: realtime remote form validation for Rails

female-mechanics.jpg

I’m proud to announce the public release of Optimism, a new Ruby on Rails gem that makes it easy to add realtime validation error messages to your applications.

When a model validation error prevents an update from succeeding, Optimism builds a list of issues that must be resolved. This list is broadcast to the browser over a websocket connection, and the live document is changed to show the necessary validation hints. No page refreshes are required and the entire process happens faster than you can blink.

Optimism injects text content, CSS class updates and even DOM events into your page. It has no client-side scripting requirements beyond a dependency to the awesome CableReady library. It automatically handles multi-level nested forms and plays well with other technologies, such as Turbolinks.

You can try a live demo right now.

Full documentation is available here. The project...

Continue reading →


The best one-line Stimulus power move

simone-biles.jpg

Stimulus is a tiny and absurdly productive JavaScript framework for developers who are looking for just the right amount of structure (lifecycle events and standard HTML) without attempting to re-invent how the web works (no template rendering or routing). It is criminally underappreciated in the JavaScript community.

When using Stimulus, you write controllers in JavaScript and attach instances of those controllers to DOM elements by setting data-controller="controller-name".

Unfortunately, there’s no easy way to access methods in a controller from another controller, external scripts, jQuery plugins or the console… or is there?


Before I do the big reveal, there is technically a way to access another controller instance from inside of a controller. It’s an undocumented method so there’s no guarantee that it won’t disapper someday, but the real clue that this isn’t intended to be...

Continue reading →


Mutation-first development: a call to action

goldblum.gif

Not that long ago, someone designing a JavaScript component could rely on a simple life-cycle premise: your content would load before the jQuery embedded in the bottom of the page would come to life and initialize everything that needed initializing. The user would then click a link or hit the back button, causing the cycle to repeat itself. There was a 1:1 relationship between pages requested and load events firing.

In this era of reactive asyncronous content, that assumption is now screwing us.

Web page life-cycles continue to get more complex and the page load event is no longer a reliable singular entry point to our UI setup code. This post attempts to describe the problem and offer a strategy to fix how we create libraries and components.

We need to stop acting as though multi-stage life-cycles are edge cases. Instead, we can build idempotent libraries which support use in...

Continue reading →