Snippets

Forward new port on running vagrant / virtualbox machine

*

How to use local filesystem remotes with git

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 ...

*

Why you should use react.js unminified during development

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...

*

How many times has an URL been tweeted?

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:

...
*

Show a cookie policy notice on first site visit

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...

*

Track external link clicks with Google Universal Analytics

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...

*

Multi-column lists losing their bullets

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:

...
*

A simple Nanoc filter to compress HTML using Nokogiri

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...

*

Building a banner heading effect using HTML and CSS: Part 2

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.

Le...

*

Nanoc, Unicode and UTF-8

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 ...

*