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

Category Archive: Writing

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

  2. 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 https://theuniverse.is 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')
    $_SERVER['HTTPS']='on';
    

    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

  3. Plain White vs Full Bleed Images

    2 Comments

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

    BackPocket-White-Hero

    And here is the after image….

    BackPocket-Full-Bleed-Slide-Show

    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

  4. 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="https://surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" 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="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" srcset="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-300x173.jpg 300w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-768x443.jpg 768w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg 1024w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-500x288.jpg 500w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-800x462.jpg 800w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard.jpg 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

    <!--CDATA 
    // 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

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

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

    Codeable.io

    No thanks, I know wordpress inside-out

    Condescending Popup from Codeable.io

    Condescending Popup from Codeable.io

    Tasteful popups

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

    waitbutwhy.com

    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

  7. WordPress redirect loop wp-admin changing from http to https

    Leave a Comment

    Today I’ve been looking in to updating this site to HTTPS through the use of the free Cloudflare https service available.

    The thing that I really like about Cloudflare is not only is it free but it is offering you free HTTPS as well as free HTTP2. FREE!!! The free plan is kind of faux https as it’s only secure between the cloudflare servers and the client, and not your own website and the cloudflare servers, but still it is a great step in the right direction.

    Once you’ve set up for the https you can also get http2 through SPDY as well as have the option of rolling out Service Workers for some offline content as well.

    When making the change I also updated the Settings section on the WordPress backend from http://surfthedream.com.au to https://surfthedream.com.au because I noticed that the new responsive images were adding http:// to all of the srcset values and I was getting mixed content errors, where as the rest of the site was stripping the protocol from the files.

    As soon as I did this the front end was working perfectly but the wp-admin had a redirect loop. After doing a bit of searching I found that you need to add the following line

    $_SERVER['HTTPS'] = 'on';

    to your wp-config.php file.

    Now everything is working perfectly.

    Read more

  8. Back Pocket Notebooks have arrived!

    Leave a Comment

    It’s with huge excitement that I came home yesterday to find all my notebooks sitting in the Studio entrance.

    It’s take many months but I”m really happy with the results. Next step is to get the sleeves printed and put up the Shopify Store.

    notebook set 3

    notebooks 3 and set

    quote-back

    zoomed set

    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 justinavery.me (now my resume) and JaveryDesign.com (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