Skip to content

Instantly share code, notes, and snippets.

wosephjeber / waitFor.js
Created November 29, 2023 21:06
[WIP] An RTL-like `waitFor` utility, without the DOM stuff
export default async function waitFor(callback, { timeout = 1000 } = {}) {
let intervalTimer;
let lastError = null;
let pending = false;
let timeoutTimer;
return new Promise((resolve, reject) => {
function onDone(result) {
wosephjeber /
Created September 13, 2023 18:19
Notes from learning SolidJS

I'm learning SolidJS coming from React. I'm taking notes here on things that trip me up in the process.

  • Don't destructure props. It breaks reactivity with signals passed down as props.
  • Use untrack() to reference signal values in an effect without rerunning the effect when those signals change. Might be a less common use case? (Mine was referencing updated signal values in an interval started by the effect).
wosephjeber / index.js
Last active September 11, 2023 19:02
Quick Node script to find largest dependency in package.json
const { dependencies } = require('../package.json');
const deps = Object.keys(dependencies).map((p) => `${p}@${dependencies[p]}`);
function pluralize(count, singular, plural) {
if (count === 1) return `${count} ${singular}`;
return `${count} ${plural}`;
wosephjeber / get_all_regex_matches.ts
Created March 17, 2023 13:03
Get all regex matches in a string
function getAllRegexMatches(regex: RegExp, string: string) {
if (regex.constructor !== RegExp) {
throw new Error('not RegExp');
const matches = [];
let match = regex.exec(string);
if ( {
while (match) {
wosephjeber / getAllColors.js
Created October 15, 2020 22:19
Quick and dirty function for scraping colors from web page
function getAllColors() {
const COLOR_CONTAINING_PROPERTIES = ["backgroundColor", "borderTopColor", "borderRightColor", "borderLeftColor", "borderBottomColor", "color"]
let colors = []
let elements = document.querySelectorAll('*')
elements.forEach(element => {
const styles = window.getComputedStyle(element)
wosephjeber /
Last active October 12, 2023 10:05
Inspecting Chrome extension interfaces with React DevTools

Inspecting Chrome extension interfaces with React DevTools

Chrome does not allow extensions to modify other extensions, so React DevTools are not available in the Chrome DevTools interface when inspecting a Chrome extension interface. The React team has provided a standalone app that can be connected manually, but it requires some setup. The React DevTools readme includes some instructions, but they leave out an important step if you're debugging within a Chrome extension.

Here's an overview of how to set this up locally for an extension:

Run the standalone React DevTools app

The easiest way to start the standalone app is:

wosephjeber /
Last active June 14, 2024 09:11
Ecto migration for renaming table with indexes and constraints

Renaming table in Ecto migration

I recently wanted to rename a model and its postgres table in a Phoenix app. Renaming the table was simple and documented, but the table also had constraints, sequences, and indexes that needed to be updated in order for the Ecto model to be able to rely on default naming conventions. I couldn't find any examples of what this would look like but was eventually able to figure it out. For anyone else in the same situation, hopefully this example helps.

In the example below, I'm renaming the Permission model to Membership. This model belongs to a User and an Account, so it has foreign key constraints that need to be renamed.

defmodule MyApp.Repo.Migrations.RenamePermissionsToMemberships do
  use Ecto.Migration
wosephjeber / upgrade_postgres
Last active November 26, 2020 23:03
Upgrade from postgres 9.6.2 to 10.5 on OSX
## Following these commands should upgrade and migrate your existing database.
## This is an example of going from 9.6.2 to 10.5 on OSX.
## Be sure to update any version numbers based on the versions you're upgrading from and to.
## Adapted from
## Backup your database, just in case (replace databasename with your actual DB name)
pg_dump databasename > ~/Desktop/dev_dump
## Stop postgres
wosephjeber / git_revision.js
Last active June 5, 2024 15:33
Get branch and commit names from Node (synchronously)
const { execSync } = require('child_process');
function executeGitCommand(command) {
return execSync(command)
.replace(/[\n\r\s]+$/, '');
const BRANCH = executeGitCommand('git rev-parse --abbrev-ref HEAD');
const COMMIT_SHA = executeGitCommand('git rev-parse HEAD');
wosephjeber / name_form.jsx
Last active October 6, 2019 22:19
Render Props vs Higher Order Components
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class NameForm extends Component {
constructor() {
this.state = { value: '' }