Compress CSS and JavaScript Using PNGs and Canvas Published on September 8, 2010
This article authored by Craig Buckler was originally published by Sitepoint.com
This is a sneaky trick. It was devised by Jacob Seidelin at Nihilogic.dk and has been used by some participants in the 10K An Event Apart competition, though there is some contention as to whether it’s in keeping with the spirit of the event.
That said, it’s interesting to see how it’s done, so let’s have a look. Here are the steps:
1. Minimize your application
The first step is to squeeze your final CSS and JavaScript to the smallest possible size using any decent compression tool.
2. Encode your CSS and JavaScript as a graphic
This is the tricky part. You need to convert your ASCII-encoded CSS and JavaScript files into a single binary image. The PNG format is best because it’s lossless (your code is preserved), uses zlib compression, and is supported by all browsers. Web developer Cal Henderson has published his research and PHP/Perl code that converts code to an image using various formats such as 1-bit, 8-bit, 24-bit, and so on. You can view the jQuery library as a 1-bit square here. The PNG can be reduced in size further using tools such as Smush.it and PNGOUT.
3. Extract the code from the image
We now need to load the image and convert it back to executable code. This can be achieved by loading the image into a canvas element using the drawImage() method. Individual pixels are then read using getImageData(), and converted to a string that can be passed to eval() or embedded into the DOM. Results vary, but file size savings of 75% can be achieved. In a few cases, the image format can beat files compressed with Gzip. So you could enter the 10K competition with 40Kb of code!
Does this have a real-world use?
So, apart from cheating at contests, does this technique have any real-world application? It’s an interesting hack, but Gzipping source files on the server will normally result in better compression and it’s far easier to implement.
However, I could see the technique being used for steganography, or to encrypt sensitive code from novice hackers. Very cool, but would you use it?
by Craig Buckler in www.sitepoint.com/blogs/2010/09/07/compress-css-javascript-png-canvas/
Scripts in your Word Press projects Published on March 17, 2010
Inserting scripts in your Word Press projects the proper way.
Sometimes you need to to enhance you WP project capabilities (plugins, themes, widgets, whatever), and to do so you need to add some scripts to your WP projects, either your own scripts or someone else’s. There are several ways to do this, and most of them are wrong.
This is a post excerpted from the Word Press Codex explaining how to do it.
Also there is a list with the default script libraries included with your Word Press installation, that you don’t need to include, just call whenever you need!
Cool ah!?
Acessibility: The back button. Published on January 21, 2010
Script and noscript tags. Case study 2 – The back button
A client once asked me to add a back button on the end of every post to get back to the corresponding category listings.
The fist thought that occurs is to use JavaScript and the classic history navigation:
href=”javascript:history.back();”
There’s nothing wrong here, it works pretty fine, except if you want to keep your site accessible…
Word Press Accessibility: The noscript attribute. Published on January 20, 2010
Word Press Accessibility: The <noscript> attribute.
The basic rules of accessibility state that you should always provide alternative content to users no able to access it, if you rely only on scripts to deploy it.
No one should be left out, and all users are entitled to have a similar “rich browsing experience” regardless of their personal physical challenges.
With this article I intend to bring your Word Press websites a bit closer to what I state in the previous paragraph that sometimes, to some people seems like a utopia.
Let’s get our hands dirty with code!