Dave Dupplaw Full Stack Developer http://david.dupplaw.uk/ Making stuff work... most of the time.

301 redirects

A 301 is the HTTP response code that tells your browser that the site it visited has been permanently moved to somewhere else.

When moving a site, you can use 301s to automatically forward vistors from your old URLs to your new ones.

The simplest form, if using Apache’s .htaccess files which allow you to control the web server’s behaviour.

In the root of the location you want to redirect, add a file .htaccess and put into it:

RedirectPermanent / http://my.new.domain/

Two things to note here:

First of all, the redirect is permanent. That means that if you make a mistake and want to go back, you have to clear your browser history. If it’s been out in the wild and your customers have accessed that redirect, you are stuffed because you cannot force your customers to clear their browsing history to fix your 301.

Secondly, this redirects the whole site. That is, any paths will be included in the redirect. So, http://my.old.site/path1 will be redirected to http://my.new.domain/path1.

This may not be what you want. For example, when I was doing this recently, I wanted to move an app from a path on a server to a subdomain of its own; i.e. http://my.old.site/path1 to http://path1.new.domain. This first redirect does not work for this case.

To achieve that use case, you are best using a matching redirect but then ignoring the matching part:

RedirectMatch 301 ^/ http://path1.new.domain/

What this does is match the path, but then ignore it in the redirect. If I put this .htaccess file into the root of path1 folder it will redirect to the appropriate subdomain.

To get around the browser caching issue, some people suggest slightly more hacky use of the 302. HTTP 302 means the content has been temporarily moved and has been found elsewhere. If a URL is supplied in the header, the browser should go to the new place to look for it. It’s the same as the other commands, but using 302 instead of 301:

Redirect 302 / http://my.new.domain/

It’s a bit hacky as it is only supposed to be a temporary redirect. Indeed, you could argue that if you make a permanent redirect, it makes sense for the browser to cache it as permanent means it’s not going to change (and shouldn’t). But people are fickle and circumstances change. So, using a 302 will allow you to change your mind in the future, but will incur an overhead as the bounce to and from the server will always happen.

Hope that helps someone in their redirection wormholes.

Flexible CSS with FlexBox

Flex box is the new kid on the block in layout tools for CSS. It’s come from a combination of all the various existing grid technologies that were necessary due to the lack of anything like Flex box. The good news is that it’s now widely supported enough to be used on pretty much any website (unless you intend to deploy to Opera mini users). Another advantage is that, because it’s implemented at a browser level, it’s noticeably quicker than CSS ‘hacks’.

So, I’ll show you here a quick overview of flexbox and how to make a simple site skeleton with fixed header and footer and proportionally stretching panels inside.


Christmas Handbell App for Groups

Quite a few years ago now, I purchased a pack of Christmas crackers that contained small handbells, as well as a baton and some music. A bit like these. It was great fun at Christmas dinner trying to recreate some Christmas carols.

Later on, I purchased some bigger kids’ bells that were a single octave chromatic scale (like these). I also purchased an extension to extend the range to an octave and a half - and they took nearly a year to arrive!

My Set of Bells

I teach a music workshop once a month and when it comes to Christmas we usually play some carols and recap the things we learned during the year. One year I took the bells and we had a lot of fun trying to make music with them. With so many bells, it’s a bit easier when there are 12 people to have 1 bell each!


Webpack and Typescript for Google Cloud Functions

I’ve been doing some work recently with api.ai and looking at ways of making more interesting chat bots using their fulfilment functionality. This functionality allows you to call out to services to provide the processing for a user’s specific intent.

One way to deploy such a service would be on Google Cloud using their Cloud Functions. These are tiny pieces of Javascript (node) code which performs a function. They are true microservices and Google provide the entire platform (Platform as a Service [PaaS]).

Google’s online tools do allow you to code directly on the Cloud Console, but it’s pretty awkward and the code has to be vanilla JS. So I wanted to find out how easy it would be to make a more maintainable cloud-function codebase using Typescript.


What3Words and Which3Words

Addresses are long and tiresome to remember. And many things don’t have addresses.

“Meet me by the lake. Near the bench on the side with the bridge. The longer bridge - the one with the knobs on.”

“Which lake?”

What3Words is an attempt to overcome this failing of our addressing system.


GitLab CI with Docker

One of the reasons I moved to GitLab is that it provides free private repos as well as free CI. It’s CI is based around Docker images which makes it dead easy to build any sort of project from GitLab.

I thought I’d share with you here the simple configuration I use to build things (such as this blog) and put it on to my web-hosting.


Clarity Icons

We all love icons. Icon shopping has a similar effect on me than walking around Staples does. There’s a stationery buzz.

Font Awesome is the ubiquitous, go-to set for web-icons these days, but it’s still a bit fiddly to get it into a Typescript/Webpack project needing sass imports, web-pack loaders.

So, there’s always a bit of excitement raised in me when I find a new source for fonts or icons. And today I found Project Clarity.


Typescript Maps

Unlike ES6, Typescript doesn’t have its own implementation of maps.

In ES6, you can instantiate maps pretty much the same way as in Java, except you can then use set and get methods to, er, set and get values.

let map = new Map<string,string>();


Running stand-alone Ruby script in a Rails Environment

I found out today how to have small stand-alone ruby scripts that run in a specific Rails environment.


Trello Card Label Extension

The Card Color Titles for Trello is a must-have Chrome extension if you use Trello at all.

The labels that you add to cards show up as little colour bars by default and I’ll be damned if I can remember what all the colours mean.

Default Trello Labels


SVG Icon Resource

It can always be a bit of a faff to find decent icons when you’re building something. Font Awesome is an obvious go-to resource for some icons, but sometimes they’re just not enough or they don’t have the right ones.


My First SmartThings App

The automated home has not yet reached ubiquity, but systems like SmartThings are certainly making it easier to jump into the fun of controlling the phsyical world; even more so when Google Home and Alexa all come with SmartThings integrations.

As a dad to 5 and 7 year old boys I often find lights left on around the house and when those lights are upstairs there was a time I’d have mumbled a few choice words and thudded my way up the stairs to turn it off (surely children should have evolved to understand how high energy prices are now?). But no longer!


Redis + Search = RediSearch

Just came across this nice looking project: RediSearch. It adds on top of Redis a full-text search engine capable of incremental indexing, fuzzy searching (for autocomplete) as well as numeric range and geo searching. It has a bunch of libraries ready to go in various languages too. Looks to be an interesting alternative to heavier weight frameworks like ElasticSearch or Solr.