Working with the browser's location API

I was working on a React project recently that made use of the Google Maps API. The app allows a user to find various types of places of interest near them such as restaurants, banks etc.

It makes use the HTML5 Geolocation API to find the location of a user. Doing so is surprisingly simple; it's just a single line:


Of course, you'll invariably use more code for error handling, and callbacks.

Here's an example:

How to turn a schema into a database

In my last blog post, I described how to create a database schema using MySQL Workbench.

In this post, I'll describe how you can create an actual database from the schema.

Here is an example schema I created with MySQL Workbench of a fictitious video streaming company. As you can see there are 7 tables: Users, Viewings, Videos, Tiers, Providers, Bills and Contacts. For the sake of simplicity, I'm pretending that we live in a perfect world where security issues, PCI compliance etc. are not an issue.

React Q&A

What are props?

Props are properties that are passed in when you call a child component. Think of them like HTML attributes, or arguments in Javascript. Props are an object which means they are stored as key value pairs. The key is the part before the equals sign, the value is the part afterwards.

<MyOutput text="Hello world" />

In this case, the 'MyOutput' component will have access to a the props objects which looks like this:

Creating a custom HTML5 video player

I'm currently at challenge 11 of Wes Bos's excellent Javascript30 course. The challenge is to build a custom video player. There isn't any explanation as to how the code, or even video functionality in the browser actually works. So here is some information which will help you complete the challenge:

HTML5 browsers ship with a built-in video player.

Invoking the player is as simple as using the video tags with the controls property like so:

CSS Variables (aka CSS Custom Properties)

Variables serve a useful purpose in programming. They allow a programmer to define a value or piece of functionality in one place, and then easily re-use it elsewhere in the program. If the program needs to change, that change can then be made in one place instead of many. They also allow code to take in and respond to input supplied by another source.

Another benefit of variables is encapsulating complex programming code in simple English.


Flexbox is a layout model that allows you to easily create a responsive page. You use Flexbox by setting a container to be flex-container.

Setting an element as a flex container is as simple as setting the the display property to flex. This is usually done like this:

display: flex;

If you want to set an inline element as a flex container, you would do it like this:

display: inline-flex;


Setting up Git on a new computer

If you start working with a new computer, or a freshly formatted operating system, there's a couple of things that you need to do to get Git up and running properly.

Setting up your name:

Run the following command and substituting your name between the quotation marks of "my name":

git config --global "my name"

To verify your name is set, run:

git config --global

This will return your name if it's set.

Set your email address globally:

Subscribe to