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

Category Archive: Writing

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

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

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

  4. Staying focussed when tired

    1 Comment


    I must be friggin tired. It’s only 9:27 and I’ve already have 3 occasions where I thought of something that I could do, went to do it, and then struggled to recall just what I was trying to achieve.

    The forgetfulness of what the task that I’m currently on is made worse by the fact that I’m working on the computer, and even worse in a browser on the internets.

    In modern day life there are only so many things, physical things, that can capture your attention.

    Imagine you are in your living room. There’s a bookshelf off to the right, in front of you the television is playing an ad in the middle of Quantum Leap where Sam has come back as lady (Oh’ Boy!). In between you and the television is a coffee table with a couple of design magazines, a few bank statements and the Men’s Fitness magazine you keep buying to lose that fat yet do nothing more than flick through the pages to read the work outs… and then check out the gadgets section.

    There’s probably a few other things around the room, but the point is that your attention can only wander to a few things. Lets say the ad is about banking and it switches your attention to the statements on the coffee table. “I must file those” you think to yourself. Then the next ad comes on about Cravendale milk and you temporarily lose your train of thought. Scanning the room you only have 10-15 things that could lead you away from the bank statements. As you glance across them you remember that the previous ad was about banking and your on track again.

    This is not how the computer works.

    This is not how the browser works.

    This is not how the internet works.

    At the moment as I’m typing this (in distraction free mode with notifications muted) I know that behind this wall of peaceful white are 24 tabs open in my chrome browser. Twitter, Adium, Skype, Hipchat, Omnifocus, and iMessage are all running in the background as well. Oh yeah, those 24 tabs…. that’s in one of the chrome windows. Theres 3 other chrome windows open with a similar number still open from the stuff I was doing earlier.

    Within those tabs is Facebook, a design forum, two unfinished you tube videos (one funny, one a tutorial about setting up grafana for front end performance). In another two tabs are two grafana dashboards that are almost finished, and across the others are Linked In, two WordPress Dashboards, a shopify developer dashboard and a client dashboard.

    Now when I get distracted via a mention on a tweet I usually read it right away. While I’m there I have a quick scan through my twitter timeline and inevitably find a couple of links that people have shared. One of the links is to a new responsive website which I want to check out and feature in the examples section, and another link is to an article about performance. I open both a start reading the performance article and half way through they talk about a product that is made specifically for working on responsive sites…. “That’ll be good for the newsletter” I think, “maybe they might like to sponsor an edition too”. I open up the tool and have a quick look before deciding I like it. I head to their contact page to find an email address and open up another tab with Gmail (which I’m sure is open somewhere else… but chance are i’m half way through reading an email and don’t want to lose my place). I hit compose and paste the email address in just before a contact form comes through with someone asking about sponsorship. That looks interesting. Rather than email a possible I decide to review the probable opportunity. I read their thoughts and open their site to check out what they offer and… ohhhh, it’s a responsive images hosted solution. That actually reminds me that there was another similar solution I’d seen last week… perhaps I should get a list of them together a right a post about the different options. I could also see if the other one would like to do some advertising later in the year as well.

    “Wait…. what was I doing again? It was something in one of these tabs. Ahhhh let me see… let me see….”

    OmniFocus pops up to alert me that I’m supposed to get back to a DM on twitter. I head back to twitter to do the DM, but there’s another one there and some more mentions.


    These are all the distractions you have just within a browser window…. never mind hipchat, adium, messages, skype etc coming through as well.

    It’s incredibly hard to stay focussed when you are tired, but the best way I find to overcome this is choose 8 things to do today.

    – 1 Major thing (will take 2 hours)
    – 2 Minor things (will take 30-35 mintues)
    – 5 Small things (5-15 minutes each)

    I’m off to create my list.

    Read more

  5. Monitoring Performance with Digital Ocean

    1 Comment

    Performance is the most important thing when it comes to your website. A lot of people say it’s the content, but a poor performing website will see users leaving in their droves if the load times are too slow (although they wouldn’t be going there in the first place if it weren’t for the content, so I see an argument against that too).

    Please note this is an ongoing article. I’m blogging as I build, so expect a lot of updates as I progress.

    Once Graphite is set up you can apply a prettier frontend by installing and configuring Grafana.

    On your webserver download the latest version of grana


    Next you need to unzip the .tar.gz file

    tar -xvzf community_images.tar.gz

    Now you need to copy the folder to your web root to access the interface. During the graphite installation you copied some details to /etc/apache2/sites-available, this is

    Afterwards I found you also need to download and run Elastic Search, instructions I found here

    While I was trying to add cross scripting capabilities I received an error about HEADERS not being available. By default the headers module is excluded from Apache so the following line fixed that for me

    a2enmod headers

    Installing the chrome drivers I used the first part of this tutorial

    … at least until it arrived at the install phantomjs (which should have already been done previously).

    Common Issues

    Here are some common issues I ran into during the configuration of this. command not found

    Each time I log back into the server to run I get the following error command not found

    To overcome this you need to run

    nvm use v0.10.33

    which kickstarts node into use and allows you to run

    After installing google chrome as per the instructions I was having trouble with running the command sudo apt-get update. After a bit of searching I found that there were duplicate entries in /etc/apt/sources.list.d/ for google.list and google-chrome.list, so I removed the entry for sudo rm google-chrome.list. This article explains the full process for getting this working again.

    info: Starting proxy on port 9092, will wait at most 15000 ms

    I’m getting the following error after rebooting my Ubuntu Digital Ocean server

    info: Starting proxy on port 9092, will wait at most 15000 ms

    I was getting this issues when running -f urls.txt -b chrome,firefox --memory 16 --screenshot --profile mobile --viewport 480x320

    The -b chrome,firefox seems to be causing the issue. After I removed this it worked fine.

    Getting frequent peformance monitorin

    This may not be the best way to do this… but I wanted to get reports on the site I was working on every 60 seconds. To get this done I ran the following command while on the Ubuntu commandline

    while true; do -f urls.txt --memory 32 --name "Demo" --graphiteHost localhost; sleep 60; done

    Read more

  6. Write as you do

    Leave a Comment

    As you work your way through a problem that you haven’t faced before always try and make some time to document your process.

    Lately I’ve been working on a few projects that have been out of my usual comfort zone. They’ve involved a little more javascript and a bit more system administration work. While I don’t consider myself to be an expert in either of those fields, I have found that I’m pretty good and finding the right google search term to get the right answer.

    On a few occasions the results I have found have managed to get me 90% of the way, but some tweaks have been required to get it all working in my particular scenario. At this point I should have written down my actions and captured the results through here. My Blog. My Web Log of what happens. The place I write to remind me about stuff. This would allow me to reference my own instructions again should I need them, and also provide the 100% correct solution for someone with my same problem.

    Unfortunately I’ve been a little lazy and not had as much time to document these findings recently, and as a result I can no longer remember what I had solved. What I do know is that some time down the track I will lose that time 10 fold trying to resolve the same problem.

    Always write down what you’re doing when discovering something new, it will help me out one day too.

    Read more

  7. Aaron Draplin on logo design


    This is a fantastic short video as Aaron Draplin takes you through the approach to designing a logo. Super inspirational and made me want to start creating immediately.

    Most logos aren’t designed in fifteen minutes, but most designers aren’t Aaron Draplin. Aaron’s a Portland fixture by way of the Midwest, the owner of Draplin Design Co., and an advocate of “blue collar” design: design that works. Here he takes our logo design challenge, creating a dozen iterations of a logo for a fictional construction company. Not inspired? Just wait. Watch as he sketches, brings his ideas into Illustrator, and tests and tunes the different iterations. The logos Aaron creates prove design can elevate any company or brand. Along the way, he provides tips for freelancing, finding inspiration, and providing clients context for logos that won’t just live in PDFs.

    Read more

  8. The Art of Innovation – Guy Kawasaki at Gartner Barcelona

    Leave a Comment

    1) Make Meaning… not money

    Make the world a better place. When you are building something ask yourself “is this making the world a better place?”

    2) Make Mantra

    Most people come up with a Mission Statement. Most mission statements are developed through the following process.

    1. 50 senior employees have an off site week. This is usually run out of a hotel with a golf course
    2. The company will bring in an external consultant. Most often a woman. Most often wearing all black and a turtle neck. Most often she will also have a dual career and moonlight as a lemans coach because getting a mission statement is similar to delivering a baby.
    3. Cross functional team building. Fall into each others arms and sing Kumbaya.
    4. Once this has happened for 2 days everyone is pissed off that their time has been wasted so they want at least one word in the missions statement. This is why Mission statements are super long and bullshit.

    Don’t have a mission statement, have a mantra.

    • FedEx: Peach of Mind
    • Nike: Authentic Athletic Performance

    Explain your goal in 3 words.

    3) Jump to the next curve

    In the beginning there were ice farmers. Ice farmers would go to frozen lakes and rivers and cut lines in the ice and farm the ice. This is 1.0.

    Next came centralised ice factories. These were huge buildings filled with giant freezers. The freezers would produce the ice and they would have vans that would go out and deliver the ice to people who needed it. This is 2.0.

    Lastly came the fridge. This is your own personal ice factory. This is 3.0.

    The Ice Farmers never jumped to become Ice Factories. The owners of Ice Factories never jumped to build Fridges.

    You must be able to jump to the next curve.

    You should always define yourself by what you provide, not what you do. These examples were all about providing a clean and cold environment, not about the farming or the factories or the machine.

    • Uber: Transport
    • AirBnB: Hotels
    • TaskRabbit: Errands

    4) Roll the Dice

    You need to be able to stand out from the crowd. The chances are there’s going to be other people competing in your area. You need to roll the dice.

    For that you need to focus on 5 things

    1. Depth: Reef came out with a thong with a beer bottle attached in the sole. This doubled its usefulness.
    2. Intelligence: MyKey from Ford allows the owner of the car to program the key and set a maximum speed of the car. Intelligence.
    3. Complete: If you’re building a service then provide it entirely. Produce documentation, API’s, Video training, Webinars.
    4. Empowering: The product should make you feel like you can accomplish more. The Dell is just shit. It competes on price. The Apple Air makes you feel empowered, like you can do anything.
    5. Elegant: Herman Miller changed the face of chairs through a beautiful elegant design.

    5) Don’t worry, be crappy.

    Ship your product even though it has some shitty bits. That doesn’t mean ship a shitty product, it means it doesn’t have to do everything before you ship 1.0.

    By being first to launch you gain all the benefits because there’s nothing else out there that can compete with you.

    6) Let 100 flowers blossom

    If people want to use your product in a different way, go with it and reproach the market in a new way.

    A skin care product called “Skinbesoft” was released. It was a luxury product that was targeted at middle aged women to help keen their skin looking young and soft. The product sold well with their target market, however it wasn’t because it kept their skin soft. Instead the mothers found that it was an excellent insect repellent and wasn’t as harsh as DDT on the skin of their children.

    This was the point at which they should have kept the product but changed their approach and marketed it in a different way.

    Let your product blossom where ever it can.

    7) Polarize People

    Great products polarise people. Great products create emotion, emotions can cause polarity.

    This of the Mac vs Windows, the iOS vs Android. The iPhone and Samsung S4. These consumers are polarised and LOVE their product. Great products polarise people.

    8) Churn, baby Churn

    Listen to your customers after launch. Adapt to your changing customers needs. If you’re willing and able to churn then you’re in the perfect place to jump to the next curve.

    If you miss the next curve you’ll never make the double jump.

    Don’t be afraid to churn and adapt to the changing market. Focus on what you’re providing, not how you’re doing it.

    9) Niche thyself

    On a simple graph of Uniqueness vs Value. Gartner or another analysis will charge you $500,000 to explain this to you. Here’s the break down in 4 simple bullet points ($125,000 per point).

    1. Unique=0, Value=100: This corner, bottom right, is all about the price. It’s the Dell approach to computing. The value of Dell is huge however it’s not unique at all, therefore you’ve got thousands of competitors all vying for the best price.
    2. Unique=100, Value=0: This corner, top left, is called the Stupid corner. You have a product that is completely unique, but there’s absolutely no value in it. Quit, or be acquired by Google.
    3. Unique=0, Value=0: This corner, bottom left, is the corner. This is the dogfood .com example. When the boom hit people bought This was based upon the following idea. There are 69,926,000 dogs with owners in the US. Each of those dogs will eat at least 1 can of dog food every day. That’s 69,926,000 cans of dog food consumed every day, or 25,522,990,000 cans of dog food every year. The supply chain of dog food goes Cow – Killed – Chopped – Canned – Store – Consumer. By cutting out the Store you could save the consumer the hassle of driving to the store and the additional markup on dog food to help pay for the storefront and employees to stack the shelves and serve the customer at the till. If you could conservatively get 1% of the market and made just $1 per can of dog food then your income would be $699,260 PER DAY; $4,894,820 PER WEEK; and $255,229,900 PER YEAR. Even at 0.5% of the market that is a huge amount of profit. To get that 1% you need to be cheaper or more convenient. You can drop the price by $1 because you’re without the storefront and employee’s, but now you need to factor in the shipping costs to send out these cans of dog food to your 1% of home shoppers. That adds the $1 back onto the price. Well lets focus on the convenience. Now the dog owners don’t have to get in their car and drive all the way to the store, but because the dog food is delivered by a courier then they need to be at home to receive the dog food, and the courier will be there between 8am and 12pm, or 1pm and 5pm. Now the dog owner has to stay at home for half the day to buy a can of dog food for the same price they can get it from the shop because it’s more convenient for them… oh wait it’s not. Finally, because you can make over 1/4 of a trillion dollars with just 1% of the market you have,,, and thousands of other competitors. ZERO VALUE, ZERO UNIQUENESS.
    4. Fandango – Buy tickets for a movie and guarantee your seat. You don’t need to line up when you get there. Unique and convenient.
      Smart Car.

    10) Perfect your pitch.

    Customise your introduction. This creates a sense of comfort within the room that the pitch is designed just for the client. Take pictures of yourself with the product they sell, the the city they are based… something to customise your pitch.

    Follow the 10 – 20 – 30 rule.

    10: Slides. No more.

    20: Minutes. No more. It could take 40 minutes to get the wifi and projector working… you need to be able to nail your pitch with the time you have left. No one has ever been disappointed that a meeting has finished before the hour mark.

    30: Point Size. This is the easiest to read. If you need to reduce the point size to fit text on the screen then you’ve got too much text. What usually happen 15 seconds into a presentation like this is that the audience will realise you’re reading the slide and work out that they can read faster than you can talk… and then you’ve lost them. Another way to look at it is halve the audience age. 70yo=35pt, 60yo=30pt, 40yo=20pt.

    11) Don’t let the bozo’s drag you down.

    Read more

  9. The Web Is Thursday night playlist

    Leave a Comment

    One of the great things about The Web Is conference is the sideshows.

    This year on the Thursday night there’s a musical get together at the Founders Hub. Apparently there are plenty of instruments for people to join in with, you just need to learn Walk (Foo Fighters) and 20th Century Boy (T. Red).

    Read more