Sample Angular Website

Leave a comment Standard

So I’ve seen a lot of people using AngularJS but I see very few examples of a website made using it. That’s why I decided to post an example website to give you an idea of what a full website looks like using AngularJS. It has samples of some of the things you’ll commonly find in a website made entirely with Angular:

  •  Navigation & Routing
  • Providers & Directives
  • Controllers & Config Blocks
  • Data Calculations
  • Filtering

Sorry if you’re looking for Angular 2.0, this was made with Angular 1.5.8. View, fork and/or edit the files on Plunker!

PHP Tutorial: Run Multiple Tic-Tac-Toe Game Instances (no database required)

Leave a comment Standard
Multi Instance Tic Tac Toe

Someone asked me about this in a comment recently so this post is specifically for you but I’m sure there are other people who will benefit from it as well. If you haven’t read the tic-tac-toe game tutorial yet then you’ll need to start there. This tutorial assumes you’ve already completed that and now you want to run two or more tic-tac-toe boards on the page simultaneously.

Or if you want to skip this tutorial you can
download the source code or try the working example


The neat thing about classes is that you can use them to create multiple instances with varying states and data even though they all have the same methods and properties. Think about a monster RPG game. Each monster has a different name and breed and picture and strength — but they all have those things in common even though the values are different. Our tic tac toe class works the same way, we can create multiple instances of the game and they’ll each have different states — whose turn it is, which places on the board are filled — but they’ll all work the same way. In order to run multiple instances of our tic tac toe games we’re going to have to update our games so they can be uniquely identified by an instance number. The reason for this is so that when you play the game on instance 1 we know you want to update the state of instance 1 when you submit the form. If we didn’t give each game it’s own instance identifier then every time you made a move on one board it would reflect that move on all instances of the board at the same time.

Creating The Instance Form

Let’s change our index file so that we’re allowing the user to choose how many instances of the game they want to play. We start by removing where we created a new game from the top of the file. Since we want multiple instances we need to create the new game for every instance we have and since we don’t know how many instances we have at this point it needs to move down in our code base. Now once the user has selected how many instances of the game they want to play we need to dynamically generate that many. Using a for loop we loop through the number of instances they selected and create a game for each of those instances in our new $_SESSION[‘game’] array. Before this was only a single game, making it an array means we now have multiple games in our game session variable. Finally we create a new game instance and tell it to start playing. This is what our new index file looks like.

* File: index.php
* Author:, LLC
* Created: 4.6.2015
* License: Public GNU
* Description: PHP/MySQL Version of 2 Player Tic Tac Toe
* that allows playing multiple instances of the game at the same time

//this will store their information as they refresh the page

define('MAX_INSTANCES', 5); //the maximum number of games they can play at the same time

//trying to set number of instances to play
if (isset($_POST['instances'])) {
 if (is_numeric($_POST['instances']) && $_POST['instances'] > 0) {
 $_SESSION['instances'] = $_POST['instances'];

 <title>Tic Tac Toe - Multiple Instances</title>
 <link rel="stylesheet" type="text/css" href="inc/style.css" />
 <div id="content">
 <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
 <h2>Let's Play Tic Tac Toe!</h2>
 //we need to know how many instances to create
 if (!isset($_SESSION['instances'])) {
 <p>How many games would you like to instantiate?</p>
 <select name="instances">
 for ($i = 1; $i <= MAX_INSTANCES; $i++) {
 echo "<option value=\"$i\">$i</option>";
 <input type="submit" name="submit" value="Let Me Play!" />
 } else {
 echo "<table width=\"100%\">
 for ($i = 1; $i <= $_SESSION['instances']; $i++) {
 //if they haven't started a game yet let's load one
 if (!isset($_SESSION['game'][$i]['tictactoe'])) {
 $_SESSION['game'][$i]['tictactoe'] = new tictactoe($i);
 echo "<td>";
 //play the game passing it the game data for that instance
 echo "</td>";
 echo "</tr>

Adding Instances To The Class

The first thing we need to do is add an instance identifier to our tictactoe class. Since we need to know which game the player is trying to play adding a $this->instance value to our class will let us keep track of which game is which. Once that’s done we update our checks for $_POST data to make sure we’re using the correct data for the correct instance. Voila! Our games now only update when they see $_POST data that pertains to them. Our new tictactoe class file looks like this:

* File: oop/class.tictactoe.php
* Author:, LLC
* Created: 1.31.2012
* License: Public GNU
* Description: tic tac toe game

class tictactoe extends game
 var $instance = 0; //the instance of this game
 var $player = "X"; //whose turn is
 var $board = array(); //the tic tac toe board
 var $totalMoves = 0; //how many moves have been made so far 

 * Purpose: default constructor
 * Preconditions: none
 * Postconditions: parent object started
 function tictactoe($instance)
 * instantiate the parent game class so this class
 * inherits all of the game class's attributes 
 * and methods
 $this->instance = $instance;
 * Purpose: start a new tic tac toe game
 * Preconditions: none
 * Postconditions: game is ready to be displayed
 function newGame()
 //setup the game
 //reset the player
 $this->player = "X";
 $this->totalMoves = 0;
 //reset the board
 function newBoard() {
 //clear out the board
 $this->board = array();
 //create the board
 for ($x = 0; $x <= 2; $x++)
 for ($y = 0; $y <= 2; $y++)
 $this->board[$x][$y] = null;
 * Purpose: run the game until it's tied or someone has won
 * Preconditions: all $_POST content for this game
 * Postconditions: game is in play
 function playGame($gamedata)
 if (!$this->isOver() && isset($gamedata[$this->instance . 'move'])) {
 //player pressed the button to start a new game
 if (isset($gamedata[$this->instance . 'newgame'])) {
 //display the game
 * Purpose: display the game interface
 * Preconditions: none
 * Postconditions: start a game or keep playing the current game
 function displayGame()
 //while the game isn't over
 if (!$this->isOver())
 echo "<div id=\"board\">";
 for ($x = 0; $x < 3; $x++)
 for ($y = 0; $y < 3; $y++)
 echo "<div class=\"board_cell\">";
 //check to see if that position is already filled
 if ($this->board[$x][$y])
 echo "<img src=\"images/{$this->board[$x][$y]}.jpg\" alt=\"{$this->board[$x][$y]}\" title=\"{$this->board[$x][$y]}\" />";
 //let them choose to put an x or o there
 echo "<select name=\"{$this->instance}_{$x}_{$y}\">
 <option value=\"\"></option>
 <option value=\"{$this->player}\">{$this->player}</option>
 echo "</div>";
 echo "<div class=\"break\"></div>";
 echo "
 <p align=\"center\">
 <input type=\"submit\" name=\"{$this->instance}move\" value=\"Take Turn\" /><br/>
 <b>It's player {$this->player}'s turn.</b></p>
 //someone won the game or there was a tie
 if ($this->isOver() != "Tie")
 echo successMsg("Congratulations player " . $this->isOver() . ", you've won the game!");
 else if ($this->isOver() == "Tie")
 echo errorMsg("Whoops! Looks like you've had a tie game. Want to try again?");
 echo "<p align=\"center\"><input type=\"submit\" name=\"{$this->instance}newgame\" value=\"New Game\" /></p>";
 * Purpose: trying to place an X or O on the board
 * Preconditions: the position they want to make their move
 * Postconditions: the game data is updated
 function move($gamedata)

 if ($this->isOver())

 //remove duplicate entries on the board 
 $gamedata = array_unique($gamedata);
 foreach ($gamedata as $key => $value)
 if ($value == $this->player)
 //update the board in that position with the player's X or O 
 $coords = explode("_", $key);
 //make sure we use the data from the right instance
 if ($coords[0] == $this->instance) {
 $this->board[$coords[1]][$coords[2]] = $this->player;

 //change the turn to the next player
 if ($this->player == "X")
 $this->player = "O";
 $this->player = "X";
 if ($this->isOver())
 * Purpose: check for a winner
 * Preconditions: none
 * Postconditions: return the winner if found
 function isOver()
 //top row
 if ($this->board[0][0] && $this->board[0][0] == $this->board[0][1] && $this->board[0][1] == $this->board[0][2])
 return $this->board[0][0];
 //middle row
 if ($this->board[1][0] && $this->board[1][0] == $this->board[1][1] && $this->board[1][1] == $this->board[1][2])
 return $this->board[1][0];
 //bottom row
 if ($this->board[2][0] && $this->board[2][0] == $this->board[2][1] && $this->board[2][1] == $this->board[2][2])
 return $this->board[2][0];
 //first column
 if ($this->board[0][0] && $this->board[0][0] == $this->board[1][0] && $this->board[1][0] == $this->board[2][0])
 return $this->board[0][0];
 //second column
 if ($this->board[0][1] && $this->board[0][1] == $this->board[1][1] && $this->board[1][1] == $this->board[2][1])
 return $this->board[0][1];
 //third column
 if ($this->board[0][2] && $this->board[0][2] == $this->board[1][2] && $this->board[1][2] == $this->board[2][2])
 return $this->board[0][2];
 //diagonal 1
 if ($this->board[0][0] && $this->board[0][0] == $this->board[1][1] && $this->board[1][1] == $this->board[2][2])
 return $this->board[0][0];
 //diagonal 2
 if ($this->board[0][2] && $this->board[0][2] == $this->board[1][1] && $this->board[1][1] == $this->board[2][0])
 return $this->board[0][2];
 if ($this->totalMoves >= 9)
 return "Tie";


Try the working example! In this tutorial we talked about instances and how you can use a class to dynamically create multiple instances each of which keep track of their own state and values. If you’ve been following my game tutorials then I hope you’re starting to see how powerful classes are and how iterative improvements can be used to enhance your gameplay, functionality and user experience.

Best Tools To Test Your Website’s Responsiveness

Comment 1 Standard
responsive websites

Since converting my game websites to be fully responsive and use HTML5 I’ve gone through a lot of different responsiveness testing tools. So far these are my favorites:

  1. Web Developer – addon for Firefox. This takes the cake for me because it’s already built into the right click menu on my browser so it’s really easy to invoke whenever and wherever. On top of that it’s designed to show you a number of different responsive views at one time and you can customize the views that it shows when it launches. Of course it comes with a whole host of other nifty tools to aid in your web development so it gets a raving 5 stars from me. It’s not as fully fleshed out in Chrome but there is a Chrome version as well. The only downside to this tool is that if you change something and you want to see an update of your changes you can’t just refresh the screen that pops up in a new tab. Instead you have to close the tab and launch the responsive view from the right click menu. Not a huge bother but it could be improved upon.
  2. – simple, intuitive interface. Just enter your website and you’re well on your way for an easy experience to view your site on phones, tables and even televisions. The downside of this website is that you have to reload it every time you want to check what a different page of your website would look like.
  3. – the ipad and iphone emulator. It looks like an ipad and it does a pretty good job emulating an ipad and iphone — it will even show screen rotations. The only downside to this is that it doesn’t let you change version of the ipad because I believe the newest AIR 2 has a larger screen than the one in this emulator but I could be wrong.
  4. – the multi-phone emulator. So this isn’t nearly as easy to use as the item in the number 2 spot which is why it’s bumped down a spot on my list even though it has a much wider array of phones you can test your site on including some of the popular android, htc and samsung phones. Just pick the make and model and enter your website and this site will render it to the proper screen size.
  5.– last but not least. Although this doesn’t rank high in the visual department this is an excellent tool for evaluating what issues your markup may present to mobile users. Things like images exceeding certain file size and dimensions (which make for a slow mobile experience) and how your file sizes will impact your loading times are why this site makes my list. The downside is that it doesn’t visually show you what your responsive site will look like but it takes an analytical approach which is super helpful and informative regardless.

Now it looks like you’re ready to check out these 11 unconventional programming tips to improve your programming skills!

Node JS Tutorial: How To Create A Simple Server

Leave a comment Standard
node JS

This will allow you to quickly setup a working node server in just a few easy steps.

1. Install Node.js

For Windows/Linux
Go to and download the
latest version of node for the operating system you want to install it on.

Open node and test if it’s working by typing 2+2 and hitting enter.

For Mac OS X
Visit Homebrew and then open your
command line and run (If you’re prompted to install command line tools go ahead and do that). :

ruby -e "$(curl -fsSL"

When that’s done run you can make sure your install was successful by running:

brew doctor

Then it’s a good idea run this to make sure you have the most up to date copy:

brew update

Then install node by running:

brew install node

Test your install by opening a command line and typing this to see the node version:

node -v

2. Install NPM

This package will help you install lots of node related libraries. You can find out more
about it by visiting
Open a command line and type:

npn install express body-parser

If you get an error on Windows that says something along the lines of

Error: ENOENT, stat...

This means the NPM directory is missing from your filesystem. Navigate to where NPM should be as displayed by the error message and create an empty folder called npm.

3. Create These Simple Server Files

First let’s make our index.html. This should go in the directory you want to serve this index file from. So on a server it would be something along the lines of htdocs/public_html/directory/ or var/www/html and on your local computer it should be whatever directory you did your npm install.

Create the index.html file:

<html ng-app="app">
    <title>My First Node Server File</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/stylesheet.css">
  <body ng-controller="appCtrl">
    <div class="page-header">
        <i class="glyphicon glyphicon-certificate"></i>
    <section>You have successfully created your first HTML5 node server.</section>
    <a href="" target="_blank">Tutorials by, LLC</a>

Now let’s create the server.js file:

'use strict';

// Importing express and body parser libraries
var express = require('express');
var bodyParser = require('body-parser');

//this is a built in node library that handles the file system
var fs = require('fs');

* Server configs

* The port to run your node server on
* If you're running this on a web server this should be 80
* If you're running this locally try 8080 or 9080
var BASE_PORT = 8080;

* The root directory of your files
* By default it uses the current folder this file is in
var ROOT_DIR = __dirname + '/';
ROOT_DIR = fs.realpathSync(ROOT_DIR);
if (!fs.existsSync(ROOT_DIR)) {
	console.log('Error: cannot find working directory: ' + ROOT_DIR);

* Create an instance of express
var app = express();

 * Adds a simple logging, "mounted" on the root path.
 * Using Express middleware
app.use(function(req, res, next) {
	console.log('%s %s', req.method, req.url);

 * Allows us to parse http body parameters as json


app.listen(BASE_PORT, function() {
	console.log('Node server started @ http://localhost:' + BASE_PORT);
	console.log('Serving static files from ' + ROOT_DIR);
	console.log('Press Ctrl + c for server termination');

4. Start the Server

Go to the directory you installed npm in and that your index.html and server.js file reside. This is where you want to start the node server. In the console type:

node server.js

Now open your browser. If you installed node on a server then navigate to your index page on your website. You should see your new node js index file. If you’re running the node server on your local machine then type in http://localhost:BASE_PORT and replace BASE_PORT with the port number you configured in the server.js file. You’ll see your index file in your browser.

Congrats! You’ve successfully create your first node server.

Cywgin .bashrc file

Leave a comment Standard

I’ve been working on my .bashrc file so I thought I would share.

# To the extent possible under law, the author(s) have dedicated all 
# copyright and related and neighboring rights to this software to the 
# public domain worldwide. This software is distributed without any warranty. 
# You should have received a copy of the CC0 Public Domain Dedication along 
# with this software. 
# If not, see <>. 

# base-files version 4.2-3

# ~/.bashrc: executed by bash(1) for interactive shells.

# The latest version as installed by the Cygwin Setup program can
# always be found at /etc/defaults/etc/skel/.bashrc

# Modifying /etc/skel/.bashrc directly will prevent
# setup from updating it.

# The copy in your home directory (~/.bashrc) is yours, please
# feel free to customise it to create a shell
# environment to your liking.  If you feel a change
# would be benifitial to all, please feel free to send
# a patch to the cygwin mailing list.

# User dependent .bashrc file

# If not running interactively, don't do anything
[[ "$-" != *i* ]] && return

# Shell Options
# See man bash for more options...
# Don't wait for job termination notification
# set -o notify
# Don't use ^D to exit
# set -o ignoreeof
# Use case-insensitive filename globbing
# shopt -s nocaseglob
# Make bash append rather than overwrite the history on disk
# shopt -s histappend
# When changing directory small typos can be ignored by bash
# for example, cd /vr/lgo/apaache would find /var/log/apache
shopt -s cdspell

# Completion options
# These completion tuning parameters change the default behavior of bash_completion:
# Define to access remotely checked-out files over passwordless ssh for CVS
# Define to avoid stripping description in --option=description of './configure --help'
# Define to avoid flattening internal contents of tar files
# Uncomment to turn on programmable completion enhancements.
# Any completions you add in ~/.bash_completion are sourced last.
# [[ -f /etc/bash_completion ]] && . /etc/bash_completion

# History Options
# Don't put duplicate lines in the history.
# Ignore some controlling instructions
# HISTIGNORE is a colon-delimited list of patterns which should be excluded.
# The '&' is a special pattern which suppresses duplicate entries.
# export HISTIGNORE=$'[ \t]*:&:[fb]g:exit'
# export HISTIGNORE=$'[ \t]*:&:[fb]g:exit:ls' # Ignore the ls command as well
# Whenever displaying the prompt, write the previous line to disk
# export PROMPT_COMMAND="history -a"

# Aliases
# Some people use a different file for aliases
# if [ -f "${HOME}/.bash_aliases" ]; then
#   source "${HOME}/.bash_aliases"
# fi
# Some example alias instructions
# If these are enabled they will be used instead of any instructions
# they may mask.  For example, alias rm='rm -i' will mask the rm
# application.  To override the alias instruction use a \ before, ie
# \rm will call the real rm not the alias.
# Interactive operation...
# alias rm='rm -i'
# alias cp='cp -i'
# alias mv='mv -i'
# Default to human readable figures
# alias df='df -h'
# alias du='du -h'
# Misc :)
# alias less='less -r'                          # raw control characters
# alias whence='type -a'                        # where, of a sort
 alias grep='grep --color'                     # show differences in colour
 alias egrep='egrep --color=auto'              # show differences in colour
 alias fgrep='fgrep --color=auto'              # show differences in colour
# Some shortcuts for different directory listings
alias ls='ls -hF --color=tty'                 # classify files in colour
alias dir='ls --color=auto --format=vertical'
alias vdir='ls --color=auto --format=long'
alias ll='ls -l'                              # long list
alias la='ls -A'                              # all but . and ..
# alias l='ls -CF'                              #

# Umask
# /etc/profile sets 022, removing write perms to group + others.
# Set a more restrictive umask: i.e. no exec perms for others:
# umask 027
# Paranoid: neither group nor others have any perms:
# umask 077

# Functions
# Some people use a different file for functions
# if [ -f "${HOME}/.bash_functions" ]; then
#   source "${HOME}/.bash_functions"
# fi
# Some example functions:
# a) function settitle
# settitle () 
# { 
#   echo -ne "\e]2;$@\a\e]1;$@\a"; 
# }
# b) function cd_func
# This function defines a 'cd' replacement function capable of keeping, 
# displaying and accessing history of visited directories, up to 10 entries.
# To use it, uncomment it, source this file and try 'cd --'.
# acd_func 1.0.5, 10-nov-2004
# Petar Marinov, http:/, this is public domain
# cd_func ()
# {
#   local x2 the_new_dir adir index
#   local -i cnt
#   if [[ $1 ==  "--" ]]; then
#     dirs -v
#     return 0
#   fi
#   the_new_dir=$1
#   [[ -z $1 ]] && the_new_dir=$HOME
#   if [[ ${the_new_dir:0:1} == '-' ]]; then
#     #
#     # Extract dir N from dirs
#     index=${the_new_dir:1}
#     [[ -z $index ]] && index=1
#     adir=$(dirs +$index)
#     [[ -z $adir ]] && return 1
#     the_new_dir=$adir
#   fi
#   #
#   # '~' has to be substituted by ${HOME}
#   [[ ${the_new_dir:0:1} == '~' ]] && the_new_dir="${HOME}${the_new_dir:1}"
#   #
#   # Now change to the new dir and add to the top of the stack
#   pushd "${the_new_dir}" > /dev/null
#   [[ $? -ne 0 ]] && return 1
#   the_new_dir=$(pwd)
#   #
#   # Trim down everything beyond 11th entry
#   popd -n +11 2>/dev/null 1>/dev/null
#   #
#   # Remove any other occurence of this dir, skipping the top of the stack
#   for ((cnt=1; cnt <= 10; cnt++)); do
#     x2=$(dirs +${cnt} 2>/dev/null)
#     [[ $? -ne 0 ]] && return 0
#     [[ ${x2:0:1} == '~' ]] && x2="${HOME}${x2:1}"
#     if [[ "${x2}" == "${the_new_dir}" ]]; then
#       popd -n +$cnt 2>/dev/null 1>/dev/null
#       cnt=cnt-1
#     fi
#   done
#   return 0
# }
# alias cd=cd_func

#make a directory and cd into it
mkcd() {
    if [ $# != 1 ]; then
        echo "Usage: mkcd <dir>"
        mkdir -p $1 && cd $1

#create a symlink (aka shortcut)
symlink() {
    if [ $# != 1 ]; then
        echo "Usage: symlink <target_path> [link_path]"
        ln -s $1 $2

#how many directories to cd .. through (ie up 4 moves up 4 directories)
  local d=""
  for ((i=1 ; i <= limit ; i++))
  d=$(echo $d | sed 's/^\///')
  if [ -z "$d" ]; then
  cd $d

#extract an archive
extract () {
   if [ -f $1 ] ; then
       case $1 in
           *.tar.bz2)   tar xvjf $1    ;;
           *.tar.gz)    tar xvzf $1    ;;
           *.bz2)       bunzip2 $1     ;;
           *.rar)       unrar x $1       ;;
           *.gz)        gunzip $1      ;;
           *.tar)       tar xvf $1     ;;
           *.tbz2)      tar xvjf $1    ;;
           *.tgz)       tar xvzf $1    ;;
           *.zip)       unzip $1       ;;
           *.Z)         uncompress $1  ;;
           *.7z)        7z x $1        ;;
           *)           echo "don't know how to extract '$1'..." ;;
       echo "'$1' is not a valid file!"

#move up directories with periods
alias ..="cd .."
alias ...="cd ../.."
alias ....="cd ../../.."
alias .....="cd ../../../.."

#set command line to colored format user@host:~working/directory $
PS1="${RESET}${RED}\u@${YELLOW}\h${WHITE}:${GREEN}\w ${CYAN}\$${NORMAL} "

#figure out which git branch we're currently on
branch_name=$(git symbolic-ref -q HEAD)
#shorten git commands
alias gs='git status'
alias gc='git commit'
alias ga='git add'
alias gd='git diff'
alias gb='git branch'
alias gl='git log'
alias gsb='git show-branch'
alias gco='git checkout'
alias gg='git grep'
alias gk='gitk --all'
alias gr='git rebase'
alias gri='git rebase --interactive'
alias gcp='git cherry-pick'
alias grm='git rm'
alias gp='git push'
alias gf='git fetch'
alias gm='git merge'

#switch to the master branch
alias gcom='gco master'

#checkout master branch, pull in changes and then checkout your current branch and merge in those changes
alias gmm='gcom && gp && gco ${branch_name} && gm origin master'
#shows "git diff" across any project in any subdirectory
alias git-differ='for g in $(find . -name ".git"); do g=${g%%.git};printf "$g\t\t\t";pu $g >/dev/null && git diff |wc -l; p >/dev/null; done'

#does git house keeping across any project in any subdirectory
alias git-housekeep='for g in $(find . -name ".git"); do g=${g%%.git};echo $g;pu $g && git repack && git gc --auto && p;done'

# clear the cygwin console
alias clear='printf "33c"'

Angular UI Tutorial: TinyMCE Directive

Leave a comment Link

This is a really useful plunker that allows you to integrate tinyMCE into your angular projects as a directive. You can apply the WYSIWYG to multiple textareas on a page or in angular UI tabs too. This isn’t my plunker but it’s still a super useful one. Enjoy!

Angular Autocomplete with Complex Object Arrays — NO JQUERY

Leave a comment Link

There are many times when you want to perform an autocomplete that works by searching all of the object properties and not just a single field or the key. If so you’ll enjoy this plunker.