i3lance

Believable Branding – What do consumers buy into?

Desi Reuben-Sealey — Fri, 05 Apr 2013 14:19:38 +0000

INFOGRAPHIC: Is there a Social Media Overload?

Desi Reuben-Sealey — Fri, 05 Apr 2013 00:35:57 +0000

A Quick Way to Avoid the blink of Unstyled Content on Page Load

Desi Reuben-Sealey — Sat, 30 Mar 2013 22:13:02 +0000

This is a method I’ve been using for a while and wanted to document it for anyone else who may want to use it or improve it.

When you have a constructed page that uses JavaScript to render content you will sometimes encounter a blink unstyled content that sometimes occurs when applying styles with JavaScript on page load. The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex.

Let’s just say that it’s a semantic container like a DIV element that encases a simple unordered list or any content for that matter, you can add the following

to the DIV container.

On smaller websites that have pages with a more reasonable length, the standard jQuery code would work just fine:

$('html').addClass('js');
$(document).ready(function () {
    $('.pre-render').hide();
});

However if you are working on a larger website, you may have to call function this in many parts of the website so in my opinion you may want to externalise your script:

$('html').addClass('js');
var mylib =
{
    primary_functions :
    {
        init : function()
        {
             $('.pre-render').hide();
        }
    },
    specific_template_functions :
    {
        init : function()
        {
             // Functions go here
        }
    }
}
$(window).load(function(){
    // It's more efficient to load any generic scripts after the HTML has loaded.'
    mylib.primary_functions.init();
});

If the document is large then that won’t work as there is a lot of document to load before the JavaScript is called, even if you use the $(window).load method as above. Therefore using JavaScript to hide elements like this just won’t work unless the scripts are placed in the HTML immediately following the elements they’re hiding.

Why use JavaScript for this, anyway?

The initial retort from some developers is “this is what what CSS is for!” Well it is easy to add a rule to the stylesheet (CSS), such as .pre-render {display: none;}, and the problem would be solved.

However the pure CSS method introduces another problem: the hidden content is completely unavailable to those who have CSS enabled/available but JavaScript disabled/unavailable. These users simply won’t be able to view the content. Now, some developers don’t have a problem with that, but I do. It’s all about accessibility and making content as available as possible, even if on a basic level.

A quick solution

Instead of using just one or the other to solve the problem, combine the two together using a hybrid method.

Your CSS:

Your HTML:

Your JavaScript:

Your JavaScript can be in either of the above methods depending on the size of your website. Personally I prefer using the latter method simply for good practice. You don’t have to call ALL of your JavaScript each time the page loads.

You probably noticed that the script references are at the bottom of the page. It’s also good practice to have your scripts load at the bottom if you can help it. If you using WordPress, may not seem that easy but there are ways to do it.

Just make sure that this is included within your JavaScript file BEFORE $('.pre-render').hide();. Outside the script call as above:

$('html').addClass('js');

In order to make sure this works, the .addClass() method is plaeced not inside $(document).ready() and it is first in the other method. If we had put it inside, we’d be back to square one.

However since I am using YUI’s recommendations to put scripts at the bottom, this can still make this solution work.

Placing the above in the head of your HTML document after the CSS reference should have it working nicely. Happy coding!

INFOGRAPHIC: Serif vs. Sans: The Final Battle

Desi Reuben-Sealey — Sat, 30 Mar 2013 19:05:58 +0000

Well I don’t know about the final battle but this is certainly a definitive one. You be the judge!

INFOGRAPHIC: What Works in Rich Media Mobile Advertising?

Desi Reuben-Sealey — Sat, 30 Mar 2013 18:58:30 +0000

Do not push the button…

Desi Reuben-Sealey — Wed, 13 Mar 2013 14:30:44 +0000

TNT made this in 2012…

Watch this video on YouTube.

Then they came out with a sequel in 2013…

Watch this video on YouTube.

Online Forums do’s and don’ts – the challenge

Desi Reuben-Sealey — Tue, 19 Feb 2013 16:46:48 +0000

Online Forums – Just what is the best practice?

I’m working on a project where I’ve been asked to create an online community forum.

I’m looking at bbPress at the moment as it’s the quickest way to using a framework and will sit nicely within the clients existing WP framework.

The idea is to use the plugin, brand it, integrate it with .NET user profiles so there is a single sign on process.

And by the end of this project I’ll have a list of do’s and don’t's based on best practice acquired to research and other resources.

I’ll let you know how I get on! Any tips in the mean time would be great!

INFOGRAPHIC: Education – What do I.T guys really do?

Desi Reuben-Sealey — Sat, 26 Jan 2013 00:38:54 +0000

INFOGRAPHIC: Having less form fields can increase conversion

Desi Reuben-Sealey — Sat, 26 Jan 2013 00:07:28 +0000

Git rebase – the note to self

Desi Reuben-Sealey — Fri, 28 Dec 2012 12:30:32 +0000

GIT Rebasing is great when multiple people are working on the same branch

Everyday that I use GIT (if you’ve been reading previous posts I’ve been using GIT for several months now, going on a year), I’m learning something new. This is something I started using fairly recently when several dev guys including myself started updating the same branch.

What I learned was that in Git, there are two main ways to integrate changes from one branch into another: the merge and the rebase.

The easiest way to integrate the branches, is the merge command. It performs a three-way merge between your forked branch, the trunk branch and an updated version of the trunk branch.

GIT Rebasing is great when multiple people are working on the same branch

However, with the rebase command, you can take all the changes that were committed on one branch and replay them on another one. Your dialog window will show the following if you ran the following command in your branch called “experiment”;

$ git checkout experiment
$ git rebase master

Then this happens…

First, rewinding head to replay your work on top of it...
Applying: added staged command

In short, treat rebasing as a way to clean up and work with commits before you push them, and if you only rebase commits that have never been available publicly, then you’ll be fine. If you rebase commits that have already been pushed publicly, and people may have based work on those commits, then you may be in for some frustrating trouble.