Webhack: Javascript und CSS per PNG packen
Für seinen Beitrag im Rahmen des Wettbewerbs 10K Apart(öffnet im neuen Fenster) griff Le eine Idee von Jacob Seidelin alias Nihilogic auf: Dieser hatte 2008 gezeigt, wie sich Javascript mit Hilfe einer PNG-Grafik(öffnet im neuen Fenster) packen lässt. So gelang es ihm damals, ein kleines in Javascript realisiertes und direkt im Browser ablaufendes Super-Mario-Spiel(öffnet im neuen Fenster) von 14 auf 8 KByte zu komprimieren. Die Größe der Javascript-Bibliothek Prototype konnte er so von 123 KByte auf 30 KByte reduzieren.
Dabei wird aus dem Javascript- und CSS-Code eine PNG-Datei erzeugt. Dazu wird jedem ASCII-Zeichen ein Wert zwischen 0 und 255 zugeordnet und ein Pixel mit entsprechender Farbe erzeugt. So entsteht ein Bild, das augenscheinlich nur Rauschen enthält.
Um die so gepackten Daten im Browser zu entpacken, wird das Bild in ein Canvas-Objekt gezeichnet. Der Browser entpackt dabei die Daten automatisch, so dass der Code wieder im Klartext zur Verfügung steht und aus dem Canvas-Objekt ausgelesen werden kann.
Die Technik griff Le auf(öffnet im neuen Fenster), um eine möglichst komplexe Demo in 10 KByte Code unterzubringen. Sämtlicher HTML-, Javascript- und CSS-Code sowie das notwendige HTML dürfen für den Wettbewerb zusammen nur 10.240 Byte umfassen und müssen komplett im Browser laufen, ohne Rückgriff auf einen Server.
So entstand ein Build-Script(öffnet im neuen Fenster), das sämtliche Javascript- und CSS-Dateien mit Hilfe des YUI-Compressors minifiziert, in einen einzelnen String umwandelt und diesen anschließend in ein PNG-Bild umwandelt.
Den durch den Trick gewonnenen Platz innerhalb der 10-KByte-Grenze nutzte Le, um seinen Githubfinder(öffnet im neuen Fenster) zu implementieren, sein eigentlicher Wettbewerbsbeitrag. Mit der Applikation im Stil von Apples Finder lassen sich Git-Repositories erkunden.
Relevant ist der Trick allerdings in erster Linie für entsprechende Wettbewerbe, um mit allen für einen Wettbewerbsbeitrag notwendige Dateien unter dem gesetzten Limit zu bleiben und den Aufwand einer eigenen Routine zum Entpacken zu sparen.
- Anzeige Hier geht es zu Super Mario Bros. Wonder bei Amazon Wenn Sie auf diesen Link klicken und darüber einkaufen, erhält Golem eine kleine Provision. Dies ändert nichts am Preis der Artikel.