The Making of www.binarykitchen.com
www.binarykitchen.com is a labour of love - you will recognise some professional solutions, especially the CSS part was challenging. Such a fancy design needs lots of attention and the performance must not deteriorate. It's important to keep the balance between features and page speed. Below I explain you how some parts have been implemented:
The initial design was created in Photoshop, every background image is put in single layer overlaying another layer. Exporting background images for CSS is done by disabling some layers in Photoshop. Some are saved into JPG for better compression results, others into 24-Bit PNG format because of alpha transparency. But for some background images, I have disabled the alpha transparency, for example the upper half of the chef's hat on the entry page. That because transparency enables you to show underlying parts, in this case the binary texture in the header.
I have kept most background images under 1 KB for performance reasons, especially for embedding images into CSS.
Embedding images into CSS
For reducing HTTP requests, it is very recommendable to embed images smaller than 5 K straight into CSS. You can treat these images as if they were little chunks of data by encoding them into a hexadecimal stream. The RFC 2397 allows that. Using this technique, embedded images are loaded at the same time when the CSS file is loaded:
The part after "base64," is the hexadecimal stream. To generate the hexidecimal stream on the fly in PHP, you could write something like this:
background:url(data:image/png;base64,<?php echo base64_encode(file_get_contents('logo.png')) ?>);
to use an absolute path to the file you want to base64 encode into a
hexidecimal stream. Don't encode files larger than 5 K because the PHP
method file_get_contents() is accessing the file system on the server
requiring a pretty amount of ressources.
Don't leave mobile devices out
To make www.binarykitchen.com a good experience for mobile devices like the iPhone, I added a separate CSS stylesheet with media="handheld":
<link media="handheld" title="Handheld Style" href="..." rel="stylesheet"/>
Inside that stylesheet, I reincluded the default CSS file for the screen by PHP's require() command and then all I had to do is to hide some elements with display:none to prevent them from appearing in mobile devices. For example the chef's hat and other decorative elements.
And I din't forget to trim the screen for small displays with viewport's meta tag. Otherwise the website would have looked like a thumbnail on the iPhone:
<meta name="viewport" content="width=841"/>
// create linked list object
var oLinkedList = new DoublyLinkedList();
// append first element, any data and any index
// append last element
// and now, here is the magic: next(99) returns 'Afghanistan'
var next = oLinkedList.next(99);
OptimiSe with YSlow
There are many other techniques I better not reveal in one news entry. But with the help of Firefox's extension YSlow you can optimise your website very well. It's a good start to learn
from there. YSlow shows you where your bottlenecks are. This website
has a YSlow overall performance score of 90 which is good. Try testing
the performance of websites with that cool extension.
That was The Making of www.binarykitchen.com - you can look forward to read more hints from me in the future news.
doubly_linked_list_js.txt (1.44 KB)