checkNet: My jQuery plugin for detecting Internet connection

Introduction
checkNet is a plugin for the jQuery JavaScript library which, when used on a webpage, will detect if the internet connection is lost and add a warning to the top of the page. Amongst other uses, this could be useful for your site’s users if they have to enter any significant amounts of data before submitting a form (we’ve all had that annoying situation where you type something up and then lose it all when the form doesn’t submit properly!)

Demo
You can view the demo at http://tomriley.net/checknet/
Load the page, then disable your internet connection (possibly by unplugging the network cable of your computer, or setting your device to “Airplane mode”). After a few seconds you will see a warning message appear at the top of the page, and the form’s submit button will be disabled. Re-activate your internet connection and you will see that the warning dissapears and the submit button is re-enabled.

Useage
To use the plugin on your page, first download the zip file from http://tomriley.net/checknet/checknet.zip
Place the checknet.css and checknet-1.0.min.js file in the location you are using for those file types on your site. I use /css/ and /js/ but you may have your own preference. The index.html file is there for demo purposes only, and for you to look at the code of to see how to use the plugin on your HTML files.

Inside the <head></head> tags of your site’s HTML files, add these lines of code:

<link rel=”stylesheet” href=”css/checknet.css” media=”all” />
<script src=”js/checknet-1.0.min.js”></script>
<script>
  $(document).ready(function(){
    $.fn.checkNet();
  });
</script>

If you put the checknet.css and checknet-1.0.min.js files in different locations than /css/ and /js/, you will need to change the references to where you put them. Also, if you already have a $(document).ready() listener on your page, you can put the $.fn.checkNet(); line in there rather than adding another $(document).ready().

This all assumes that you already have jQuery included on your page. If you don’t, you can get instructions for using it from http://jquery.com/

Optional Parameters
When you call the $.fn.checkNet() function, you have the option of adding parameters which specify the interval between checking the connection (in  seconds) and the URL which is used to check the connection. The default is to check the current page URL at an interval of 5 seconds. You can read about these settings under “How it works” below. To specify an interval of 10 seconds, you would call the function like this:

$.fn.checkNet(10);

To specify you want to use google.com to check for an internet connection at an interval of 10 seconds, you would call the function like this:

$.fn.checkNet(10, ‘http://google.com’);

It’s also worth noting that the warning message has the id ‘netWarn’, and that disabled submit buttons have the temporary class ‘tempDisabled’ while there is no connection detected – you can target these with your own CSS if you wish to customise them further (like, say, giving disabled buttons a red border or something?)

How it works
The plugin works by doing an AJAX request to a URL at set intervals to test the connection. If the URL is unavailable, the plugin assumes there is no internet connection available and adds the error message and disables inputs with type=”submit”. If the URL is available, it removes any error message and removes the disabled attribute from submit buttons. When looking into detecting internet connection with JavaScript, I discovered that many people have different opinions on the best way to do this effectively. JavaScript has the navigator.onLine property in more recent browsers, but I decided that testing a URL was a better option and would allow for more flexability and give more consistent accurate results. The URL to test has been set by default to the current page href (because the user has already loaded it once, giving us a point of reference) despite my first instinct to use google.com or bbc.co.uk (because those domains are not available in some countries).

Future improvements
Although I’m hoping to get feedback from users on how to improve the plugin, the two main advancements I’m planning are:

1. Making the online checking more accurate by using multiple URLs,
2. Detecting inactivity at the user’s end, and suspending checking when the user is inactive (to save bandwidth and prevent uneccesary http requests.)
3. I also plan to make this into an Extension for Google Chrome.

Permission to use
You can use the plugin for personal or commercial purposes as long as you give a link to tomriley.net or 3rdwavemedia.com in your code/comments. I’d love to hear from anyone who’s using this, whether you have suggestions on how to improve it or just want to give some feedback.

Making Up MadeUpLists.com

I recently heard someone quoting Matt Mullenweg (creator of WordPress) saying “if you’re not embarrassed when you ship your first version you waited too long”. Although I am horrified by the prospect of the Internet actually seeing any of my work which could have had another few hours/days/weeks/months spent on it, I know deep down that he’s right.

For the past few months I’ve been working on a pet project which I now call Made Up Lists, which is largely the output of various tinkering with mobile interface design, HTML5, PHP and jQuery. What it does is simply allow users to write lists and share them with people, optionally setting a password for viewing or editing. I’m well aware that there are 1000s of other to-do list web apps out there, but I’ve tried to make this one unique in it’s simplicity and user experience.

Inception

I’m sure it must be a common scenario: a web developer wants to start a pet project which they can use to practice and refine their skills, whilst having a level of directional control/ambuguity which they might not have in their day job where a client is paying for their time. In other words, a website without focussed direction which uses technologies only for the sake of using them. It was already beginning to sound like a doomed project that was never going to work before I had even decided what it was.

After establishing that I wasn’t going to succeed, but that I was going to carry on anyway, I gritted my teeth and forced out a list of requirements:

- Be small but flexable and scalable
- Use the latest technologies, appropriately
- Utilise a responsive design, catering for desktop AND mobile devices (not a separate site for each).

Then in order to make myself feel better about starting the whole thing, I added this:

- Be genuinely useful to someone, somehow by solving a problem.

So all I had to do now was decide what I was going to make. And with that, I closed the list and saved it into my Dropbox alongside the text file list of films I want to see, the list of bands that I still have to check out, and my long-term and short-term to-do lists. And that’s when the penny dropped: I, like most people like to write lists for all manner of purposes. I needed a way to manage/edit them, and sometimes share them with people. Eureka.

Prototype

Within a few weeks I had a clunky prototype that my wife and I were using as a shopping list. She could add items on the website at any time during the day, and I’d check the list on my way home with my iPhone and buy what we needed. Also, if I ever randomly remembered that we’d run out of anything, I could whip out my iPhone, add it to the list and forget about it.

Moving on

Obviously there is a great deal of work to be done before it can be considered anywhere near finished, so the areas where I focus my time will hopefully be shaped by feedback from users.

I’ve made a list of aspects I’m working on at the moment: madeuplists.com/64

My aim is not to make this the most fully featured lists app on the web, but the friendliest to just pick up and use. I need you to let me know to how much of a degree I’m succeeding or failing in that aspiration.

Have a go:
madeuplists.com

Follow the Twitter account:
twitter.com/madeuplists

Jumping on the HTML5 bandwagon

OK, yes, I’ve used a slightly ambiguous/potentially controvertial blog post title in order to get you to read. It worked, didn’t it? Rather than making you scan the whole post looking for my actual honest view on HTML5, let me lay it on the line here – I love it, I want to use it as much as possible and I think you should too.

I arrived back from the Scotch On The Rocks conference on Friday night, and when I woke up on Saturday, I decided that of all the great presentations, the one which had stuck in my mind the most was Bruce Lawson‘s “HTML5 Before your very eyes!”. Not (although he was a great talker) because of his presentation style, but because it really dawned on me how daft it was that we are still all writing this:

<div id=”header”></div>
<div id=”nav”></div>
<div id=”mainContent”>
    <div class=”contentBox”></div>
    <div class=”contentBox”></div>
</div><!–– close mainContent div ––>
<div id=”footer”></div>

Wouldn’t it make so much more sense if we just had header, nav, section, article and footer tags that the browser could treat appropriately? Well now we do. We’ve been making sites this way for a long time and our building blocks have now been upgraded to better suit what we are doing. My only gripe is that item might have been a better name for article, as it isn’t necessarily for blog/news articles and means “an article of content”.

But we can’t use these tags now, because Internet Explorer v8 and below doesn’t understand them.

Ah, that old chestnut. Well, if you haven’t yet come across it, Modernizr is a really nice javascript include that A) forces IE to recognise the new HTML5 tags so that you can style them, and B) Detects which browser features are avalable and adds a load of corresponding classes to your <html> element to help you write CSS which will degrade gracefully (or enhancements which will progress well, depending how you look at it). When I first heard about Modernizr, I thought it sounded like a messy hack, but after trying it a few times will now always include it in my HTML template – it is unbelievably helpful and there’s no noticable loss in performance.

But someone using Internet Explorer 8 and below with Javascript switched off won’t be able to use my site!

OK, you’ve got me. I can’t make that work. Users will still be able to view your site, but the browser will render the page as if the new tags weren’t there. If you structure your other HTML well, then you could still make your content reasonably accessible even when the new tags are ignored, and your site isn’t going to perform as badly as most others will when viewed in IE wilth no javascript. Life’s too short!

Of course HTML5 offers a whole range of other great advancements in areas like forms and video/audio content, but this basic “tidy-up” of the way pages are structured is the one I find most attractive. Give it a go – you’ll find that it just feels right and realise how badly you’ve become accustomed to abusing and overusing the <div> tag!

Shattering the illusion

So I was in the Post Office earlier and I saw something which reminded me of something which happened last time I was on holiday. If what you are feeling now could be described as curiosity more than annoyance, read on.

I’m referring to the public display screen system which the Post Office at The Galleries in Bristol has. You’ve probably used or seen something very similar – when you enter the Post Office, you get a numbered ticket from a touchscreen machine at the door and you can then keep track of your place in the queue by watching the tickets move up on the screens.  It’s great because you can sit down or do something else and not have to physically keep your place in the queue like cave people.

Anyway, whilst watching my “ticket” move along the “queue” on the clearly-designed layout, I noticed something in the centre of the screen – a cursor! Suddenly I was no longer watching my ticket and the queue. I was in front of a computer which had been programmed to output pictures. The illusion that I had become immersed in had been shattered. What this reminded me of was a time I was waiting for a flight to China at Terminal 5 in Heathrow Airport. It was the middle of the night and most of the lights were off and there was only one departure screen switched on. Whilst waiting, the terminal gradually came to life around us – staff arrived, machines started, lights came on, until finally the largest display screen in the building flashed on to show… the Windows 95 loading screen. After hoping that their flight control systems use a more up to date operating system, I remembered a few things that my recent experience in the Post Office has really hammered home:

Although “User Experience” sometimes sounds a bit buzz word-y, it’s important to be considering this at every step of designing an interactive system. It only takes something as small as forgetting to make a cursor auto-hide, or restarting a display screen control system with the screen switched on to jolt end users uncomfortably back into the real world and damage your credibility.

Beware shapeshifting software

If you don’t use your computer’s default web browser, you’re probably looking at this through Mozilla Firefox or Google Chrome. When developing a site, I will use Firefox because of the range of development and testing plugins available for it, but for my personal web browsing, Chrome is my browser of choice solely because it is so fast. If you think how much time you spend waiting for browser windows and web pages to load every day, and then imagine how much of your life this adds up to over a year, it makes a lot of sense to use the fastest possible browser.

Now, before the days of Google Chrome, I used Firefox for my everyday web browsing. And before that I used the default on my computer: Internet Explorer. Each time I made the jump to a better browser, I was delighted that there were these various organisations out there competing for me to use their piece of software for my everyday web tasks.

(Don’t worry I’m getting to the point!) As the competition between the browser vendors continues to result in faster, more secure, easier to use and more functional browsers, Kevin Yank brought up an interesting point on Episode 96 of the SitePoint podcast that really stuck in my mind and is now causing me to write this blog post. One of the normally great features of the Chrome browser is that it silently updates itself automatically “behind the scenes”, eliminating the need for annoying/time consuming “There’s a new version available! Do you want to upgrade?” prompts. The point that Kevin brought up whilst discussing Google dropping support for the H.264 video codec in Chrome (a whole other subject), was that when this happens Chrome will silently just update to NOT be able to play video encoded with this codec, taking away users’ option to retain that ability at the cost of staying on an older version.

Whilst the loss of this feature isn’t enough to tempt me away from using my lovely fast Chrome browser, it did provide a much needed reminder that as technology becomes more and more convenient, simple and user-friendly, you can start to trust it a bit too much and can come to rely on it more than you think you are. It’s great that these organisations are offering us these highly effective tools to help us in our every-day lives, but it’s important to bear in mind how difficult it would be to move away from them if we ever wanted to.

Using the MP3 format for releasing music

Now that we are finally seeing the internet being embraced as a viable distribution medium for music, I thought it might be useful to look at how the MP3 audio format can be put to best use by musicians. Although it is likely that we’ll see various successors, alternatives to, and extensions of the MP3 format battle it out for supremacy while the industry changes shape, for the time being it is the most compatible format so let’s do the best we can with it:

1. High quality – If you don’t already know, MP3s can vary in how accurately they represent the original source. There was a time when choosing which bitrate to encode at was a delicate balance between quality, filesize and bandwidth constraints – not any more. Compress the audio as little as possible by using 320kbps, or 256 if you absolutely have to lower it. If you need to provide lower-quality versions than this for some reason, also have a high-quality option somewhere so listeners can opt for that if they wish. A lot of pirated music is awful quality at a low bitrate, or has been converted/transcoded (bad) – make sure yours is the best.

2. ID3 Tags added neatly and comprehensively – Some people still skip over adding embedded meta-data to their files such as Artist, Album, Year, Genre and Track numbers, but the facility is there for important reasons. Music collections are only going to get bigger, and there’s nothing worse than not being able to quickly find what you are looking for. Again, pirates often overlook this or the information is messy and inaccurate. If the person who downloads from you eventually shares it with someone else, at least the embedded information will have come from you.

3. Embedded artwork and lyrics – Another area where you can increase the professionalism (and therefore the value) of what you are releasing is by ensuring that you have a high-quality copy of the artwork embedded in each file, as well as any lyrics (as text metadata – similar to point 2 above).

4. Release schedule – Having worked for an optical disc manufacturer, I know that getting a CD release together can be a time-consuming process and is a big barrier in between you and your listeners. The internet, however, is right there. You could potentially release a piece of music the morning after the final mix is complete if you were well organised. Take advantage of the fact that there’s no minimum or maximum runtime or tracklist for releasing MP3s.

5. Hassle-free download – As mentioned above, barriers between you and your listeners are a hindrance, so don’t go adding one by not providing a seamless experience when they download your music from you. Obviously, you will probably be asking for something in return (money, contact details, other information) so this exchange has to be fast and hassle-free. Convenience is added value, and gives them another reason to come to you and not get it somewhere else. A final polish is a professionally-designed PDF document/booklet/poster in the .zip file if you are releasing more than one track. No need for a playlist file though, these are pretty much obsolete these days (because you have the track numbers embedded correctly in the audio files). Oh, and if you are creating your .zip archive on a Mac, be aware that by default it creates a messy-looking “__MACOSX” folder in there that you won’t see until it’s opened on a different type of computer.

So, hopefully those will be helpful to anyone who wants to make the most of the MP3 format to connect with their listeners. Follow these guidelines to stay ahead of the game and help ensure that people listening to your music regard you as the best person to get it from. It’s guerrilla warfare out there, so use your weaknesses as strengths!

The difference between The Internet and The Web

“The Internet” and “The Web” are two expressions which are often used interchangeably, so writing this down is a good way to keep it clear in my own mind. It might seem like a trick question, but what is the difference? Surely they are the same thing? Well, the way I see it is like this:

The Internet is a giant distributed piece of hardware made up of computers, routers and cables spanning across the whole planet. The World Wide Web is just one of many software applications which runs on the Internet’s hardware.

Examples of other software applications which run on the Internet are Microsoft’s Xbox LIVE gaming network, Usenet and desktop Email services. All of these use the Server-Client architecture of the Internet to communicate, but there is no HTML/hyperlinks and no HTTP being used in their core systems.

The underlying technology of the Internet (machines communicating with TCP/IP) was invented by the American military in the 1970s as a military communications system. Gradually, other governmental, educational and commercial networks all over the world joined the internet and were able to interconnect systems which were compatible with each other (Electronic Mail being amongst the most popular).

Whilst working at CERN in Switzerland, British computer scientist Tim Berners-Lee developed the HyperText Transfer Protocol (HTTP) server and browser, which enabled users of their internal network to view scientific documents and jump to related material by clicking on-screen ‘hyperlinks’. In 1991, Berners-Lee made the software for interconnecting documents in this way available to anyone on the Internet and the World Wide Web was born.

Today Tim-Berners-Lee is the director of the World Wide Web Concortium (W3C) which maintains and develops Web Standards, and aims to keep the web open and accessible.