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

Category Archive: Writing

  1. Getting back to podcasting

    Leave a Comment

    You should be very aware that I love a great weekly newsletter. One of my recent favourite newsletters to receive is Paul Jarvis’ Sunday Dispatches where Paul imparts a very useful piece of nerdy knowledge each week.

    The content is around 95% educational and allows you to learn a lot about the web and how to further yourself through emails, podcasts, social etc — I would normally consider myself to be fairly well versed in everything web however there is always at least a small piece of information that I can take from each week.

    The other 5% is still educational but it’s more of a mini pitch to buy into one of Paul’s paid for courses… and while I haven’t ever made a paying jump I’ve seen some of the give away lessons and I’m just waiting for the right course to buy. For all the great stuff you get from these dispatches I’d still be happy if he pitched more.

    But I digress.

    This week the email was all about podcasting. Paul explains how he go into podcasting and how it only takes him 30 minutes to prepare, record, edit and publish his weekly podcast. In my own experience with the Responsive Design Podcast it takes far more time to get everything done.

    Podcast Timings

    My timings for the RWD Podcast work more like this:

    • At least 30 minutes to wrap my head around notes and research as to what I’m going to speak about (longer if I have guests)
    • 30-60 minutes to record the podcast (longer if I have guests)
    • 25 minutes wrangling with Garageband to import the recordings, add the intro track and export to disk
    • 30 minutes to upload the podcast to Simplecast, the site (which pushes it to iTunes)
    • 10 minutes and $70 — 100 to transcribe the podcast
    • 25 minutes to upload the transcript and add pull quotes

    So all in all I was looking at between 2.5 and 3 hours each week to produce the podcast.

    I don’t think this is actually an unreasonable amount of time to dedicate towards podcasting though, after all if you’re writing an article that is going to take 20 minutes or an hour to read you’re going to spend more than 3 hours producing and editing the article.

    On the flip side no one is going to read an hours worth of article — but lots of people will be willing to listen to you for that same time.

    Podcast Costs

    I was initially very lucky to have a sponsor for the podcast at an above the industry standard (Paul suggests that industry standard is $15-25 per thousand listens) however once I started paying for the podcast transcriptions and the hosting I was only breaking even.

    This put me in the position that I was doing a whole bunch of work for no monetary reward, but then of course there are more things to life then doing it for the money. As long as I was breaking even it was still an enjoyable way to help spread the word about what was happening in the world or responsive web design.

    The costs outlined include

    So that’s pretty cheap really as long as you keep your podcasts to a reasonable length, but it can be expensive when you’re weekly podcast averaged 80 minues. The Simple Cast cost also includes hosting of a website for your podcast which is amazing at that price. I was originally with LibSyn however I much prefer Simple Casts UI and capabilities.

    Of course you don’t need transcriptions but I have a good friend who’s second language is English and he said that transcriptions in the past helped him be more confident with the English language and also made it easier to understand strange accents (like Australians).

    So if it’s cheap and easy-ish, why did you stop?

    Good question.

    When I started it was something that I could tack on to the end of my newsletter work on Thursday nights. That work rate took its toll over a time and it wasn’t something I could practically keep up on a weekly basis, or at least over a long period of time.

    Once it moved from a weekly thing to a some-what-bi-weekly-thing I was no longer being consistent and it then became something that was easy to “skip to next week”. One week turns to two months and here we are.

    The plan? Well it’s time to change it up. Rather than provide interviews with leading thinkers in responsive design it’ll be time to talk about all things web and focus on one or two key things each week to expand upon.

    I’ve been reporting on more topics outside the realms of responsive design in the weekly newsletters so now it only makes sense that it also extends to the RWD Podcast as well, after all Responsive Web Design these days is just Web Design.

    Read more

  2. Is CriticalCSS harming our site performance?

    Leave a Comment

    In a recent article on Medium, JP DeVries wrote about “Unfolding Critical CSS“.

    Are you building a single web page that users will visit once never to return to or are you building a multi–page website that most users click around on for a while?

    If you inline an average of ~20kB of critical CSS on each page and a user visits 10 pages that make use of those same styles you’ve served them 180kb of avoidable weight. That’s ~20kB of the same uncacheable non–blocking styles being downloaded 10 times (once for each page) vs ~20kB of blocking styles being downloaded once as part of a common stylesheet. The number of average page views per user should be taken into consideration when architecting your CSS delivery method.

    CriticalCSS is something that I’ve been HUGELY in favour of since it was first suggested through the Filament Group (citation needed). Since then I’ve showed clients many times how much faster we can make their website appear by loading the Critical CSS in the head…. although I leave off the how and just show them the results.

    The point about the 20kb of additional critical CSS of subsequent page requests is a really good argument, that can really add up over many visits. I will say though that the idea is to get the first part of the “fold” within the first 14kb of the entire HTML document, so we’re not really talking about 20kb of additional content (although the argument still holds fast just with less kb).

    The better approach is to send the critical CSS in the head through on the first visit, download the full CSS file, set a cookie, and then include the tag back in the head to replace the critical CSS.

    This does require some configuration on what the server is generating and might not be as straight forward for some sites, and it can have additional complications around CDN’s and caching URI’s as well…. but then the web is just getting more and more complicated these days.

    Read more

  3. My local wordpress MAMP site slow

    Leave a Comment

    While I was on the train ride home today I was writing an article on my local copy of wordpress when I thought to myself “This is actually slower then working with the patchy wifi and GPRS”.

    The best thing about running your site locally is that you do not require an internet connection to make updates, especially great for train, planes and tube travel. The next best thing about it should be the speed! You’re not relying on the internet connection and you will most likely have a more highly spec’d laptop then you have on your shared server space.

    Why are .local wordpress sites slower with MAMP?

    The answer was quite surprising! It’s not that it is wordpress or that you are running MAMP, although the MAMP bit does have a knock on effect.

    I use MAMP because I use a Mac and I always used Xampp before making the jump from PC to Mac in 2007. THAT is the key to why it’s slow. It’s not that it’s MAMP, but because you are running a .local site on your Mac.

    The Mac OS looks at any .local domains to be part of Bonjur, so it has a whole internal battle before it realises what it should be doing. The fastest way to avoid this is to set your local sites to something like .dev (after all they are dev sites) or follow Chris Coyiers lead and have something completely random (he uses .whatup for his local sites, so you see css-tricks.whatup).

    If you’re doing this then follow these steps for your WordPress site at least.

    1. Update both the URL’s in the Settings > General from surfthedream.local ->
    2. Update the MAMP URL from surfthedream.local -> and restart the servers
    3. If you’re running something like Migrate DB Pro as well to keep things in sync then you might also want to ensure you update the URL rewrites before you sync all your updates back up again too

    Enjoy a faster site!!! I know I am.

    Read more

  4. Accessibility Dashboard – Pa11y Dashboard

    Leave a Comment

    Today I came across a wonderful article by Una Kravitz, a UI Engineer over at Digital Ocean, about how to set up an accessibility dashboard for your site/s in just 15 minutes.

    Usually these kinds of articles say “it’s easy! All you need to do is after you set up NPM, Gulp, Grunt, Node, Ruby, Dash, NGINX, blah blah blah.” — but in this case it really was simple thanks for the Droplets that come prepackaged on Digital Ocean.

    Within 20 minutes I had it running on a subdomain and had already added a few of my own sites plus a couple of ones from work (see below).

    If you want to recreate this then go read Una’s article now.

    Pa11y Dash is a way to check if a page is conforming to a particular WCAG set of guidelines. In the example images I’ve shown I have chosen WCAG2 AA compliance.

    Things to note about Pa11y Dashboard

    A few things to note on this tool is

    • It only scans the URL you include, so if you put your domain it will get your homepage and nothing else.
    • The errors and warnings will provide you a code example of the error, but not necessarily provide you with a screen view context of the error.
    • The Dashboard itself actually runs off the HTML_Codesniffer which was built by Squiz where I was working at that time.

    This is certainly a great start for a dashboard but I feel as though there are a lot more wins that can be accomplished with it moving forwards. Making use of screenshots, allowing an array or URL’s for a particular domain for monitoring are just two potentially beneficial inclusions.

    Times to use Pa11y Dashboard

    There are some great uses for Pa11y to get going though. Some of them include

    1. Set it up in 20 minutes and amaze your boss, they’ll think you’re star for doing something so amazing and quick.
    2. Run it for the front end dev process. You’re often working on a series of templates that will then go into a CMS so make sure they’re shipshape before you drop them in.
    3. Great for a pitch! If you’re going to see potential clients then just add a couple of their pages on the tool and explain why it’s bad to have so many errors (because you know they will) and how you’re able to help them fix it in the future.

    Wrap up

    I really like it. A web app that feels uber fast and goes to show how quickly you can set up some existing free tools out there that people have created that can give you an advantage either in the workplace with your team, with your current clients or to help you pitch new clients.

    Read more

  5. XKCD Garden

    Leave a Comment

    This is a strange XKCD, but also a little bit of fun.

    The page loads blank with the ability to add up to three grow lights. You can position them on the screen, change the angle of the light, change the light focus (wider and lighter or narrow and brighter). Apparently you can also change the light colour but I’m not clever enough to have found that out.

    After a little while things start to grow on the screen. Mine started with a tree trunk, then a bird bath, and when I came back recently more stuff had arrived – see below

    XKCD Garden

    I’ll check back in later today and see if there’s a 5 o’Clock shadow on the way.

    Read more

  6. wp-admin redirect loop on https

    Leave a Comment

    Running your website on HTTPS has many benefits which doesn’t stop at being safer, it also allows you to run on http2/SPDY and offers things like Service Workers.

    I use CloudFlare and their Flexible SSL to secure most of my sites. It’s easy to set up and it costs nothing which is just amazing as the upfront and on going costs are ofter a barrier for HTTPS.

    When I updated WordPress to use under General > Settings I suddenly had an issue with the /wp-admin/ throwing redirect errors.

    Fixing the Redirect Loop

    After a lot of searching on the web I found the answer in a couple of different wordpress threads.

    You need get FTP access to your wp-config.php file and drop in the following snippet

    define('FORCE_SSL_ADMIN', true);
    define('FORCE_SSL_LOGIN', true);
    if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')

    That pretty much fixes it…. pretty much

    Fixing “You do not have sufficient permissions to access this page.”

    So while the above update fixed the redirect problems I was now faced with the error that I can not access the page due to insufficient permissions.

    After a quick search I found that you need to paste the above code ABOVE the following code:

    /** Absolute path to the WordPress directory. */
    if ( !defined('ABSPATH') )
    	define('ABSPATH', dirname(__FILE__) . '/');
    /** Sets up WordPress vars and included files. */
    require_once(ABSPATH . 'wp-settings.php');

    I hope that helps any issues you’re having.

    Read more

  7. Plain White vs Full Bleed Images


    I’ve recently added HotJar to the Back Pocket Notebooks site to see how people are using the site. I was interested in where people were dropping off, how they were getting from the home page to the product page and where they might be getting distracted.

    The more I looked into it the more I wanted to play around to see if a shift in the design would work. The template I’m using for the notebook store allows you for a hero feature, or to have a hero slide show. The slide show will allow you to run the image full bleed, where as the feature gets 50% for the images and 50% for the content.

    By default I went with the smaller image to improve load times, and while sales are coming in regularly I wanted to see if the full bleed images that so many of my clients want to show off their products would tempt more people into adding the items to the cart and making the purchase.

    Here’s the before image….


    And here is the after image….


    Any bets on how they’re going to go? Will there be more clicks? Will the slower performance (due to the larger images) of the site result in lower conversions?

    I’ll touch back to announce the results in a few weeks.

    Read more

  8. User generated content in a multi platform publishing world

    Leave a Comment

    I’ve just finished reading Snooks article User Generated Content in a Classy World, which is turn was a follow up to Chris Coyiers article Class up Content.

    Recently I’ve been trying to apply AMP templates to the Responsive Design Knowledge Hub and it’s been a learning curve. The thing I can not fix is the embedded content that is contained within the News and Articles I’m applying the AMP template to. The reason is that AMP requires it’s own fancy elements to be declared for Images, Video, Ads, Embeds, Iframes and more. This makes a mockery of the carefully semantic way that I’ve tried to add content and renders some of the pages non-compliant.

    The best implementation I’ve seen from a CMS to separate the concerns from creating content from the way in which it is rendered to the client is WordPress and Responsive Images.

    When adding an image to WordPress I go through a three step process.

    1. Click Add Media
    2. Select or Upload an image
    3. Add the image

    The code that is added to the wysiwyg is shown below…

    <img src="" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" />

    …. yet the code that is rendered to the browser is:

    <img src="//" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" srcset="// 300w, // 768w, // 1024w, // 500w, // 800w, // 1600w" sizes="(max-width: 1024px) 100vw, 1024px">

    … which produces the following responsively wonderful image.

    moon shard

    I haven’t had time to look into the AMP plugin for WordPress, but I assume they’re going to be doing a similar thing where they scan the content for markup that needs to be updated, images iframe embeds and rewrite them into a suitable accepted format for AMP.

    Below are my comments on Snooks article….

    The other issue I have with embedding content into that single block is when you want to retrieve the content for use in other ares besides a HTML template.

    I’ve had RSS feeds clog up because of the funky elements used within content areas (different apostrophe’s in headings the biggest issue), and while these can usually be sorted by using something like CDATA tags

    // Content here

    the same issues end up coming back when you look at implementing something like AMP with your database content. All of a sudden it’s less of a class issue and now you have issues with the semantics of the content requiring updates.

    The best approach from a CMS I’ve seen has been the implementation of responsive images into wordpress. The image is inserted in the same way it always has in the WYSIWYG, but when it is rendered on the front end you get the benefit of the Responsive Images markup being added for you with no additional work.

    Read more

  9. How to manage future products in Shopify

    Leave a Comment

    As you may be aware of I’ve started selling notebooks online. This started almost a year ago when I had the idea of putting together some notebooks that focused on the three tenets of responsive design… and from that was born the first set of 3 responsive design notebooks.

    I didn’t just want to create a single set of notebooks with a single design though. Instead I wanted to create a suite of different notebooks that helped educate their owners on things that they might not understand, things that might not be aware of, or things they take for granted and that might help their friends/colleagues/clients understand concepts a little easier.

    The first set of notebooks covered Responsive Design mainly because I had a large base of people that I speak to about responsive design on a weekly basis, around 27.5k folks, through Responsive Design Weekly. It was also because responsive design had become so passé… everyone thought they knew exactly what they were doing because they downloaded the latest theme from WordPress, or used Bootstrap or Foundation.

    These notebooks were able to bring folks back to the three basic rules with diagrams on the inner page to illustrate the concept, and a quote at the back to hammer it home.

    So I mentioned not wanting to create one set of notebooks… so I looked at other areas that I was interested in and decided to create a set of notebooks about colonising Mars and another set about the Solar System.

    Having several sets of notebooks also makes your online store look a little bit more useful then just one product, but if you haven’t got them all printed then that could be an issue.

    I started off by customising the product template to say “Preorder” rather than…..

    More to this post coming!

    Read more

  10. Condescending Popups

    Leave a Comment

    In the past year I’ve been noticing more and more condescending popups being used on websites. I think the pattern of an email popup halfway through an article is evil, regardless of how well they perform (loan sharks make good money, it doesn’t mean it’s a good thing).

    Somehow website owners have taken the annoying popup a step further and are now including condescending messages as part of their tone of voice. It could be argued that it’s done in humor, but having something take over my screen and get in the way of the article that I’m reading without me asking for it puts me in less of a humorous mood.

    I’ve complained about this before on twitter only for people to ask for examples…. which of course I can never then find… so here are a list of annoying condescending popups in my day to day surfing of the web.

    Annoying condescending popups

    No thanks, I know wordpress inside-out

    Condescending Popup from

    Condescending Popup from

    Tasteful popups

    Not everyone is terrible on the internet. Here’s some (or at least one) example of how to do it properly.

    This popups up in the sidebar after reading half of the article. It doesn’t take over the screen and isn’t condescending.

    Nice popup from wait but why

    This popups up in the sidebar after reading half of the article. It doesn’t take over the screen and isn’t condescending.

    Read more

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter