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

Category Archive: Writing

  1. Creating content in less than 5 minutes a day

    1 Comment

    Creating content is one of the hardest things to do when it comes to having a website or a blog. I’m going to share with you the easiest way to create great content daily on your site and across a series of social networks in under 5 minutes.

    This post will show you how to be consistent by setting up some automatic rules:

    • auto post to your blog when you bookmark a page.
    • automatically tweet when you blog
    • automatically share with facebook when you blog


    Read more

  2. Delete Google Analytics Properties

    Leave a Comment

    Over the past few years I’ve picked up more than my fair share of domain names, and along with them Google Accounts. It’s recently got so bad that I can’t actually add any more GA accounts any more.

    Now I can breathe easy as Google have recently announced that you can now delete old properties.

    Google Analytics Delete Property
    Google Analytics now provides you a delete option

    There are some caveats around this and it’s important to understand the consequences of losing the data you’ve gained on these properties.

    Read more

  3. Permission errors when using sudo

    Leave a Comment

    XKCD Comic about Sudo

    Sudo is usually the command that gets me past any permission issues on the server or my Mac.


    Today I was working my way through setting up Grunt for a responsive project and I was running into issues with the Compass part of the grunt file.

    After some googling I found I needed to update the gems and reinstall compass.

    This through permission errors even when prefixing the command with sudeo

    sudo gem update --system && gem install compass

    After a bit of searching I came across a tip that fixed the problem

    access root terminal by typing sudo -s

    I’m not sure why, but this worked a treat.

    Read more

  4. Designing a Mobile App

    1 Comment

    Mobile apps go through a variety of what I would refer to as “Design” stages. In this article I”m not talking about the visual design of the application, that’s certainly not where my skills lie, but instead I’m talking about the functional design of the application, the user experience and the data required to make it both usable for the customer as well as for the client.

    The approach I went through for this project came from the years of experience I had in engaging with clients to develop thier websites but mainly from the video series from Keynotopia creator Amir Khella.

    Step 1: Interview your stakeholders

    I’m going to guess that you’re approaching this problem from one of two ways

    1. You’ve got a great idea for an App and you want to know what to do next
    2. Someone has come to you to help them with their app and you want to know what to do next.

    Regardless of the position you are in you can still follow the same next steps.

    Talk to the stakeholders

    Book a meeting with the key stakeholders for the app. You want to chat about exactly why they want an app and how the project is going to be judged as a success. What are the main business drivers around the project, are they to increase engagement, make money, lower phone calls or visits to physical stores?

    Even if you are in the first category where it is your own idea it is really important that you ask these questions for yourself so that you are clear about what you need and you can appraoch the next phases in a logical structured approach.

    Talk to the customers

    Once you’ve talked with the stakeholders I find it beneficial to meet and speak with actual people that will be using the applicaiton. Ask them some of the following questions

    • Do they find the overall idea useful?
    • Will they download it?
    • Would they pay for it?
    • How often would they use it?
    • Would they prefer to just do this on a website?
    • Is there anything missing from the app concept?
    • Is there anything that isn’t needed in the concept?

    Talk to IT & Marketing

    This presumes that the inital stakeholder discussions were with the business owners. The Managing Directors, CEO’s, General Maagers, the people who have the vision (and the sign off for budget). The IT and Marketing teams are going to want to be involved, in fact they’ll force their way into the project, so it’s well worth consulting with them ahead of time.

    IT Team

    If the application is going to require data to be hosted then these guys are the ones that will be building or supporting that system. The chances are that the data being captured by the app will also need to be pushed around to other existing business systems or require reporting agaist. If you can spend some time with IT you will be able to find out the limitations of their existing systems, or it might throw up some valuable inforamtion about the way the data will need to be structured because of an existing system or a new system project that you weren’t aware.

    Marketing/Communcations Team

    Although I’m not covering off the visual design as part of this article it is a large element a project like this. The Marketing/Communications (MarComs) team will need to explain the tone of voice the company has and also point you towards any rebranding ideas they’ve got as well as existing material that might help you get an idea of how the visual layer might need to work.

    A great example is the way the company markets to their customers. Are the divided into segments like Business and Personal, perhaps segmented by country, maybe there segmented by services the company provide. This is most likely a detail that escaped the MD’s interview but something that becomes incredibly important at launch.

    Another great reason to talk to the MarComs is that the app could give them another outlet for messaging and reaching their customers.

    Step 2: High Level Overview

    The first step you need the following:

    • Paper
    • Pencil

    The aim of this phase is to get an overview of the key requirements for you app.

    • What functions will it have?
    • Where does the data need to flow?
    • Do the interactions need to be created, read or written?

    Below is an illustration of the application I was preparing for the client. The main screen is the center of the application and is what everyone will see by default when opening the app. From the main screen you need to be able to create items, read items (both ones that you’ve created and other items that have been created by other users) and update settings.

    The high level overview for the application

    For this process you don’t need to get into the tiny details of what you can do on each screen, that step is coming up shortly. You just want to capture the overall purpose of the application, the bigger picture of what it needs to do to function.

    If during the next phase you come across other features that you might have missed, or alternatively the client introduces additional requirements, then you can always come back here and make changes to this diagram.

    This article is a work in progress, check back for step 4 continuing below…..

    Step 4: Wireframing the Screens (creating the dots)

    The high level overview for the application

    Step 5: Process flows (joining the dots)

    The high level overview for the application

    Read more

  5. Chaining pseudo selectors

    Leave a Comment

    I’ve been working on a sales dashboard for work that highlights the number of sales, number of meeting, contribution to the overall targets and a few other things that make a member of the sales team proud they’re hitting their targets.

    The layout requirements I had for this part of the dashboard was

    • Zebra background to differentiate rows.
    • Gold Border around the top performer
    • Golden Crown sat upon the top performer

    Here’s what we’re after….

    The layout we are aiming for….

    Zebra background with pseudo selectors

    The zebra background is done through the use of the nth-child approach.

    .sales-team:nth-child(2n) { background: #eee;}

    What we’re doing here is saying we want to select the element with the style .sales-team and then for every second element, (2n), we should add a background: #eee;. That’s that problem sorted.

    The next part is getting the golden border and the crown to appear.

    Psu, psu, psuedo

    This is where we apply a border and the crown on the first element.

    The border can be added by selecting the :first-of-type pseudo element.

    .sales-team:first-of-type { border: solid 5px gold;}

    The next requirement is to add the crown as a background image. Now I wanted this to sit on the top corner of the first row so that it spills out of the container on the angle.

    To accomplish this I wanted to add a :before pseudo element and use that as the background image for positioning, but I needed it to run on the same :first-of-type element.

    Fortunately you can daisy chain pseudo elements together so I ended up with

    .sales-team:first-of-type:before {
        content: '';
        background-image: url(../images/crown.svg);
        background-repeat: no-repeat;
        background-size: 75%;
        position: absolute;
        width: 150px;
        height: 150px;
        top: -45px;
        left: -40px;
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        -o-transform: rotate(-18deg);
        transform: rotate(-18deg);

    The above code we are selecting the first element with :first-of-type, and then creating a :before pseudo element to contain the Crown.SVG file. This hook is then used to position the background image on the top left side of the element a rotate the crown.

    The result is something that works quite nicely and cheers up the sales team, or at least the one at the top of the table.

    Read more

  6. Responsive Design is still hard/easy — Dan Mall

    1 Comment

    During the 2014 Beyond Tellerand Conference Dan Mall shared his tips and tricks on how to work smarter in todays responsive world.

    Henry Ford: 1907 : A motor car for the great multitude. He had a dream that everyone should have access to a motor car. He created an auto line assembly.

    Moving line assembly reduces price, lower the skill level (make it easier to build things so the barrier to entry for people is very low), Brings workers to the work (they stand on the line, there’s no wandering around to find the work), well paid workers would stay even though the work was boring.

    We still build our agencies around this exact model. Why?

    Frameworks (not processes)

    We need Frameworks in our workflow, not processes.

    Newtons cradle is a process. We pick up a ball and we know what will happen.

    Newtons Cradle
    Newtons Cradle

    Football is a framework. There are rules, constraints, a controlled environment but what happens on the pitch is a surprise. The aim is to put the ball into the net, but how we go about that is up to us, it’s up to our opponents (or clients). We need agencies to be like this.

    As an industry we work in a traditional waterfall methodology. UX->Design->Development

    Tracks in a waterfall project are like running tracks. It’s a race to finish, and you do it without knowing what is happening in the other lanes (nor do you care).

    Waterfall to Agile in 6 easy payments

    1. Extend the previous track slightly past the normal finishing time to create an overlap with the next step. Like a relay race — there’s a period of hand off.
    2. Exntend that time a little longer. Get the the next phase to start slightly earlier to make it a longer collaboration.
    3. Extent to maximum involvement. throughout the entire process.
    4. Create appropriate tapering. Scatter the touch points so people aren’t on full time all the time.
    5. Focal Points. Start at the same place, finish at the same place.
    6. Rinse and repeat this approach.

    A modern web design process – 4 easy payments

    1. Plan

    Research (check out jennifer brook): ask people how they use the current site.
    Hypothesize: Go off and think how the best approach to the website will look, how the design will work. Guess the best approach and validate that with some research on the web to back that up.

    2. Inventory

    Content Inventory /content Strategy: Add / Edit / Remove (content strategy approach)
    Performance Inventory: Karel Knop (RWD Images article), Tim Kadlec performance article. Check the blog on this.
    If you want to be perceived as faster than your competitors you need to be 20% faster.
    Pattern Inventory: Pattern Lab. Use a spreadsheet to develop all of these elements.
    What you’re shooting for in any project is the highest level of fidelity in the shortest amount of time.

    Visual Inventory:

    All deliverables are designed to start conversations.

    3. Sketching

    Linear design, list out the things that should be on the page. Add boxes to the page and block out elements. It’s really easy to make a bunch of boxes responsive. Great way to sketch in code.
    Bearded do this in the browser. Sparkbox do this.
    Good example, try and find the link to this

    Element Collage Sketching

    RIF examples – check Dan’s site. These are small elements that were designed in photoshop that were outside the making element collages extend over width rather than height makes it easier for the client to understand that it’s not a website.

    Prototype Sketching

    Each sketch has one problem to solve and one solution.

    once you have all the pieces sketched in code you can start adding the together. How does it scale with more divs, more css, more js.

    4. Assemble

    Using the term presets over templates is great. Templates sounds like things can not be changed, but presets give you the feel that you get a template that you can updated and change to suite your needs.

    When we switched from table based layouts to CSS we had all the same conversations we’re having today about RWD. The premise of RWD in the terms of flexible grids, flexible media and media queries that’s easy, it’s the stuff that goes with it, the workflow, the way we work clients, that’s the hard part.

    Read more

  7. Content in a Zombie apocalypse

    Leave a Comment

    @karenmcgrane – president of the WYSIWYG haters club

    Print is amazing, you put the words on the paper and there it stays. No updates. We’re fine.

    100 of years of printing press history, thousand of years of experience in written material.

    The web was created to allow anyone to update a URL from anywhere and to be accessible to anyone anywhere.

    The arrival of the mobile has finally faced us with the fact that the web is different. It’s not a like a printed page on a fixed canvas. We have no control over the device it will be consumed upon.

    A new platform will arrive soon, we’re not sure what it will be yet, but we’re going to have to work out a way to publish to it.

    Televisions, cars… they’re all getting screens. Forget the screen in the car though, there will be a combined interface with input devices (voice).

    Voice might not be working now (audio interfaces), but touch faced the same problem and when it was solved it revolutionised the way we live our lives.

    When you look at a new interface with audio, things like emphasis vs italics becomes important, because the emphasis will have a different tone of voice.

    Google Glass – the SEGWAY for mobile.

    Watches might be the next thing. Too small, but in combination with a headset and headphones.

    Digital Signs: want one single place to manage the content and push out to mobile, digital signs, website.

    The internet fridge is not the future, but it is a sign of things to come. The cook top might be a screen that will be able to be used.

    So how do we really approach true separation from content and form.

    In the past we never consiered separating the theme of what you want to covey in a message from a physical content itself (i.e. writing), now we’re trying to do this with the web.

    The problem with WYSIWYG is that we’re giving content authors an antiquated approach to creating content that was originally created for the printer.

    XEROX built a GUI and wysiwyg just to sell printers. THE WEB IS NOT A LASER PRINTER.

    We are fighting a war between blobs and chunks. Blobs are old wysiwyg styled content. Chunks are metadata, content elements that can be reused.

    Cards are the future of the web (they’re not). Cards are like pages but they’re tiny.

    Content Modeling

    Find out what all the little bits and pieces you are using. It allows the NPR create once and publish everywhere model.

    1. What type of content do you have?
      article, product, events, profiles, etc.
    2. Attributes
      “fields” or “content objects” (content objects might have markup that separates content instead of individual fields).
      Recipes: ingredients, steps, category, chef, cuisine, diet, equipment, holiday, occasion, method, season, servings, awards, theme. Check @eaton (jeff eaton) for case study.

    Nobody reads your PDF. Ever. 33% never downloaded. 40% downloaded fewer than 100 times. This is for The World Bank between 2008-2012.

    We are using PDF’s as a bandaid for people being able to create content on the web. This is literally like printing a page. Literally. This is not the way to proceed in the future. Sure, it might be easier for many people to create PDF’s, but it creates a wider content problem of an unstructured set of content that can not be reused by anyone.

    Read more

  8. Technology – the power and the promise

    Leave a Comment

    Robin Christopherson @AbilityNet – UK accessibility charity.

    Computers can cater for everyones needs. You don’t need to use the keyboard, the monitor, the tower could be in your room/in the screen/ or on the other side of the world.

    Accessibility is often approached as a bolt on, something that costs more and you have to do at the end of the project. That’s not the right approach.

    iPhone does this well. Screen curtain hides the screen so nothing can be seen – doubles the battery life.

    There’s a tonne of additional features if you add VoiceOver.

    If you start to internalise accessibility into everything you do that is when you will really reap the benefits how good your apps could be.

    Using Goggles to find out what cereal he is getting out the cupboard.

    Wordlens – it’s magic. Not technology, but magic.

    Using a light detector on the iPhone to work out where the door is, where the window is, did you leave the light on, has the oven light switched off. All great things which are not designed for a blind user but is incredibly helpful.

    Iphone 4 brought with it FaceTime, and with that it allowed deaf users to be able to call someone and sign the entire conversation.

    iVoice — Larengitis date. Using the iPhone to talk.

    Temporary disability is known as TABS – temporarily able bodied.
    – In a rush on a lunch break
    – Pushing a pram and only having one hand
    – In a car – visual and motor impairment

    Google Glass — perfect for the blind with the ear bone feedback.

    Facial recognition – Deepmind (deep face). This is great for people that don’t know who they’re talking to (can’t remember someones name) or for the blind to know who they’re talking to as well. This could be extended to wifi video for your own house.

    HyperLayer is looking to extend this out to showing if someone you’re walking past has a criminal record.

    Recognising emotions are done better by computer than by humans. This is great for people with asperges or who are blind to read the feel of the situation.

    Smartwear will remind you to take medication, health updates, skin mounted sensors that have bloody sugar capabilities.

    Uber private taxi – 268 billion investment for autonomous taxi (250k of them). Goes so far as to be careful if a ball rolls out onto the road to watch for a kid chasing it afterwards. This crunches 750 gigs of data per minute.

    Robotic armed drummer, the machine was attached directly to the neural defines.

    The unbeatable rock paper scissors robot.

    CubeStormer3 – 3seconds to do the rubix cube with LEGO. Robotics are here to stay now, it’s a matter of making the best use.

    You need redundancy. The RedBull jumper display frosted up and he missed the longest free fall because there was no redundancy.

    Read more

  9. Chris Coyier — SVG is for everybody

    Leave a Comment

    Chinese Year of the Horse.

    Horse.svg – looks beautiful everyone.
    it’s 13.7 k EVERYWHERE. Phone, tablet, desktop…. everywhere!!!!

    SVG is Flexible, sharp, small and accessible.

    SVG is responsive and responsible.

    SVG is as easy as including it in the tag.
    Supported in all current browsers and two versions back.

    SVG could be learned, but you don’t have to. Just export it like .jpg If you have a vector file then you can get a SVG.

    SVG on the monitors…. could this be included on

    SVG is great for icons, illustrations, diagrams,

    Designed specifically for the web. It’s about describing how the image should be drawn, not downloading a picture.

    How to use it

    Get an SVG from the web. Just steal one.

    Now just put it in an image tag and it works.

    if it doesn’t work, addType image/svg+xml

    Use it in CSS, background: url(horse.svg);

    Viewbox – it’s like having a canvas.

    Use CSS3 background-size: cover; with SVG because you won’t be scaling up a raster image that will then look too pixelated.

    img[src$=.svg] {}

    SVG retains it’s edit ability.

    Noun Project. Thousands of icons and SVG.

    3 Big Advantages.

    1. Shapes are in the dom and available through CSS]
    2. No additional HTTP Request (like data URI but better)
    3. Define a shape once and reuse multiple times

    SVG Sprites

    Take everything you built with the sub text, then use it as a linked file with

    These are better because vector is awesome, no background positioning, CSS Control.

    Build Tools

    IcoMoon allows you to export as SVG and it will still do exactly what Chris has already described.

    Gulp and Grunt already have tools to do this for you if you have a folder of sag’s already. get the Grunt and Gulp links for this

    Grunticon is just about to move over to the inlive SVG stuff too.

    SVGO – SVG Optimsation – see Kyle Foster

    SVG vs Icon Fonts

    see images on the phone.

    ## Fallbacks

    SVGeezy – JS that looks for SVG and will fallback to png (but it’s up to you to provide the png in the right spot).

    Use Picturefill for easy fallbacks.

    Use moderniser .no-svg

    JonathanTNeal – SVG for everybody. – fallbacks for SVG, this should be done for inline icon.

    Aweseome stuff
    eleqtriq – check the code pen related.


    Hands On: SVG Filter Effects.

    Read more