Website and Wordpress Developer in Sydney, Australia

A while ago I posted about implementing the Bootstrap Typeahead component using an async call. Since that post I have received various requests from people with questions about this approach so I have taken the liberty to make a slightly more complete example than the one shown in the original post.

I have a ZIP file to download at the end of this post with the complete example but I’d like to quickly run through the code so it makes sense to anyone reading this.

This is the main script:

$(document).ready( function() {
   $('#myinput').typeahead( {
      source: function( query , process ) {
         $.get("mydata.json", {
            query: query
         },
         function( data ) {
            data = [
               "London (LON) London - United Kingdom",
               "Longana (LOD) Longana - Vanuatu",
               "Long Island (LGI) Deadmans Cay - Bahamas",
               "Londrina (LDB) Londrina - Brazil",
               "Changchun (CGQ) Longjia International - China",
               "Guiyang (KWE) Longdongbao International - China",
               "Long Banga (LBP) Long Banga Airfield - Malaysia",
               "Longyearbyen (LYR) Svalbard - Norway",
               "London (STN) Stansted - United Kingdom",
               "London (LCY) London City Airport - United Kingdom",
               "London (LHR) Heathrow - United Kingdom",
               "London (LGW) Gatwick - United Kingdom",
               "Islip (ISP) Long Island Macarthur - United States",
               "Long Beach (LGB) Long Beach Municipal - United States",
               "Lonorore (LNE) Lonorore - Vanuatu",
               "Long Island\/Happy Bay (HAP) Long Island - Australia",
               "Longreach (LRE) Longreach - Australia"
            ];
 
            process(data);
         } );
      },
   } );
} );

This code is basically the same as the code used in my previous post, however, I have changed the jQuery POST to a GET for the purpose of demonstration. The example in the ZIP file will run without needing the use of a web server but since that’s the case, it’s not possible to use an HTTP POST. Normally of course you’d use a POST in the same way I did it in the original example.

The example loads a dummy JSON file from the file system which triggers the onload callback. In the example above this callback is a nameless function defined at function( data ).

When the call back is trigger, normally we’d receive some data in the data parameter. However, since the example above doesn’t receive real data we’re hard coding a result set. This result set is a linear list of elements which get passed to the process function.

The process function is defined as part of the Bootstrap Typeahead component. All you have to do is pass on the result set to it and it will take care of the actual drop down with character highlighting etc.

So without further ado, please download the ZIP file: Bootstrap Typeahead demo.

When you have set up your WordPress website and published it on the web it has become vulnerable to attacks. Most people don’t realise that there are automated processes scanning the web for vulnerable WordPress websites. These scanning “robots” will try to get into your “admin” account by guessing the admin password. Most of these robots are smart in how they do this. They don’t want to get IP blocked so they’ll try a dictionary attack every hour or so using some password from a list of words.

When you set up your WordPress site there is one thing you always need to do first; Create a new admin user and then remove all privileges from the original admin user. So, after installing your WordPress website you log in with “admin”. You now create a new user with a very different user name and you give this user admin privileges. You then log out from the original admin account and you log in with the newly created admin account. You are now going to change the password on the original admin account to something so strong that chances are unlikely it will ever gets hacked by an automated process. To create this password go over to Passly and select a password length of 48 and click generate. This should give you a strong enough password. You don’t have to save this password anywhere for later since you’re never going to use the original admin account to log in into your website anymore, it basically becomes a dummy account. Now change the privileges for the original admin to “No role for this site” and you’re done. You’ve just created your first line of defence.

By leaving the original admin account to exist we’ve given potential hackers the “idea” that there is an “admin” account. They will try to hack this account because they assume that this account is the fully privileged admin, but it’s not. Even if they were to bypass the ridiculously strong password they will find that this account has no privileges what so ever.

Like I was saying earlier, most people have no idea that these attacks happen. However, I’ve written a WordPress plugin that will send out an email to the website owner whenever a failed log in attempt takes place. Simply download and install it and see what happens. It might be that you website is being poked and probed without you even knowing it.

The year was 2006. I was knee deep building websites with Flash and when I say Flash, I actually mean ActionScript. Fast forward to 2013 and guess what? Javascript today is pretty much what ActionScript was in 2006, at least, from a language point of view.

Anyway, I was working on this website recently and it had about 5 meg’s of graphics to load on just the home page. We wanted things to be smooth and instead of having images being loaded onto the page when ever the browser decided to load ‘m, we wanted to preload them into browser cache so that when they were needed on the page they would pretty much load instantly.

Since I had done this sort of stuff in ActionScript about a gazillion times before I decided to create a simple preloader class, this time in Javscript:

/**
 * Simple asset preloader class.
 *
 * @dependency: delegate
 */
function Preloader( assets, callback ) {
   this.assets = assets;
   this.asset = null;
   this.assetIndex = 0;
   this.callback = callback;
   this.loadNextAsset();
};
 
Preloader.prototype.loadNextAsset = function() {
   this.onupdate( 100 / this.assets.length * this.assetIndex );
 
   if( this.assetIndex >= this.assets.length ) {
      return this.callback.call();
   }
 
   this.asset = new Image();
   this.asset.onload = delegate(this, this.loadNextAsset);
   this.asset.src = this.assets[ this.assetIndex++ ];
};
 
Preloader.prototype.onupdate = function( percentage ) {
   // Default, do nothing.
};

As you can see. This is pretty straight forward. It basically cycles through all the assets provided to it sequentially and after the last asset is loaded it will trigger an event. I’ve added an extra event to capture a percentage loaded in case needed (I did).

One thing to point is that this Preloader class has a dependency on a “delegate” helper function. This helper function makes sure that functions are called in the correct context, preserving scope etc. Don’t forget to include it otherwise the above won’t work:

/**
 * Delegates callbacks while maintaining object scope.
 */
function delegate(scope, method) {
   if(arguments.length > 2) {
      var args = [];
      var numOfArgs = arguments.length;
      for(var i=2; i<numOfArgs; i++) {
         args.push(arguments[i]);
      }
      return function() { return method.apply(scope, args); }
   } else {
      return function() { return method.call(scope); }
   }
}

To actually use the preloader, simply specify a list of assets in the form of an array:

function onPreloadDone() {
   // Preload complete.
}
 
$(document).ready( function() {
   var assets = [
      "http://www.mydomain.com/assets/big-image.jpg",
      "http://www.mydomain.com/assets/other-big-image.jpg"
   ];
 
   var preloader = new Preloader( assets, onPreloadDone );
   preloader.onupdate = function( percentage ) {
      // percentage is between 0 and 100. You might want to round it.
   }
} );

That’s all there is to it. Happy preloading!

I was recently working on a responsive website where YouTube videos could be embedded in the content. Since the website was responsive the embedded video had to resize based on the width of the content are but since YouTube iframe embeds have a hard coded width and height, the size of the iframe was always fixed regardless of the size of the content area.

One prerequisite I set was that the embed code should simply be copied in without any modifications. I knew that if the embed code was going to require changes that somewhere down the line things would go wrong since someone might forget to make these required changes. So, embed code should be pasted as is.

To make this work I required some Javascript:

function resizeIFrame() {
   $('article iframe').each( function() {
 
      // Obtain reference alias to iframe element. 
      var iframe = $(this);
 
      // Get the original iframe width and height.
      var w = iframe.attr('width');
      var h = iframe.attr('height');
 
      // Get the width of the <article> parent element.
      var cw = iframe.parents("article").width();
 
      // Calculate the aspect ratio factor for the new height.
      var s = 1.0 / w * cw;
 
      // Set the new width and height on the iframe.
      iframe.css('width', cw+"px");
      iframe.css('height', (h * s)+"px");
   } );
}
 
$(document).ready( function() {
   resizeIFrame();
 
   $(window).resize( resizeIFrame );
} );

The first important thing to understand about this snippet is that my page content is contained inside an <article> tag as any good front end dev would do these days. It’s also the <article> tag that is defining the width of the content. One thing WordPress does is, it’s wrap the iframe in a <p> tag. In the above Javascript you’ll notice that I use the following jQuery statement to obtain the current content width in pixels:

      // Get the width of the <article> parent element.
      var cw = iframe.parents("article").width();

This little snippet looks for the first <article> tag in one of the parent elements. This means that the iframe can be wrapped in as many tags as you want without breaking the code.

OK. So, the basic gist of the resize code is to use the width and height attributes that are set on the YouTube iframe. We then get the current width in pixels of the content area, calculate the ratio and use this factor to determine the height of the iframe.

In the document.ready we need to manually trigger the first resize and we make sure that when ever the browser is resized we update the size of all the iframes in the content.

Some time ago I had to implement an image carousel and since I was using Bootstrap to build the website I thought I might as well use the built-in Bootstrap Carousel functionality. However, there was one little caveat. This carousel had to display a reflection overlay and on top of that, the carousel needed to be responsive as well.

Let have a look at the finished result before we move on:

The cool thing about this is, since it’s responsive the embedded iframe version you see above fits within any page column size. You can also check out the full browser version. If you open up the full browser version don’t forget to resize your browser window to see the responsive kick in.

OK. Now some code. This is the basic HTML structure. I’ve have skipped the boilerplate. If you want to have a look at that you’ll have to browse through the code in the link above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="row">
   <div class="span10 offset1">
      <div class="carousel">
         <img src="img/leddisplay-big.png" class="layer display" />
         <img src="img/glass-shine-big.png" class="layer glare" />
 
         <div class="carousel-inner">
            <div id="slide0" class="item active">
               <img src="img/screentest1.jpg" />
            </div>
            <div id="slide1" class="item">
               <img src="img/screentest2.jpg" />
            </div>
         </div>
      </div>
   </div>
</div>

As you can see, the HTML is pretty simple. On line 2; we only want to use 10 out of the 12 spans so we offset 1 span from the left. On line 3 we’re defining some context by wrapping everything in a div with the “carousel” class. Doing this let’s us position the various layers for the background image (the display) and the display glare that overlays on top of everything. This is the CSS that goes along with it:

1
2
3
4
5
6
7
8
9

.carousel {
   min-height: 720px;
}
.carousel .layer {
   position: absolute;
}
.carousel .glare {
   z-index: 1000;
}

This basically sandwiches the div with the class “carousel-inner” declared on line 7 in between the background image and the display glare image, exactly the effect we want.

Now the tricky bit. Since we want it to be responsive we need to realign our image slides whenever our carousel is resized. This means we need to add some Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function onResize() {
   var slide = {
      width: 708,
      height: 444
   }
 
   var original = {
      width: 780,
      height: 721,
   }
 
   var current = {
      width: $(".carousel img.display").width(),
      height: $(".carousel img.display").height()
   } 
 
   var s = 100 / original.width * current.width;
 
   $(".carousel-inner .item").each( function() {
      $(this).width( slide.width / 100 * s );
      $(this).height( slide.height / 100 * s );
 
      $(this).css('margin-top', 37 / 100 * s);
      $(this).css('margin-left', 38 / 100 * s);
   } );
 
   $(".carousel").css("min-height", current.height);
      $(".carousel-inner").css("height", current.height);
   }
}
 
$(document).ready( function() {
   $(window).resize( onResize );
}

We find need to define some information. We need to know the width and height in pixels of the slide (line 2). We also need to know the width and height of the background and glare image (line 7) and we need to get the current width and height of the background (line 12).

On line 17 we calculate the scale factor in percentage based on original and current background image size. This allows us to adjust the size of the slides accordingly.

On line 19 we loop through all the carousel slides and set the width and height based on the scale factor we calculated before. We also need to set the top and left margin since slide doesn’t start at 0,0. Again we use the scale factor to calculate the position.

Finally we can adjust the overall height of the carousel element so that content below it will flow nicely withing the page.

And there you go. That’s all there is to it.

The other day I ran into a problem with one of my clients websites that was throwing the Nemesis error for all WordPress developers:

Error establishing a database connection.

Not a very nice error to present to your users.

I was wondering if it was possible to change this message to something more meaningful, or at least, more user friendly. So I came up with the following message instead:

This website is currently experiencing some heavy traffic and is unable to fulfill your request.

The website administrators are working hard at the moment to allocate extra resources.

We appreciate your patience.

The idea is not to present the user with some technicality but to turn the error message into something slightly more positive. If a website is receiving “heavy traffic” then it must be in high demand right? This means that many people want what’s on this website. So even though the website is returning an error it’s not because it’s broken but because the demand is so high, which sort of makes it OK…

Of course, in reality there is a problem with the website that needs to be fixed but I think that presenting a message with a different tone can make a huge impact on how the visitor perceives the problem.

To change the error message for your WordPress installation create a file called db-error.php located in the wp-content directory of your WordPress installation. You can simply fill it with the HTML that you want. However, be aware that at this point the template system has not been loaded yet so you can’t access any of your template resources. At first glance this might come across as an oversight on the behalf of the WordPress core developers but many templates/themes need to access the database for various bits of information such as the website title etc. So you have to make do with the static page.

Bootstrap is a great HTML framework and I’ve been using it a lot lately for most of my projects.

The other day I needed to add asynchronous auto-complete functionality to an input field and Bootstrap seems to offer type ahead functionality out of the box. However, from the documentation it wasn’t instantly clear on how to implement this with an asynchronous ajax call to retrieve the data.

It turns out to be pretty straight forward:

1
2
3
4
5
6
7
8
9
10

$('#myinput').typeahead( {
  source: function( query, process ) {
    $.post("/get-data", {
      query: query
    },
    function( data ) {
      process(data);
    } );
  },
} );

Besides including the bootstrap.js file into your page, you also need to include bootstrap-typeahead.js to add the auto-complete functionality.

Your server script needs to return a single JSON array with the entries you want to appear in the drop-down list. Also note, for Chrome I noticed I had to add the autocomplete="off" parameter to my input tag to prevent it from displaying the built-in browser auto-complete drop-down.

This was tested with Bootstrap v2.2.2