CSS Sprites

The problem

You have a menu bar with the standars buttons, including the proverbial "previous / back" and "next / forward" buttons which look like...

You have been asked to improve the usability of them. In addition, your application is not coming up well in performance analysis tools. One reason for this is that many pages are downloading numerous components resulting in too many HTTP requests. It's time to consider mechanisms to reduce the number of HTTP request required to display your pages.

The solution

Well consider the usability first. The images for the buttons don't look that bad. It's obvious what they mean and what they will do, so there's not much point adding tooltips. But we could make things look sleeker with some "hovering".  What's hovering?  Hovering is a technique which dynamically changes a component when a mouse "hovers" over it. Technically, tooltips are a form of hovering but there are other types: components can change colour or light up. Let's apply some hovering magic to our prev / next buttons.  Hover your mouse over the buttons below, do it a few times and watch them glow.

So how did we do all that? Well, the first thing we do is make alternative images of our original images. This can be done using any decent editing tool: gimp, paint shop pro, take your pick - for this example, I just used Picaso. The second thing to do is to amalgamate the four separate images using a tool such as CSS Sprite generator into one single image.

Why one single image? Well that's for the performance part. HTTP requests can be expensive. We don't want to have to 4 separate HTTP requests for 4 images. So instead, we have one image which contains everything we need. This downloads all four components in one go. We then use some CSS tricks to:

1. Pull the 2 images out of the one big sprite
2. Switch the images to their hover versions when the mouse hovers over them

So how do we all that... time to look at some CSS.

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:60px;display:block;}

#prev{left:0px;width:60px;}
#prev{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') 0 0;}
#prev a:hover{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') -60px -60px;}

#next{left:61px;width:60px;}
#next{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') 0 -60px;}
#next a:hover{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') +60px 0px;}

The second half of the cake is the HTML, note the id's

Explanation

1. The CSS shows a styled navigation list. A list with id="navlist" will reap the styled benefits.
2. An element with id="prev" will disect up the collection of images aka the "sprite sheet" and take out the part of the image it wants i.e. the left arrow
3. An element with id="next" take out the right arrow
4. "prev" and "next" have hover images which are also taken from the sprite sheet and will be displayed when the mouse hovers over them.

So there we go. Better usability and better performace.  A good day's work. So any other questions? Well an obvious one would be why not just use an image map? It will also reduce HTTP requests. That's true. But, it's not as flexible as using CSS sprites. When image maps are used, the images have to be continguous. Using the CSS sprites technique, you can split them up whatever way you want. A whole bunch of images can be put onto the one sprite and then can be used together, seperate and in whatever order you want.  In fact this is how most companies used CSS sprites. They create a sprite sheet which contains various images for all parts of the web application.  Inline images are another approach. This approach will download the image in the same HTTP request as the page and thus also reduce HTTP requests but it willalso increase the size of the HTML page.  Browser support for CSS sprites approach is also better.

So, is anyone else using CSS sprites - hell yeah! Recognise anything here...

References

1. Really interesting page about the evolution of google super sprite
2. W3C page on CSS sprites
3. Sprite generator

The CompTIA Network+ exam

I recently wanted to brush up on my networking knowledge so decided to have a go at the CompTIA Network+ certification.  The CompTIA Network+ exam is technology agnostic (it doesn't get hung up on CISCO details) and reasonably straighforward.  You don't need any sys admin experience (or any prior certifications) just a bit of technical know how, some study and you'll be fine.

In my own case, my background is software engineering and technical architecture.   I have never worked as a sys admin and never will - I am pretty sure a good sys admin would  find this certification too easy.  So, if you are in a similar boat you may be asking what is the benefit of putting the time into attempting this certification?

Some reasons...

Reason 1: Protocols

In every architecture (especially a J2EE / JEE one) you don't just have a range of software protocols (e.g. RMI, JDBC) you usually have an array of classical network protocols:  TCP, DHCP, DNS, HTTP,  HTTPS etc. And depending on what your architecture is trying to do you'll more than likely have a few more.  For example, if you're sending / receiving emails you'll be talking mail server, SMTP, POP3 and IMAP; if you have some Voice over IP, you'll be talking SIP and RTP.  Having a good understanding of every protocol that does something in your architecture is as important as understanding every component in your architecture.  It's all part of the same jigsaw.

Reason 2: IP
 
In your deployment, as you start to scale and start adding more servers to your architecture understanding things like IP addressing mechanisms, subnetting, private IPs, static IPs,  APIPA, Autonomous systems, WINS, Default gateways, broadcast addresses, NAT, DHCP scopes,  etc. becomes important.   Even if you are not scaling, you may want to do something like put your REST services under their own domain name in the same way Dropbox (http://api.dropbox.com) and Twitter (http://api.twitter.com/) do.  Understanding how to do this and how to get the benefits from it require some networking knowledge.  For example, you may decide to use different TTL values for your REST domain name than for the rest of your architecture.

Reason 3: Security

The Network + certification contains plenty of interesting stuff from a security perspective:

• The difference between stateless and stateful firewalls. Stateful Firewalls remember your session and can have more sophisticated rules based on its knowledge of previous requests from the same session.
• The various wireless encryption standards (WEP is awful, WPA2 is good).
• The various attacks that can happen to your network, DoS, Smurf etc.
• RADIUS, TACACS+ and Kerberos protocols
• Understanding that FTP, Telnet, RSH, RCP, SNMP v1/2 are unsecure
• Understanding that SSH, SNMPv3, SFTP, SCP are secure.
• Intrustion protection scanners and Intrustion detection scanners - what they do and when to use them.
• Port scanners - useful for seeing which ports are open. Try angry ip scanner
• Packet sniffers - useful for lots of things. Have a go with wireshark
• IPSec - the only IP encryption protocol to work at layer 3. It encrypts both header and payload.

Reason 4: Performance

From a performance perspective:

• Wireless network speeds - 802.11n is way faster (up tp 400 Mbps) than 802.11g (54 Mbps) which many networks are still on.
• Optic fibre options and types- single mode supports much longer distances than multimode. 
• Bandwidth for various ethernet cables types. For example 1000BaseT has a speed of 1 GB/s and must use Cat 5e / 6 cable. It has a distance of only 100M. 
• Methods to guarentee or increase bandwith for users and applications - Traffic shaping and QoS

Reason 5: Network commands

Some network commands are well known and obvious to all of us. For example: PING.  But, do you know how do to set buffer size for your ping request? (It's PING -l). Or that PING will give you idea of network hops from the TTL value returned?  Or what protocol is required for ping to work? (It's ICMP). Is this any relevance?  Well it may not be. But, it might help you.  For example, by default you can't PING an Amazon EC2 instance because - by default -  Amazon disable ICMP for its EC instances.  Now that might be useless information, or it might save you a painful 2 hours some day!

The Network+ certification  also contains some good stuff on commands that aren't so obvious.  This includes DIG and MTR . The former is useful for diagnosing DNS problems and gives a little bit more than NSLOOKUP; the latter (MTR) is a sort of combination of TRACEROUTE and PING.

Exam preparation

To study for this exam, I read the CompTIA Network+ book by Mike Meyers and went through all the Network+ training videos from Professor Messer - these are free and really good.  The exam contains 100 multiple choice questions that have to be answered in 90 minutes.  In comparison to any Java certification, that's a lot more questions.  Most of the questions are reasonably straight forward however, the pass mark is 80% which is a lot higher than most other industry standard certifications - so it's not that easy a certification.  Regarding cost, well at exchange rates of the time I did the exam (Feb 2012), the damage to the credit card was €263.00.  I sat the exam at the New Horizons exam centre on Strand Street Great, Dublin 1.  Good set up there.

Summary

So in summary, the Network+ exam will not turn you into a Sys admin genius. Some of the questions are easy, some are just a matter of brushing up on what you probably already knew and other parts you'll learn something new.  As with every certification, there are the proverbial bits of irrelevant stuff - things you have to learn for the exam and probably never need again.  This can be a pain.  However, there are also many good things that can be learnt.  I have tried to outline some of them here.  Please feel free to add a comment below or contact me if you have any questions