Disable long-press for Hyper on macOS

Hyper is great and even though I still cling to iTerm I sometimes try and shake things up by using Hyper for a few days.

macOS has a feature where if you press a character like u and hold it, a popup menu appears that’ll let you pick out a ü instead. Great if you’re writing German prose. Not great if you are undoing a whole day’s work in vim.

So let’s disable that feature only for Hyper. Put this in your term and smoke it:

defaults write co.zeit.hyper ApplePressAndHoldEnabled -bool false

If you want to disable it system wide then use the same command but without the co.zeit.hyper part.

Conditionally load local plugs in vim

If you’re using vim (you should) and vim-plug for plugins (you should) and you have some plugins locally (you might) but still want your setup to be portable (you should) then you might want to only load plugins locally if they exist (here’s how).

function! s:maybeLocalPlug(args)
  let l:localPath = $HOME . "/dev/" . expand(a:args)

  if isdirectory(l:localPath)
    Plug l:localPath
  else
    Plug 'mikker/' . expand(a:args)
  endif
endfunction

call s:maybeLocalPlug('lightline-theme-pencil')
call s:maybeLocalPlug('vim-rerunner')
call s:maybeLocalPlug('vim-dimcil')
call s:maybeLocalPlug('vim-colors-paramount')

This checks to see if the plugin exists locally at ~/dev/plugin-name and if it doesn’t it loads from good old Github.

Sprinkling React

A beautiful thing about jQuery was how you could sprinkle it on top of an already working site. With all of today’s SPAs and what nots this seems like a distant past. We’ve all drunk the Kool Aid and the benefits of React (and the like) are just too huge to ever look back.

Still, there’s no reason we can’t still sprinkle instead SPA-ing. That was a horrible sentence. Let’s move on.

Here’s what I do on 10er.dk.

The api is basically as follows. You have a div with some data- props that we’ll catch later and switch in the magic.

<article>
  <div data-react="NumberWang" data-props='{"numbers":[1,2,3,5,68]}'></div>
</article>

Ok, so that means look up the component called NumberWang, render it with these props and throw it back in here.

Here’s sprinkleComponents.js. It uses Webpack and its require.context:

import React from "react";
import { render } from "react-dom";

let context = require.context("./components", true, /\.(\/index)?js$/);

export default function sprinkleComponents() {
  const nodes = document.querySelectorAll("[data-react]");

  for (const node of nodes) {
    const regexp = new RegExp(node.dataset.react + "(/index)?\\.js");
    const match = context.keys().find((path) => path.match(regexp));
    const Comp = context(match).default;
    const props = node.dataset.reactProps
      ? JSON.parse(node.dataset.reactProps)
      : {};
    props.children = node.innerHTML;

    render(<Comp {...props} />, node);
  }
}

// We can even get hot module reload (so dx am I right?)
if (module.hot) {
  module.hot.accept(context.id, (upd) => {
    context = require.context("./components", true, /\.(\/index)?js$/);
    sprinkleComponents();
  });
}

This expects to find the component NumberWang at either ./components/NumberWang.js or ./components/NumberWang/index.js relative to sprinkleComponents.js.

Let’s make it – ./components/NumberWang.js:

import React from "react";

export default ({ numbers }) => (
  <div>{numbers[Math.floor(Math.random() * numbers.length)]}</div>
);

And finally in your main.js or index.js or client.js or whatever:

document.addEventListener("DOMContentLoaded", () => {
  sprinkleComponents();
});

This is the technique that I use to selectively apply some js sauce on 10er.dk, a mostly server rendered Rails app.

Serving a Keybase.io claim with Next

I recently moved my personal website to next.js because why not. The people at ▲ Zeit are on a roll and I want in on it.

Keybase quickly started complaining about me removing my claim. You’re supposed to host a file at /keybase.txt with specific content to claim a domain is truly yours. So how do we do that with Next?

Here’s pages/keybase.txt.js:

import React, { Component } from "react";

export default class KeybaseTxt extends Component {
  static getInitialProps({ res }) {
    res.end(claim);
  }

  render() {
    return <div>We'll never get this far</div>;
  }
}

const claim = `=====...long long claim thing...`;

getInitialProps is Next’s way of fetching data before render so it works both on the server and the client. During server render it’s passed req and res from node and apparently we can just end it right there. So dumb it’s smart.

Control-h in NeoVim on macOS

Apparently <c-h> sends <BS> to xterm256-screen terminals and your binding doesn’t work in Neovim.

There’s a few fixes, but I like this one that does it in iTerm:

  1. Edit -> Preferences -> Keys
  2. Press +
  3. Press Ctrl+h as Keyboard Shortcut
  4. Choose Send Escape Sequence as Action
  5. Type [104;5u for Esc+

Read marks with Ecto and Phoenix

As always, Rails has an easy, pluggable way to do this with unread but it isn’t too hard to add the same to your Phoenix app. Let’s try!

First we’ll generate the table and schema that holds the read marks. This assumes you have two tables: users and stories.

mix phoenix.gen.model ReadMark read_marks \
  user_id:references:users \
  story_id:references:stories

Open up the newly generated web/models/read_mark.ex and set up the associations:

defmodule MyApp.ReadMark do
  use MyApp.Web, :model

  schema "read_marks" do
    belongs_to :user, MyApp.User
    belongs_to :story, MyApp.Story

    timestamps()
  end
end

And in the existing models:

defmodule MyApp.User do
  schema "users" do
    has_many :read_marks, MyApp.ReadMark, on_delete: :delete_all
  end
end

defmodule MyApp.Story do
  schema "stories" do
    has_many :read_marks, MyApp.ReadMark, on_delete: :delete_all
  end
end

This is all the setup we need.

We can now get unread stories for a user with a query like:

defmodule MyApp.Story do
  #...

  def unread_by(query, user) do
    from s in query,
      left_join: rm in assoc(s, :read_marks),
      on: rm.user_id == ^user.id,
      where: is_nil(rm.id)
  end
  def unread_by(user), do: unread_by(DRBot.Story, user)
end

And use it like:

user = Repo.get(MyApp.User, 1)
unread_stories = MyApp.Story.unread_by(user) |> Repo.all

We can even chain it with other queries:

query = from s in MyApp.Story, where: s.published_on == ^today

unread_stories_published_today =
  MyApp.Story.unread_by(query, user)
  |> Repo.all

# or the other way around

query = MyApp.Story.unread_by(user)

unread_stories_published_today =
  (from s in query, where: s.published_on == ^today)
  |> Repo.all

Podcast Mixtapes

Here’s an idea for a web thing that you should make and afterwards figure out how to make money from. Bonus points if it doesn’t include VC or ads. (Minus points if both.)

One day, sitting at work, you laugh out loud because Greg the host of your favourite podcast “Tim & Greg’s Lazy Hour” says he’s been biking during the weekend and, well, if one knows Greg like you do, that would be what Greg would have been up to, so you simply cannot hold it back. You crack open with a half spitting / half laughing noise.

Seconds later coming back to reality you look up and notice your coworker looking at you, tainted by your spit, hinting at you to take off your headphones.

“What are you listening to?” she asks. Oh, where to begin.

Podcasts come in feeds. This is one of the best things about them. Over time you build a relationship with each one. You are there when all the internal jokes come to life and by now you feel like you and the hosts should just rent a cabin some time and be best pals because it feels like you already are.

But you can’t instruct your coworker to listen to the prior 136 episodes and then she’ll know. You have to point her to something that will ease her into it.

podcastmixtapes.sexy

Luckily there’s podcastmixtapes.sexy (not a real thing. Yet.)

  1. Coworker wants in on the funnies.
  2. You create a mixtape, pick the 4–5 episodes that’ll give her the best intro, give it the title “Up to speed on Tim & Greg”.
  3. After the first episode there are a few things that you should probably explain so you type in a few curator’s notes. These get added to the feed in between the episodes.
  4. You share the address of the mixtape with coworker.
  5. Coworker subscribes to the mixtape with her podcast player (like a decent person) or listens to it directly in her browser (like an animal.)

Your coworker is now better suited to either subscribe to the real deal - or judge you and your weird ass humour.

Other mixtape ideas:

  • Episodes that’ve made me cry in public
  • Intro to Roderick on the Line and the #supertrain movement
  • Best of This American Life pre episode 500
  • You Look Nice Today episodes mentioning Adam’s drumming
  • For Lisa ❤️🎧 (ongoing, made by Lisa’s boyfriend)
  • Siracusa Setting Things Straight (3+ new episodes each week)

Now go seize this fortune that I’ve left in your hands.

Using legacy Devise records in Phoenix

If you, like me, are having fun with rebuilding a Rails app in Phoenix then you might also have to deal with User records made with devise. Here’s how to use them with no update to the data required.

First we have our user.ex schema file:

defmodule MyApp.User do
  use MyApp.Web, :model

  schema "users" do
    field :email, :string
    field :encrypted_password, :string
    field :password, :string, virtual: true
    field :password_confirmation, :string, virtual: true

    timestamps inserted_at: :created_at
  end

  @allowed [:email, :password, :password_confirmation]
  @required [:email, :password, :password_confirmation]

  def changeset(model attrs \\ %{}) do
    model
    |> cast(attrs, @allowed)
    |> validate_required(@required)
    |> MyApp.Crypto.encrypt_password
  end
end

Notice the two virtual fields and the last function in the changeset pipeline. This will encrypt whatever’s in password and save it to encrypted_password. Let’s see how it looks in web/crypto.ex.

defmodule MyApp.Crypto
  import Ecto.Changeset, only: [put_change: 3]

  def encrypt_password(changeset) do
    password = changeset.data.password || changeset.chages.password
    put_change(changeset, :encrypted_password, encrypt(password))
  end

  defp encrypt(password) do
    pepper = Application.get_env(:my_app, :pepper)
    Comeonin.Bcrypt.haspwsalt(password <> pepper)
  end
end

A few things: Devise uses both a salt and a pepper. We use Comeonin for actually bcrypting the string.

Now to authenticate users when they log in we make a Session module in web/session.ex.

defmoudle MyApp.Session do
  alias MyApp.Repo

  def authenticate(schema, %{email: email, password: password}) do
    case get_resource(schema, email) do
      {:ok, resource} -> check_password(resource, password)
      {:error, _} -> {:error, nil}
    end
  end

  defp check_password(resource, password) do
    case Comeonin.Bcrypt.checkpw(password <> pepper, resource.encrypted_password)
      true -> {:ok, resource}
      _ -> {:error, nil}
    end
  end

  defp pepper do
    Applicaion.get_env(:my_app, :pepper)
  end

  defp get_resource(schema, email) do
    case Repo.get_by(schema, email: email) do
      nil -> {:error, nil}
      resource -> {:ok, resource}
    end
  end
end

Use them like MyApp.Repo.insert(MyApp.User.changeset(%{ ... })) and MyApp.Session.authenticate(User, %{email: ..., password: ...}).

This is actually all it takes. Now you can both create new users using the same techiques as devise and authenticate everybody, both new and old.

Sign in as a user in a Phoenix controller test

First I spent a few hours piecing this together. And then I spent a few months searching through projects several times to find where I had used it because I needed it again. So here it goes now, into my public scratch pad.

To put something into a conn session in a Phoenix test you first have to go through you app’s router and then back. So for example if you want to sign in as a user before hitting an endpoint use this:

def sign_in conn, user do
  conn
  |> bypass_through(MyApp.Router, :browser)
  |> get("/")
  |> put_session(:current_user, user.id)
  |> send_resp(:ok, "")
  |> recycle()
end

To have it available in all your ConnCases put it in test/support/conn_case.ex.

defmodule MyApp.ConnCase do
  # ...
  using do
    quote do
      # ...
      def sign_in conn, user do
        # ...
      end
    end
  end
end

-webkit-user-select: none; disables input and Javascript events

I could’ve spared two hours of googling if I had just known this.

I had this in my css file to disable text selection in my mobile-targeted web app:

* {
  -webkit-user-select: none;
}

This is nice and makes what is actually a website behave more like apps do. What I didn’t know was that this also disables text input on iOS.

Fast forward two hours: Either remove the * rule above or re-enable user-select for input fields:

input {
  -webkit-user-select: auto;
}