Working with a VirtualBox VM and a VPN

At both my current and previous job, we've used VM's as development platforms. The biggest issue surrounding these has always been getting VPN access into the VM and the host environment while preserving the connection between the VM and host, especially when the VPN client is only availble for the host OS (Windows).

The solution to this problem when using VirtualBox is to setup two network adapters.

1. NAT Adapter

The NAT adapter allows the VM to share the host OS's network connection, including any VPN's it's connected to. The downside of NAT networking is that you can't directly access the VM from the host box using the assigned IP.

2. Host-Only Adapter

That previous problem can be solved by creating a second host-only adapter. This second adapter creates a separate network with the VM and host as members. This gives you an IP address for the VM you can access from the host for testing services on the VM or mounting a Samba/NFS/SFTP share to the host.

Recovering from a Bad Mercurial Subrepo State

Earlier today I was checking out a Mercurial repository I setup a while back as a blank template for projects. Unfortunately, my last commit to it was a merge that broke the subrepo state. It also suffered from a typo in the .hgsub file. In short, the repository was hosed because I couldn't update to any of the previous revisions. I kept getting errors like:

cloning subrepo vendor/_src/twig.js from git://github.com:justjohn/twig.js.git
fatal: unable to connect to github.com:
github.com: Servname not supported for ai_socktype

abort: git clone error 128 in vendor/_src/twig.js (in subrepo vendor/_src/twig.js)

and

abort: invalid subrepository revision specifier in .hgsubstate line 5

It took me a lot of searching to find a solution to these problems, so I'm documenting it here in the hope that someone else finds it useful.

Read More

Using Your Browser and HTML5 "content editable" as an Editor

HTML5 has the concept of content editable which allows any DOM element to become a user-editable canvas. All you need to do is add the contenteditable="true" attribute to an element:

<div id="content" contenteditable="true">
</div>

The beauty of this feature is that the content is part of the HTML DOM and can be edited with the chrome inspector, so you have all the power of the inspector to drag and drop nodes, change the element styles from the style panel, etc...

This gives you a fantastic editor to work in with a very minimal amount of code required.

Read More