Auto-playing flash content

As part of the Chrome 45 release Google stopped (and quite rightfully so) auto playing Flash adverts.

As an unfortunate consequence some of the web pages I look after require that the Flash video content is auto-played. Now before I have the legions of reddit and the ilk descend upon me, these aren’t adverts and were legitimate content i.e. they were a core function of the page.

Now eventually Flash content will be forced off the web, but right now people like myself have to live with the implementations that are currently exist. We needed to find a solution.

Chrome doesn’t auto block flash content

From Chrome’s blogpost:

When you’re on a webpage that runs Flash, we’ll intelligently pause content (like Flash animations) that aren’t central to the webpage, while keeping central content (like a video) playing without interruption.

The key part of this is how Chrome considers what is and what isn’t central to the webpage. If the content is flash and it is central to the webpage content in flash will auto-play like normal.
Google want to stop ads, not legitimate content.

How does Chrome decide whether it is part of the main page content?

In our case making the video larger fixed the issue (specifically height in our case). This was because the whole page was designed for desktop resolution of 1024 x 768 and below. Chrome looks at the size of the video relative to the other content, the fact that it is Flash and probably the position on the page.

JavaScript gotchas for backend developers

I am sure many will tell you that while JavaScript looks superficially like a language that uses C-like syntax you will quickly realize that it is very different. I am going to write up a few pointers that won’t seem obvious at first but will help you write vastly better JavaScript by virtue of simply being aware of them.

Running the Examples

All of these examples are going to be of the variety of cut and paste either into Visual Studio or The Chrome Developer Tools console to run them (though they should work in Firefox, Modern versions of IE or node but I haven’t verified they have worked).

Implicit Global

If you don’t use the var keyword to declare a variable, in a web browser it will automatically become a global variable. In a web browser this means that it becomes part of the window object.

Consider the following:

As we can see that it became part of the window object which is essentially global.


Function Scope and Hoisting

Function scope means that any variable is visible within the function. This differs massively from C# and Java where they have block scope. In C# block scope everything variable that is declared within the curly braces is in scope. In JavaScript everything that is within a function is in scope.

So what does this mean? Well it means that any variable declaration is effectively pulled to the top of the function it is declared in. This is called Hoisting.

The result is as follows:


The last line of the script was to prove that the mySecondVar isn’t global.

So our variable isn’t defined in the correct order but it executes as if it was declared in the correct order. The JavaScript Interpreter/Runtime effectively pulls or hoists it to the top of the function, thus the term hoisting.

This brings us to the single var pattern.

Semicolon Insertion Mechanism and Braces

While most JavaScript linting tools while moan about the lack of semicolons, it is for a very good reason. Your program might not work as intended. However most of the time, you may notice when writing JavaScript that missing the odd semicolon doesn’t seem to make any difference (most of the time). It will insert them automatically where it thinks they should be. Most of the time (almost always) it gets it correct. There are times when it doesn’t get it right, for example:

The result is:


Now in the screenshot I ran the same script with the brace moved so it is on the same line as the return. The difference as you observe is massive, in the first instance we have an Error thrown, in the second instance it works as expected. Why is this?

In the first instance the JavaScript runtime essentially inserts the semicolon before the opening brace i.e.

In the second instance the brace is on the same line as the return and the JavaScript runtime doesn’t insert the semi-colon.

So in this instance the location of the brace affected how the semi-colon insertion mechanism worked.

Most JavaScript best practice will tell you to make sure you use 1TBS and that you always end your lines with a semi-colon. I suggest this because it saves you a lot of mental effort, but Fat of Twitter Bootstrap fame disagrees (Epic flame war!).


JavaScript isn’t strongly typed so equality can be an interesting thing.

Implicit Equality

Lets take a common example checking whether a value is null, or a length of a collection is more than zero.

In C# I would check the length of a collection by checking the Count property isn’t equal to zero (it cannot be anything other than a positive integer). Lets write a simple program to illustrate that:

The program will output the following:

c# program output

I explicitly checked that my Collections length wasn’t zero to display a message that the List was empty.

The equivalent program in JavaScript:

JavaScript output in Chrome console:

javascript console output

Now you will notice that I didn’t explicitly check the length of the string, however this isn’t necessary in JavaScript since 0 evaluates to false. Many weakly typed languages lets you evaluate zero as false e.g. PHP. You can of course check the type explicitly still, however it isn’t necessary and it’s obvious that length is going to be integer:

The observant among you will notice that in both the JavaScript and the C# example there is a possibility of an uncaught exception in our printListLength function.

The simplest way to check in C# is to compare it against null:

In JavaScript the equivalent would be:

Again it is an implicit check, there is no need to check against null or undefined because if myArray doesn’t have a value then it evaluates to false. The same can be done with strings, if a string is empty will evaluate as false.

Double vs Triple Equality

We’ve seen that we can do implicit equality and this can cause problems because what happens if we actually want to check something is 0 and not an empty string?

Well we check value and type against using triple equals e.g.

When we compare using double equals we see that it evaluates as true, because it doesn’t check the type and the value, it only checks the value. The triple equals evaluates as false because it checks both type and value.

Objects are essentially key value dictionaries

Consider the following piece of code:

The result of running this in the chrome console is as below:


We see that access the myObjProperty via either the familiar dot syntax or using an associative array syntax. Properties can also be set using using the associative syntax.

The result is:


Under most circumstances you will want to use the dot syntax however there are times when you would want to use the array like syntax. Here is a great example of when it can be advantageous:

In this example the author has mapped the typeahead dropdown so he can match it back to the original item in the array easily.


Hopefully I have shown you some things to be aware about JavaScript when coming from another programming language such as C#.

There are some gotchas which if you aren’t aware, will cause you a lot of pain when working with JavaScript. I think the hardest thing to grok is the fact that code doesn’t necessarily execute exactly as it does in your text editor.


django on Windows gotchas

I’ve just started a new job and they heavily rely on python in their main product. I have only been tinkering with python and wouldn’t claim to be in any way proficient with it. I decided at having a proper go at building a small website with django so I could become more familiar with it. I started by creating a virtualenv, activated it and installed django via pip:

At this point I should be able to continue with the django tutorial, the next step is to create my site using the django admin tool:

This doesn’t look good and we have stumbled at the first hurdle. There were a heap of suggestions which seemed a bit dirty so I decided to have a look inside the Scripts directory in my new virtual environment and there was a file named django-admin.exe.

This worked as expected and I was able to continue.

What Windows is doing is that it had associated python files with the default installation of python (which lives in C:\Python27 on my workstation) and ignores the virtual environments copy.

Building a web application with Silex: (Part 1)

I’ve been writing a small web application in Silex. It is a nice framework for making web applications in PHP.

This is going to be a small tutorial to get it a basic web layout working and I will also show you how to use bower for installing client side dependencies.


I am going to be assuming that you are using a modern version of Windows (7 or above) and that you have PHP installed. I installed the latest version of PHP that is supported via the Web Platform Installer (WPI). This is the easiest way for you to install PHP and other tools you are likely to want if you are developing web applications on Windows.

Once you have the web platform installer install, you can install PHP by simply searching for it in the search box to the right:

Web platform installer php search results

Web platform installer php search results

I already have PHP installed and PHP 5.6.0 is available for installation. Simply press add and then install. The web platform installer will start downloading and installing PHP on your machine.

If I were you I would take a short break if you are installing everything for the first time.


You are going to want to have composer installed. Installation is trivial on Windows so I won’t be covering that.

Create a directory called “samplewebapp”. This is your working directory.

The first thing we are going to do is create a composer.json file. This is composers configuration file. It is essentially a dependency management system (among other things) for PHP. If you have used similar systems like npm, NuGet or Pip much of this will look familiar to you.

You will need to now use composer via the command prompt to install Silex. I’ve been using Git Bash as it is a little nicer to work with than the plain command prompt that Windows provides.

You should see the following:

Silex initial install via composer

Silex being downloaded and installed in our application directory via composer

Silex is now installed. If you inspect the contents of your web application folder you should see that it has created a folder called vendor. This is where composer will put all the components that it will install.

Now we don’t have anything that can actually be run yet, but we have set up the initial environment and we are ready to start!

Hello World

So we are going to start with baby steps and echo some text to the browser for now. Create a file called index.php and copy and paste the following in:

This probably looks familiar because it is directly from the Silex homepage. I tend to start out by getting something basic working to ensure that I have everything setup correctly before moving on.

With newer versions of PHP you can run development web server straight from the command line. To do this simply run the following in the “samplewebapp” directory:

Now if you open up localhost:5000/hello/<your name> in your favourite web browser you should see the following happen:


Silex is now up and running on our development server

At this point we know our environment is working correctly and we can start building a web application.

Setting up Twig

As Silex is a micro-framework built from Symphony components, it may come to no surprise to you that integrating Twig is very easy. Twig is a templating engine for PHP.

You will need to change your composer file to the following:

Then we run composer update again in out samplewebapp directory, You should see this happen:


At this point we have twig installed. We now need to tell Silex where to look for our views. We need to change our index.php to the following:

You will notice that a quite a few things have changed.

We have put Silex into “debug” mode by simply putting:

This will give up a nice stack trace in our browser when the code falls over.

Silex stack trace in our browser.

Silex stack trace in our browser.

Obviously this wants only wants to be set as true for development environments.

This sets up a twig service provider, and tell it that our view templates are going to be in the ‘views’ directory. When rendering, including or extending templates our paths are relative to our view directory, this becomes important when your are creating more complicated page layouts using Twig.

I’ve setup a new application route which is the route of the website. I have told the Silex to render the twig template index.twig. Remember that the home directory is relative to the views directory.

You can see in explorer that the home directory is inside our views directory.

You can see in explorer that the home directory is inside our views directory.

Our view template contains the following for now:

This is just some simple html for now. If you fire up the development server again you should see the following.

The web server is rendering our twig template correctly.

The web server is rendering our twig template correctly.


We have setup an environment up on Windows for PHP development. Installed and configured Silex with Twig. We are rendering a basic HTML template in our web app.

The full source (there isn’t much so far) can be found on github.

Node.js Tutorial: Part 1 – Basics

I’ve been learning node at work and to be honest it is the most fun I’ve had in a while learning. I am going to cover the basics, using Windows. I am going to assume that you have written JavaScript before in the browser.


Installation on Windows is pretty straight-forward. You download the executable for your platform (32-bit Windows or 64-bit Windows). If you are on Windows 8 like me you should see the following in your start screen.


If you have Windows 7 you will have a start menu folder with the same items in it. If you choose the highlighted item “Node.js” you will have a command window open with empty prompt.


This is node’s REPL interface, this stands for read-eval-print loop. It simply evaluates each line you type into the interface.

  1. ‘Hello World’;

This prints off “Hello  World” in the REPL interface. Also, if I do the following in the REPL interface I get the following output.

  1. > var a = 0
  2. undefined
  3. > a
  4. 0

The interface evaluates the expression that you have just entered. Assigning the variable a to zero, returned undefined as any other return type doesn’t make sense. When evaluating the variable a the return type is 0 since, we previously set a to 0. The REPL interface in node is very similar to the console in Chrome.


Running Scripts

Obviously the usefulness of REPL interface is limited to simpler tasks. For more complicated tasks you’re going to need to be able to run a script file. This is thankfully quite easy. When installing node, node is added to your path. This means you will be able to run node by simply opening up a command window and typing.

  1. node <my script>.js

And the script will execute. I have the following script “count-down.js” and it does exactly as you expect.

  1. var i = 10;
  3. do {
  4.     console.log(i);
  5. whilei-- );


  1. C:\Users\Luke\Desktop>node countdown.js
  2. 10
  3. 9
  4. 8
  5. 7
  6. 6
  7. 5
  8. 4
  9. 3
  10. 2
  11. 1
  12. 0

Note: You’ll notice the while conditional is evaluated as false once our variable gets to zero. Those familiar with JavaScript and other dyanmically typed languages, will know that zero evaluates to false in our while clause.

Setting up a simple development environment

So far the examples I have given are quite trivial so far if you have studied programming before. Now I want to get into the real stuff that node is capable of, but before we do that we really need to set-up a basic development environment.

Installing node-dev

At the moment if you modify your script you need to run node again This becomes somewhat tedious. This is easily rectified:


What exactly have I done there?

  1. I have invoked the node package manager using the command “npm”.
  2. The install keyword tells node that I wish to install the package “node-dev”.
  3. Finally the “-g” flag tells npm to install this globally throughout the environment.

More on this later.

If I use node-dev to start my script once the script has finished executing, it won’t fall back to the command prompt. If I edit the script when node-dev is running, it will detect that I have changed the script and restart the execution.

Installing node-inspector

For debugging purposes you could put various print statements throughout the code, but we all know this isn’t ideal. Node-inspector lets us hook chrome debugger up to node. Again we use npm install the node-inspector.

  1. npm install nodeinspector g

It installs far too many dependencies to list here.

Once node inspector is installed we can start node inspector. I usually have it running in another command windows.  To start it simply type.

  1. nodeinspector

You should see the following output.



Now you need to start your script.

  1. nodedebugbrk countdown.js

The “debug-brk” option stops the script execution on the first line of code. To use the chrome debugger, you simply open chrome and type in the url localhost:8080/debug?port=5858. You can see from the screenshot below, that you can use the chrome debugger as you normally do in the browser.


Note: I know the first screen shot says that the debugger was opened on, this doesn’t work but putting localhost does. I don’t know why this is and it hasn’t worried me enough to research the underlying reason.

Node’s Package Manager

Node has included with it a package manager called “npm”. Just above we installed some tools to help us with development.

NPM will install and manage 3rd party code libraries that you specify and the libraries which they rely on. If you have used tools like NuGet, Gems, PEAR or are familiar with using Linux package managers you will be familiar with the concept. For now we will be downloading them from npm repository. Usage of the package manager when installing is pretty straightforward.

  1. npm install <package name>

NPM will install the package to a folder in your working directory called node_modules. You will only be able to include those libraries in node scripts that exist in that working directory. If you want to install it globally, you need to use the “-g” flag as we did before.

Note: NPM sometimes has to compile some libraries that are native i.e. they are C++ libraries. You will need a C++ compiler otherwise the package installation will fail. Node-gyp is the component that builds these C++ libraries, there are instructions here on what you need to get node-gyp (and ultimately npm) working.

On Windows 8 I found it simplest to install VS Express For Desktop and Active Python (use the version). Then use the “VS2012 x64 Cross Tools Command Prompt” when you are using npm install.

bind() and older browsers

Had this error today from IE7 & 8 from a script that I got given to fix.

SCRIPT438: Object doesn’t support property or method ‘bind’

I have never come across bind() before, I discovered it was part of the ECMAScript 5 specification, and is only supported by newer browsers (IE9+, FF 4.0, Chrome 7.0, Opera 11.60) it not supported in earlier browser or in Safari.

I found the solution on MDN. It appears the bind() is a new property that overrides the ‘this‘ keyword in a function. A bit of copy and pasta of some code on MDN into my own script, and I had bind working again.