Development

Use ES6 in Gulpfile.js

published on
Gulp doesn’t natively support Ecma Script 6 (ES6), so in order to get it working we need to first transpile our gulpfile.js file before it can be read by gulp. A clean way of acheiving this is to have the default gulp file gulpfile.js that acts as a shim to load and transpile the ES6 version (in my case gulfile.es6.js). Babel has a neat hook into npm that allows us to automatically transpile required statements on the fly. Read More...

How to convert a mercurial (hg) repository to git

published on
The easiest way to convert from mercurial (aka hg) to git is by using hg-fast-export on ubuntu. If you dont have ubnutu, then you can spin up a server on Digital Ocean for a few cents. If you have issues with any of the below commands, try prefixing with sudo to elevate privileges. Install git & mercurial First we need to install Git and Mercurial: sudo apt-get install git mercurial -y Clone hg-fast-export The hg-fast-export converter is run directly from its repo so we will need to clone it locally. Read More...

HTTPS only with HTTP Strict Transport Security (HTST) header

published on
The HTTP Strict Transport Security header (Strict-Transport-Security) allows you to tell the brower to only communicate with a site using HTTPS. Once the browser has successfully connected using HTTPS and seen the header, it will only communicate with the site using HTTPS from that point forward, changing the protocol if needed. By enabling this header you can prevent man-in-the-middle attacks via SSL stripping. There is a good overview @ Mozilla on the header and its benefits. Read More...

Turn any webpage into a WYSIWYG editor with HTML5

published on
There is a little known feature in the HTML5 spec that enables you to turn an entire page or a single element into a WYSIWYG editor with a single line of JavaScript and its supported by every major browser out there. To enable you simply set the contentEditable attribute of an element to true: // make the entire website editable document.body.contentEditable = true; // make an element editable document.getElementById('myDiv').contentEditable = true; To check if an element is editable you check the isContentEditable attribute: if (document.getElementById('myDiv').isContentEditable){ // yes its editable } Both contentEditable and isContentEditable are described in the HTML5 Editing spec.

The Query String Builder

published on
I was after a query string builder to support a System.Net.HttpClient that I was building tonight and it was surprising hard to find something that met my needs. After some digging through the Uri source code I decided to knock one up based on the NameValueCollection. public class QueryStringBuilder : NameValueCollection { public QueryStringBuilder() : base(StringComparer.InvariantCultureIgnoreCase) { } public QueryStringBuilder(NameValueCollection collection) : base(StringComparer.InvariantCultureIgnoreCase) { Add(collection); } public QueryStringBuilder(object items) : base(StringComparer.InvariantCultureIgnoreCase) { if (items != null) { foreach (var propertyInfo in items.GetType().GetProperties()) { base.Add( propertyInfo.Name, (propertyInfo.GetValue(items, null) ?? Read More...