View pry_filter.rb
module Jekyll
module PryFilter
# Usage: {{ site | pry }} to debug the state of the site from the terminal
def pry(input)
require 'pry'
View demo.html
body { border: 4px solid red; }
input {
margin-top: 40vh;
font-size: 64px;
View lol.sql
-- Query to find for a given array of strings whether a PG array
-- column of strings matches any of the given strings after being
-- trimmed and uppercase (where && is the intersection operator)
SELECT assignments.*
FROM assignments
WHERE assignments.user_id = 42
AND (upper(regexp_replace(synonyms::text, '\s+', '', 'g'))::text[]
&& ARRAY['THING1','THING2']::text[])

I learned a little bit about building queries (even with Rails/ARel) of postgres JSONB columns in my side project that I wanted to share.

I have a model that represents a Japanese word:

    "meaning"=>"To Wash", 

Accept Japanese full-width numerals in HTML5 input[type=number] fields

As a compassionate human, the fact that full-width alphanumeric characters (i.e. 'abc' or '123') produced by Japanese IME/keyboards don't work in virtually any software form fields (even in software created in Japan!) has always bothered the hell out of me. Being a software user is a miserable enough existence before you start piling on unintended consequences of the Western hegemony of consumer technology on top.

Since HTML 5 is new-ish and technologists are starting to come around to the idea that users exist outside the English-speaking Bay Area, I figured they'd have considered full-width numeric


Fix absolutely positioned divs when people turn their phones sideways

The problem

In Safari, if you have a layout container that's absolutely positioned to take up, at a minimum, its whole container (which isn't unheard of in "appey" internet home page thingies) using CSS like this:

View router-hack.js
* override preact-router so we can synchronously change the route & trigger a render
* reason for doing this: often a UI action triggers an XHR which in turn will determine
* where the user needs to go next (it's a flashcard game, so whether they got it right or wrong
* will determine whether their session has concluded, whether to draw the next card, and so on)
* as a result we have a lot of action logic that wants to in one-fell-swoop programmatically route
* the user to a different component and also update the properties passed to the components by
* re-rendering (one big top-level render function, all state just passed by props, no stateful components)
* The practical effect of this change versus the built-in router was that it cuts the number of
View 1-channel.rb
class StudyChannel < ApplicationCable::Channel
def subscribed
stream_for current_user
def handle_answer(data)
self.class.broadcast_to(current_user, {
:request_id => data["requestId"],
data["mode"] => {
data["id"] =>, data["id"], data["answer"])
View prevent-scroll-when-soft-keyboard-appears-if-there-is-plenty-of-room.js
/* preventScrollWhenSoftKeyboardAppearsIfThereIsPlentyOfRoom(event)
* Attach this handler to `touchstart` on any UI control that brings up the keyboard when you don't want iOS
* MobileSafari to scroll when a user taps it. Assumes that the input is near the top of the page and the user has
* not scrolled down (specific to my case, sorry!)
* requires top-level CSS directives so we can add it to the body:
* ```
* .prevent-ios-focus-scrolling {
* position: fixed;
View forward-events.js
/* Was looking for a way to delegate global keyboard shortcuts in an app to small
* Preact components in a way that didn't require any of:
* • Binding and unbinding events on ancestor nodes by a component's render function
* • Calling a function from a render function to try to manage/track that event-binding state for me
* • Require me to adopt class-ey components for only this feature (binding and unbinding an out-of-scope event using lifecycle hooks)
{node: document, event: 'keydown', test: e => e.keyCode === 13, delegate: '.handle-enter'}