TIL on Jake Worth

tsx, a REPL for TypeScript

Fri, 24 Jul 2026 10:56:14 -0400

Today I discovered tsx, a REPL that evalutes TypeScript. You can run it with npx:

npx tsx

And it evaluates TypeScript.

> const onClick = (input: number):void => input + 1
undefined
> onClick(1)
2

Enumerate on promise resolved

Fri, 24 Jul 2026 09:45:07 -0400

For the golfers out there, we can combine these two lines into one:

const items = await getCollection();
return items.sort();

This doesn’t work because sort() is being called on the promise returned by getCollection():

return await getCollection().sort(); // `sort()` runs on the Promise

Instead, wrap the await expression in parentheses so sort() is called on the resolved value:

return (await getCollection()).sort(); // `sort()` runs on the resolved array

Promise documentation - MDN

4321 is Astro

Tue, 21 Jul 2026 12:51:02 -0400

Astro’s default port is 4321. Like Vite, this project is trying to convey its (rocket-launch) branding, even in this small detail.

Node's Timeout _destroyed Private Method

Mon, 20 Jul 2026 16:44:20 -0400

Node Timeout timers have a private boolean attribute called _destroyed. It tells you if the function has been cleared:

timer._destroyed;

Uncheck Buttons With JavaScript

Mon, 20 Jul 2026 09:21:10 -0400

Today I used JavaScript to mass-unsubscribe from a website’s email notifications. Here’s the code, followed by what I did and why.

document
 .querySelectorAll('[role="switch"]')
 .forEach((element) => element.click());

JavaScript Reflection with toString

Fri, 10 Jul 2026 12:04:19 -0400

Reflection is an important tool in programming; it lets us examine a language’s structure. Can we reflect in JavaScript? Sort of.

Some functions can be reflected with toString():

> const one = () => 1
undefined
> one.toString()
'() => 1'

Very cool! But native functions only return this:

> Math.max.toString()
'function max() { [native code] }'

You must read the ECMA Script specification to know what the function is required to do. The actual implementation is written in the JavaScript engine, likely in another language like C++, which is why Node can’t show it via toString().

Focus a JS Test

Fri, 10 Jul 2026 11:48:47 -0400

A vital testing skill is focusing a test. When iterating on a failing test, we want that test under microscope.

The way I do this in JavaScript is .only:

import {describe, expect, test} from 'vitest';
import {sum} from './sum.js';

test('adds 1 + 2 to equal 3', () => {
 expect(sum(1, 2)).toBe(3);
});

describe.only('adding fours', () => {
 test('adds 4 + 4 to equal 8', () => {
 expect(sum(4, 4)).toBe(8);
 });
});

JSDoc Deprecations in TypeScript

Fri, 10 Jul 2026 10:35:05 -0400

JSDoc has a @deprecated tag that you can use in TypeScript, too. Here’s an example.

Unknown Value in Brackets

Tue, 07 Jul 2026 12:05:47 -0400

I’m reading How to Open Source by Richard Schneeman (fantastic) and one of his tips is to show documentation code like this (consider documenting ls):

ls <desired-path>

Rather than the common:

ls /your/path/here

NPM List Packages

Tue, 07 Jul 2026 10:00:34 -0400

When upgrading a dependency for a security issue, we might upgrade and move on:

npm install <dependency>@<version>

But wait! Was every <dependency> version upgraded, or just the version in package.json? Check with:

npm list // or npm ls

Rust Erroring Code Visual Aid

Mon, 06 Jul 2026 11:16:08 -0400

Today while reading the Rust Documentation, I encountered a fantastic UX touch. The authors provide this image with each code block that intentionally doesn’t compile:

Resized Images in Hugo Markdown

Thu, 02 Jul 2026 15:22:48 -0400

Images in Hugo can be a bit tricky. Here’s how I’ve added images on my projects page that are resized, linked, and have alts: the figure shortcode.

{{< figure
 src="/images/yiap.png"
 alt="Yes, It's a Problem"
 link="https://github.com/jwworth/yes-its-a-problem"
 width="600"
>}}

Unalias an Alias

Wed, 01 Jul 2026 11:45:19 -0400

Sometimes I want to iterate on an alias. You can unalias an alias like this:

unalias aliasname

Vim Scriptout and Scriptin

Tue, 30 Jun 2026 15:17:23 -0400

Today I discovered these two Vim flags:

vim -w log.txt file
vim -s log.txt file

The -w flag sends all keystrokes in your session to log.txt. The -s loads Vim and replays all the keystroke back onto that file.

Concatenate Non-Printing Characters

Tue, 30 Jun 2026 12:29:45 -0400

I’ve been writing some non-printing characters to a file. But when I concatenate, it appears empty.

cat log.txt
# Nothing here 🥺

cat those non-printing characters with -v:

cat -v log.txt
jjjj:wq^M%

Vite Hot Module Replacement

Tue, 30 Jun 2026 09:33:35 -0400

I was doing a Vite demo last week, I changed some markup, and visited the local web server. The markup changed, but the state persisted. What?!

This is Vite’s Hot Module Replacement API.

Prettier in Fenced Code Blocks

Mon, 29 Jun 2026 14:06:11 -0400

Prettier formats code in fenced code blocks! When I type three backticks and then a code block, Prettier evaluates the code in the block and tries to format it per my global .prettierrc.

TypeScript Type-Only Imports and Exports

Mon, 29 Jun 2026 13:49:24 -0400

If you’ve been writing TypeScript for a while, you might have written code like this:

// utils.ts
export type Color = 'red' | 'blue' | 'green';

// app.tsx
import {Color} from './utils';

As of TypeScript 3.8, there’s a better way to import!

// app.tsx
import type {Color} from './utils';

Non-Null With Root Import

Mon, 29 Jun 2026 11:24:16 -0400

New Vite TypeScript/React apps create themselves like this:

createRoot(document.getElementById('root')!).render(<App />);

What’s going on with that !?

5173 is Vite

Thu, 25 Jun 2026 12:51:02 -0400

Vite’s default port, 5173, is leet code for the project’s name:

5 = “V” (Roman numerals 😉)
1 = “I”
7 = “T”
3 = “E”

Cursor on Current Directory

Wed, 24 Jun 2026 13:39:58 -0400

To load Cursor with context of the current directory, use:

cursor .

The Outbox Pattern

Thu, 18 Jun 2026 18:02:34 -0400

Today I learned about the Outbox Pattern.

Node REPL, No Preview

Tue, 02 Jun 2026 15:46:17 -0400

After version v12.17.0, Node’s REPL provides a useful preview effect. In this example, 2 is shown in gray before I hit enter.

> 1 + 1
2

But what if I don’t want that? Here’s a file called repl that disables it as an option:

#!/usr/bin/env node

const repl = require('node:repl');
repl.start({preview: false});

Then:

$ ./repl
> 1 + 1

No preview.

Docs

NVM Install and Use Latest LTS

Fri, 29 May 2026 13:49:11 -0400

With my Node versions managed via NVM, I want to be on the latest LTS. You can ensure that happens with these commands:

$ nvm install --lts
$ nvm alias default lts/*
default -> node (-> v24.16.0)

Law of Demeter Origin Story

Mon, 11 May 2026 09:52:13 -0400

The Law of Demeter is important in object-oriented programming. But where does “Demeter” come from?

Filled Emoji With CSS

Fri, 08 May 2026 09:52:29 -0400

Today I learned how to fill in an emoji with CSS. Here’s an example:

.filledEmoji {
 color: transparent;
 text-shadow: '0 0 0 #86efac';
}

JavaScript Wraparound Index

Thu, 07 May 2026 09:44:10 -0400

What I call “wraparound” are repeatable indices on an array. The common use case is a carousel. Here’s how it’s done:

const items = ["first", "middle", "last"];
const i = 0; // Our iterable index

// "Next" ->
const nextIndex = (i + 1) % items.length;

// <- "Previous"
const prevIndex = (i - 1 + items.length) % items.length;

JavaScript String Concatenation

Wed, 06 May 2026 10:39:46 -0400

Here’s a periodic reminder that JavaScript supports string concatenation with a plus sign:

> 'foo' + 'bar'
'foobar'

JavaScript Spread a String Into An Array

Tue, 05 May 2026 10:49:25 -0400

Need an array of letters? Here’s a trick:

> const alpha = [...'abcdefghijklmnopqrstuvwxyz']

JavaScript Array Join Comma Default Separator

Tue, 05 May 2026 09:48:19 -0400

When you join an array in JavaScript, the default separator is a comma:

node> ['j', 'a', 'k', 'e'].join()
'j,a,k,e'

JavaScript Bitwise AND

Fri, 01 May 2026 14:53:41 -0400

The JavaScript bitwise AND operator (&) can be used for some real-world tasks, like testing if a number is odd or even.

Vim :Tutor Command

Wed, 29 Apr 2026 12:25:53 -0400

Longtime Vim users know the vimtutor program, which teaches you Vim in Vim. Vim 9.2 shipped with a new :Tutor command that improves on this.

:Tutor

Validate a Container With Docker Ls

Thu, 09 Apr 2026 13:43:05 -0400

Is a Docker container available on a registry? Here’s how I’d check, right from the CLI:

docker image ls <container-name>

Ease Into CI Rigor With Globs

Sun, 15 Mar 2026 11:06:33 -0400

When adding CI checks, you can gradually increase rigor while easing your codebase into a better place.

Overwrite vs. Append

Fri, 13 Mar 2026 16:01:22 -0400

I use the append >> and overwrite > redirection operators all the time. Today I’d like to share a simple mental model I’ve developed for remembering which is which.

Git Apply Diff

Fri, 27 Feb 2026 16:51:25 -0500

One of my favorite Git tricks is shoveling changes to a Git diff and then applying them later.

Docker Service Healthy

Fri, 20 Feb 2026 10:08:34 -0500

Docker gives you a way to control startup, while codifying that one container depends on others.

Docker Compose Override

Fri, 20 Feb 2026 10:04:38 -0500

Need to override some Docker configuration locally? Too easy!

Installing Vim on a Remote Server

Fri, 13 Feb 2026 16:46:12 -0500

Vim-tiny is a great choice for remote server work.

Initialize With npm init

Thu, 12 Feb 2026 11:19:46 -0500

Most JavaScript projects come with a package.json. But what if you want to make a new one?

Gibibyte is Not a Gigabyte

Mon, 09 Feb 2026 13:47:12 -0500

“The server is 200 GiBs.” “Don’t you mean GBs?” “No, I don’t!”

MySQL Binlogs

Mon, 09 Feb 2026 13:32:51 -0500

I recently dug into the wonderful world of MySQL binlogs! Here a few learnings.

Recognizing ASCII

Mon, 09 Feb 2026 13:18:37 -0500

When you see a list of numbers in a log or stack overflow, it’s often ASCII (American Standard Code for Information Interchange)! Here’s how to recognize and read it.

Who Owns This Program?

Mon, 09 Feb 2026 10:36:33 -0500

I’ve got a command docker on my machine. I need to upgrade it. So, who owns it?

Writing the DOM with fs

Fri, 30 Jan 2026 11:12:52 -0500

How can I output the entire DOM to a file in a JavaScript test?

Git Porcelain and Plumbing 🚽

Mon, 26 Jan 2026 16:53:11 -0500

Git has two kinds of commands: “porcelain” and “plumbing”.

Calculating With Bc

Wed, 07 Jan 2026 09:48:26 -0500

Today I accidentally I found a calculator on my computer, bc. Let’s look at it!

Rebuilds on Write With Nodemon

Tue, 30 Dec 2025 16:42:28 -0500

I’ve been hacking on a TypeScript file all day, but I need transpiled JavaScript for any testing. How did I reduce cycle time (and mitigate many chances to forget to build at all)?

MCP Stdio and Stdout

Tue, 30 Dec 2025 11:33:06 -0500

In MCP server code using stdio, you can’t use any functions that print to stdout.

tsc watch

Mon, 29 Dec 2025 13:51:45 -0500

Watch and re-transpile any TypeScript file with:

tsc file.ts --watch

Observable Exceptions That Don't Crash

Wed, 17 Dec 2025 09:53:09 -0500

Throwing a JavaScript Error test to your observability tool? There’s a better way.

npmrc "engine-strict"

Tue, 16 Dec 2025 16:38:36 -0500

Suppose your package.json specifies a Node engine of greater than or equal 24. Does this mean all engineers on your team will use Node 24? No, unless you use this one weird trick!

Hello World from MCP!

Fri, 12 Dec 2025 00:00:00 +0000

Hello World! Today I’m posting a TIL using MCP (Model Context Protocol).

Input Redirection Operator

Mon, 08 Dec 2025 18:07:19 -0500

I’ve been known to cat README.md | pbcopy a file. There’s a better way: the input redirection operator!

Tmux Toggle Sessions

Thu, 04 Dec 2025 10:49:44 -0500

To toggle back and forth between two Tmux sessions, use <leader>-L.

Disable DRF Browsable API

Wed, 03 Dec 2025 12:04:51 -0500

Django Rest Framework includes a UI for interacting with your API. Here’s how to turn it off.

Import React and React 17 JSX Transform

Mon, 01 Dec 2025 18:21:26 -0500

I’ve written before about the two competing ways to import React, but after React 17, you don’t need either.

Docker Build No Cache

Fri, 21 Nov 2025 10:50:28 -0500

Sometimes your Docker build is cached, and you need to build without cache.

Timestamped Branch

Thu, 20 Nov 2025 16:53:29 -0500

Git prevents branches with the same name. But sometimes, I want to re-use a name! Here’s my workaround.

Why Keep Binaries Out of Version Control

Thu, 20 Nov 2025 10:48:23 -0500

“Keep binaries out of version control” is a truth I’ve always held, but I recently learned more about why.

Set -euo pipefail

Mon, 17 Nov 2025 17:26:27 -0500

My site’s build script has a set command; but what does it do?

Django Routing 101

Fri, 07 Nov 2025 16:47:58 -0500

Something I’ve taken a while to get under my fingers is Django’s URL routing conventions. Here’s a brief summary.

Tail Docker Logs

Wed, 05 Nov 2025 16:15:50 -0500

Here’s how you tail a Docker log.

docker logs --follow <container_name>

See docker logs --help for more.

MySQL Vertical Result

Mon, 27 Oct 2025 11:19:36 -0400

MySQL’s display is tabular:

Docker Compose Watch

Fri, 12 Sep 2025 09:10:35 -0400

One of my projects features a Dockerized API. The dev process was: write a file, rebuild container, and restart container. There’s a better way!

Git Apply a Commit in Reverse

Wed, 30 Jul 2025 14:48:55 -0400

Sometimes I’ll be looking at a Git commit online, and want to put my dev environment in a world where the commit is un-applied. This can be achieved by applying it in reverse.

Origin of the Term Cherry MX

Tue, 22 Jul 2025 16:34:44 -0400

I’ve been buying keyboards with Cherry MX switches for a decade, browns and a few blues. Today, I learned that MX stands for “Mechanical X-Point”– “X” for the x-shape of the keyboard stem you can see when you remove the keycap.

https://en.wikipedia.org/wiki/Cherry_AG

Origin of ActiveRecord

Tue, 22 Jul 2025 16:33:47 -0400

As a long-time Ruby on Rails programmer, I thought that the name ActiveRecord –the model layer of Rails’ MVC– was branding. I didn’t know that it’s an architectural pattern, described by Martin Fowler in the 2003 book Patterns of Enterprise Application Architecture.

An object that wraps a row in a database table or view, encapsulates the database access, and adds domain logic on that data.

https://www.martinfowler.com/eaaCatalog/activeRecord.html

Editing in Nodes REPL Editor

Tue, 22 Jul 2025 16:32:43 -0400

The Node REPL has its own editor:

node
> .editor
// Entering editor mode (Ctrl+D to finish, Ctrl+C to cancel)
const increment = (array) => array.map(item => item + 1)
increment([1,2,3])

Exit and evaluate with Ctrl+D:

[ 2, 3, 4 ]

I’d use this to experiment with JavaScript API’s without leaving my terminal-based IDE.

Vim Mappings Verbose

Tue, 22 Jul 2025 16:31:22 -0400

I have a Vim normal mode mapping, and I don’t know where it comes from. My Vim config, a plugin, somewhere else? nmap shows me the mapping:

:nmap gsp
n gsp * 1z=

And verbose nmap shows me where it comes from:

:verbose nmap gsp
n gsp * 1z=
Last set from ~/.vimrc line 111

The setting is coming from inside the .vimrc!

Example.com in Your Data

Tue, 22 Jul 2025 16:29:59 -0400

It’s common practice to create usernames in a non-production database like “dev@example.com” or “customer@example.org”. We do this to say: “This is just an example!” But there’s a more to the story.

Har Files in Chrome

Tue, 22 Jul 2025 16:28:30 -0400

Today I learned about the .har extension (via Wikipedia):

Unpacking MessagePack

Thu, 05 Jun 2025 16:45:33 -0400

SALT messages are encoded with a library called msgpack, the Python implementation of MessagePack. How can we read them?

Directories Ending in .d

Wed, 04 Jun 2025 17:34:59 -0400

Today I learned about why directories in a project might have names ending in ‘dot d’, such as minion.d/.

Python String Interpolation

Tue, 27 May 2025 22:00:15 -0400

Python string interpolation is available via few of interfaces, as Chris at Hashrocket taught me.

Light Bulb Series Encoding

Fri, 23 May 2025 12:03:36 -0400

I needed to replace an “A19” light bulb. What does “A19” mean?

Vim Jump to Previous Occurrence

Tue, 20 May 2025 19:08:16 -0400

In Vim Normal mode, * searches forward for the next occurrence of word. But what goes back?

Print Python Function Definition With Getsource

Fri, 16 May 2025 11:01:29 -0400

If I’ve defined a function in the Python REPL, I can read its definition with inspect.getsource.

Python REPL Help

Fri, 16 May 2025 10:49:29 -0400

In the Python REPL, the help function provides a help message about its argument.

How to Start a Standup in Jira

Thu, 01 May 2025 20:51:07 -0400

Jira does have a “Start Standup” button, but it’s hidden and not well documented.

Kill MacOS Processes by Name

Mon, 17 Mar 2025 16:51:09 -0400

I have a cron job that opens a program every day at a certain time. How can I also close it with a cron job?

pbcopy, no cat

Wed, 05 Mar 2025 10:07:24 -0500

My friend Josh recently wrote about a common mistake using pbcopy, Apple’s pasteboard utility.

Pause Script Execution in Chrome

Tue, 04 Mar 2025 09:28:10 -0500

Anytime Chrome loads a webpage, you can pause script execution without a debugger.

Either/Or Props in TypeScript

Mon, 22 Jul 2024 16:32:43 -0400

Sometimes in TypeScript we’d like to say a function can either have one typed prop, or the other, never both and never neither. This can be achieved with a union type and type never:

type Props =
 { markdown: string, copy?: never }
 |
 { markdown?: never, copy: string}
};

const component = ({ markdown, copy }: Props) => markdown ? parseMarkdown(markdown) : <>copy</>;

console.log(component({ markdown: "### Important" })) // <h3>Important</h3>
console.log(component({ copy: "Just information" })) // <>Just information</>
console.log(component({ copy: "Just information", markdown: "### That conflicts })) // ❌ Type error
console.log(component({})) // ❌ Type error

Our component can receive a string of markdown, which it will parse, or raw copy, which it will not parse. Always just one, never both, and never neither.

Encoding Plus Signs in URLS

Mon, 22 Jul 2024 16:32:43 -0400

If you’re creating a hyperlink with query params, and those param values can have plus signs, it’s important to encode them values. We do this with encodeURIComponent:

const email = `jake+testing@example.com`
const loginLink = `https://example.com/login?email=${encodeURIComponent(email)}`

window.open(loginLink)

If you skip this step and try to read the query parameters received by ’example.com’ your email param value may be interpreted as with spaces instead of pluses, i.e. jake testing@example.com. Per the docs:

Within the query string, the plus sign is reserved as shorthand notation for a space. Therefore, real plus signs must be encoded. This method was used to make query URIs easier to pass in systems which did not allow spaces.

Load a Dependency in the Node REPL

Thu, 11 Jul 2024 10:42:11 -0400

Exploring your JS dependencies locally is a great way to learn and experiment. Here’s how to load a dependency from your /node_modules directory into the Node REPL.

$ node
> cn = require('classnames')
> cn("always", { never: false, sometimes: true })
'always sometimes'

Filtering By Identity

Thu, 27 Jun 2024 09:57:29 -0400

I’m reading Functional-Light JavaScript by Kyle Simpson, and learning a lot! Today I learned about the functional programming utility known as ‘identity’.

Identity is a unary function that simply returns its argument. A simple idea that can be powerfully applied, as JavaScript coerces the returned argument to boolean:

> const identity = (arg) => arg
> ["", false, "keep", null, undefined, "these"].filter(identity)
[ 'keep', 'these' ]

I’ve done something similar for years by filtering to boolean, or writing my own (I didn’t know it had this name) anonymous identity function.

Show How A File Is Ignored In Git

Fri, 31 May 2024 10:21:44 -0400

Today I solved a mystery: a file was being Git-ignored in a new project that didn’t have a .gitignore. Here’s me learning this by trying and failing to add it:

$ git add destroy.sh
The following paths are ignored by one of your .gitignore files:
destroy.sh

This output tells me some .gitignore is telling Git to ignore my script. Another way to confirm this is the check-ignore command:

$ git check-ignore destroy.sh
destroy.sh

The output here is the match; a file named destroy.sh is indeed being ignored. But how? We can answer that question with the -v flag:

Block a URL in Chrome DevTools

Fri, 24 May 2024 09:33:24 -0400

I’m using a JavaScript text editor library and when it fails to load, there is no form field on the page at all. While pondering that potential issue, I learned how to block a URL in Chrome’s DevTools.

There are a few way to do this; the most direct for me is:

Open DevTools and the Network Tab
Click “JS” and find the JavaScript file I want to block
Right-click and choose “Block request URL” or “Block request domain”

Reload the page to see the result.

Reading a Button's Value on Submit

Fri, 24 May 2024 09:25:37 -0400

Complex HTML forms often end up with multiple submit buttons. Consider a form for taxes: there’s a button to save a draft and another button to submit for processing. They both trigger the submit action on the same form. How could we accomplish this while keeping the buttons fairly simple?

One solution is to set the buttons’ value:

<form onsubmit={onSubmit}>
 <!-- Form fields here -->
 <input type="submit" value="save" />
 <input type="submit" value="submit" />
</form>

Then in the submit handler, we read the value.

Read Zsh Builtin Manual Pages

Wed, 22 May 2024 12:30:02 -0400

In Zsh, if you type man cd, instead of a manual page, you’ll get this:

See the built-in command description in the appropriate shell manual page.

To see Zsh’s implementation of cd, we need to view Zsh’s built-in man page:

man zshbuiltins

Autofocus a Form Field

Tue, 21 May 2024 10:50:17 -0400

autofocus is a global attribute that sets a field as focused on page load.

<input name="first_name" autofocus />

No JavaScript required!

A use case could be a new customer form that an employee fills out multiple times a day. By autofocusing the first name field, you could save that employee thousands of clicks.

Carefully consider user experience and accessibility before using this attribute.

Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

RDS Breaks My Radio Clock

Sun, 19 May 2024 16:04:43 -0400

When using radio, you might experience a strange phenomenon: the radio clock refuses to stay correctly set. I saw this recently on a car stereo that continued to reset its clock to an hour early for my timezone.

The culprit is a system called RDS, Radio Data System. RDS allows radio transmitters to encode their program information, station identification, and… the local time.

Though I didn’t have a tool to debug the signal on hand, my theory is that a local radio station was sending the incorrect time of 10:15 AM instead 11:15 AM. My car was read it and preferred this data. We live near the border of the Atlantic timezone, so that’s one reason an incorrect message could have been sent. Disabling the RDS Clock Sync feature and setting the time correctly fixed the issue.

Understanding Scrollbar Visibility

Thu, 11 Apr 2024 09:59:30 -0400

When doing web programming in a context where scroll might be expected, you may see some surprising behavior in the scrollable HTML– an inexplicable gray bar on the bottom or right of the element.

Re-render Child Component By Changing Key

Tue, 05 Mar 2024 13:29:38 -0500

Today I had a situation where I wanted a child component to re-render on command. The solution I found was to to put a key on it, and then change the key when the re-render is desired.


const Parent = () => {
 const [childKey, setChildKey] = useState(0);

 const rerenderForm = () => {
 setChildKey(childKey + 1);
 }

 return (
 <>
 <button onClick={rerenderForm} type="button">Rerender the form!</button>
 <Form key={childKey} />
 </>
 )
}

In this example, which the button is clicked, our childKey is incremented. To paraphrase the React docs, when the key changes, React “loses track” of the form. And because of the new key, at the same time React sees a new form; a re-render has occurred.

Inferred Controller Parameters

Fri, 01 Mar 2024 16:54:46 -0500

Be careful when making a network request like this to a Rails controller with strong parameters:

// const employee = { name: "Jake" };

const updateEmployee = (id: number, employee: Employee) =>
 axios.put<Employee>(`/employees/${id}`, employee)

def employee_params
 params.require(:employee).permit(:name)
end

Note that our payload is expected under key employee– but we aren’t sending it that way. When this happens, Rails infers what goes where:

PUT https://server.dev/employees/1 { "employee" => { "name" => "Jake" } }

Notice that name is in the employee object, even though I didn’t send such a payload. This works fine until you send a parameter that’s not on the Employee model, such as a nested attribute. Then you get this:

Assert About Response Body in RSpec Controller Tests

Fri, 23 Feb 2024 15:22:30 -0500

When testing a serialized Rails API with RSpec, a common mistake is to assert about the response body, only to find that it’s an empty string. The controller is controlling, the view is presenting. What’s missing?

What’s missing is the view: RSpec views are stubbed by default. This is ideal for most controller tests. Just not those asserting about serialized data.

Render those views with render_views:

require "rails_helper"

RSpec.describe WidgetsController, type: :controller do
 render_views

 describe "GET index" do
 it "has a widgets related heading" do
 get :index
 expect(response.body).to match /<h1>.*widgets/im
 end
 end
end

Conditional Props

Thu, 22 Feb 2024 11:42:56 -0500

Passing props conditionally a component makes sense in many situations. Imagine a select box that receives an isDisabled prop that disables the input. Maybe we only want to set it if it’s true. For one, it’s a bit cleaner than setting it to its default false much of the time. And maybe we want to select a certain default value in that same scenario.

Enough theorizing! Here’s the code:

<Select
 options={itemOptions}
 {...(someCondition && { isDisabled: true, defaultValue: [itemOptions[0]] })}
/>

Let me explain the magic.

Join React Components With Comma

Thu, 22 Feb 2024 11:24:35 -0500

Want to connect a list of React components with a delimiter, like a comma? Imagine a sentence of:

Link A, Link B, Link C.

How could we programmatically achieve this in React?

Here’s one answer, inserting a comma before all but the first list item:

{items.map((item, index) => (
 <React.Fragment key={item.id}>
 {index > 0 && ', '}
 <a href={`/items/${item.id}`}>{item.name}</a>
 </React.Fragment>
))}

Lots of other good suggestions in this Gist.

Append to a Write-Protected File

Thu, 22 Feb 2024 08:32:29 -0500

Suppose you want to append to a file that’s write-protected and can only be edited via sudo. Is that possible? It is!

A technique I discovered today is to use tee with sudo:

$ cat file.txt | sudo tee -a /etc/hosts

This lets me append the contents of file.txt to the write-protected /etc/hosts file by entering my password.

Ignore Whitespace in a GitHub Pull Request

Thu, 22 Feb 2024 08:30:00 -0500

Reviewing a GitHub PR on that contains a lot of whitespace changes? Extra whitespace can make it challenging to evaluate the substance of a PR. It’s high on my list of things that should generally not be refactored. Ignore whitespace by adding the query parameter ?w=1 to your diff URL.

Link to Headers in GitHub READMEs

Thu, 22 Feb 2024 08:30:00 -0500

Anytime you add a header to a markdown file, GitHub attaches an href with its downcased name. ‘JavaScript’ receives a link to #javascript, for instance.

Leverage this by adding a table of contents to your README with links to the headers further down the document:

### Table of Contents

- [Cucumber](#cucumber)

This will link to a header containing ‘Cucumber’.

h/t Josh Branchaud

Filter Network Requests By Status Code in DevTools

Thu, 22 Feb 2024 08:16:35 -0500

The Chrome DevTools Network Tab is incredibly useful for frontend web development, but it can be noisy.

Perhaps you’d like to filter it down by HTTP status code? See only redirects, so you can fix routes? Or only successful requests, so you can know what’s working?

The Network Tab supports this. Here’s a filter to just temporary redirects:

status-code:307

XCode Run Hotkey

Tue, 30 Jan 2024 11:12:52 -0500

⌘ + R.

Link Externally With React Router's Link

Fri, 15 Dec 2023 11:45:30 -0500

React Router’s Link component isn’t just for internal links; it can work like an anchor tag, too, sending users outside the application. Use reloadDocument prop to get this behavior.

<Link reloadDocument to={'https://reactrouter.com/en/main/components/link'}>Link docs</Link>

docs

Create a File With `cat`

Tue, 12 Dec 2023 13:51:16 -0500

When you combine cat (concatenate) with > (output redirection), you can create and write to a file from the command line.

$ cat > test.txt

Hit enter after the file name, and your terminal will wait for input. End the file with CTRL + D.

$ cat > test.txt
one
two
three
$ cat test.txt
one
two
three

>> works, too; appending to the file as expected.

TypeScript Union Type From Array

Mon, 11 Dec 2023 12:00:51 -0500

With the new as const construct, we can derive a TypeScript union type from a JavaScript array!

const builderSteps = [
 'communications',
 'estimates',
 'health status',
 'procedures'
] as const;

type BuilderStep = (typeof builderSteps)[number];

This lets us both type a slice of state, type its updater, and build JSX elements all from the same array, a virtuous cycle.

const [step, setStep] = useState<BuilderStep>('communications')

const handleStepClick = (step: BuilderStep) => setStep(step)

{builderSteps.map(step => <button key={step} onClick={() => handleStepClick(step)}>{step}</button>)}

const assertions

Change Timezone in Chrome DevTools

Wed, 15 Nov 2023 15:34:21 -0800

Open Chrome DevTools, and click the three dots in the top right corner. Select ‘More Tools > Sensors’. Under ‘Location’, set your timezone override.

Install SVGO With Reasonable Defaults, Part Two

Thu, 06 Apr 2023 11:04:19 -0400

We’re back with another SVGO configuration you’ll probably want: disabling ID minification.

SVGO has a default plugin called cleanupIds that takes every ID in the SVG (e.g. clip0_506_1332) and minifies it to a. This works okay until there are two different SVG’s on the page. When that happens, the ID’s become invalid and conflicting HTML and your images don’t compose correctly.

Disable this in the SVGO config file:

// svgo.config.js

module.exports = {
 plugins: [
 {
 name: 'preset-default',
 params: {
 overrides: {
 cleanupIds: false,
 },
 },
 },
 ],
};

Apply a Conditional Border Without Moving Element

Fri, 24 Mar 2023 09:11:39 -0400

When you allow a user’s behavior to add or remove a border from an element, that can cause the page to ‘jump around’ as the border is added or removed. A common example is a border around an element that is ‘selected’.

Fix this issue by adding a transparent border around the element and giving it color when it’s selected. No more jumps.

.element {
 border: 1px solid transparent;
}

.selectedElement {
 border-color: $selected-color;
}

Apply a Patch in Reverse

Fri, 24 Mar 2023 09:11:39 -0400

Need to undo a code change? You could revert. Or, you could apply the patch without creating a commit. That’s what I want to do much of the time.

Use git apply with the -R (reverse) flag:

git show 8cc13b1 | git apply -R

All the changes from 8cc13b1 get applied to your working directory. In a large commit, do this tactically by limiting to just one file or directory.

git show 8cc13b1 src/fileToRevert.ts | git apply -R

Install SVGO With Reasonable Defaults

Wed, 22 Mar 2023 08:43:18 -0400

A project I’m working on uses SVGO to clean and minify SVG files. There’s one problem: SVGO by default removes the viewBox attribute, which comes embedded in the SVG’s I receive and have stylistic meaning in my codebase.

You can override this default by using an SVGO config file:

// svgo.config.js
module.exports = {
 plugins: [
 {
 name: 'preset-default',
 params: {
 overrides: {
 removeViewBox: false,
 },
 },
 },
 ],
};

Applied like so:

Override Autojump's Directory Rankings

Wed, 08 Mar 2023 10:12:50 -0500

Autojump is my tool of choice for navigating directories. If I enter the following into the terminal:

$ j til

Autojump will try to guess where I want to go among directories I’ve previously visited. It uses a database of directories and their relative rankings to do so.

But there’s a problem! These day I only want to visit ~/oss/til. In the past I’ve visited ~/oss/hr-til and ~/oss/tilex hundreds of times. Autojump always sends me there first. I don’t want that!

Sorting Numbers with JavaScript's sort Function

Fri, 10 Feb 2023 10:04:55 -0500

Today in “Let JavaScript Surprise You”:

let array = [1, 20, 11, 10, 7, 17, 2];
console.log(array.sort());

> [1, 10, 11, 17, 2, 20, 7]

😳 The numbers are not sorted as we might expect. What’s going on here? From Mozilla’s docs:

The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

Now this sorting makes sense! Luckily, sort accepts a function, so here’s the sorting we intended:

const sortNumbers = (first, second) => first - second
console.log(array.sort(sortNumbers))

> [1, 2, 7, 10, 11, 17, 20]

Build a Sentence from a JavaScript Array

Thu, 22 Dec 2022 09:12:08 -0500

Have you ever wanted to take a JavaScript array of strings and turn them into a sentence? Here’s how you do that.

const toLearn = [
 'object-oriented programming',
 'frontend engineering',
 'testing',
]

const sentence = new Intl.ListFormat().format(toLearn)
> "object-oriented programming, frontend engineering, and testing"

ListFormat takes options.

This has cross-browser support! The days of building a ’to sentence’ function in JavaScript are over.

Zoom and Scroll in Figma

Tue, 20 Dec 2022 11:22:34 -0500

When viewing a Figma design file, you can zoom in/out with CMD and up/down on a trackpad or magic mouse.

Scroll left or right with one-finger swipe left or right.

Zoom and scroll; along with adding comments and copying CSS, that’s most of what I do in Figma.

I’m sure that these commands are useful in many other settings, but I find them especially valuable in a Figma file, which can feel otherwise challenging for me to navigate.

Source Tmux Config

Fri, 26 Aug 2022 17:56:33 -0400

You’ve been iterating on your Tmux configuration file, and now you want to your configs in action without closing the program. But how?

Here’s the command to source an updated tmux.conf:

$ tmux source-file tmux.conf

Tmux Copy Mode

Fri, 26 Aug 2022 17:54:55 -0400

Last week we encountered a breaking change in our Tmux configuration, and briefly lost the ability to scroll with the mouse. It became an opportunity to re-learn Tmux’s copy mode, and liberate ourselves from the mouse a little more.

Enter copy mode with <prefix> [. From here, you can navigate with standard Vim commands.

ctrl-u moves you a half-page up, perfect for wading through test failure backtraces.

Preserve Whitespace in CSS

Wed, 03 Aug 2022 10:30:10 -0400

Let’s say you have a string evaluated into a HTML template that contains newlines, like "getting\n\things\ndone" and you want those newlines to be reflected in the presentation. Like this:

getting
things
done

We can solve this with the following CSS on the string’s containing element:

white-space: pre-wrap;

With pre-wrap, “[s]equences of white space are preserved. Lines are broken at newline characters, at [breaks] and as necessary to fill line boxes.”

white-space docs

Validate CircleCI Configuration Locally

Wed, 22 Jun 2022 11:18:13 -0400

The local environment is a great place to iterate on a CircleCI configuration. You’ll catch errors faster than pushing to CI, and help drive a fast, iterative configuration process.

Install the CircleCI CLI via Homebrew (or any package manager of your choice):

$ brew install circleci

Then, in the same directory as your .circleci/config.yml, run:

$ circleci config validate
# Config file at .circleci/config.yml is valid

Force ASDF Reshim

Tue, 21 Jun 2022 09:49:59 -0400

When I upgrade ASDF, I sometimes get an error like this when I try to run a command:

/Users/jakeworth/.asdf/shims/jq: line 3:
/usr/local/Cellar/asdf/0.9.0/libexec/bin/asdf:
No such file or directory

The issue is that I’ve upgraded ADSF to v0.10.2, but the jq shim doesn’t know that and can’t find it in a directory called “0.9.0”. This issue persists even after running asdf reshim.

My solution is to force ASDF to rebuild shims directory by renaming it. A rename lets me get back to where I am now, in case I need to.

Select First Spell Suggestion

Tue, 14 Jun 2022 11:58:15 -0400

I use Vim’s spell feature when writing blog posts. Very often, the first suggestion it makes is the one that I choose. Consider a word like ‘Rubysit.’ My dictionary contains the word ‘Rubyist’ (naturally) and that’s what Vim spell is going to suggest to me first. For transposition errors like this I’d like to skip the word picker when possible.

To automatically choose the first suggestion, in normal mode put your cursor over the word and type 1z=.

Hide Bookmarks Bar in Chrome

Mon, 13 Jun 2022 14:24:29 -0400

To hide the bookmarks bar in Google Chrome:

Press CMD + SHIFT + B on Mac
Press CTRL + SHIFT + B on Windows

This shortcut toggles the bookmarks bar on or off.

Ctags Dotfiles

Fri, 18 Mar 2022 12:11:25 -0400

Something I took for granted at Hashrocket was the file that configures Exhuberant Ctags. Without configuration, recursive tag generation will tag many things and cause problems. overindex badly.

Here’s how you configure Ctags to ignore things:

/ctags.cnf (on MSDOS, MSWindows only)
/etc/ctags.conf
/usr/local/etc/ctags.conf
$HOME/.ctags
$HOME/ctags.cnf (on MSDOS, MSWindows only)
.ctags
ctags.cnf (on MSDOS, MSWindows only)
If any of these configuration files exist, each will be expected to contain a
set of default options which are read in the order listed when ctags starts,
but before the CTAGS environment variable is read or any command line options
are read. This makes it possible to set up site-wide, personal or project-level
defaults.

Here’s the head of my root .ctags, which even this far in is excluding a lot:

Jump to N Percent of a File

Sun, 23 Jan 2022 16:54:36 -0500

From normal mode, N% will jump you to that percentage of the file. So 50% jumps to halfway through the file.

Find Stale Gems

Tue, 16 Nov 2021 14:19:45 -0500

Unused dependencies are bad: they increase the size of your project, slow down processes, require maintenance, and send incorrect messages to fellow developers about what’s important.

To get find unused dependencies in Ruby, I’ve been using gem stale:

gem stale

gem stale list gems along with most recent access times. If the last access time was the day you set up the app, that gem is a candidate for removal.

Save Size Change to iTerm Profile

Sat, 13 Nov 2021 13:35:21 -0500

The longer I program (ahem), the bigger I want my terminal fonts. I think most programmers should be using a bigger font than they are. Complicating matters, the standard font for iTerm is miniscule on a computer monitor.

Today I discovered iTerm’s ‘View > Size Changes Update Profile’ feature. When enabled, changes to your font size via ⌘ + and ⌘ - will be applied to your iTerm profile. The next time you open iTerm, the new font size will persist.

Man pages in Vim

Thu, 11 Nov 2021 16:47:07 -0500

Hit K on a keyword, and Vim looks up the program under the keyword. It’s a bit jarring because Vim appears to shell out from your buffer to show the definition.

To see that man page in Vim, load the man.vim plugin from command mode or in your .vimrc:

:runtime! ftplugin/man.vim

Now, you can read man pages as a Vim buffer:

:Man curl

Why Is It Called PostgreSQL?

Wed, 10 Nov 2021 11:04:17 -0500

PostgreSQL was originally named “POSTGRES”— all caps. The name was chosen because it was the successor (“post-”) to the “Ingres” database. As the system adopted SQL standards and features, the “ql” as added and capitalization refined.

Ignore Rubocop Block Length Lint in RSpec

Tue, 09 Nov 2021 18:12:52 -0500

Linters are great, except when they aren’t. One example is Rubocop’s BlockLength lint. For example, I don’t care if my RSpec describe and context blocks are too long. Nontrivial test blocks will never be short enough to match a reasonable rule about blocks.

I’ve disabled this lint for these blocks with Rubocop’s configuration file:

# .rubocop.yml
Metrics/BlockLength:
IgnoredMethods: ['context', 'describe']

Opting out of just these blocks lets me enforce this rule everywhere else.

Object ID

Mon, 08 Nov 2021 09:51:01 -0500

Today I learned about the method __id__, aliased object_id, in Ruby. It returns a unique integer identifier for any Ruby object.

A few examples:

> Object.new.object_id
=> 7024702983434
> name = "jake"
=> "jake"
> name.object_id == name.object_id
=> true
> "thawed".object_id == "thawed".object_id
=> false
> "frozen".freeze.object_id == "frozen".freeze.object_id
=> true

I’ve never used this method in practice, but I hope to someday.

Autojump and Open

Sat, 06 Nov 2021 13:39:32 -0400

I love autojump. I use it because I think that remembering my location in a directory structure relative to other directories, so I can navigate with cd, is mental energy I could be using for something else.

Today I learned that autojump has a jo command, which jumps to a directory and opens it in your file explorer.

jo Desktop

This might be a throwaway lesson if I wasn’t regularly sidetracked by the MacOS file explorer. Finding a file using the file explorer is a routine operation I have yet to do fluidly on a Mac. This helps!

Force with Lease

Fri, 05 Nov 2021 21:21:44 -0400

When I rebase, I force-push altered history using the flag --force-with-lease instead of the commonly-used --force.

git push --force-with-lease

But why? This is a TIL for me because I’ve used this command for years without reading the docs.

Take it away, docs:

This option allows you to say that you expect the history you are updating is what you rebased and want to replace. If the remote ref still points at the commit you specified, you can be sure that no other people did anything to the ref.

`group_by` with default

Fri, 05 Nov 2021 08:16:02 -0400

Here’s some code that made me do a double take.

something = items[nil]

It’s that [nil]. What’s going on here?

It turns out that items is the return of a call to Ruby’s group_by. group_by groups by whatever the block evaluates to, including nil.

[
 { shipping: 'fedex', id: 1 },
 { shipping: 'fedex', id: 2 },
 { id: 3 }
].group_by { |item| item[:shipping] }

=> {
 'fedex' => [{ shipping: 'fedex', id: 1 }, { shipping: 'fedex', id: 2 }],
 nil => [{ id: 3 }]
}

Hence the key nil.

Jira Actions Menu

Mon, 01 Nov 2021 14:21:29 -0400

Jira has a hidden ticket ‘Actions menu’ that is really helpful.

When a Jira ticket is in focus, type ..

This opens a searchable menu with ‘Issue actions’ (‘Attach’, ‘Link Issue’, etc.) and ‘Workflow’ state advancements (‘To Do’, ‘Close’, etc.). Almost any action you’d want to take on a ticket is there.

Turn off Autoformatter for New Features

Wed, 22 Sep 2021 12:17:38 -0400

When developing a new feature in a brownfield app that hasn’t been subject to consistent autoformatter treatment, turn off your autoformatter.

Autoformatting is great. I advocate for it. But it can be distracting when trying to read through your new work. The hard-won changes you make get lost in the mix of automated changes. Once you’ve got the feature working, turn on the autoformatter and get that automatic quality.

This is a pretty niche piece of advice, but it helped me today.

App Store Delays

Thu, 02 Sep 2021 13:51:03 -0400

Here’s an observation from a month of developing for iOS. There can be a delay on any action taken in the App Store Connect console that you should plan for.

Clear iOS Mobile Dependencies

Thu, 02 Sep 2021 11:32:04 -0400

When working on a React Native app on the iOS side, switching between branches with different dependencies can wreak havoc on your development environment. To ensure they’re you’re running the right libraries, blow everything away and start over:

rm -rf node_modules && yarn && (cd ios && pod deintegrate && pod install)

Replace yarn with npm install if you’re using NPM.

Clear React Router's Location State

Thu, 02 Sep 2021 11:32:04 -0400

The return of React Router’s useLocation hook has a key called state which contains values passed during a redirect or navigation. But where is that state stored by the browser, and how do we clear it?

Scroll on XCode Simulator

Wed, 25 Aug 2021 16:46:48 -0400

To get mobile scroll behavior on the XCode Simulator, inside the simulator window you must left click, then scroll.

Highlighted Routes Searching

Tue, 24 Aug 2021 14:14:40 -0400

On a non-trivial Rails app, the output from rake routes will be huge. Many people develop a reflex for searching through this output via something like:

$ rake routes | grep "<string>"

Which filters the output to matches on the string. I’d like to suggest a better option: use a command-line search tool that highlights the output! Here’s that same command with RipGrep:

$ rake routes | rg "<string>"

The results are the same (although much faster 😈), but even better is that that each match will be colorized. It’s bright red in my terminal. The colorizing makes the matches much easier to interpret.

React Native Shake

Fri, 13 Aug 2021 14:37:36 -0400

The ‘shake’ is an important React Native feature; it opens the In-App Developer Menu. This menu lets you reload, open the inspector, monitor performance, and more. To ‘shake’ your simulated device, press ^ ⌘ Z. An alternative hotkey is ⌘ D.

TestFlight Downloads Latest Build

Fri, 13 Aug 2021 12:17:08 -0400

When you push an iOS build to TestFlight, what’s the experience for your testers? Do they need to opt-in to test the latest build?

Speaking anecdotally as person who has pushed a build and plans to test it today, when you add that build to your test group, it is automatically downloaded as the default for each of your testers, replacing the previous build. You can visit the TestFlight app on your phone to see the apps you can test. The latest build (build number, an integer, not the SemVer version) should be automatically downloaded to your device.

fields_for exclude ID

Thu, 12 Aug 2021 09:47:32 -0400

Rails’ fields_for helper inserts a hidden ID field into your form. This is generally helpful, because you’ll want that information when you’re updating the record. But what if you don’t?

This is the scenario I encountered today: a ‘read-only’ form nested inside a fields_for helper, with no inputs. It almost worked: unfortunately, due to the default ID-inserting behavior of fields_for, there was a hidden ID input. It was getting submitted with the rest of the form and breaking things.

Use Display None

Fri, 06 Aug 2021 09:30:59 -0400

I recently delivered a form that was hidden via CSS, using the BassCSS hide class, and encountered an issue: iOS customers’ browsers were and trying to autofill this hidden form with their saved passwords. What was going on here?

hide it imparts these styles on its target in my Chrome:

.hide {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}

This worked visually, but it didn’t hide the form from iOS. Browsing the BassCSS docs, I learned that this is an ‘accessible’ hide, meant to visually hide an element from view but keep it available to screen readers. No wonder iOS was confused.

Edit in Pry

Tue, 03 Aug 2021 16:30:47 -0400

Here’s a scenario: you’re hacking on Ruby code in pry, and it’s a mess. Blocks chained on blocks, variables named a and other_one, assignments to _. You can understand it, but nobody else can, and one extra } breaks everything.

The solution is the edit command. Typing edit in pry loads the current buffer into your editor of choice. Jump in there and turn those inline blocks into do/end, assign some variables, write a method: iterate on some quality code in the comfortable, predictable setting of your text editor.

Command Line Subshell

Mon, 02 Aug 2021 11:34:14 -0400

When chaining commands in the terminal, you may need to do things that affect the shell’s environment, like change directories. Here’s an example:

$ yarn install && cd ios && pod install && cd .. && yarn build

These cd’s can clutter up a script, and they’re incidental. My solution is to use a subshell (here’s the explanation from man bash):

(list) list is executed in a subshell environment (see COMMAND EXECUTION ENVIRONMENT below). Variable assignments and builtin commands that affect the shell’s environment do not remain in effect after the command completes. The return status is the exit status of list.

Hash Equality

Wed, 05 May 2021 09:32:46 -0400

Ruby’s ‘principle of least surprise’ strikes me again. From the docs:

Equality— Two hashes are equal if they each contain the same number of keys and if each key-value pair is equal to (according to Object#==) the corresponding elements in the other hash.

An example:

hash = { 7 => 35, "c" => 2, "a" => 1 }
doppelganger = { "a" => 1, "c" => 2, 7 => 35 }
hash == doppelganger #=> true

Show Proc Source Location

Wed, 28 Apr 2021 17:02:11 -0400

Today I was investigating a Ruby Proc created in a gem, and I wanted to know how it was defined. Other than reading source code, there doesn’t seem to be a good way to do this! Prove me wrong.

We can get close by using Ruby’s #source_location function on Proc:

some_proc.source_location
=> ["/gems/2.4.0/bundler/gems/spree/core/app/models/spree/order.rb", 34]

This command shows us the line where Proc is defined. Go there to continue source-diving.

Chrome SameSite Updates

Fri, 23 Apr 2021 16:26:58 -0400

Yesterday I wrote about Chrome Flags; today I’ll explain why.

Chrome is currently rolling out sweeping changes to how it handles cookies. I learned a lot about it this week. To summarize, cookies that don’t specify a SameSite attribute will be treated as SameSite=Lax by Chrome starting with version 91. Ask for those cookies from a different URL, and Chrome won’t share them. This means that cookies intended for third-party or cross-site sharing must specify SameSite=None and Secure. You can opt into this behavior today with the aforementioned flags.

Chrome Flags

Thu, 22 Apr 2021 22:00:13 -0400

Chrome is making changes all time time; ignore them at your peril. Today I discovered Chrome’s Flags menu, which lets you opt-in early to features that may soon be the default. Explore it at:

chrome://flags/

Date Input Tag

Thu, 22 Apr 2021 22:00:13 -0400

The HTML date input tag allows you to request dates in a web form.

<input type="date">

This tag is more semantic for date input than text, and provides a side benefit: Google Chrome will automatically display a calendar selector on the page.

Override Vim's Filetype

Thu, 22 Apr 2021 13:30:27 -0400

Vim’s filetype auto-detection is great for effortless syntax highlighting, but what if a certain kind of file (i.e. Ruby) contains lots of another kind of code (i.e. SQL)? The Ruby code will be highlighted and readable, the SQL a large monochrome blob. Hard to read and reason about. We can do better!

Override the automatic assignment with:

:set ft=sql

This command with no assignment returns the current setting:

:set ft
filetype=lua

We can easily revert to the auto-detected extension as needed.

Steps Within Steps

Wed, 21 Apr 2021 16:51:29 -0400

Cucumber step definitions are useful for explaining in detail the actions a user might take on your site. But after a while, they become repetitive. Certain sequences of steps, like a user signing in, happen frequently in a robust test suite. We should not have to repeat them all every time we build a feature.

One solution is calling several steps from within another step:

Given 'I am a signed in developer' do
 steps %Q{
 Given I am a developer with credentials
 And I see the homepage
 When I click sign in
 Then I see the signin page
 When I enter my credentials
 And I click the sign in button
 Then I see my username in the upper right
 }
end

When you assert the topmost Given, all steps in the block will be interpolated and called. You still get the confidence of a rigorous test, but with a more concise declaration.

Directional Commands

Wed, 21 Apr 2021 16:50:27 -0400

You can move the cursor without arrow keys. Here is the keyboard equivalent for each.

Up (‘previous’): CTRL + P
Down (’next’): CTRL + N
Left (‘back’): CTRL + B
Right (‘forward’): CTRL + F

Mapping caps lock to CTRL makes these combinations very accessible.

Finding Getters

Wed, 21 Apr 2021 16:50:27 -0400

After writing the other day about why you might not want to use simple getters, I decided that I wanted to eliminate all such methods from a project.

Here is the regex I wrote to isolate the pattern:

ag 'def (\w+);?\s+@\1;?\s+end'

The semicolon catches one-line getter methods as well as the more common three-line.

MD5 File Signatures

Wed, 21 Apr 2021 16:50:27 -0400

The command md5 <file> generates a unique 32-digit hexadecimal number. This can serve as a signature for a file in its particular state, letting you know when it has changed.

Example usage:

$ touch test.txt
$ md5 test.txt
 MD5 (test.txt) = d41d8cd98f00b204e9800998ecf8427e
$ echo 'some content' > test.txt
$ md5 test.txt
 MD5 (test.txt) = eb9c2bf0eb63f3a7bc0ea37ef18aeba5

Printing with lpr

Wed, 21 Apr 2021 16:50:27 -0400

Recently while trying to fix a printer I used lpr a bunch of times. It’s not exactly new to me, but never fails to surprise people when I use it.

lpr submits files for printing to your default printer in OSX.

Print a file:

lpr README.md

Print the current file in your Vim session, with a cool job name:

:! lpr -T 'cool job name' %

Print two copies to a specific printer:

Reverse a String

Wed, 21 Apr 2021 16:50:27 -0400

Reverse a string with the rev command.

$ echo 'test' | rev
tset

It also works with files.

$ rev Procfile
br.amup/gifnoc C- amup cexe eldnub :bew

Run Previous Command

Wed, 21 Apr 2021 16:50:27 -0400

Previously run commands can be viewed with the history command.

$ history
10048 git checkout master
10049 gpr
10050 rake

With this list, you can rerun any command using !n:

$ !10048
Already on 'master'

The command !! prints the last command you ran, then runs it. Here is an example:

$ ls
LICENSE.md README.md bash cucumber rails
$ !!
ls
LICENSE.md README.md bash cucumber rails

Replace the second ! with the first few letters of a command you have previously run, and bash will search for, print, and run the most recent instance.

Screen Flashing in OSX

Wed, 21 Apr 2021 16:50:27 -0400

I like a quiet computer. But I also like tab-completing commands in the terminal, which produces a necessary alert from time to time.

A solution I found today is to use OSX Accessibility features to add a screen flash on alerts, then disable the sounds.

System Preferences > Accessibility > Hearing menu, choose ‘Audio’ > Check ‘Flash the screen when an alert occurs’

Send Processes to the Background

Wed, 21 Apr 2021 16:50:27 -0400

Processes on any POSIX-compliant computer can be sent to the background with CTRL-Z (<prefix> + Z for the tmux-ers) and returned to the foreground with fg.

Here is an example:

user@computer:~% ping www.google.com
PING www.google.com (74.125.228.212): 56 data bytes
64 bytes from 74.125.228.212: icmp_seq=0 ttl=52 time=41.574 ms
64 bytes from 74.125.228.212: icmp_seq=1 ttl=52 time=42.836 ms
64 bytes from 74.125.228.212: icmp_seq=2 ttl=52 time=53.527 ms
^Z
zsh: suspended ping www.google.com
user@computer:~% fg
[1] + continued ping www.google.com
64 bytes from 74.125.228.212: icmp_seq=3 ttl=52 time=42.433 ms
64 bytes from 74.125.228.212: icmp_seq=4 ttl=52 time=42.401 ms
64 bytes from 74.125.228.212: icmp_seq=5 ttl=52 time=42.837 ms
64 bytes from 74.125.228.212: icmp_seq=6 ttl=52 time=44.203 ms
^C
--- www.google.com ping statistics ---
7 packets transmitted, 7 packets received, 0.0% packet loss

Start Postgres.app from the Command Line

Wed, 21 Apr 2021 16:50:27 -0400

Today I was trying to restore a production Postgres dump on a remote machine, to test some migrations. I haven’t granted myself Heroku production database access, hence the SSH into a machine with a Heroku user that has access.

I quickly hit a problem— this remote machine runs Postgres using Postgres.app. Without that program, I’m out of luck. No local Postgres server, no production database restore, no testing.

It turns out you can start Postgres.app from the command line. Find the executable and call it.

Watch That Program

Wed, 21 Apr 2021 16:50:27 -0400

Have you ever been working in the terminal and found yourself repeating the same command many times? Delegate that work to the computer.

watch comes with Linux and can be installed on OSX via homebrew. It executes a program periodically, defaulting to every two seconds.

We used it today while writing a database backup script. Instead of checking our dump directory every time a cron job executed, we ran watch ls, and watched the script succeed or fail with live updates.

ExtractRSpecLet

Wed, 21 Apr 2021 11:13:08 -0400

Today I got to see the :ExtractRspecLet command from the vim-weefactor plugin. It does what the names suggests, converting this:

# spec/model/foobar_spec.rb

foo = FactoryGirl.create :foobar

To this:

# spec/model/foobar_spec.rb

let(:foo) { FactoryGirl.create :foobar }

It also moved the new let from inside my it block to right underneath my context block. Awesome!

h/t Josh Davey and Dillon Hafer

Upgrade Rubygems

Wed, 21 Apr 2021 09:28:21 -0400

To update rubygems:

gem install rubygems-update
update_rubygems
gem update --system

Reset a Gem

Tue, 20 Apr 2021 17:12:51 -0400

If you’ve been mucking around in your Ruby dependencies, bundle pristine is your friend; it resets all of the gems in your Gemfile to their pristine condition.

This can be a slow on a big project. Target the specific gems you worked on today with:

$ bundle pristine <gemname>

Semicolon Breaks Everything

Fri, 14 Jun 2019 11:58:15 -0400

“Select isn’t broken.” If you’re working on a CSS file, and none of your changes are being applied, check for typos, crashed servers, misplaced files, etc. Once you’ve ruled out simple mistakes, you might have a syntax error like this:

.klass {
 opacity: 0.5;
};

The trailing semicolon is incorrect, and none of the CSS below it can be understood by the browser.

Change this to:

.klass {
 opacity: 0.5;
}

There may be some environments where a broken CSS file fails loudly; Code Sandbox or Codepens are not among them. If you’re changing CSS and nothing is happening, start looking for syntax errors.

Ignore Ripgrep Ignore

Sat, 10 Nov 2018 11:04:17 -0500

I have an .rgignore file that ignores half of a monorepo that I almost never want to search in. Sometimes though, I do need to search that repo, and I’d rather not edit my ignore file.

Here’s how I override it for one search:

rg "I mean," --no-ignore

This will search in every directory, even those I’m ignoring via the .rgignore.

Pipe to pbcopy

Sun, 26 Aug 2018 17:56:33 -0400

Adding | pbcopy to the end of any command will send the standard output to your clipboard.

ls -al | pbcopy inside a rails project directory allowed me to paste this:

Gemfile
Gemfile.lock
README.md
Rakefile
app
bin
config
config.ru
db
features
lib
log
public
script
spec
test
tmp
vendor

Open Every Site in a Chrome Bookmarks Folder

Sat, 17 Dec 2016 09:53:09 -0500

When you command-click on a Chrome bookmarks folder, it opens every link in the folder in a new tab.

I did this by accident; so what’s the use case? I use bookmark folders to categorize my ‘work links’: hosting, error monitoring, Git hosting, online docs, etc. With this TIL, I could use this folder to open a new Chrome session and instantly load it with all the pages I need to be effective.

Vim Regex Word Boundaries

Tue, 20 Sep 2016 07:46:37 -0500

Today while writing a Vim regex to change every instance of it (ignoring larger matches like itemized), we stumbled upon Vim regex word boundary matching.

Given this file:

foo
foobar

The following Vim regex will match on both the first and second line:

:%s/foo/baz/g

But with word boundaries, we’ll only match (and change) the first line, because only the first foo is a standalone word:

:%s/\<foo\>/baz/g

Delete Remote Git Tags

Fri, 18 Mar 2016 14:18:40 -0500

Tagging releases with Git is a good idea. In case your tags get off track, here is how you delete a Git tag locally and on a remote:

$ git tag -d abc
$ git push origin :refs/tags/abc
To git@github.com:hashrocket/hr-til
- [deleted] abc

It gets trickier if you’re using Semantic Versioning, which includes dots in the tag name. The above won’t work for v16.0.0. This will:

$ git tag -d v16.0.0
$ git push origin :v16.0.0
To git@github.com:hashrocket/hr-til
- [deleted] v16.0.0

Git Log With Authors

Thu, 25 Feb 2016 13:29:59 -0600

In my never-ending quest to better summarize my work at the end of the day using computers, I discovered today the Git --author flag. It works like this:

$ glg --since=midnight --author=dev+jwworth+mikechau@hashrocket.com
* 4ba91a8 (HEAD, origin/checkout, checkout) Add guard for manual entry of employee discount
* 3a4e4c9 Seed a coupon and code and auto-apply in preview
* cb1adee Add discount
...

The alias glg is discussed here.

I use this when multiple developers or teams are committing throughout the day to the same repository, to disambiguate our work from others. Ready to paste into your billing software of choice.

Count Links in a Markdown File

Sun, 14 Feb 2016 17:43:36 -0600

Today I learned a great way to count the links in a README or link collection. Vim Regex!

:%s/- \[//n

In Vimspeak:

On every line, find all of the times where - [ (the beginning of a Markdown bulleted hyperlink) occurs, count them, and report the number of matches.

See :help substitute in Vim for more information.

h/t Josh Branchaud

Query the Size of Postgres Array

Sun, 14 Feb 2016 16:57:20 -0600

Today I learned how to query the size of a Postgres array. There are (at least) two methods that work.

The first is array_length. This requires you to know the array dimension you seek; a useful filter, although most of the time this will probably be 1:

hr-til_development=# select title from posts
hr-til_development=# where array_length(slack_notified_at_likes_threshold, 1) = 1;
 title
-------------------------------------------
 Because Javascript
 Percent Notation
 DIY Grids for Designing UI in Illustrator
(3 rows)

When the dimension is 1, a more terse solution is cardinality:

PostgreSQL Empty Array as Default Value

Sun, 14 Feb 2016 15:46:54 -0600

We can add a PostgreSQL array column with a default empty array using:

add column things integer[] not null default '{}';

Variable Hoisting in Ruby

Wed, 10 Feb 2016 20:45:51 -0600

This afternoon my pair and I spent quite a while on a subtle bug. The culprit? Variable hoisting.

Take this file:

class Test
 def self.hoist
 require 'pry'; binding.pry;
 bar = 1
 end
end

Test.hoist

When we hit the PRY debugger, what will the value of bar be? I would have thought it would raise NameError, because bar has seemingly not yet been defined.

Wrong:

$ ruby test.rb
From: /test.rb @ line 4 Test.hoist:
2: def self.hoist
3: require 'pry'; binding.pry;
=> 4: bar = 1
5: end
[1] pry(Test)> bar
=> nil

When Ruby parses a file, it ‘hoists’ each variable to the top of its scope, declaring and setting it to nil, even if that variable is never assigned by our code. So variables inside an if false conditional get hoisted and set to nil, as described in this blog post.

Get help with Pathogen

Wed, 13 Jan 2016 19:56:33 -0600

Today I found a great command in Pathogen.vim, :Helptags. This is a riff off :helptags {dir}, a Vim feature that builds helptags for directory {dir}.

:Helptags does the same for all the directories in your runtimepath, which defaults on Unix and Mac OS X to:

"$HOME/.vim,
$VIM/vimfiles,
$VIMRUNTIME,
$VIM/vimfiles/after,
$HOME/.vim/after"

The use case here is when you’ve just loaded a new plugin into your Vim bundle, you open up Vim, and :h {my_new_plugin} isn’t ‘helping’ you out.

Generate a Rails Secret Key

Tue, 12 Jan 2016 13:55:55 -0600

Have you ever wondered about those secret keys found in config/secrets.yml of your Rails app? The comments generated in that file describe the keys as ‘used for verifying the integrity of signed cookies.’

Great… but what if they become compromised? Or we need to change them? We can generate new ones.

Rails provides rake secret for just this purpose.

The source code is here. It’s pretty simple; the code simply requires SecureRandom and spits out a string. If you want to be really clever, you can pipe the string directly into your Vim buffer for the config file, with :.! rake secret.

Show Model and Grep with Pry-rails

Fri, 08 Jan 2016 13:11:52 -0600

This week Josh Branchaud wrote about show-models in Pry-rails:

http://til.hashrocket.com/posts/62f61ee06f-show-rails-models-with-pry

This method has two nice variants. show-model User shows you that model, useful in a large database.

show-models also accepts --grep for searching:

[1] pry(main)> show-models --grep published
Post
 id: integer
 title: string
 published_at: datetime # 'published' is highlighted

Set a Default Scope

Fri, 08 Jan 2016 10:23:35 -0600

ActiveRecord provides default_scope, which you can use to control how records are returned. An example:

# app/model/chapter.rb
class Chapter < ActiveRecord::Base
 default_scope { order(:title) }
end

Now, instead of this (ordered by ID):

Chapter.all.pluck(:title).take(5)
=> ["BALINESE CAUSE",
"BUILDING RAT",
"TAIL",
"LILAC MERCURY",
"PUMP SQUARE"]

We get this:

Chapter.all.pluck(:title).take(5)
=> ["AFGHANISTAN COAT",
"ALCOHOL GONG",
"ANTARCTICA BULL",
"ASPARAGUS",
"BALINESE CAUSE"]

Beware, this decision can lead to inexplicable behavior down the road. Use with caution.

One use case I’ve heard is soft deletes. We might not want soft-deleted records appearing in .all:

Change Inner Tag Block

Thu, 07 Jan 2016 18:40:11 -0600

Vim has excellent commands for changing the contents of parentheses (ci(), brackets (ci[), and squiggly braces (ci{) (as well as single quotes, double quotes, backticks, etc.). But what about tags?

Place your cursor anywhere inside the tags, type cit in Visual mode, and this:

<div>Begone</div>

Becomes:

<div></div>

d works too, but I prefer c because it puts you in Insert mode at the end of the opening tag, ready to type.

Succeed, Precede, and Surround in Haml

Wed, 06 Jan 2016 21:59:41 -0600

Haml’s design makes HTML and Ruby tricky to mix inline. But we have Haml helper methods to make it easier.

Here is succeed in action:

Developer at
= succeed ', ' do
= link_to "Hashrocket", "https://hashrocket.com/"

This becomes:

Developer at
<a href="https://hashrocket.com/">Hashrocket</a>,

Notice the comma at the end, outside of the a tag?

precede and surround work in a similar fashion, and do what we’d expect.

http://haml.info/docs/yardoc/file.REFERENCE.html#succeed

Increment and Decrement Numbers

Wed, 06 Jan 2016 17:28:17 -0600

Vim has commands built-in to increment and decrement numbers: CTRL-A and CTRL-X, respectively.

Combining this with a macro was a technique we tried today to build a large database migration. We ended up finding a more efficient solution, but it’s still a very magical key combination.

Check out :help CTRL-A for more info.

h/t Josh Branchaud

Expect a Case-Insensitive Match

Tue, 05 Jan 2016 17:37:00 -0600

We had a testing issue this week when a button’s text save changes! was rendering as SAVE CHANGES!, due to the CSS property text-transform: uppercase. How do you test that?

One technique is to use RSpec’s match method, and include case insensitivity with i (explored earlier here):

> button_text = "foo"
=> "foo"
> expect(button_text).to match("FOO")
RSpec::Expectations::ExpectationNotMetError: expected "foo" to match "FOO"
# stuff
> expect(button_text).to match(/FOO/i)
=> true

We ultimately hard coded the expectation to match("FOO"), because allowing fOo and FoO seemed too permissive. But it remains an option.

Testing Edit Forms

Tue, 17 Nov 2015 07:53:31 -0600

Today I found a way to assert that an edit form’s inputs include a record’s saved data. I think it strikes a good balance between broad and narrow scope.

# spec/features/user_edits_kit_spec.rb

within 'form' do
 expect(page).to have_selector("input[value='Default copy.']")
end

This asserts that some content is inside an input field in the form, rather than just anywhere on the page. You can narrow the scope as needed.

Delete a Line From Another Line

Mon, 09 Nov 2015 18:50:37 -0600

Today I was cleaning up a test with an extra empty line at the top of the file, away from my Vim cursor. I wanted to delete it… without moving the cursor.

It seems like Vim almost lets you do this, with :[range]d. But it leaves the cursor on the deleted line, which isn’t very magical.

This is the hack we found:

:[range]d

Then:

''

'' returns the cursor to the last jump point.

Ruby's Kernel::abort

Thu, 05 Nov 2015 18:30:56 -0600

Today I used Ruby’s Kernel::abort for the first time. It’s one of those incredibly useful methods I can’t believe I’ve never seen before.

Observe:

# abort.rb {1}
def no_message
 abort
end

def message
 abort('Process terminated')
end

$ irb
2.2.2 :001 > require './abort'
=> true
2.2.2 :002 > no_message
$ irb {1}
2.2.2 :001 > require './abort'
=> true
2.2.2 :002 > message
Process terminated
$

Use it to bail from a script.

Cleanup PostgreSQL Databases

Mon, 02 Nov 2015 16:36:56 -0600

Today I learned that I have thirty-nine Postgres databases on my computer, after running this command inside psql:

\l ;

Each one is small, but I don’t like to carrying around old data. I ended up dropping nine of them, with:

drop database foo_development;

For a lighter storage and cognitive load.

Accessor Performance Gap

Sun, 25 Oct 2015 12:34:28 -0500

This week I learned that attr_reader is more performant than a simple getter method.

Here’s a gist from five years ago where Aaron Patterson explains:

https://gist.github.com/pjb3/629716

I ran that same benchmarking script today on Ruby 2.2.3. The gap has narrowed, but still exists:

ruby-2.2.3
Rehearsal -----------------------------------------------
method 0.070000 0.000000 0.070000 ( 0.074840)
attr_reader 0.050000 0.000000 0.050000 ( 0.052603)
-------------------------------------- total: 0.120000sec
user system total real
method 0.070000 0.000000 0.070000 ( 0.072229)
attr_reader 0.050000 0.000000 0.050000 ( 0.053374)

I like attr_reader because it’s a Ruby convention and is one line instead of three. Now, I also like its performance relative to a getter.

The Alpha Commit

Wed, 21 Oct 2015 11:24:53 -0500

I like to read commit logs.

Today I wanted to see the first commit on a project. Here’s what I used:

git rev-list --max-parents=0 HEAD

Show me the commits that led to HEAD in reverse chronological order; then limit that list to the commits with no parent.

Here’s a small modification, to show the entire commit rather than the SHA alone:

git show $(git rev-list --max-parents=0 HEAD)

Rails restore_attributes

Tue, 13 Oct 2015 11:56:12 -0500

Today I found a useful method in ActiveRecord, restore_attributes.

This method restores attributes on a dirty model. Use it when you are hacking in the Rails console and want to quickly return to a clean slate.

Dirty the record:

[1] pry(main)> p = Post.first
Post Load (0.4ms) SELECT "posts".* FROM "posts" ORDER BY "posts"."id" ASC LIMIT 1
=> #<Post:0x007f8462b09eb8
id: 106,
title: "Hello World!",
created_at: Sun, 09 Feb 2014 17:15:01 CST -06:00,
url_slug: "hello-world">
[2] pry(main)> p.url_slug = 'foobar'
=> "foobar"
[3] pry(main)> p.created_at = Time.now
=> 2015-10-13 11:41:37 -0500
[4] pry(main)> p
=> #<Post:0x007f8462b09eb8
id: 106,
title: "Hello World!",
created_at: Tue, 13 Oct 2015 11:41:37 CDT -05:00,
url_slug: "foobar">

And restore:

Explore Buffers with BufExplorer

Mon, 12 Oct 2015 17:38:15 -0500

I’m a huge fan of Vim buffers. I try to have my buffer list roughly mirror the files I am currently holding in my brain.

The BufExplorer Vim plugin helps, and is included in the Hashrocket Dotmatrix. Today I learned to use the command \bs, which opens a colorful buffer list that you can navigate with Vim directions.

https://github.com/jlanzarotta/bufexplorer

Rails destroy

Tue, 06 Oct 2015 11:32:01 -0500

The rails generate (g) command is useful for quickly creating the building blocks of a Rails app. Until you misspell or otherwise mess up a command:

% rails g model blurg_post
invoke active_record
create db/migrate/20151006162244_create_blurg_posts.rb
create app/models/blurg_post.rb
invoke rspec
create spec/models/blurg_post_spec.rb

‘Blurg post’? I meant ‘blog post’. Luckily, we can remove those auto-generated files as fast as we created them, with destroy (d).

% rails d model blurg_post
invoke active_record
remove db/migrate/20151006162244_create_blurg_posts.rb
remove app/models/blurg_post.rb
invoke rspec
remove spec/models/blurg_post_spec.rb

http://edgeguides.rubyonrails.org/command_line.html#rails-destroy

Git Log since

Tue, 29 Sep 2015 17:42:09 -0500

At the end of each day, I try to record what I did, to jog my memory during the next morning’s standup. This is a helpful aid:

git log --since="24 hours ago"

I SSH into my work machine and run this in my project’s root directory. Combined with an alias from the Hashrocket Dotmatrix, glg (git log --graph --oneline --decorate --color --all), I get a terse summary of the day’s work, ready to be pasted into your note-taking or project management tool of choice:

Fetch Your Environmental Variables

Sat, 26 Sep 2015 18:56:00 -0500

It’s important to fetch Ruby environmental variables rather than directly referencing them.

This code depends on ‘secret_key’:

key = ENV['secret_key']

When ‘secret_key’ is not set, ‘key’ will be assigned nil, which is an object.

Later, a call to key.upcase will produce a NoMethodError, because Ruby doesn’t know how to uppercase nil.

This is better:

key = ENV.fetch('secret_key')

Now, when ‘secret_key’ is not set, KeyError will be raised. The code fails fast.

fetch takes a second argument as a default, which means you can even prevent KeyError entirely, if you choose.

Seeding Golang's Rand

Fri, 25 Sep 2015 08:04:38 -0500

‘Random’ numbers in Go don’t always seem random. This is because the rand package defaults to a seed of 1.

That’s great if you need a bunch of random numbers at the start of your program. Not great if you expect a different outcome each time you run the program.

A solution is to seed rand with Unix time. Try it in the init() function:

package main

import (
 "math/rand"
 "time"
)

func init() {
 rand.Seed(time.Now().UTC().UnixNano())
}
...

Build URLs with Window Location

Wed, 23 Sep 2015 21:45:56 -0500

Want to build URLs with JavaScript? Try thewindow.location object.

This came from a React.js project we’re working on. It uses ES6 template string interpolation, which isn’t necessary but definitely is nice:

`${window.location.protocol}//${window.location.host}/posts/${this.props.postID}/edit`

Which becomes:

"https://secret-project.com/posts/42/edit"

Postgres Unlogged

Wed, 23 Sep 2015 07:37:27 -0500

Using a Postgres table for caching? You might want to try making it unlogged.

unlogged tables are not written to the write-ahead log, which makes them much faster. This also means they are not crash-safe, and are truncated when a crash or unclean shutdown occurs. For caching purposes, that’s likely to be an acceptable tradeoff.

Documentation

Go iota

Thu, 17 Sep 2015 13:24:16 -0500

Go has an interesting feature called iota. When declaring a list of constants, this keyword represents successive untyped integer constants.

const (
 foo = iota // foo == 0
 bar = iota // bar == 1
 baz = iota // baz == 2
)

Anytime const is invoked, the counter resets.

const foo = iota // foo == 0
const bar = iota // bar == 0

This is a cool way to quickly define a list of integer constants, such as ’true’ and ‘false’, for later use.

Ruby Regex Literal

Thu, 10 Sep 2015 22:35:52 -0500

Ruby has a nice percent string literal for regular expressions, %r. It’s like // but allows your regex to contain backslashes without escaping them.

Check it out:

2.1.0 :001 > 'http://google.com'.gsub(/http:\/\/google.com/, 'fine')
=> "fine"
2.1.0 :002 > 'http://google.com'.gsub(%r{http://google.com}, 'better')
=> "better"

As the example implies, this is useful when matching URLs.

Documentation

Prepare / Execute

Tue, 08 Sep 2015 18:51:01 -0500

You can store a PostgreSQL query with prepare.

db=# prepare posts_search as select title from posts limit 5;
PREPARE

Call the method with execute.

db=# execute posts_search;
title
-----------------------------------
Hello World!
My First Pull Request: HAML
My First Pull Request: Sinatra
My First Pull Request: Capistrano
My First Pull Request: SASS
(5 rows)

Deallocate the query with deallocate, and you can set it again.

db=# deallocate posts_search;
DEALLOCATE
db=# prepare posts_search as select title from posts limit 10;
PREPARE

Psql Connect

Tue, 08 Sep 2015 18:51:01 -0500

Want to change database connections from inside psql? You can!

Psql, the REPL for Postgres, has a useful meta-command called \connect, or \c. This lets you establish a new connection to a Postgres server, while closing the current connection.

Here is the required format:

\c or \connect [ dbname [ username ] [ host ] [ port ] ] | conninfo

Only \c [my_database] is required; omitted parameters are taken from the previous connection.

Terminate Database Connections

Tue, 08 Sep 2015 18:51:01 -0500

To maintain data integrity, certain actions like rake db:drop will not execute when there are active sessions on a Postgres database. You’ll get an error like this:

ERROR: database "database_name" is being accessed by other users
DETAIL: There are 2 other session(s) using the database.

Sessions can be killed from the command line, but a safer route is to kill them with a database method. First, revoke all public access from the database:

Keyword Precedence

Thu, 02 Jul 2015 17:43:57 -0500

The Ruby keyword not and the unary ! aren’t the same. They have a different precedence, and therefore are not interchangeable, despite seeming very similar.

irb > not 3 == 4
=> true
irb > !3 == 4
=> false

The first example is evaluated as not (3 == 4), or not false, which is true. The second example is evaluated as (not 3) == 4, or false == 4, which is false.

Skid Keywords

Thu, 02 Jul 2015 15:28:02 -0500

Ruby has a few interesting old keywords that use the underscore, or ‘skid’, to convey meta information about the file.

Here they are in action:

# test.rb
puts __ENCODING__
puts __FILE__
puts __LINE__
__END__
Because this is after 'end', it should not be executed

Running this file produces:

$ ruby test.rb
UTF-8
test.rb
3

Pretty cool!

Change Column Null

Sun, 28 Jun 2015 12:34:19 -0500

The not null constraint is a great way to ensure data integrity. If a Rails model validates_presence_of an attribute, that column should be not null in the database.

Rails has a special migration method for setting this constraint.

change_column_null :users, :mandatory_attribute, false

You could also use the change_column method. The reason change_column_null is a better choice is that change_column requires you to state the type of the column; change_column_null does not.

change_column(table_name, column_name, type, options)
change_column_null(table_name, column_name, null, default = nil)

Classify and Constantize

Wed, 03 Jun 2015 22:28:22 -0500

Metaprogramming! Today I created a variable event that calls a serializer unique to the value of event. Along the way I learned about the Rails methods classify and constantize.

classify takes a plural table name and returns a class name.

> 'some_things'.classify
=> "SomeThing"

constantize tries to find a constant with the name specified in the argument string.

> "Module".constantize
=> Module

> "Nothing".constantize
NameError: uninitialized constant Nothing

Here’s a sample of how I used these methods today (on the ‘Today I Learned’ app itself):

Find Or Create By With Block

Sat, 30 May 2015 16:50:30 -0500

The Rails find_or_create_by method is great for bringing something into existence only once. I like to use it for database seeds, so you get the basic objects you need to make your development site useable, but don’t keep creating them over and over again.

One feature I recently learned is that this method takes a block.

User.find_or_create_by(first_name: 'Jake') do |user|
 user.last_name = 'Worth'
end

This lets you find the object, and if it doesn’t exist, create it with whatever attributes you need.

Edit the Current File Always

Fri, 29 May 2015 00:25:49 -0500

The Vim command :e edits a file. Add a bang, :e!, to edit the current file ‘always’, discarding any changes to the current buffer.

This is useful if you rename a file with a new file extension (i.e. .txt to .rb). :e! reloads the file in Vim, picking up any customizations you have in your configuration files such as syntax highlighting.

Multipurpose Environmental Variables

Tue, 26 May 2015 21:25:36 -0500

I use HTTP Basic auth in non-production environments because it ships with Rails and is easy to implement. The first time I used it, I set it up like this:

# app/controllers/application_controller.rb
if ENV['http_basic_auth']
 http_basic_authenticate_with name: ENV['username'], password: ENV['password']
end

I used environmental variables so that no credentials were hard-coded, and so I could toggle it without deploying.

Today I learned you can also implement it like this:

# app/controllers/application_controller.rb
if creds = ENV['basic_auth_credentials']
 username, password = creds.split(':', 2)
 http_basic_authenticate_with name: username, password: password
end

This requires an environmental variable called basic_auth_credentials, set to <username>:<password>. I prefer this because it allows one variable to serve two purposes: it toggles the feature and also contains the information the feature needs to work.

Puts Multiple Lines

Tue, 26 May 2015 10:28:54 -0500

Ruby’s puts can take multiple arguments!

2.2.0 :002 > puts 'so', 'many', 'statements', 'to', 'puts'
so
many
statements
to
puts
 => nil

Truthy Strings

Tue, 26 May 2015 10:28:48 -0500

Ruby strings are truthy, and they evaluate to zero, unless they start with a number.

> 'nine to five'.to_i
 => 0
> '9 to 5'.to_i
 => 9

Find and Replace Across Files

Thu, 21 May 2015 09:47:13 -0500

Vim can find and replace strings across files, just like other text editors. It’s really (sort of) easy.

First load all the files you want to change into the buffer with a splatted directory.

:args path/to/files/*/*

Then, execute the substitution.

:argdo %s/old_string/new_string/ge | update

The e flag is important; it tells Vim not to issue an error if the search pattern fails. This will prevent No Match errors from breaking the chain.

Minmax

Mon, 18 May 2015 19:32:59 -0500

Ruby’s Enumerable class includes minmax, which returns a two element array with the minimum and maximum values of an enumerable.

> [1, 5, 10].minmax
=> [1, 10]
> ['alpha', 'bravo', 'zulu'].minmax
 => ["alpha", "zulu"]

Call a Vimscript Method in Vim

Sun, 17 May 2015 17:00:04 -0500

To call a Vimscript method in Vim, first source the file.

:source ~/path/to/vimscript.vim

Next, put the cursor over the method call, and run that line.

:exec getline(".")

Case Insensitive Matchers

Fri, 15 May 2015 15:34:38 -0500

You can make Ruby regex matchers case insensitive with an i.

2.1.0 :001 > 'Expected output' =~ /expected/
 => nil
2.1.0 :002 > 'Expected output' =~ /expected/i
=> 0

This is useful when writing tests, when you care about a message, but are not interested in its exact format.

Current Value of a Setting

Thu, 14 May 2015 11:00:00 -0500

Check the value of any Vim setting by adding a ? to the end of its name.

# Validate spelling is turned off
:set spell?
=> nospell
# Validate incremental search is turned on
:set incsearch?
=> :incsearch

Jump to the First Non-Blank Character

Tue, 12 May 2015 18:45:11 -0500

With Vim you can jump down any n amount of lines with n + j, and back up with n + k.

An alternate command is n + +, which jumps down to the first non-blank character, and n + -, which jumps back up to the first non-blank character.

Redirect a Path

Mon, 11 May 2015 17:17:51 -0500

To redirect a path in Rails:

# config/routes.rb

get "/authors" => redirect("/designers")

This lets you take a difficult-to-type path name and expose it to your users as a simpler path name:

# config/routes.rb

get "/login" => redirect("/auth/google_oauth2")

Bypass Basic Auth

Fri, 08 May 2015 13:23:33 -0400

Rails comes with HTTP Basic authentication built in. Adding this to a controller is how it’s done:

# app/controllers/application_controller.rb

http_basic_authenticate_with name: 'name', password: 'password'

When you visit a URL requiring authentication, you can bypass the authentication screen by adding your username and password to the beginning of the URL. For localhost, this would look like:

name:password@localhost:3000

Git Snapshot

Fri, 08 May 2015 12:33:10 -0400

To save a snapshot of your current work in git, try this command:

git stash save "snapshot: $(date)" && git stash apply "stash@{0}"

This saves your current work in a timestamped stash, without removing it. In Hashrocket’s dotmatrix this command is aliased to git snapshot.

Close a File

Fri, 08 May 2015 09:19:58 -0500

In Vim there are many ways to close a file. One of the best is :x, also know as :xit.

:x writes and quits a file when changes have been made, like :wq, but with one less keystroke.

An important distinction:

:x and :wq are similar, but not identical commands.

The difference is that :wq writes the current file and quits, as long as the file is not read-only and has a name, while :x only writes if changes have been made. So, if you were to generate a file with Vim, make no changes, and try to write and quit with :x, the file would not be written. Doing the same thing with :wq would write the file.

Sort Alphabetically

Wed, 06 May 2015 20:05:31 -0500

One way to make a list nicer to read is to sort it. Vim comes with a command built in for just this purpose.

Here is a snippet from a Gemfile:

gem 'coffee-rails', '~> 4.1.0'
gem 'uglifier', '>= 1.3.0'
gem 'sass-rails', '~> 5.0'
gem 'puma'
gem 'gravatar_image_tag'
gem 'authem'
gem 'jquery-rails'
gem 'pg'
gem 'redcarpet'
gem 'rails_12factor', group: :production
gem 'sdoc', '~> 0.4.0', group: :doc

These gems might have been added during the development process. To sort them, enter visual mode, highlight the desired range, and enter :sort. Here’s the result:

Parameters Filtering

Sat, 02 May 2015 15:16:47 -0500

Rails logs your server’s activity, which is useful for development and debugging. However, often the server handles sensitive information that should not be logged.

A few examples are authentication credentials, personal data, and financial information.

To prevent Rails from logging such data, add this to your application configuration:

config.filter_parameters << :sensitive_param

When the named parameter is handled by the server, it will be logged as [FILTERED] instead of its actual value. Add this configuration by environment if you want to keep the parameters unfiltered in development.

Modify Attribute on Set

Sat, 02 May 2015 15:12:39 -0500

In this example, we want to allow users to enter a twitter handle with or without an at-sign (’@’), just like Twitter, but save it without the at-sign. twitter_handle is already an attribute on the class.

class User < ActiveRecord::Base
 def twitter_handle=(handle)
 write_attribute(:twitter_handle, handle.to_s.gsub(/^@/, ''))
 end
end

Undo a Git Mistake

Tue, 21 Apr 2015 15:25:51 -0400

git reflog is a record of your actions in Git. With this command, you can undo almost any Git mistake.

$ git reflog
4bd0090 HEAD@{0}: <bad place>
46bd839 HEAD@{1}: <bad place>
967e214 HEAD@{2}: <last good place>
46bd839 HEAD@{3}: <good place>
967e214 HEAD@{4}: <good place>
$ git reset --hard HEAD@{2}

Delete Comments

Sat, 18 Apr 2015 14:05:39 -0500

:g/^\s*#/d will remove comment lines from a file with Vim.

Less Help

Thu, 16 Apr 2015 17:04:56 -0500

While in less (terminal pager program), h or H brings up a summary of commands.

How Rails Action Name Works

Mon, 10 Nov 2014 11:04:17 -0500

Today I was trying to control what rendered on a page based on which controller action called it, and discovered the action_name method. It’s located in actionview:

pry> method(:action_name).source_location
=> ["/Users/jake/.rvm/gems/ruby-2.2.3/gems/actionview-4.2.4/lib/action_view/helpers/controller_helper.rb", 10]

Add this to your view code, and it you’ll get the relevant action:

pry> action_name
=> "index"

Same partial, different context:

pry> action_name
=> "drafts"

This method would allow conditionals like this (written in HAML):

- if action_name == 'index'
 Welcome to the index.
- else
 Welcome to the drafts.

https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/controller_helper.rb#L10