Vagrant is great for starting up virtual machines for development. A quick and easy setup is to use basic networking with port forwarding so you can serve ...

If you develop with git and use multiple computers, you may find you want to keep your repos updated across these different computers. One way to do this is to use a git repo hosting provider like Github and push and fetch from remote branches.

Though there could be reasons why you might not want to ...

Facebook’s React javascript library is gaining popularity. When using third party javascript code, it’s easy to download the minified version and develop against that as you’ll want the minified version in production anyway.

React, however, is an example of why this isn’t always the bes...

You may have noticed how some websites let you know how many times URLs have been tweeted. How do they do that? The twitter api will help.

The the call we need is:

http://urls.api.twitter.com/1/urls/count.json

This call takes a url as a parameter. Let’s look at an example:

...

Sites in various parts of the world, for example the UK, need to display information to visitors about their use of cookies. This is typically done with a cookie information page and a notice which appears on a user’s first visit to the site.

Many sites store the fact that a user has seen t...

Google Analytics and the newer Univeral Analytics are useful ways of keeping track of how users interact with your site. If you want to track which external links are clicke...

If you’re trying the CSS columns property, or its various browser prefixed variants, you may notice your bullet points disappearing. This can happen on Chrome and to a lesser extent on Opera.

The Problem

Take the following HTML for a list:

...

When using Nanoc, there are standard filter options for compressing CSS and minifying javascript, but there’s no equivalent for HTML. However, we can use Nokogiri to trim our HTML a little by removing some whitespace and getting rid of comments.

To do this, we’re going to build a custom Nanoc filter. Create a new file in lib/f...

We take a look at how to add a bit of extra flourish to a pure HTML and CSS banner. We’re going to add a tail to an existing banner. You’ll need to use the code for the effect already created in part 1.

When using Nanoc, if you get weird characters in your HTML in place of some special characters or accented letters, you may well need to change your character encoding.

An example is ÔÇö instead of — (an em-dash).

First check your source file is in UTF-8. For example, you can use the Encode in UTF-8 without BOM ...