Category Archives: Programming

Simple HTML5 Webcam Example

Here’s a quick example that shows you how to access your web camera with HTML5 and JavaScript. (Works in Chrome 21).

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">

    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
        }
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

</script>

Just cut and paste the code above into your browser and you should be good to go. Also to view the video just set style of the video tag to inline or block.

Build Your Own PHP Framework – 2nd Edition

I just released a copy of the 2nd Edition of Build Your Own PHP Framework. This book has a lot more examples and the source is hosted on GitHub.

You can purchase the 58 page PDF from www.phpframeworkbook.com, or on Amazon.Com for your Kindle.

The 2nd edition has the following additional content:

More To Read - You will notice this edition will be more thanTWICE the size of the original book.

More Examples - Each chapter will show you working examples as well as how to use the example on the sample CMS (Content Management System) being built throughout the book.

More Code - Each chapter will show you the exact code of the framework vs. snippets in v1.

More Details - I’ve included a lot more detail around “Why” you do things.

Bonus Material - When you purchase the book you’ll get a custom code for accessing bonus content!

JavaScript Arrays

This is a post about JavaScript. I get these questions all the time and thought I’d start adding a few JavaScript tips on my site.

Arrays are a special kind of object in JavaScript. To create one just do the following:

// standard arrays
var arr = new Array();
arr[0] = "value";

// multiple items in constructor
var arr2 = new Array("test","test2");

// associative arrays
var arr3 = new Array();
arr3["key"] = "val";

Here’s a list of methods you might want to use:

  • length – to get the length/size of an array
  • pop – removes last element from an array
  • push – adds another element to the end of an array
  • join – joins all elements of an array into a string
  • slice – extracts a section of an array and returns a new array
Some examples of the methods above:
var arr = new Array("aaa","bbb","ccc");
// length property
alert(arr.length); // returns 3
// pop
alert(arr.pop); // returns "ccc"
// push
alert(arr.push("ddd"); // adds "ddd" to array

Multi-Dimensional Arrays look like this:

var mArr = new Array();
mArr[0] = new Array();
mArr[0][0] = "test";

Build Your Own PHP CMS

Maybe you’ve used a CMS like WordPress, Drupal, or Joomla. But what if those had too much baggage? Too much dead code? Too much un-tested code or code that’s so cumbersome to use you’re stuck building your own?

I’m thinking about starting another book this summer called Build Your Own PHP CMS. Not only will I update Build Your Own PHP Framework, but I’ll describe in detail what you’ll need to do to create your own CMS from scratch.

Stay Tuned…

Deployments With RSYNC and Git

Over the past few years I’ve been trying to get away from using FTP and deploying an entire directory to just update a web app. I’ve used services like Springloops and even tried a tool like Capistrano, but nothing really was 1) Simple and 2) Free until I wrote my own bash script. Here’s basically what you do.

  1. Create SSH keys between your local machine and your remote box.
  2. Create a bash script with the following code.
#!/bin/bash
LOCAL=YOUR LOCAL DIRECTORY
REMOTE=user@remotesite.com:/home/useraccount/public_html
rsync -rtv --progress --exclude-from 'exclude-list.txt'  $LOCAL $REMOTE
ssh user@remotesite.com 'chown -R user:nobody /home/useraccount/public_html'
ssh user@remotesite.com 'chmod 750 /home/useraccount/public_html'

So set your LOCAL to your local directory path, REMOTE to your remote path with your user that you have your deployed files.

Note the rsync parameters, I’ve not chosen -a because that will also copy my local permissions, users and groups vs. the remote permissions users and groups.

Finally I’ve added an excludes list, which I’ll add things like “.git/” so that the git repository does not get sync’d and copied.

Now if you’re stuck into using FTP and just want to export what’s changed. I use this little script:

tar czf ~/Temp/new-files.tar.gz `git diff --name-only SHA1 SHA1 | grep -w '.php'`

This allows me to create a tar.gz of just what’s changed between two commits and in the case above, just grab .php files. You can remove everything past | grep if you want everything.

Objects In JavaScript

A “class” is a template for an object. You can’t do anything with a class, it just specifies behavior and structure.

An “object” is a instance of a class. This is something you can create and do things with.

In JavaScript all objects are prototyped or cloned from other objects. So if you want to create a second instance of an object, just clone it. But in practice it’s not that simple. You can’t just create an object literal and then invoke a method new variableName, variableName.clone().

So for this I’m going to talk about two types of objects, literals and what I’m calling a class template.

Object Literals
These are instances of classes. You can create them by naming the instance name (testObject1) and then adding variables and methods.

var testObject1 = {
  name: "test1",
  doit: function () {
    return 'this is a ' + this.name;
  }
};

Template Classes
These are just templates of objects. You can instanciate them and do things with them but they are not sufficient on there own. Here’s an example of this kind of class:

function testObject2() {
  this.name = "";
  this.doit = function() {
    return 'this is a ' + this.name;
  }
}

So to use this in real life just do the following:

var test1 = new testObject2();
var test2 = new testObject2();

With JavaScript you can create and mix these kinds of objects as the language permits it, but it’s usually a poor design choice.

Use Literals When:

  • Single uses objects
  • Minimal reuse or you don’t care about consistent behavior.

User Class Templates When:

  • You intend to reuse behavior
  • You are using a unit test framework to test behavior.

Personally I opt for always creating class templates it makes for easier unit testing and allows for greater reuse.

JavaScript – Date Format

I’ve had a few questions on this lately and since JavaScript date formats are rather easy, here’s some code:

var now = new Date();

alert(now.getMonth()+"/"+now.getDate() + "/" + now.getYear());
// returns 4/01/12

// format names
var now = new Date();
now.format("longTime",true);
alert(now); // 8:00:00 AM EST

Other named formats include:

You can also parse a string to a date. To parse a string and convert to a date, just use the parse() method. For example:

var dd = Date.parse("04/01/2012");
alert(dd); // returns 1333252800000

But JavaScript does not have a DateFormat object you might be use to from other languages. I’ve found one that looks rather good here.

With this library you can call a format method on the date object so that:

var dd = new Date();
dd.format("m/dd/yy");
alert(dd); // returns "4/1/12"

If you have any questions about this, comment or send me a note.

Fixing VMWare Fusion 4 Shared Folders in Ubuntu 12.04

I had to do a few things to get this to work.

1. Mount the CD-ROM (Click on Add VMWare Tools first, that will add a CDROM to /dev/cdromX)

sudo mkdir /mnt/cdrom
sudo mount /dev/cdrom1 /mnt/cdrom

2. Copy VMWare Tools

cp /mnt/cdrom/VMwareTools-8.8.3-682996.tar.gz ~/.
tar xzvf VMwareTools-8.8.3-682996.tar.gz

3. Update Linux

sudo apt-get install build-essential
sudo apt-get install build-essential linux-headers-`uname -r`

4. Run VMWare Tools

sudo ./vmware-install.pl

5. Restart

sudo reboot

6. Verify

ls /mnt/hgfs/

 

So these are the steps please comment or send me a note if this doesn’t work for you.

What’s Better? Ruby or PHP?

Which language is bigger / better, the red one or purple one?

What if I told you if you chose the red one, you would make more money?

What if I told you the purple one is 5 times faster than the red one?

Which one is better?

As you know they are the same size, mathematically there’s no real difference, but ultimately it depends on who you surround yourself with.