Keith Schacht’s Blog

Awhile back when I was ramping up on Typescript, I was leaning into the benefits of types. In the Ruby world, Sorbet is the most common way to add types so I gave that a shot. In the end, I ripped it out. I spent more time wrangling type checking then the time it spent catching bugs, and one of the issues was the verbose syntax. But recently I came up with a novel solution to this problem. First, here is the verbose syntax — you end up declaring all your arguments twice:

sig { params(name: T.untyped, nickname: String).returns(Integer) }
def greet(name, nickname)
  puts "Hello, #{name}! Your nickname: #{nickname}"
  name.length
end

Awhile back when I was ramping up on Typescript, I was leaning into the benefits of types. In the Ruby world, Sorbet is the most common way to add types so I gave that a shot. In the end, I ripped it out. I spent more time wrangling type checking then the time it spent catching bugs, and one of the issues was the verbose syntax. But recently I came up with a novel solution to this problem. First, here is the verbose syntax — you end up declaring all your arguments twice:

sig { params(name: T.untyped, nickname: String).returns(Integer) }
def greet(name, nickname)
  puts "Hello, #{name}! Your nickname: #{nickname}"
  name.length
end

It may not seem like a big deal, but every time you change the name of an argument or change the order, you have to do it in two places. Recently I had an idea: could we do it in one line if we used Ruby to redefine how methods are defined? I got this syntax working and threw it up on a gist:

# Two positional arguments. The first, name, is untyped.
# The second, nickname, must be a String

df :greet,  :name, nickname: [String], returns: Integer do
  puts "Hello, #{name}! Your nickname: #{nickname}"
  name.length
end

Here is a gist. It supports positional and named arguments. I got it working with runtime and static analysis. I don’t plan to take this experiment any further right now, but maybe it’s useful to someone.

I’m working on a site that has a left column for navigation. Standard stuff. But I wanted a simple control that lets you hide and show the left column.

When I first started using Stimulus, I would create a left_column_controller.js. Within it, in the connect() and disconnect() methods I would add and remove listeners. It worked, but it was verbose and I wasn’t enjoying Stimulus. Later, I refactored all my stimulus controllers to extract common interactions. Now I finally “get” Stimulus and I’m loving it!

I’m working on a site that has a left column for navigation. Standard stuff. But I wanted a simple control that lets you hide and show the left column.

When I first started using Stimulus, I would create a left_column_controller.js. Within it, in the connect() and disconnect() methods I would add and remove listeners. It worked, but it was verbose and I wasn’t enjoying Stimulus. Later, I refactored all my stimulus controllers to extract common interactions. Now I finally “get” Stimulus and I’m loving it!

Check out this example; it’s so simple and useful. When I want a special interaction on my page, I create a CSS class that I can add to the element in order to trigger the change I want. For example, adding “hide” collapses the left sidebar, adding “show” reveals additional fields on a form. Here is how I define this collapsible sidebar:

<div data-controller="transition" data-transition-toggle-class="hidden">
  <div id="sidebar" class="flex" data-transition-target="transitionable">...</div>
  <button name="close" type="button" data-action="transition#toggleClass" />
</div>

It’s simple, but that’s what I love about it. I use this in a half dozen places. Here is the full transition controller.

// transition_controller.js

export default class extends Controller {
  static classes = [ "toggle" ]
  static targets = [ "transitionable" ]
  static values = { afterTimeout: Number }

  connect() {
    if (this.afterTimeoutValue) setTimeout(() => this.toggleClass(), this.afterTimeoutValue)
  }

  toggleClass() {
    this.transitionableTargets.forEach(element => {
      this.toggleClasses.forEach(className => {
        element.classList.toggle(className)
      })
    })
  }
}

Below is a short video so you can see all the different interactions I get from it; you can see just how versatile this is.

Check out how versatile this is!

When I started thinking this way, it led me to extract multiple reusable controllers like this.

This part of my rails open-source ChatGPT app called HostedGPT. You can find the project on GitHub if you want to use it or help contribute to making it better!

Questions? Comment on this Reddit thread.

After generating the Rails scaffolding for my “Conversation” model, it was just a few steps to do inline editing:

1. Modify conversations/_conversation.html.erb to wrap it in a turbo-frame
2. Modify conversations/_form.html.erb partial to wrap it in the same turbo-frame so that the form will replace the displayed title
3. Add a tiny bit of stimulus to enable submit on enter/blur and to enable discard with Escape

After generating the Rails scaffolding for my “Conversation” model, it was just a few steps to do inline editing:

1. Modify conversations/_conversation.html.erb to wrap it in a turbo-frame
2. Modify conversations/_form.html.erb partial to wrap it in the same turbo-frame so that the form will replace the displayed title
3. Add a tiny bit of stimulus to enable submit on enter/blur and to enable discard with Escape

Check out this short demo and walk-through!

This part of my rails open-source ChatGPT app called HostedGPT. You can find the project on GitHub if you want to use it or help contribute to making it better!

Questions? Comment on this Reddit thread.

And this is my full inline_edit_controller.js for reference:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "input" ]

  connect() {
    this.originalText = this.inputTarget.value
    this.focusInput()
    this.cursorToEnd()
  }

  focusInput() {
    this.inputTarget.focus()
  }

  cursorToEnd() {
    this.inputTarget.selectionStart =
      this.inputTarget.selectionEnd =
        this.inputTarget.value.length
  }

  submitForm() {
    if (this.inputTarget.disabled) return

    this.element.requestSubmit()
    this.inputTarget.disabled = true
  }

  abort() {
    this.inputTarget.value = this.originalText
    this.submitForm()
  }
}