Brain dump February 2013

This post was written 4 years ago.
Thu, 28 Feb 2013
I spent a lot of my spare time working on my camper van blog this month, which has now been relaunched as campervanthings.com. As well as covering my own experiences with mobile working and my VW T25 camper, it is now also a general blog about camper van things (hence the new name!). I'm also tweeting separately about camper van things from @campervanthings. The campervan things blog is mainly just for fun as it's a personal passion of mine, but i've been brainstorming ideas of how I could create a sideline for my business with it - set up a shop? advertising? buying another camper to hire out? - who knows!

One particular improvement to the blog is that I have removed the old lightbox plugin and replaced it with Photoswipe, a responsive image gallery/ lightbox, which make the site much more user-friendly when used on a smartphone or tablet. (Screen grab below - click through to the blog post and click on a thumbnail to try it out)

screengrab of photoswipe being used on campervanthings.com
At my current contract gig i've been spending a lot of time testing JavaScript with Jasmine and Grunt. I've also been getting to know chrome developer tools much better - the most useful discovery being breakpoints in Javascript (thanks to a colleague at ISM who was bemused by the massive amount of console.log statements I was littering the codebase with).

chrome developer tools breakpoint
I've got my eye on packery for too old to skate - it currently uses Masonry, but with different length blog posts it often leaves unwanted gaps, so i'm hoping that this along with maybe some smaller blocks I can fill out the page retaining the angled content.

I am now plugged back into the matrix thanks to a contract-free Google Nexus 4. It's a great device - I was actually on the verge of buying a contract-free iPhone 4S, but the Nexus came back into stock, and is a much higher spec device with bigger screen, for much less money. I've found it has helped massively with blogging as the on-screen keyboard is big enough to type fairly quickly in those "down-time" moments. I had to resort to trimming my sim card to microsim size, using a template.

trimming a sim card down to microsim size
Tags: javascript / campervan /

Combining and minifying assets on a PHP site with PHP minify

This post was written 4 years ago.
Wed, 06 Feb 2013
loading seperate css and js assets
I've been getting carried away with my Camper Van blog over the last couple of weeks, overcompensating for my lack of actual design skills by adding loads of fancy effects such as Supersized full-screen background images, and Photoswipe for responsive photogallery/lightbox.

Looking at the network tab in chrome developer tools I was reminded how many http requests are needed to serve all the seperate css and javascript files, and that I needed to optimise it a bit. There's loads of different ways to combine and minify CSS and JavaScript assets - for example using something like Live reload on the desktop during development, or using a server-side on-the-fly system, e.g. Django Compressor on a Django site. In either case this is usually in conjunction with a CSS pre-processor such as SASS

As "on the road" is a PHP site, and I haven't got round to setting up SASS stuff for it, I decided to use PHP minify, which lets you specify groups of assets to be combined and minified, then serves them up on the fly, using caching (filesystem or memcache) to keep it snappy. The set-up is fairly straightforward, the only thing that might trip up a novice is setting up the caching.

optimised assets loading
As a result (after a bit of refactoring to get things working after moving the js from the head to just before the closing body tag), I now have the site loading in a single js and a single css file, considerably improving the load time, and neatening up the source code. Note that these two screen grabs were taken on different internet connections so the actual load time of the assets shown isn't a good comparison.
Tags: php / css / javascript / site build /