Category: javascript

Brain dump February 2013

Posted on February 28, 2013October 5, 2023 by Rick Hurst

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)

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

Combining and minifying assets on a PHP site with PHP minify

Posted on February 6, 2013October 5, 2023 by Rick Hurst

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.

Brain dump January 2013

Posted on January 31, 2013 by Rick Hurst

I haven’t posted to this blog much recently, so I thought i’d set myself a new routine of blogging at least at the end of each month to record some thoughts and links.

Firstly, as of Jan 1st i’ve been Freelance again – towards the end of last year while working full time at Potato, I got a bad case of freelancers itch, and felt that I wanted to make more time for working on other business ventures. When a three-month contract as a mobile web application developer at ISM games came up, I jumped at it. This time round i’m going to try my hardest to not end up juggling client and contract work, and to make sure that I free up time to pursue other things, either between contracts or by landing part-time contract work down the line. The important thing is that i’ve thoroughly learnt from the mistakes I made during my last stint as a freelancer!

Technology-wise i’ve been really enjoying cutting my teeth in proper “single-page” web app development using JavaScript, Backbone.js, Marionette and jQuery mobile. As an advocate of Progressive Enhancement, it’s a bit of a departure for me to be building JavaScript-only apps, but with the application logic mostly on the client side, to make it function without JavaScript really would mean building the application twice. The only compromise approach that i’m aware of is this approach used by airbnb, where JavaScript is used both server and client side, so HTML can be pre-rendered using the same templates on both sides, and application logic can also be shared (to an extent). It is also becoming increasingly clear that JavaScript-only apps needn’t be inaccessible, with screen readers apparently supporting javascript. I haven’t tried any of these, so i’m sure there’s plenty to learn in that area.

I’m also now “getting” the whole mobile-first approach for building web apps, in part due to having to go back to my old Nokia N95 for a while when I had to give back my company Android phone when I left my day job. No, I didn’t use any web apps on the Nokia – it was just too painful to even try to get logged into gmail, but not having access to a smartphone, and not being able to use mobile-only apps such Instagram, reminded me that web apps are primarily being used on smartphones and tablets, and this trend will only increase. Getting these mobile web apps working well, and then adding in additional stuff (only where needed) for people using them on desktop is the right approach, rather than the whole “squash and hide” approach used in responsive websites to scale down from desktop to mobile.

Apart from that, i’m all about Python and Django still – The back end of the web app i’m building uses Django rest framework and I have some personal/ business projects in the pipeline using those.

Lastly, i’ve really been enjoying blogging on my on the road blog, particularly writing about non-web related stuff, such as VW T25 campervans 🙂

Learning by Teaching (a crash course in Backbone.js)

Posted on June 15, 2012October 5, 2023 by Rick Hurst

rick hurst southville js backbone talk

On Wednesday, the day after my lightning talk at the Django meetup, I gave a talk “An introduction to Backbone.js“, at a newly formed javascript meetup, loosely based around the locality of southville in Bristol. This was an interesting experience as other than using Backbone.js on one project (largely written by other people, so I only really dipped into it to add stuff), when I was volunteered to do the talk by Andy Mcgregor, I didn’t actually know a great deal about Backbone!

When it came to the crunch, i.e. pretty much the day before the talk, I started searching for online tutorials that might demonstrate what I wanted to cover in the talk, and the first one that I found was Hello Backbone.js by Artur Adib, which provides a fantastic step through with a set of examples building up on the previous example. I created a little “To Do” list app based roughly on these examples.

I then found an excellent set of video tutorials called Introduction to Backbone.js, by Joe Zim, which run through some interactive examples for Models, Views, Collections, Routers and Ajax within backbone, which really helped the penny drop for me, and gave me a basis for my own live-coding examples. The audience (of about 20 people – not bad for a highly localised, highly niche meetup!), were a mixture of people who already know backbone and people who have never used it, but hopefully there was something useful there for everyone. On a personal level, being put under pressure to be able to demonstrate something, accelerated my backbone knowledge very quickly, to the point that I would confidently start my next project using backbone.

The moral of the story is – if you want to learn a new skill quickly, you don’t need to pay to go to a workshop – volunteer to do a talk instead! Even if you don’t want to do a talk, find your friendly local user groups (or friendly online user groups, if there’s none local to you), and get involved. I’m not knocking paid workshops – there’s a place for those and i’m sure some of them are good value for money, but i’ve always loved the way that the web community are happy to share their knowledge for free, and you really can find the knowledge out there without spending your hard earned cash! Being part of the web community provides valuable support too when you get stuck, something that doesn’t happen in the world of “traditional” paid training.

The next southville js talk is “An introduction to CoffeeScript” by Tom Holder on wednesday 12th July, kindly hosted again by SimpleWeb. Also keep an eye on the Bristol Web Folk calendar for upcoming web related events in Bristol – there’s loads!

Photo above nabbed from an instagram pic by Chris Mytton

JSON – JavaScript Object Notation

Posted on August 21, 2006 by Rick Hurst

Another abbreviation(?)/buzzword that i’ve been hearing for months but I have only just understood what it is. From All in the Head (Drew Mclellan’s blog):-

if you’re not familiar, JavaScript Object Notation is a method of describing data structures such as arrays and objects and their contents in plain text. On receiving a chunk of JSON you can eval() it to recreate the data structure within your script