So you built your MVP on Heroku, you have tested your idea and it has gained tracking. Now your hobby database is reaching its limit and 30 minutes of downtime is no longer acceptable. You’ve decided to upgrade your database to the standard package. How do you go about doing that with minimum downtime?

I’ll show you how to provision a new database, create a back up of the existing database, and how to replace your hobby database with a new database.

You’ll need to have the Heroku cli installed in your local machine. Installing and configuring the cli is straightforward, but outside of the scope of this post. You can find more information here.

Now that you have the CLI installed let’s begin.

Find your database information

heroku pg:info

This should return the name of the existing database (e.g. DATABASE_URL)

Put the app into maintenance mode

Setting the app in maintenance mode will prevent any writes to the existing database.

heroku maintenance:on 

You have to do this in so that we create a clean backup.

Create a backup of the database

heroku pg:backups:capture DATABASE_URL --app awesome

While this is not necessary, it is better to have and not need, than need and not have.

Provision the new database

heroku addons:create heroku-postgresql:standard-0

Wait for the database to come online, this may take a while depending on the plan you’ve selected. In this example we’ve selected standard-0 but there are others available.

Copy data into the new database

Once the database is ready, you can copy the data from the existing database into the new database.

heroku pg:copy DATABASE_URL HEROKU_POSTGRESQL_GOLD_URL --app awesome

Promote the new database

Promoting the new database will make it the primary database for the application. You are almost done.

heroku pg:promote HEROKU_POSTGRESQL_GOLD_URL

Turn maintenance off

Allow new writes against the new database

heroku maintenance:off

Delete the old database

You are now running your app against the new database, and you can erase your old database. Keep in mind that its original name may have changed.

heroku addons:destroy HEROKU_POSTGRESQL_BRONZE_URL

🎉 Congratulations!

Your app is now running on a much better database, with less downtime and you can sleep well knowing your app is ready for more users.

Summary

I have showed you

• how to find your database information
• turn maintenance mode on
• create a backup
• provision a new database
• transfer data to the new database
• promote the new database

Resources

• Upgrading with pg:copy

The simple answer comes from a the concept called Inversion of Control, sometimes referred to as the Hollywood Principle.

Generally speaking a library provides you with functions that you call yourself. You as the developer are in control, you decide when to call the functions. A framework will execute your functions for you, it controls when your code gets executed — control is inverted.

Library

A popular library in the JavaScript ecosystem is jQuery which provides us with a number of methods (e.g. on) that we can use to manipulate the DOM, attach callback handlers, etc. As you write your code using jQuery, you are in control of when and how your functions get executed.

function handler () {
    console.log("button clicked");
}

$("button").on("click", handler);

In the above example we control when handler gets called, whenever the button element gets clicked.

Framework

Frameworks on the other hand are responsible for calling your code. Frameworks like React and Vue.js provide you with a set of instructions on how to write your code such that it can be called on by the framework themselves.

One important characteristic of a framework is that the methods defined by the user to tailor the framework will often be called from within the framework itself, rather than from the user’s application code. The framework often plays the role of the main program in coordinating and sequencing application activity. This inversion of control gives frameworks the power to serve as extensible skeletons. The methods supplied by the user tailor the generic algorithms defined in the framework for a particular application.
—— Ralph Johnson and Brian Foote

Let’s look an example with React. The following is just a functional component that displays the status of an user. It uses the useEffect hook to subscribe and unsubscribe to an API that checks the status of an user. You write the code but the framework calls it during its’ reconciliation phase.

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    // this is called by the framework
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      // this is also called by the framework
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Summary

• Inversion of Control is a key characteristic of a framework.
• In a library you are in control of when your code gets executed and how it gets executed.
• In a framework your code is executed by the framework, you build functionality that you would like the framework to execute given certain constraints.
• Inversion of Control is also referred to as the Hollywood Principle.

Resources

• InversionOfControl

What is the differenct between git merge and git rebase?

Over the years I’ve been asked this question by several people, either during an interview or by a less experienced developer on the team.

Atlassian’s Merging Vs Rebasing article does a fantastic job at explaining the differences and when to incorporate git rebase into a development workflow. However, I wanted to recount that lesson in my own words, and that is what I hope to do in this post.

First things first

Both git merge and git rebase are commands you would use to integrate changes from one branch into another branch. The main difference is that git merge will create a new commit in the commit history, whereas git rebase will not.

Merge Option

Merging is the safest way to integrate changes from one branch into another branch, however it will create a new commit called “merge commit” which will tie the history of both branches together.

Running git merge feature master would result in a structure that looks like this:

Merging does not re-write history or changes the existing branches, this is why it is considered to be a non-destructive operation.

The one caveat with git merge is that while you are working on your feature, master can be updated with changes that you would want to incorporate into your feature branch. Every git merge command you execute will create a new “merge commit”. This is why some people prefer to use git rebase.

Rebase Option

Rebasing solves the same problem as merging, but it does so by re-writing the commit history of the feature branch. It accomplishes that by re-applying the changes in the feature branch onto the tip of the master branch.

git checkout feature
git rebase master

As you can see this results in a much cleaner commit history, we no longer have the “merge commit” from git merge. However, there are trade-offs.

• You no longer have a history of when changes from master were integrated into the feature.
• You are prevented from pushing these changes to a remote origin if that remote origin has been changed by another user.

In order to avoid the second trade-off, your team must follow The Golder Rule of Rebasing.

The Golden Rule of Rebasing

You do not want to run git rebase on a branch that has been pushed to a remote origin where it has been worked on by more than one person. This will cause you much pain, since git rebase will re-write the commit history of that branch.

“Is anyone else looking at this branch?” If the answer is yes, take your hands off the keyboard and start thinking about a non-destructive way to make your changes

Summary

• git rebase and git merge are two ways of performing the same task of integrating changes from one branch into another.
• git merge is the safest and easiest way to accomplish that task.
• git merge will create a new “merge commit”, which can create noise in the commit history.
• git rebase can be used to keep a cleaner commit history, but it comes with trade-offs.
• Your team must follow The Golder Rule of Rebasing if you are going to be using git rebase in your workflow.
• DO NOT execute git rebase on a branch that has been made public, especially if others have contributed to that branch.

If you get stuck there is always oh Shit, Git!?!

Resources

• Atlassian Merging Vs Rebasing

License

This page has borrowed some of the images of the Atlassian Merging Vs Rebasing article which are licensed under CC BY 2.5 AU.

CustomEvent

The CustomEvent API is fairly straight forward:

const item = 'book'
const customItemSelectedEvent = new CustomEvent(
    'custom:item-selected', 
    { 
        detail: { 
            item 
        }
    })

In the code above we create a custom event with the name custom:item-selected. I generally like to namespace my events following a : so as to not cause any conflicts with any other 3rd party library. We are passing an item property in the detail property so that any consuming listener may have access to the value of item. One use case for this is when item is something that the enduser controls, say a list of items displayed on the page.

dispatchEvent

Once our customItemSelectedEvent is created, we need to fire it. Firing a custom event is as simple as attaching it to an HTMLElement and calling the dispatchEvent method on that HTMLElement.

const item = 'book'
const customItemSelectedEvent = new CustomEvent(
    'custom:item-selected', 
    { 
        detail: { 
            item 
        }
    })

const el = document.querySelector('.items')

el.dispatchEvent(customItemSelectedEvent)

In the example above we dispatch our customItemSelectedEvent on a hypothetical HTMLElement with a css class named items.

addEventListener

Consuming a custom event is no different than consuming any other Event. We simply add a listener on the HTMLElement that we trigerred the CustomEvent on, in our case .items.

// some other file

const el = document.querySelector('.items')
el.addEventListener('custom:item-selected', (e) => {
    console.debug('Selected Item:', e.detail)
})

That is pretty much it, those are the steps for creating your custom event. I’ve used this pattern whenever building a custom library for a project, or whenever an application I am working in has two separate codebases (e.g. legacy JavaScript files using bootstrap, and new files using React.)

I have found that creating boolean variables that hold the value of an expensive or complicated expression makes it easier to read and understand code.

Let’s look at a trivial piece of code, written in JavaScript, and see how assigning complex conditions to a variable makes it much easier to understand and read the code. Keep in mind this code is not something you’d use in production, I’m only using this to illustrate the point.

Suppose there is a function that takes an argument called drink and inside of this function we check what type of drink it is and return an emoji of a coffee, tea, or milk.

/* Assume COFFEE, CAFE, LATE, MOCHA, TEA, etc are imported into this module. */

function getDrinkEmoji(drink) {
    if (drink === COFFEE || 
        drink === CAFE || 
        drink === LATE || 
        drink === MOCHA) {
        return '☕';
    } else if (drink === TEA || 
               drink === BLACK_TEA || 
               drink === GREEN_TEA || 
               drink === OOLONG_TEA) {
        return '🍵';
    } else {
        return '🥛';
    }
}

Reading through code like that requires you to hold quite a lot in your head.

Now let’s look at the same code but having assigned the expression to a variable.

function getDrinkEmoji(drink) {
    const isCoffee = drink === COFFEE || 
                     drink === CAFE || 
                     drink === LATE || 
                     drink === MOCHA;
    const isTea = drink === TEA || 
                  drink === BLACK_TEA || 
                  drink === GREEN_TEA || 
                  drink === OOLONG_TEA;

    if (isCoffee) {
        return '☕';
    } else if (isTea) {
        return '🍵';
    } else {
        return '🥛';
    }
}

Here we can more quickly understand what the expressions inside of the if and else if are evaluating to.

This pattern makes a lot of sense when you find yourself evaluating the condition multiple times. When you do it once you can just reference the variable again when you need it.

In this next example, our function receives an array of drinks, we use the Array.some method to test whether the drinks include a coffee or a tea and then return an emoji.

function getDrinksEmoji(drinks) {
    const hasCoffee = drinks.some(drink => drink === COFFEE || 
                                           drink === CAFE || 
                                           drink === LATE || 
                                           drink === MOCHA);
    const hasTea = drinks.some(drink => drink === TEA ||
                                        drink === BLACK_TEA || 
                                        drink === GREEN_TEA || 
                                        drink === OOLONG_TEA);
    const hasCoffeeAndTea = hasCoffee && hasTea;

    if (hasCoffeeAndTea) {
        return '☕ + 🍵';
    } else if (hasCoffee) {
        return '☕';
    } else if (hasTea) {
        return '🍵';
    } else {
        return '🥛';
    }
}

We had to execute the expensive computation of testing if the drinks include a coffee or tea once, we referenced that expression multiple times in our code without additional performance penalty, and the code is still easy to read and understand.

Conclusion

Conditional statements are an invaluable tools in software development, they provide us with flow control to determine the output of our programs. You’ll inevitably run across them when writing and reading code. If you are the author of the code, or reading code that you have control over, do yourself a favor and assign your expensive and complicated condition statements to variables with meaningful names. Doing so will free up space in your head and your code will be much easier to read and understand.

Links

• JavaScript — Conditional Operators
• Conditional (computer programming)
• How To Write Conditional Statements in JavaScript
• Conditional Execution in C++
• Predicate (mathematical logic)

Thanks to Greg Timmerman, and @nicholascloud for reading a draft of this post. @nicholascloud also gave this pattern a name (expression reduction).

Problem

You are building an educational website and want to create a simple calculator for students to use. The calculator will only allow addition and subtraction of non-negative integers.

Given an expression string using the “+”, “-“ operators like “5+16-2”, write a function to parse the string and evaluate the result.

Constraints

• Only allow addition and subtraction of non-negative integers.

Solution

const calculate = (expression) => {
  const numbers = expression.split(/[+,-]/).map(n => Number(n)); // transform String into Number
  const operators = expression.split(/\d/).filter(op => op !== '');
  let result = 0;

  // perform calculation
  numbers.forEach((number, id) => {
    const operator = id === 0 ? '' : operators[id - 1]; // no operator to apply to first number
    switch (operator) {
      case '+':
        result = result + number;
        break;
      case '-':
        result = result - number;
        break;
      default:
        result = number;
    }
  });

  return result;
};

Try it

Explanation

Given the constraints we are working with, I can build my calculate function without having to check for negative numbers, and mathematical expressions that do not involve integers.

My first task is to figure out what numbers we are operating on, so I use String.split to separate the full expression into substrings of just the numbers by passing the regular expression (/[+,-]/) as the separator parameter. Since split() returns an Array of strings, I can call the Array.map method to transform my Array of strings into an array of Numbers. This will allow me to operate on the numbers.

In order to get the list of operators from the expression, I use us split again, but this time I pass the regular expression (\d) as the separator parameter. I am basically telling split to build a new array using integers as the breaking point. The result of which is passed to a Array.filter so that I can clean up all of the blank array elements.

At this point I should have everything I need to evaluate the expression passed into calculate.

I’ll use Array.forEach to perform an operation on each of the integers in the given expression. Inside of the forEach callback method I’ll grab the operator from the list of operators with one caveat. I do not want to use the first operator on the first number from the numbers array. We’ll perform the operations after the first number, so that we have an accurate result.

Since the operator is of type String I cannot use that to calculate an expression (e.g. 1 + 1), because the + will be treated as a string. I’ll use a switch statement and map the string + with the Unary plus, and will do the same for the - with the Subtraction operator. My default case assigns result to number since this will be the first number in the expression.

That is about it, once we’ve iterated over all of the numbers in the expression, we return the result.

The following are some alternatives for those who value security and privacy. These services use a web technology called WebRTC, which provides peer-to-peer encryption out of the box. If your team or group of friends is small you can use the following alternatives without sending sensitive information to a server. Once you exceed a certain number of participants different services will begin to route traffic through a server.

Daily.co

Daily.co offers easy, flexible in-browser video calls that run in your web browser. There is no software to download. When you sign up for their free plan, you can start calls on the browser with up to 50 participants. When there are 4 or fewer people on the call all traffic is routed between the participants. Once more participants join the call, there are bandwidth limitations which causes the services to switch from p2p to relayed connections. It first tries to send UDP traffic through their servers, if that fails it switches to TCP-tunneling, while preserving encryption to and from the server

You can read more about how daily.co handles privacy in this post.

Whereby

Whereby is another service that offers in-browser video calls. Their free version can support up to 4 participants, and you have access to 1 meeting room. They are a European company and might be a better option for those in the E.U. It does seem like chat messages do pass through their servers before reaching the other participants.

Read more about their data storage and security here.

Jitsi

For those of us who are a little more technical, jitsi offers an open-source video conferencing platform that you can install in your own server. The whole project is available on GitHub. If you feel like rolling your own solution, this is the way to go.

Resources

• WebRTC
• WebRTC Security Architecture

One of the biggest advantages of using zsh are the plugins and functions that you can use to amplify your terminal powers. I’ve been using oh-my-zsh to manage my zsh configuration, and recently I started using zplug to manage all of the plugins and customizations I use.

A next-generation plugin manager for zsh

zplug offers an intuitive and fast way to manage everything I rely on when using zsh. I’ve gone so far as to use it as the main form of loading plugins and other customizations for zsh. I’ll show you a brief overview of how I manage the plugins I use.

Installing

You can install zplug by running the following script.

curl -sL --proto-redir -all,https https://raw.githubusercontent.com/zplug/installer/master/installer.zsh | zsh

Configuring

Once installed I make sure to update my .zshrc with a zplug section that will load all of the necessary customizations I want.

Loading oh-my-zsh plugins

I still borrow from the vast array of plugins and functions the oh-my-zsh community has provided to the world.

# Load oh-my-zsh plugins
zplug "plugins/brew",   from:oh-my-zsh
zplug "plugins/docker",   from:oh-my-zsh
zplug "plugins/docker-compose",   from:oh-my-zsh
zplug "plugins/git",   from:oh-my-zsh
zplug "plugins/github",   from:oh-my-zsh
zplug "plugins/osx",   from:oh-my-zsh

Loading theme

I use the dracula theme, and loading it is a simple as:

# Load theme file
zplug "dracula/zsh", as:theme

Install Plugins

After adding the zplug section to my .zshrc I make sure to add the following to the end of that section, so that zplug makes certain to install all of the plugins I’ve specified.

# Install plugins if there are plugins that have not been installed
if ! zplug check --verbose; then
    printf "Install? [y/N]: "
    if read -q; then
        echo; zplug install
    fi
fi

Source plugins

Finally, you can add the following so the plugins can be sourced and added to the $PATH

# Then, source plugins and add commands to $PATH
zplug load

Links

• Installing ZSH
• Installing zplug with Homebrew
• brew plugin
• docker plugin
• docker-compose plugin
• git plugin
• github plugin
• osx plugin

I’ve come across this challenge many times, so I’ve decided to post my default solution to this particular variation.

Problem

Design an function that, given a string, returns true if the string is a palindrome and false if it is not.

Constraints

1. The string may contain spaces and punctuation, but they are not considered when detecting palindromeness. Just ignore them.
2. The string may contain numbers, but must contain at least one letter.
3. Consider all alphanumeric characters. The string must be the same backwards as it is normally.
4. When developing your algorithm, try to take performance into account.

Solution

function isPalindrome(phrase = '') {
  // must contain at least one letter.
  if (!/[A-Za-z]/i.test(phrase)) return false;
  
  const sanitized = phrase.replace(/\W/g, '') // strip spaces and punctuation
                          .toLowerCase();     // normalize
  const reverse = [...sanitized]              // break letters into array
                      .reverse()              // reverse letters
                      .join('');              // put it back into string
  return sanitized === reverse;
}

Try it

Breakdown

The function takes one argument phrase and it uses the RegEx.test method to make sure that we have at least one letter, per the requirements.

Assuming we have a phrase that has at least 1 letter, I strip all spaces and punctuation from phrase using String.replace with the regular expression (\W) which is equivalent to [^A-Za-z0–9_]. Next, we use String.toLowerCase to transform this sanitized string into its’ lower case version. This will facilitate the comparison with the original phrase.

After storing the normalized string (e.g. sanitized), I move on to reversing that string so that I can compare it with the “original”. I use the spread syntax to convert each letter into an array of letters.

I do not use String.split because the string is not split between each user-perceived character (grapheme cluster) or between each unicode character (codepoint) but between each UTF-16 codeunit.

Once I have every character in an array form, I can use the Array.reverse and Array.join methods to reverse the order of the characters and produce a string in reverse order.

Finally we can return the result of a condition that tests if the normalized version of phrase is equal to the reversed version of that normalized version.

Link

How do you get a string to a character array in JavaScript

Explanation

The Array.filter method returns a new array containing all elements that pass a predicate. With that in mind we can use the Array.indexOf method, which returns the first index at which a given element can be found in the array, inside of the predicate in order to test whether or not the current index is the same as the first index of the element we are iterating on.

Since Array.filter’s callback accepts three arguments (element, index, array) we’ll use these values to make our predicate return true only if the current element’s index is the current index.

Example

const sample = ['_conf.scss', '_mixin.scss', '_mixin.scss', '_mixin.scss', 'main.scss'];

// Return true when the indexOf(element) is the current index, otherwise we've seen element already.
const filtered = sample.filter((element, index, array) => array.indexOf(element) === index);
// => ['_conf.scss', '_mixin.scss', 'main.scss']

Try it