Webpack debug watch variables <not available>

I’ve been developing a SPA app using Webpack to bundle and minify my static files even in my dev environment and started hitting a problem where I couldn’t set breakpoints in certain places where I would normally be able to set them. Plus, when execution was stopped on a breakpoint then I was unable to view (or watch) variables which were clearly in scope at the time. In Chrome dev tools these variables would appear as in the watch pane.

The problem was that I had the Uglify plugin configured in my webpack.config

plugins: [new webpack.optimize.UglifyJsPlugin({})],

As soon as I removed that from the config and rebuit packages I was able to debug normally via source-maps by running

webpack -d

Advice to a School-Leaver Who Wants to Be a Programmer

Today I met with a former colleague’s son who is applying to Skype for a tester position. It turned out that he is still probably too early in his software development learning to work here but I ended up giving him some general advice hoping that it would help him focus on the right stuff when he goes off to study Computer Science at University.

  1. Learn to use the console / terminal, bash, vim / emacs, grep etc. This is absolutley essential and the sooner you become an expert the sooner you will achieve all of your programming goals.
  2. Install Virtualbox (https://www.virtualbox.org/) on your computer so you can use virtual machines with different OSes (e.g. Windows 7, Debian) This will allow you to test everything properly and will open up a whole world of opportunities.
  3. Try making a web site (HTML / CSS / Javascript) with a database that uses an MVC framework to solve a problem that you personally need to solve. Put the Database on a remote server and give it a REST API that allows it to be controlled from web clients.
    (e.g. in my case I made a site that is a showcase for recordings I made when I was working as a musician / sound engineer http://xoundboy.com). Learning web technologies will ensure that you are always able to find well paid jobs :)
  4. Collaborate with others on a Github community project. You can clone code from any public project and play around with it. Once you’ve improved it in some way you can ask the project owner to include your code in the project (Pull request). Through this you will meet other developers and make friends and most importantly learn how to communicate properly when creating software.
  5. Always write automated tests for any application code you write. Learn to write unit tests first, then functional tests and then end-to-end (integration) tests. Then learn how to add these automated tests to your build script so they always run every time you hit the build button. You won’t get a decent job without knowing how to do this!
  6. Learn almost everything here: http://stackoverflow.com – This website is pretty much the only resource you need to get online help.
  7. If you want to work for Microsoft, learn C#.NET and WindowsAzure
  8. Write a technology blog. Every time you solve a programming-related problem that was previously undocumented on the internet, give back to the community by writing a well thought out “How-to” and provide the documentation for others. The process of writing the blog will a) re-inforce your knowledge b) raise your online profile and c) become part of your portfolio that can be shown to potential employers in the future. (Here’s mine for an example, http://blog.xoundboy.com/ although I stopped writing regularly quite a while ago)

Virtualbox networking: Windows host, Debian guest

After a lot of farting around with different virtual network adapter types and use cases I finally settled on a networking configuration that works well for developing web apps inside a Debian Virtual Machine running inside Virtualbox on my Windows laptop.

The problem:

  • VM needs to be accessible by the windows host even when laptop is “offline” so I can work on the plane.
  • When laptop is “online”, VM can also access the internet
  • VM should be accessed by host via a static IP address so that dev environment settings persist beyond a reboot

The Solution:

  1. Two virtual network adapters in the VM’s network tab in Virtualbox:
    • Adapter #1: “NAT” / DHCP
    • Adapter #2: “Host-only” / Static IP

    The NAT adapter should already be set up by default when you do a fresh install of Debian in Virtualbox. It enables the VM to access the wider internet.

    Meanwhile the Host-only adapter enables the host machine to see the VM and persists even when internet connectivity drops allowing you to carry on working.

  2. Set up the Virtualbox Host-only network.

    Click File > Preferences > Network, then select “Virtualbox Host-only ethernet adapter” (or whichever host only adapter you selected in the VM’s host-only network adapter tab). Click the edit button which looks like a screwdriver. Enter an unused network in the 192.168.x.x Ip range. I’m using 213.1 because my router is on, but I could use anything in that 3rd octet except 0 I think. The netmask should be but for some reason it still works with – I’m still not quite sure why that is though.

    Click the “DHCP server” tab and uncheck the ‘Enable Server’ checkbox – we don’t need DHCP because we’ll be using a static IP address.

  3. Configure the networking inside the VM

    Log into the VM as root and edit /etc/network/interfaces – it should look like this:

    # The loopback network interface
    auto lo
    iface lo inet loopback

    # The NAT virtual adapter
    allow-hotplug eth0
    iface eth0 inet dhcp

    # The Host-only virtual adapter
    auto eth1
    iface eth1 inet static
    address # this must match Virtualbox host-only network

  4. Reset the VM and you should now be up and running

Migrate a site or folder tree recursively over FTP via the command line (ncftp)


  • You are moving a web site or folder tree from one computer to another via FTP
  • The source computer is Linux
  • You can’t use the basic FTP program because it doesn’t recurse directories

Use ncftp. Install it if necessary, cd to the root of the folder you want to put to the FTP server and then run the following command:
ncftpput -u myFTPusername -p myFTPpassword -R myftp.server.com .

How to use Mustache with JS / jQuery – a working example

I’ve been evaluating Mustache as a Javascript templating engine because my manager didn’t like the look of my jQuery code with lots of concatenation of HTML with javascript variables. The Mustache documentation doesn’t give working Javascript / jQuery examples so once I got this working it seemed only right to share it with you all (and hopefully drive a bit more traffic to my blog).
Continue reading