Basic Redux setup

Redux, boy. I don’t know of anything that has a steeper learning curve. Root reducers? Store factories? mapStateToProps? Higher-order functions? Connected components? Action creators? Thunks? Dispatch? For someone who’s feeling smug about getting a hang of basic React, it is a lot of moving parts to get a grip on. Anyways, here’s a basic cheat-sheet for getting started.

First, create a store and include Thunk in store.js:

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'

const store = createStore(

export default store

Continue reading “Basic Redux setup”

Regular expressions shenanigans

I’m working on an app for exploring the Dewey Decimal System. It’s based on three-digit numbers in which each number is a different level of specificity. The 700’s are arts, 770’s are photography, 774 is holography. I started with a text file with all the codes and their descriptions and made a flat array of objects like

  { "number": "000", "description": "Generalities " },
  { "number": "001", "description": "Knowledge " },
  { "number": "001.5", "description": "Communications " },

Which worked fine for searching, but we also want to browse. That is, see the 10 top categories, select one, see its subcategories, etc. So what’s required is a tree of nested objects. Continue reading “Regular expressions shenanigans”

Adding a ‘close’ button

function goBack() {
  if (document.referrer == '') {
  } else {
    window.location.href = ''

I wanted to create a button with a “close” icon for my website that would make the feeling of going back to the home page feel light and easy. The homepage is fairly long, so I also wanted it to return to the same scroll position it was in when the user clicked. Solution, <a href="javascript:history.back()">Back</a>. Problem is, what if someone got to the page by following a link from another site, or what if I want to email someone a link to a page? Then, we want the button to be a regular link to the homepage. Result above, activated by <a class="close-button" href="#" onclick="goBack(); return false;" ></a>. This CSS makes a nice fixed circle with a close ‘X’ icon in the top right corner:

Continue reading “Adding a ‘close’ button”

Deploying a Laravel application to DreamHost shared hosting, 2018 edition

Unfortunately, this sort of information changes regularly. Google “dreamhost laravel” and you’ll get some articles from a few years ago which, while helpful, were not sufficient for me. A few examples:

Shockingly, DH’s Knowledge Base is silent about Laravel. Here’s what ended up working for me. If you’re trying to follow these instructions and something is unclear or does not work, please reach out.

Continue reading “Deploying a Laravel application to DreamHost shared hosting, 2018 edition”

Slideshow with updating URI location

  var fadeDuration = 2000;

  $(function() {
    var $slides = $('#slideshow > div');

    var currentSlide = Number(location.hash.slice(1));

    $ {
      currentSlide ++;
      if (currentSlide == $slides.length) currentSlide = 0;
      location = "#" + currentSlide;

This code is pretty rough, but it does two notable things. First, a slideshow that advances on click with a fade from one div to another. More interestingly, it sets the URI with the slide number, and retrieves the number on load. In other words, it’s an bare-bones implementation of a persistent URI system.