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/
HTML ISO-8859-1 Reference Published on July 30, 2010
Sometimes you need to encode special characters in your projects. – I often do, while writing in Portuguese that uses “special” Latin characters. For those cases there is a standard rule called ISO-8859-1
ISO-8859-1 is the default character set in most browsers.
The first 128 characters of ISO-8859-1 is the original ASCII character-set (the numbers from 0-9, the uppercase and lowercase English alphabet, and some special characters).
The higher part of ISO-8859-1 (codes from 160-255) contains the characters used in Western European countries and some commonly used special characters.
Entities are used to implement reserved characters or to express characters that cannot easily be entered with the keyboard.
Reserved Characters in HTML
Some characters are reserved in HTML and XHTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup.
Read the full article in: www.w3schools.com/tags/ref_entities.asp
How to use custom styles in the WordPress post editor Published on July 27, 2010
Every-time I created a word press theme, I felt the need to allow my theme users to use on their contents, the CSS styles that I had created to the theme itself.
They were especially created in order to maintain a visual identity between the layout and the contents, and should be directly applied at the author’s will! – How-come the styles, created specially for that theme (my CSS Classes), weren’t available to be applied trough the default WYSIWYG text editor?
My objective was allowing users to be able to apply the custom styles, in the default panel, using the panels own logic, without any particular knowledge of HTML or CSS and without having to stick to the editor’s default predetermined styles.
In this brief tutorial I’ll explain a very simple way to do this, just by adding a couple of lines of code to your theme’s functions.php, and by creating a very simple CSS file to host your custom styles.
In my previous article about this subject (www.wdmac.com/word-press-custom-css-styles-in-the-wysiwyg-editor) we’ve edited a couple of WP core files, and the result was satisfactory. However those edits where lost on every WP upgrade, and that was not satisfactory at all. This is a clean, straightforward technique, that is “permanent” and non-upgrade-dependent.
This article was updated: November 3th, 2011
Formatting print_r(); to be readable Published on May 26, 2010
User friendly array listings, by formatting print_r();
When you wish to see the contents of any PHP array, typically you use the print_r() function.
This will print all the array contents in a very messy text block, without any line-breaks whatsoever, wich is quite difficult to read and browse trough.
Wouldn’t it be so much nicer to show the array contents split by line, clean and easy to read and browse., to find what you’re looking after? This is what we will do in this post.
How to Make a People-Free Photo in a Crowded Place Published on May 17, 2010
How to Make a People-Free Photo in a Crowded Place
By Alexey Stiop, Shutterstock Contributor, published in: submit.shutterstock.com/newsletter/217/article2.html (original post images featured)
Have you ever wanted to photograph a landmark or historic site or an interesting piece of architecture, and wished you could do it without including hundreds of tourists in your shot? This especially would present a problem if you planned to submit this image as stock – unless, of course, all these people were your friends and would gladly furnish you with their model releases.
Well, there is a way around this. You will need two things (besides your camera) – a steady tripod and Adobe Photoshop CS3 Extended.
