wosephjeber

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) {
      clearInterval(intervalTimer);
      clearTimeout(timeoutTimer);

wosephjeber

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

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

function getAllRegexMatches(regex: RegExp, string: string) {
  if (regex.constructor !== RegExp) {
    throw new Error('not RegExp');
  }

  const matches = [];
  let match = regex.exec(string);

  if (regex.global) {
    while (match) {

wosephjeber

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)

    COLOR_CONTAINING_PROPERTIES.forEach(property => {

wosephjeber

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

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

## 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 https://stackoverflow.com/questions/24379373/how-to-upgrade-postgresql-from-version-9-6-to-version-10-1-without-losing-data

## Backup your database, just in case (replace databasename with your actual DB name)
pg_dump databasename > ~/Desktop/dev_dump

## Stop postgres

wosephjeber

const { execSync } = require('child_process');

function executeGitCommand(command) {
  return execSync(command)
    .toString('utf8')
    .replace(/[\n\r\s]+$/, '');
}

const BRANCH = executeGitCommand('git rev-parse --abbrev-ref HEAD');
const COMMIT_SHA = executeGitCommand('git rev-parse HEAD');

wosephjeber

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class NameForm extends Component {
  constructor() {
    super()

    this.state = { value: '' }
  }