git flow

Source control is a must-have for any team working on a project. It provides so many things, including accountability, code reviews, blah blah, and so much more! IMO, the best part is working in branches that can be merged to other branches. In a typical project you have 2 main branches: master and develop. Master should reflect what is in production and develop is the current updates slated to go live at some point in the not too distant future. Beyond those main branches, you may have a hotfix branch with a bug fix that needs to be pushed ASAP, or a feature branch with some new feature. All of those branches can get tangled and complicated. Enter git flow.

Git flow is a command line tool to help with branches and branching for git repos. It’s really simple to setup gives you a few tools that make merging branches to master easier! To get started, install git flow and then run this in your repo root:

git flow init

This init process will ask some simple questions, most can be left as the default unless you have specific naming conventions for branches. Once that is done, you can do any of the following.

Create version 1.0.0

Let’s say you’d like to merge develop into master and tag it as version 1.0.0. Perform the following commands:

#Start Release 1.0.0, merging develop into master
git flow release start 1.0.0

#Update your version file
vim version

#Commit the version file update as the 'Version Bump'
git add version
git commit -m 'Version Bump'

#Finish Release 1.0.0
git flow release finish 1.0.0

#Push it, including tags
git push --follow-tags

Feature Branch

When creating a new feature that may not go to production for a while, you should do the work in a feature branch.

#Create a new feature branch from develop
git flow feature start report-xyz

#Make changes and commit
vim report-xyz
git add report-xyz
git commit -m 'Adding report-xyz'
git push

#Finish the feature, merging it into develop
#This can also be done via a PR for code reviews
git flow feature finish report-xyz

Hotfix Branch

There’s a bug on production! Going to have to fix it, based on the code in master. Once it’s fixed both master and develop need to have that update.

#Create a new hotfix branch from master
git flow hotfix start bad-profile-image

#Make your changes
vim profile
git add profile
git commit -m 'Fix for profile image'
git push

#TODO Verify that all is well

#Once all is good, do a 'Version Bump'
vim version
git add version
git commit -m 'Version Bump'

#Finish the hotfix, merging it into develop and master
#This can also be done via PRs for code reviews
git flow hotfix finish bad-profile-image

That’s all for today. Happy Coding!!

Re-using custom npm modules

From time to time, there will be a need to include a customized node module across multiple projects. This may be because the original has a bug and you know how to fix it, or simply creating a new re-usable module. Luckily, there’s an easy way to do this using github. If you’re new to github, I’d suggest reading up on it before proceeding.

Step 1: Push your module to github

Prepare your module, as usual. Instead of sending it to npm, just push it up to a new github repo. If you’re working on fixing or updating a module that already exists, you can just fork the module’s github repo and work in your fork!

Step 2: Installing from github

This is really easy:

npm install --save username/repo

Here’s a real example:

npm install --save barrygilbert/mysql-restapi

You can also reference a specific branch:

npm install --save barrygilbert/mysql-restapi#master

Step 3: Do your thing!

Now that you can install that module into multiple projects, go code it up!

Playing Video Files on Your TV with minidlna

One of my presents from Christmas a few years back was a Sony smart blu-ray player. It was marketed as something that easily streams files from your computer. That is absolutely true for anyone that runs Windows, just point and click. With Ubuntu, it’s a bit more complicated. Enter minidlna.


First thing, install minidlna. Open a terminal (Ctrl-Alt-t) and type this in:

sudo apt-get install minidlna

If you’d rather use the package manager, just search for minidlna.


The configuration file is editable by running this in the terminal:

sudo gedit /etc/minidlna.conf

There are 2 settings to note: media_dir and friendly_name. The names used are pretty explanatory. Here’s an example of what to update:

# Path to the directory you want scanned for media files.

# Name that the DLNA server presents to clients.

Save and close the file. On the terminal run this to refresh minidlna:

sudo service minidlna restart

That’s it! minidlna is all setup to server the files and folders in your media_dir.

Facebook Cover Photos

Personalizing your Facebook Cover Photo is easy, once you know how to search for one. Here’s a quick guide to help you find exactly what you want:

  1. Go to Google Image Search
  2. Search for something, for instance: Fringe
  3. On the left, click ‘Exactly…’ under Any Size
  4. Enter a width of 851
  5. Enter a height of 316
  6. Now all the images in your results are the perfect size for your Facebook Cover.
  7. Keep on searching to find something uniquely you!

Now, if there’s a watermark/logo, you can remove it in Gimp or Photoshop. Or you can just pick an image without a mark in it.

Happy Facebook-Stalking! j/k lol

HTML Post #5: Tables & Whitespace

Tables  are one of the fundamentals of html. At one point in time, everyone’s site was built inside a table. It was really easy to do this. Also, whitespace, including spaces, tabs, and new lines, don’t matter much in html, but there are ways to get the whitespace you desire.


Here’s a 2×2 basic table:

<table border="1">
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
  <td>Row 2, Cell 1</td>
  <td>Row 2, Cell 2</td>

Which looks like this:

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Note that I put border=”1″. If I put border=”0″, no border would be added, like this:

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2


Each cell in the table can span across, down, or both directions. This is very similar to the merge cell function in Excel. There are a few points to keep in mind. When you span several columns, the next cell in the html code will be the next cell on the screen. Likewise, when you span several rows, you have to skip that cell on the following row(s). Here’s an example:

<table border="1">
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span 2 rows. I span 2 columns across.
I am a single cell. I am a single cell.


Did you notice that the table in the last example could use some text alignment? Maybe vertically align the rowspan cell to the top? Maybe center the colspan cell? How about making the rowspan cell into two lines? Let’s take a look.

Here’s how to vertically align to the top:

<table border="1">
  <td rowspan="2" style="vertical-align: top">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span 2 rows. I span 2 columns across.
I am a single cell. I am a single cell.

You could also set vertical-align: bottom for the bottom or middle for the middle.

Centering the colspan cell:

<table border="1">
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2" style="text-align: center">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span 2 rows. I span 2 columns across.
I am a single cell. I am a single cell.

Other possibilities are “left”, “right”, and “justify”.

And finally, inserting a line break:

<table border="1">
  <td rowspan="2">I span<br />2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
I span
2 rows.
I span 2 columns across.
I am a single cell. I am a single cell.

HTML Post #4: Divs & Classes

Div Tags

A div tag is very similar to a paragraph tag. The difference from a rendering perspective is that paragraphs have a padding at the top and bottom by default. You can use div tags just like p tags.

Float Style

A div, and other tags, can have a float style. This can float the element on the left or the right. Here’s an example:

<div style="float: right">This floats on the right</div>
<div style="float: left">This floats on the left</div>
<div style="clear: both">This displays under the floats</div>
This floats on the right
This floats on the left
This displays under the floats

Yes, “clear: both” will clear all the floats above it. You can do “clear:left” to place is below the lowest left floating element. Float styles can be used with images as well.

CSS Classes

Styles can be declared once and referred using the class attribute. These styles can be declared using a stylesheet file or a style element. A stylesheet is better because it can be used by multiple pages by adding one line inside the html header:

<link rel="stylesheet" type="text/css" href="" />

If you want to just play a little bit, you can put a style section in the html header:

<style type="text/css">
/* This is a style comment. */

Put your stylesheet here in the html header!


You can take this:

<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>

And turn it into this:

<style type="text/css">
.left-red { float: left; color: red; }
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>

Note that the class in the style starts with a period and in the div doesn’t. This is because you are telling the browser that left-red is a class. If it started with a letter, the browser would think it was an element, like a “div” tag. Also, curly braces surround what would be in the style attribute.

Now, go play around for 30 minutes with some html. If you have a question, feel free to ask.

HTML Post #3: Images

Image Tag

<img src="" alt="Example Image" />

That will give you just an image, plain and simple. The alt tag is important for people who have images disabled and for search engines. Here’s how to center or left align an image:

<img src="" alt="Centered Image" align="center" />
<img src="" alt="Left Aligned Image" align="left" />

When using an image inside a link, there will be an automatic blue broder. To remove this:

<a href="">
<img src="" alt="Link Image" border="0" />

Background Images

We’ve all seen images used as backgrounds. It’s fairly simple. To put a background image for the whole page, change the opening body tag to this:

<body style="background: url('image.jpg');">

You can change the repeat by adding the repeat-y keyword like this:

<body style="background: url('image.jpg') repeat-y;">

The image will fill the page top to bottom, but not left to right. There are plenty of options for you background image. Here are the repeats:

  • repeat — tiled to fill completely (default)
  • repeat-y — repeats top to bottom
  • repeat-x — repeats left to right
  • no-repeat — does not repeat

You can also make it scroll with the page or fixed to the screen and does not scroll. Scroll is the default.

You can also set the background of a p, or paragraph, tag the same way.

<p style="background: url('image2.jpg');">I've got a background image!</p>

The full image will not show if there is not enough text.


You can set the background color, similarly to using an image:

<p style="background-color: red;">I've got a background color!</p>
<p style="background-color: red; color: yellow;">I've got a foreground color!</p>

In the second example, the text will be yellow on red, while the first is black on red.

HTML Post #2: Lists & Links


There are two basic types of lists in HTML: ordered and unordered. Unordered lists are bullet lists. Ordered lists are numbered. Each item in the list is housed in between opening and closing “li” tags.

Ordered Lists

A simple numbered list is surrounded by opening and closing “ol” tags. Here is a quick example:

<li>Step 1.</li>
<li>Step 2.</li>

This looks like:

  1. Step 1.
  2. Step 2.

You can use a different marker, just as lowercase letters, uppercase letters, and roman numerals.  This is done by styling the list. Here’s how to do roman numerals:

<ol style="list-style-type: upper-roman">
<li>Step I.</li>
<li>Step II.</li>
  1. Step I.
  2. Step II.

Here are the different ordered list style types:

upper-letter Uppercase Letters
lower-letter Lowercase Letters
upper-roman Uppercase Roman Numerals
lower-roman Lowercase Roman Numerals
upper-greek Uppercase Greek Letters
lower-greek Lowercase Greek Letters
decimal Regular Numbers
decimal-leading-zero Leading Zero

Unordered Lists

These are almost identical to ordered lists. Instead of “ol”, you use “ul”. The default list style type is a bullet. Here are the unordered types:

  • none
  • circle
  • disc
  • square

Here’s that unordered list in HTML:



A link is super easy to do.  It’s an “a” tag.  The tag has an “href” attribute that contains the url, just like the “style” attribute contained the styling information. Here’s a quick example:

<a href=""></a>

Which would like like:

You can also tell the browser to open the link in a new window/tab by using the “target” attribute:

<a href="" target="_blank"> in a new window/tab</a> in a new window/tab

You can even style the “a” tag to set the color and  remove the underline:

<a href="" style="color: black; text-decoration: none"></a>

Yes, you can set the color of any text with that style attribute. Also note that multiple styles are separated by a semicolon, and it does not matter the order of the styling when put in the “style” attribute, so long as there’s nothing conflicting.

Well, that’s pretty much it for lists & links. The next post is all about images, so check back!

HTML Post #1

More and more people are starting their own websites. Whether it be a blog, an e-commerce site, or a tribute to their pet, learning HTML will help tremendously. Sure, there are those nice little editors, but they cannot do everything. Plus, sometimes you’ll want to tweak that HTML so everything displays properly. In this series, I’ll cover the basics of a webpage, images, tables, lists, styles, and some other topics.

Base Document

I have setup a base HTML document to show the basics that will be covered in this series. You can find it here. It contains a lot of comments which are ignored by the web browser. An HTML comment starts with “<!–” and ends with “–>”, quotes for clarity.


Tags are special markers that tell the web browser how to display the page. Tags always start with a less than symbol “<” and  end with a greater than symbol “>”. There are three types of tags: opening, closing, and self-closing. Closing tags start with “</”. Self-closing tags end with “/>”. Every opening tag should have a closing tag. An HTML document will display everything between the “<body>” opening tag and “</body>” closing tag.


All HTML documents should start with a DOCTYPE tag. This tag tells the browser which version of HTML you are using and determines how it will render the page. There are serveral different doctypes, but for this series, we’ll be using XHTML Strict.

Basic Tags

The basic tags are:

  • html
    This should open immediately after the doctype and close at the very end of the file.
  • head
    This follows the opening html tag. It contains the title, meta data, and links to stylesheet and javascript files.
  • body
    This follows the closing head tag. Its contents will display as the webpage. Update: Javascript should be placed as close to the end of the bottom as possible.
  • title
    This contains the title of the page, it shows in the tab and/or the titlebar of the browser.
  • p
    This is a paragraph. Each paragraph will have a bit of whitespace before and after them.
  • b
    This bolds the text between the opening and closing b tag.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<title>This is just a sample</title>
<p>This is a paragraph.</p>
<p><b>This is a bold paragraph.</b></p>
<p>There is only <b>one</b> word bold in this paragraph.</p>
<p>It is <b>important</b> to close tags in <b>reverse</b> order they were <b>opened.</b></p>


OK, so you bought a new CD player and looking at the box, you see MP3 CD. What is an MP3 CD, you ask. It’s just a CD with MP3s on it. No, this is not the same as a traditional audio CD. Let’s look at the differences.

Traditional CD MP3 CD
Playtime 80 Minutes Max 1450 Minutes Max
Bitrate 1200 Kbps 64-320 Kbps
Number of Tracks 99 ?????
Embedded Track Info Yes Yes
Audio Format WAV MP3
Burnable Yes Yes
Computer Playable Yes Yes

To burn an MP3 CD, just put the mp3s directly on the cd. In windows, you can drag the files directly to the CD drive in my computer. Then right click on the CD drive and select “Burn these files…”.