Surf the Dream A discourse of links and articles from Justin Avery

Category Archive: Writing

  1. Space Alphabet

    Leave a Comment

    As you should be well aware I love Space (I’m pretty fond of the alphabet as well).

    That’s why when I came across this yesterday I thought it would be remiss of me not to post about how wonderful this print really is. It’s something that your little ones will love, but also that they’ll learn from. Forget the basic A is for Apple rubbish… knowing what an Apple is will come naturally as they grow up anyway, but understanding what a Black Hole is…. that is opening up a whole realm of possibilities.

    Get your poster now or check out their full list of alphabet posters.

    Read more

  2. Responsive Performance

    Leave a Comment

    I’m setting up a new page over on the site looking for some guinea pigs lucky volunteers to start receiving reports and recommendations around their website performance across a variety of the devices and connections.

    Lately I’ve been doing a lot of reviews of site performance and most of the recommendations are being repeated across a variety of different sites. There are so many things that you can do today to shave off 20-50% of your webpage load time that it seems stupid not to do it.

    The idea behind the first few is to test the waters. I want to know if

    • Do the reports make sense?
    • Are you the recommendations easily achieveable
    • What are some of the barriers to get this done?
    • Do the metrics I’m checking link back to your business goals?
    • Can we track the return on investment for the work (although there’s no investment on your part to start with)

    The page should be up over the weekend and then I can start testing the work that I’ve already put together.

    Read more

  3. Dear Professor Cox

    Leave a Comment

    I’m preparing a talk for an upcoming conference and it’s going to center around the Universe and the Web, two things I’m incredibly passionate about.

    The web side of things I’m pretty solid on… after several years working in it you would hope I could at least grasp a few of the semi-difficult concepts. The Universe on the other hand, that’s a whole other thing. While I’ve kept up a keen interest over the years through a bit of reading there are still some basic concepts (like the 2nd Law of Thermodynamics) that I keep having to remind myself which is higher and which is lower (like a child remembering their left from right).

    To help me with this I’ve reached out to my favourite person in this field, Professor Brian Cox in a rambling contact form through his website. I can only imagine a LOT of people contact him about random thoughts and ideas… hopefully mine will strike a chord with him.

    Hello Professor Cox (or Brian – which ever you prefer),

    My name is Justin Avery and I spend a lot of time working on the web. Before I fell into working on the web I became incredibly interested in Space & the Universe. The first book that really started wrapping my head around things was called “Frozen Star” by George Greenstein. It was written in 1984 so by 1995 when I was reading it I’m sure a few further discoveries had been made, but it certainly provided a great launch pad to understanding (or wanting to understand further). These days my involvement is limited to re-posting NASA photos onto Facebook which has most of my friends and family from Australia asking if I’ve actually started working at NASA.

    For the past 2 years I’ve been wanting to tie these two passions together – the Universe and the Web, and present it to people in a way where they learn amazing things about both fields… but remaining the same lesson for each.

    This year I’ve been very fortunate to be asked to speak at a few Web conference events including Mobile UX in Berlin and an Adobe Conference in the U.S. and I’m working on possibly tying these two things together in a presentation finally.

    First of all, my theory isn’t anything ground breaking. I’m not proposing a new bubbling/expanding multiverse, I don’t have anything that breaks up strings into fibers, and time continues to run in the one direction (that’s right isn’t it?)

    My concept/theory is that man made design always follows nature. Gaudi was famous for this with his huge columns ridged and slightly twisting as they “grew” upwards to support the ceilings. I think the web is following the laws of the universe. I LOVE the description you give of Entropy in the BBC series, and I think that the web has done this over time. Our web pages now need increase their entropy. The previous web pages we have made have been rigid, like the sandcastle example you used, but with the many many devices in todays world our webpages need to be able to adapt… they need to naturally form themselves again given a new context. Like the sand in a sand pile can be reorganised in many ways and still produce the same thing, so too do websites need to be able to arrange themselves given the many different viewport/device/screen/assistive technology they are rendering upon. The web and it’s webpages need to increase in Entropy over time… just like the natural order of things.

    So that is one point. I want to draw other parallels between the vastness of the universe and the vastness of the web. I want to point out that the web has a massive advantage over what the Human Race can achieve in space. If you likened plants, stars, constellations, galaxies to page elements, web pages, web sites, (think of Facebook, Twitter, Google, as galaxies for example) then the web has a massive advantage in that we already have instant interstellar travel capabilities. The coordinates or our destination is the URI (this is incredibly important for the web) and the method of hyper-travel is the hyperlink. I then go into the performance of websites and how that can make it seem like travelling light years if the website is slow, and then also into the physics of actually requesting a web page on a cellular network from across the globe and how some delays are unavoidable.

    Hopefully you can see where I’m going with this, even more hopeful is that you like where it’s going.

    I can imagine you’re incredibly busy, but it would be amazing if you would be able to spare some time to either:
    – write back with a “this is stupid” or “this is awesome” or something in between
    – read over the draft presentation and point out any flaws (or bits I might have missed altogether)
    – jump on skype for an hour for a podcast chat about the concept (I run a series of podcasts at
    – catch up for a coffee to discuss the same thing if you’re ever in London

    In exchange I’d be more than happy to make a few updates to this site to increase it’s Entropy (am I even using the term in the right way?) – basically make it easier to use on mobile devices. If you’d like a bit of a design refresh as well I’m also happy to help out.

    I didn’t mention it to begin with, but I’m a huge fan of yours. After long conversations with my wife about physics concepts I usually find a youtube video of you explaining it much better… so thanks for that ;)

    Thanks for reading and I hope it all makes sense. I look forward to hearing back from you.



    Read more

  4. Next Steps in Responsive Design

    Leave a Comment

    Last week I was lucky enough to be the opening online speaker on Day 2 of the CSS Summit run and managed by Christopher Schmitt and Ari Styles from Environment for Humans.

    It was really enjoyable and even though I was really nervous I think everything went to plan. It was supposed to be 45 minutes long with 10-15 minutes of questions but I managed to stretch it all the way to 60 minutes… albeit having to speed up a little towards the end. To be honest I could have spaced it out to be two hours, but then no one wants to hear someone drone on for that long ;)

    You can flick through the slides below, they were based upon an article I wrote for Net Magazine that has recently been posted their Creative Bloq.

    There were some lovely tweets from folks that watched it so at least a few people enjoyed it.

    I’m going to be speaking at MobXConf in Berlin in September and a yet-to-be-confirmed-but-would-be-awesome conference in the US in October… more about that one hopefully later.

    Read more

  5. Enabling https SSL on your site

    Leave a Comment

    Update 3pm: After MUCH research I finally found that Plesk sucks. Further to this there are some fixes that were required for Plesk to ensure it was more SSL friendly. These updates moved me from an F to a B –


    Update 11am: The certificate was just the first step. I’m getting an F for security at the moment because a bunch of server vulnerabilities need to be fixed. You can see the real results here


    Yesterday I joined the Indie Web Camp in Dusseldorf at the lovely Sipgate. One of the topics that were discussed was around HTTPS and SSL.

    I challenged Jeremy Keith last night over a beer just what the point of using SSL on an otherwise public website. I figured that if all of the content on the site was publicly available then there was no point in making it secure.

    He, of course, set the record straight by explaining that it is more for the person receiving the information. By serving his content over https then people snooping on what I might be looking at will have a hard time seeing that I was reading his blog, and also I could be sure that there was no “Man in the Middle” that were changing Jeremy’s well chosen words.

    I was sold.

    Getting Stared: Obtaining the SSL Certificate

    This proved to be comically difficult. I went to go with NameCheap to purchase the certificate as they were only €8 for a domain (Wildcard is much more expensive). It was pointed out that I could get a free Certificate at StartSSL, this was also one of the topics during the chat yesterday… everyone felt it was wrong to be charging so much money for certificates.

    The comical bit came when I registered with StartSSL and was notified that it would take up to 6 hours to be issued with a certificate, and then proceeded to give me a SSL Certificate error when trying to log back in and check the status.

    Back to NameCheap.

    I purchased the certificate and was away.

    Enabling a certificate on you host

    There are a few different hosting providers that I use. One of which is a friends server and he provides Direct Admin to manage my account. The site I was looking to SSL enable was and it was hosted through my friends server, but unfortunately that particular server configuration would only allow his own parent domain to be assigned a certificate. Back to the drawing board.

    I have two other hosts, a handful of Digital Ocean boxes (one of which runs and Media Temple, something that is set up perfectly to manage multiple domains.

    After locating the DNS provider for the site (Cloudflare controls the DNS for these sites as is using a paid account there) I was able redirect traffic from the old host to the new location of the site, my Media Temple site.

    Generate a CSR Code

    This is the first step after buying the SSL certificate. It is done through the Plesk Control Panel provided through media temples hosting interface. Specific details on that process can be found on the Plesk site

    Activate the Certificate with CSR Code

    Once you have the CSR code (and you’ve safely saved the Private Key as well, I use 1Password for this stuff) then you will need to validate the request. You can either do this through WHOIS Record but the easier way would be to do it through an email verification. For this you will need an email account assigned to your domain ( is the one I had, but that wasn’t a choice for emails). You will want to have admin@ hostmaster@ webmaster@ or administrator@ as an email address to enable this. I host my emails through Google Apps so I was able to go through the user profile and add an alias for

    You need to confirm the details and an email will be sent to the address containing a link with a code for you to copy and paste. This took a few minutes to arrive and I pasted and submitted the confirmation which then results in another email being generated, although this time the email is generated to the administrative contact you specified when you confirm the details (for me this is justincavery at gmail).

    Three emails were sent. One was a thank you, the other was encouraging me to include a SEAL on the site (which pretty much advertises the SSL Certificate provider) and the final one contains a Zip file with 4 .CRT files and also a plain text for your domain certificate.

    The plesk instructions,, show that there is a standard certificate and then a bundle. I didn’t actually get the bundle as part of this process however Francis explained that I was able put them all into a single file myself, so I added each of the other three files into a single file and named it

    I was expecting fireworks when I clicked on commit but it simply added the contents of the files into the page and refreshed. Pfft.

    Enabling SSL/HTTPS

    On Plesk go to the Host Settings where you can update the domain name, hosting type, document root etc. The second option on this page is “Security”.

    SSL support should be ticked and you can pick the certificate from the select box. Save the changes and you are AWAY!

    Check SSL has worked

    You can head over to and test to see if the site now passes.

    You can see the results of

    Redirecting http to https

    The final step is to ensure that all your traffic will now be hitting the https version of your site. Depending on your hosting setup this can be done in a few ways, I found that .htaccess was the easiest approach.

    By adding the following to my .htaccess file I was able to redirect all traffic

    RewriteEngine On
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(.*)$$1 [R,L]

    And we’re done. You can try this out for yourself by heading to and you should be redirected to the secure version of the site. Hoorah!

    Read more

  6. Roland Davies

    Leave a Comment

    I first met Roland Davies playing U12’s cricket in Darwin. I was playing batting at the time playing for PINTS and Roland was the wicket keeper for Darwin Cricket Club.

    He didn’t keep quite.

    “Go on, this bowlers rubbish, smash him out of the park”

    …. and more and more of the same. He managed to convince a few of my team mates as they attempted just that either to be stumped of caught… very clever ploy Mr Davies.

    Over the next two years we played in the same representative team (Darwin) and we played in the NT Championships in Alice Springs and Gove. On the second trip to Gove we both made the NT Primary Schools side managed by Russ Marlborough along with a series of other team mates who would go on to become long time friends.

    The team was made up from

    • Roland Davies
    • Aaron Shattock (shatz)
      Matthew Whealan (Wheels)
      Phillip Sutherland
      Jeff Oliver
      Robert M
      Ross Stanger
      Michael Greenup

    and a number of other players.

    Both Shatz and Wheels went on to become close friends with Rol’s

    – Juice Crew friends with Clint
    – Speaking with David King he talked about how scared Roland was to head out to open in the first games while playing rep cricket. Eventually he just said

    “Bugger it”

    and manned up to the challenge. Following on from that was yet another call up to the All Australian side.

    – He was one of the brightest men on the planet, and in the days of the pub quizes in Darwin he was quick to point out that fact time and time again. As bright accademically as he was there are litterally hundreds of incidents throughout his life that contradict this.

    – Driving back from Cricket training with Jess giving us a lift. He was busting to go to the toilet but thought that Jess would leave him on the side of the road, so instead proceeded to wind down the window and try take a wizz out the window. Jess hit the brakes and roland ended up wearing much of the urine before we set off again.

    – I remember staying over with Roland, a man that could never see past about 9pm even on the weekend as we were growing up. Thankfully Jess is one of those awesome people who didn’t care I was Rolly’s friend and we stayed up to the wee hours eating popcorn and watching the late show. This really bugged Rols and they used to fight with Jess teasing him that I really stay over to hang out with her instead.

    At 15, and looking about 12, we were in Melbourne playing in the U/17’s Australian Championships. We played against the likes of Michael Klinger and Marcus North: but it was other events on tour that really stood out. On a trip to the zoo Roland became over excited and offended a school group as we walked past the monkeys cage exclaiming

    “He’s wanking…. the monkey is wanking off”


    Later that tour Roland would head off with a few of the older lads in the Squad to “The Shaft” which was the only strip club in Melbourne that would let them through the doors. He was devastated when Cherry took off his brand new hat he had got for Christmas to use as a prop for part of her show.

    I remember Roland at St Johns being kept after class one day because of his classroom antics. Not realising what he had exactly done wrong he assumed it was because this particular teacher, Ms Marny, was actually attracted to him and wanted to spend some time alone with him. He actually said

    “I know why you wanted me to stay behind. It’s because you want me don’t you.”

    I thought he was stretching the truth a bit until I joined him in the office to officially apologise to the teacher in question with the headmaster there also. At this point Roland begun to develop a reputation of telling a story… and for those of you that knew him well would have heard the same story told a few times…. each time the fish getting a bit longer. Knowing this Roland and I struck up a deal: he would always tell me the actual truth and I promised to never call him out during the elaboration of a story.

    When Roland moved to Queensland we still kept in touch and I tried to visit as often as I could, usually once or twice a year. It was during this time that he was finishing off University, for the first time with his Law degree, while also introducing me to the Paddo Hotel. At the time he lived on Given Terrece above a Flight Center about 100 meters from the Paddo with Chris Picton. Pico had hundreds of hours worth of stories where Roland had gone off the rails and done something stupid. Roland’s favourite story was the one and only story he had on Chris over a 5 year period of living with him. After an afternoon of playing beach volleyball in the sun and swapping out water in favour of $2 Smirnoff Vodkas we were refused entry back into Paddo 10 hours later. We all retreated back to the apartment when Pico began throwing the contents of the vegetable chrisper down the road at the rather large and angry samoan bouncer.

    One of his favourite stories

    At this point Roland and I knew we were going to be lifetime friends.

    I find it hard to believe that at just 35 years old I can look Roland and say that we’ve been friends for 25 years. That’s a long time to know someone, to share an lifetimes worth of experiences. I love my wife and know her very well yet I’ve only known her for 8 years. Roland I have known for 3 times longer.

    Although we knew that we’d be best friends forever… brothers from different Mothers and Fathers… neither of us ever knew that our life time of friendship would be cut short just a few days ago.

    When I first arrived in London in September of 2007 it was Roland that took me into his home. The first thing we did was go out for a beer down the road in Colliers Wood.

    Roland and me enjoying our first beer for a few years.

    Enjoying our first beer together in London 2007

    20th July 2010

    I hope you are well. I set a new record last weekend and managed to lose a mobile phone on two consecutive nights. I am now on first name basis with the staff at the local vodafone shop. Can you please email me your phone numbers.

    Read more

  7. Responsive Answers

    Leave a Comment

    The other day I came across a post from Paul Robert Lloyd answering some responsive questions for Net Magazine and I realised that I did the same thing last year, I should share my answers as well. These are from 13th November 2013….

    Aaron JL Hatton @Aaron_JL_Hatton
    @netmag @justinavery whats the best way to do responsive design, CSS or Javascript?

    CSS all the way.

    There are element of Javascript that you can bring to your responsive implementations, although they should be primarily used as a progressive enhancement.

    There are some great js plugins available to assist with your responsive designs including FitText, FitVids, Respond.js, picture fill, element queries, and grunticon to name just a few (and you can find all my favourites at responsive design javascript tools.

    Rachael Knight @Rach_Jenn
    @netmag @justinavery media queries- good or bad?or should we simply sort when we find something that breaks?

    Good? Better? Media Queries are the best, they are the special sauce that makes responsive design…. Responsive!

    Always remember the first media query is the lack of a media query, so build your site mobile first. The chances are that the devices that don’t support media queries will require a mobile first approach anyway. As you expand your viewport watch the content stretch, and then included a breakpoint when the content looks rubbish. Use something like Brad Frosts ISH to help you find those in-between breakpoints.

    E for Or @EforOr
    @netmag @justinavery Breakpoints. RWD shouldn’t cater for specific devices, but iPhone/iPad screen sizes as standard regardless of content?

    You should always let the content dictate your breakpoints. When something looks wrong, add a breakpoint and make it right again.

    Today the most popular widths are the iPhone 5 and iPad, but if you look back 12 months it was the iPhone 4s instead (different dimensions). Who knows what the next most popular screen is or when it will come out, so why try and guess the size and lock yourself into something that will change?

    At the end of the day you should focus on your traffic and find which users are accessing your site of what devices and base your decisions off that. We’ve even prepared an easy to use free google analytics dashboard to help you make that decision with your existing traffic.

    Read more

  8. Web design feedback tool for project teams

    Leave a Comment

    Ideas occur to me at the strangest times.

    Being on the internet all of the time means that it can be a bit of a struggle to stay focussed on just one thing. One of the benefits of this is that I occasionally have a moment of clarity and realise

    “Yes, this is exactly what I need and why doesn’t it exist just yet”

    The other day I had one of these thoughts, although I couldn’t tell you exactly where it occurred the main thing is that I had my notebook with me to jot the idea down before it was lost.

    Responsive Web Design Testing

    I’ve dropped the term “Responsive” off the heading here because at this point I’m going to assume that you’re all building responsive sites by default… and therefore we can just call it Web Design.

    A typical situation

    There have been some great articles about designing in the browser or deciding in the browser by folks much smarter than myself. Dan Mall, Stephen Hay, Brad Frost, they’ve all had something to say around the process.

    Typically we would see this:

    • Client needs a new website
    • Content review/strategy/rewrite (after all we want to base our designs upon the content and not Lorem Ipsum)
    • Moodboards, wireframes, design collages, getting to understand the general direction of the redesign
    • Move onto some photoshop comps to decide on some specifics
    • Further pad out the browser based wireframes with more fidelity, or start to ‘cutup’ the photoshop designs that have come from the designer

    At this point we’ve got a few people working on the project. The client, project manager, art director, designer/UX, front end person…. maybe a few others.

    Some of the issues that we might see are:

    • Browser based wireframes aren’t quite telling the full story, or there’s some issues with how they are layed out.
    • Photoshop designs don’t cover a few breakpoint edge cases, and the front end person needs to “fill in the gaps”
    • Client reviews the first set of browser based designs from the front end dev, and things aren’t working the way they expected
    • Art Director or Design check out the front end browser comps and there’s some discrepancies between what the direction was and the outcome.

    Each of these problems are unique, each of them involve various people. All of them are important.

    The process after this is an email from X to Y explaining the problem, or if you’re working with Github or Basecamp (yay for the client) then it’s updated as a discussion. There’s usually a screenshot involved as well highlighting the potential issue.

    This is great, but it’s not the best way to proceed through a series of reviews and fixes to keep everyone working together towards the same goal.

    What would be nice is if there was a browser extension or bookmarklet that could help. The tool would….

    1. log the user into the system
    2. click to clip the section of the web page you are making a point about
    3. a screenshot is taken of the entire browser window (viewport) and highlights the clipped section
      the clipping user now has the ability to add some comments around the issue or intended user experience
    4. the content is then stored ???? (in Evernote maybe to begin with), and along side it the following information is also captured as metadata
      • Date/Time
      • OS (version/patch/release)
      • URL
      • Browser (version/patch/release)
      • networking information (if available)
      • User details
      • Viewport
      • DPI

      This will help categorise the shots that are taken to focus on particular browsers/OS/URL’s etc.

    I suggested using Evernote as the storage because a lot of people are already using it and it takes some of the complexity away, however this could just as easily be configured to run as a complete stand alone web app.

    Possible downsides

    • Does it already exist?
    • Is the workflow going to make sense, is it easy enough to do without a second thought
    • Will the client be able to do it?
    • Can bookmarklets achieve this, or does it need to be browser extensions?
    • If browser extensions will all clients be able to install and use it?
    • Will it run across Safari, Chrome, IE, Opera, Firefox?
    • Does it need to be an OS specific App (OSX and Windows)?
    • There are tools like Pinegrow that will suck down a current URL and turn it into an editable webpage that you can export at a later date. Could/should this be able to do the same?
    • Could this be integrated into Evernote, or GitHub, or does it need to be the complete package rather than something that sits over the top?


    I’d love your feedback and thoughts, especially if something is out there that already does this kind of thing, or if there are other issues I’ve not thought of just yet.

    Read more

  9. How to host your podcasts

    Leave a Comment

    Jeremy Keith recently wrote about podcasting over at

    The article starts off as a bit of an overview of the article Ten Years of Podcasting: Fight Human Nature (

    In the article by Matt he gives kudos to HuffDuffer, a little web app that Jeremy put together that allows you to capture a list all of your favourite podcasts in one place. This allows you to collect and share and find other podcasts around the web that you may not have come across previously.

    One of my favourite things about this particular service is that it relies on being able to access the MP3 file from the originating site rather than create a copy of this.

    The second part of the article points out that folks that are getting in to Podcasting should be hosting their shows on SoundCloud. This is something that I did when I first started taking baby steps into the world of podcasting (I’m barely past the crawling stage to be fair, and often I’m still spitting up on myself and soiling my nappies if we’re going to take this baby analogy further).

    Choosing somewhere to host your files…. in the process of deciding anything anything when building something online comes down to two thoughts/decisions.

    1. Finding something that does something that you need.
    2. Finding something that does something that you can actually find and implement.

    There are many occasions where someone has chosen a particular path because it covers everything they’re going to need to do… but never actually launched because it was too complicated with too many overheads to get going. On the flip side, I’ve seen many things launched that don’t quite fit the requirements because it was the easy options and they were not away of anything else that might have been able to work.

    On a total side note, THIS PROBLEM — complexity vs capability/knowledge — is why it’s okay to charge <insert large number here> for <insert problem here> when it only takes you <insert short time frame here>. It’s because you’ve managed to gain a wealth of knowledge about how best to do things over many many years of trial and error (it’s called charging for your experience, and trust me you’ve got some). I digress.

    Choosing a podcast platform

    For me the things I wanted to achieve were this.

    1. My server had limited space and bandwidth was expensive, so off site hosting was good.
    2. I wanted to track the number of listens
    3. I wanted the podcast to be easily found
    4. I wanted the ability to nest the podcast onto my site (youtube/vimeo embed style)
    5. I didn’t want to pay money for it

    With my limited knowledge of podcasts I decided that Sound Cloud was the way to go. After setting it up super quick and simple I was away.

    Unfortunately after the second week I started to run into problems.

    Sound Cloud only allowed me to upload a certain amount of time worth of podcasts each month, and there was a limit on my overall storage. That, coupled with the fact I talk for a LONG time on the podcast, meant that I had to go onto the pro version of soundcloud.

    Now my expenses had gone up to host them there.

    Next issue was that people wanted to download the podcast, or add them to HuffDuffer. I didn’t have any file apart from the one I uploaded to Sound Cloud so I created a Bucket on Amazon S3, hooked up CloudFront to it and started storing the content there. At this point I considered moving to a HTML5 <audio> player but I still wanted to track the number of listens to the track.

    The next problem came when I again needed to upgrade my Sound Cloud account because I was using too much content. At this point there was little point to keep it up there, in fact the only reason was tracking. AFter a bit of googling, reading and researching I found LibSys which allowed me to host podcasts with them and track them through their interface.

    Now I had sound cloud that was doing nothing except providing a nice-ish (although Flash required) player for my podcasts, and if I used that then I would not get a real understanding on the analytics because they’d be split between SoundCloud and LibSyn.

    At this point I bailed. I migrated all the old show across from soundcloud to Amazon S3 and pointed LibSyn to them, going back over the episodes and replacing the nested <iframe> with a more supported <audio>.

    Read more