Keep Calm and Carry on Coding - Keep Calm and Carry on Coding

Controlling JavaScript with LazyLoad – a ShareThis example

Matthew Wilcoxson — Wed, 01 May 2013 23:08:00 +0000

Forgive me for the break in communication. Let’s get right back into it.

In the last few months I’ve been looking into website load times and implementing a few on my own. My hoster doesn’t run the most efficient servers and so my webpages really weren’t appearing as first as they might. One interesting area I looked into was javascript – in particular how the position and method of including can impact the rendering of a webpage and the speed it appears.

Some of the worst things you can do is include javascript files near the top of your HTML page. Unless you are careful, any javascript you include in the or sections will stop a browser from reading and rendering your page. This is because the browser does not know whether or not that javascript will output code and therefore require some rendering of its own.

Defer and Async

The good news is you can tell a browser that it’s all right to skip this script till later with defer and async. Defer has been around for many years starting in IE4, it simply tells the browser that the piece of code can be run at a later time, probably just after the DOM finishes loading but there’s no guarantee. Async is a relative new coming and is similar to defer except the script will run as soon as it can, along side whatever else the browser is rendering. It’s safe to use both, async will take precedence in browsers that recognise it:

Script Create

Another way to control javascript loading is by programmatically creating script tags with javascript. The advantage is that you can have a callback function triggered when the external javascript has completed loading. First we create the tag then we append it to the page, like so:

var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.onload = function() { /*  Do something amazing */ };
newScript.src = '/js/myscript.js';
document.getElementById('head')[0].appendChild(oScript); // add to page

Unfortunately, certain browsers – namely IE – do things differently (more info here). But the good news is the internet is full of smart and generous people and one of them has created a cross browser library to do the hard work for you.

LazyLoad

https://github.com/rgrove/lazyload

Using LazyLoad all you have to do is write a few lines of javascript and you can set additional code to trigger as soon as the javascript loads. For instance:

LazyLoad.js( 'jquery.min.js', function () { 
    $('a').click( function() { alert( "jQuery Loaded" ); } );
});

In addition you can also LazyLoad CSS files too. You do of course still have to include the LazyLoad javascript file itself: you can include it in the head of your page with the defer and async attributes, and then either assume the small file is already loaded by the end of the file, or you can include any LazyLoad calls in the window.onload event which is guaranteed to have completed loading LazyLoad before it fires.

Remember we are trying to move the majority of the javascript loading to a point after our page has been rendered.

ShareThis example

Here’s an example using the really ShareThis javascript include. ShareThis creates buttons on your website so that anyone reading can share via other sites (such as Twitter, WordPress, etc). Loading of the javascript from the servers can be quite slow and using the suggested way to include the code can produce noticable delays in rending you page. So lets hand it off to LazyLoad. (Incidentally the ShareThis javascript file (119000 bytes) is more than 100 times larger than LazyLoad file (1700 bytes) )

The suggested was to include the ShareThis buttons is with this piece of code:

This simply loads the file as soon as it is specified in your webpage. The order of the different script tags is important. But here’s the better LazyLoad way:

Here the code is wrapped in the window.onload event, so this code only gets executed after the documnet has loaded. We then add the same code in everything is automatically async, and the final initilization stLight.options is done once the file has loaded.

There are other libraries similar to LazyLoad, but none as small as this one. I hope you find it useful.

StereoImage

Matthew Wilcoxson — Fri, 09 Nov 2012 09:05:34 +0000

In July of last year I purchased the LG Optimus 3D, a mobile phone which comes with dual cameras to take spectroscopic images. I’ve been very happy with the camera and consequently have quite a collection of 3D images. However, there are no easy ways to display the 3D photos online – this is why I created “StereoImage”.

StereoImage is a way to display stereoscopic images on a HTML5 canvas. It works on jps and pns files which are fundementally two jpegs / pngs joined together side by side. Using StereoImage a user can quickly switch between different ways of displaying the images.

See it here:

The different ways to show include:

Horizontal, one on top of the other,
Vertical, side by side,
Show just the left,
Show just the right,
Flick between both images (at variable rate)
Stereoscopic – reduce size with circle eye alignment.
Anaglyph – red and green/blue view (for use with glasses)

The code is open source, so feel free to use it. You can find more details on my website here: http://www.akademy.co.uk/software/stereoimage/ . Download or checkout the code via BitBucket here: https://bitbucket.org/akademy/stereoimage

The Samsung Running App

Matthew Wilcoxson — Wed, 18 Jul 2012 18:50:33 +0000

The samsung running app (called “Samsung Hope Relay”) is a nice idea. Samsung will donate a pound to charity for every mile you walk, run o4 cycle (and probably anything else under a 20mph…), but it records distance so no point using it in the gym! It is a little buggy though:

But hasnt stopped them giving £200’000 so far. Get it quick before the Olympics and raise a bit of money (and probably loose a few pounds!)

Dropbox, Ubuntu 12.04 and editing debian packages.

Matthew Wilcoxson — Sat, 14 Apr 2012 15:04:31 +0000

Ubuntu 12.04 release is imminent and at the moment Dropbox will not install correctly, here’s how to fix that.

The problem is that the official Dropbox installer (from here) is expecting an obsolete package libnautilus-extension1 (version 1:2.22.2+) which has been replaced by libnautilus-extension1a (>= 1:3.4.0). If you’re using the ubuntu.deb package you’ll have to change this over.

Keep calm! Editing a deb package is really easy! Just follow these simple steps in Ubuntu 12.04′s file manager:

Download the package! (https://www.dropbox.com/install?os=lnx).
Rename it by removing “deb” and replacing with “ar”. (E.g nautilus-dropbox_0.7.1_i386.ar (or even dropbox.ar) ).
Click “Extract here” from the right click menu and go into the new folder.
Now “Extract here” for the “control.tar.gz” and go in to that new folder.
Open the “control” file in an editor
Now replace “libnautilus-extension1 (>= 1:2.22.2)” with “libnautilus-extension1a (>= 1:3.4.0)” and save the file.
Now go back into the “control” folder and select all the files and click “Compress” from the right click menu.
Select “.tar.gz” from the dropdown menu and then the “Create” button.
Right click the new archive and select “copy”, then switch to the previous folder and select “paste” to replace the old file.
New select the control.tar.gz , data.tar.gz and debian-binary files and then select “Compress” from the menu.
Select “.ar” from the dropdown menu and then the “Create” button.
Rename it back to have a “deb” extension instead of the “ar”.
Install.

If you like, you can download an edited version here. Note that you should only ever install pacakges from people you trust, which in this case is me (Matthew Trust-me Wilcoxson)!

Hopefully, Dropbox will fix this soon but in the mean time this should get you up and running.

Earthrise – Image manipulation

Matthew Wilcoxson — Sat, 24 Mar 2012 01:33:24 +0000

Earthrise, one of the most famous images in the world, is almost always orientated incorrectly, at least from how it was originally shot.

It was originally taken by William A. Anders on December 24, 1968 aboard Apollo 8 as it orbited the Moon, he and his fellow travellers were the first humans ever to see the far side of the Moon. The original image is available at the Apollo archive: http://www.apolloarchive.com/apollo_gallery.html, AS8-14-2383, but even that is rotated from how it was taken (see above). Its original framing had the Earth on the left and the Moon on the right, with the Sunlight coming in from the left. (Lots more info here: http://www.abc.net.au/science/moon/earthrise.htm)

Another interesting thing to note is that the Earth isn’t actually rising. In fact it is simply moving into view as the Apollo 8 module orbits around the Moon back to the side that faces the Earth. The Moon is tidally locked, which means the same side always faces towards Earth, however this isn’t perfect and it partially wobbles so that about 65% of the Moons surface – rather than 50% – can be visible of several weeks. If you were lucky enough to be standing on the edge of the face that faces Earth, then you would indeed see an Earth rise – but it would take 48 hours to rise above the horizon!

Even though it’s such a nice photo I wondered if I could enhance it a little, so I thought I’d add some stars in to the background, in fact, maybe even the right stars. So I opened up the program Stellarium – a photo realistic planetarium – and rewound back to 1968, I’d need the precise date and time but this isn’t to hard to find given the meticulously records they kept.

From the transcript of the radio talk between the Earth and Apollo 8 (here: http://www.jsc.nasa.gov/history/mission_trans/AS08_CM.PDF, page 114), we see that the picture was taken 3 days 3 hours 48 minutes and 49 seconds (or there about…) after the launch time. The launch time was 7:51:00 a.m. Eastern Standard Time on December 21, 1968, which is 12:51:00 p.m. GMT on December 21, 1968. When we add those together we have 16:39:49 on December 24th, 1968.

Using Stellarium I can set the date and time and position myself around the Moon and point towards the Earth, just take off the atmosphere effect, turn off the labels, and turn off dark adaption and I can take a shot of the background stars.

This example Here’s the screen shot but with the labels still turned on. You can see the bottom edge of the constellation of Leo in the top-right, and various other stars, mostly in Leo.

It’s not a perfect fit but it looks pretty good, here’s the finished article.

Now that I took the time to make a template of the Moon and Earth photo, I can add other Space photos to the background such as these:

This has a background from Messier 9 star cluster. This particular one reminds me of the story by Isaac Asimov called Nightfall. But I don’t want to give to much away. (But you can listen to it here: http://escapepod.org/2007/04/05/ep100-nightfall/ , highly recommended.)

Carina Nebula backdrop. I like the sharp contrast between the Moon and the nebula here.

This has an image of Jupiter, it’s at about 2:1 scale meaning Jupiter should be twice as big as it appears here (if we assume the Earth and Jupiter are right next to each other), however the image looks more interesting with Jupiter appearing to be some distance behind the Earth.

and the last one: The Pin Wheel galaxy. Somewhat reminiscent of the last scene in Star Wars: The Empire Strikes Back.

All these images are taken from the Space Telescope website: http://www.spacetelescope.org/

SXP390 and GRBs

Matthew Wilcoxson — Sat, 03 Mar 2012 13:39:13 +0000

Trying to determine what to write my dissertation on for Open Universities’ SXP390 course.

So far, probably something to do with Gamma-ray bursts (GRBs) – the most massive explosions in the Universe.

Let me know your suggestions!

Laser eye day

Matthew Wilcoxson — Fri, 23 Sep 2011 10:33:00 +0000

Just a few hours till my Laser eye surgery… and yes I’m a little nervous. It’s been booked for about a month, but I’ve been so busy I’ve not really given it much thought – but as it’s a approached I’ve been thinking about little else.

I’ve gone through all the material they’ve given, and it explains the whole procedure, interjected with: “This horrific thing could happen” (Eeek!) “but it’s quite rare”… It isn’t really a pleasant read, but a couple of days later you start to understand what will happen on the day and become a little more calmer about it (or possibly just forget all the bad stuff) – if you are having the procedure, don’t leave it to the last minute to read it!

I’ve been wearing glasses for about 25 years, and it’s going to be a massive shock when I no longer need them (may as well imagine it working perfectly). I’ve been putting it off for years, as the longer you leave it the safer it would become (in theory). But now I’ve spoken to many people who’ve already had it done and it gets down to this: the procedure is risky (as is all surgury), quick, painless, not particularly pleasant, but *absolutely* worth it in the end.

I’ll probably not be able to write for a couple of days as my eyes readjust (heal) but I’ll let you know how it went.

Keep Calm and Carry on Coding

Matthew Wilcoxson — Sat, 04 Jun 2011 21:53:53 +0000

I’ve had a change of name, well the blog has. It is based on the poster which displays the text “Keep calm and Carry On”, this was originally created back in 1939 by the British Government and was intended to raise the morale of the British public in the event of invasion (see wikipedia) in the World War II. The new title is “Keep Calm and Carry On Coding”, it grew from a conversation about these posters one geek filled lunch time. Here’s a little hacked version of the poster based on one from wikimedia (here):

I decided to drop the original title (“Live.Hack.Learn.Blog”) as, while I still like it, the “hack” part has different, and most likely incorrect, meanings to different people. To me it’s always meant “play around with something to see what it does and what it could be made to do”, but the meaning is often associated with gaining illegal access to a computer system – which, as you can imagine, is not the impression I’d like to give (!).

Feel free to use the image if you’d like. A link back to the blog would be great.

Yes to AV

Matthew Wilcoxson — Thu, 05 May 2011 11:45:48 +0000

Today’s the day we find out of Britain is the sensible country it believes it to be, or one controlled by unbelievable scare stories. Yes, it’s a referendum, this one about the “Alternative Vote” voting (AV) over the “First past the Post” voting (FPTP).

I’ll be voting yes for AV today because whatever way you look at it, it is Better than the current system. It’s not about which party wants AV or which person doesn’t want FPTP it’s about making the voting system in this country fairer, avoiding wasted votes and voting for the people you want.

Here’s a video that I think explains it in a fair and easy to understand way (“It’s common sense”):

It’s up to you how you vote – but I just want you to understand why this is a better system – if you still don’t agree after knowing the facts then that’s OK, but please watch it!

Here’s another explanation with cats:

Problems with First past the post:

And an explanation of who the alternative vote works:

Thanks.

Amazon Kindle Support – impressive

Matthew Wilcoxson — Sat, 05 Mar 2011 17:12:46 +0000

In the last couple of days I’ve been very impressed with how the Amazon Kindle customer support is handled – in fact I’ve been thoroughly surprised at how efficient it is.

I’ve been using my Kindle since September with no problems. One of my first purchases was the Independent newspaper and this gets streamed to the Kindle automatically every morning, when I wake up it’s there waiting for me. That was up until last Thursday when the download become locked in “pending”. I first tried to fix this myself by trying different wireless connections but the GPRS connection and two different wifi systems didn’t work. Neither did a hard Kindle reset (hold the power button on for about fifteen seconds) so in the end I emailed Kindle Support.

That evening I received two phone calls from unrecognised numbers and it turns out it was Amazon trying to call me (I have a rubbish signal on my mobile at home). They tried all the numbers on my account, including an old one belonging to my parents. This was all confirmed in an email I picked up the next day and by that morning both Independent papers (Thursdays and Fridays) had been downloaded.

So I assumed it was back in working order until it again failed to download on the Saturday, so I had a look back at their support. There’s a “phone me” option which I decided to try and this is what really impressed me. I clicked the button and it asked me my number. I put my home number in and clicked the submit button – almost instantly my phone began to ring and it was the support line.

A short recorded message later and I was speaking directly to support. Very impressive.

As far as the fix went: it turns out a simple reset of the Kindle fixed the Saturday download problem, the Thursday one was some other problem at their end, and with a little gentle persuasion they reimbursed my the cost of the paper (the “print” cost!).

Take note other companies! Amazon make it very easy to contact their support line, it would be nice if you all put this kind of effort in too!