12. Februar 2013 | 1 Comment Schon lange gab es keinen JS1k Wettbewerb mehr – Zuletzt vor einem Jahr, im Februar 2012 (Zum Valentinstag)… Doch das ändert sich nun! Der aktuelle Wettbewerb nimmt sich das Thema „Spring“ (Frühling) zur Brust und endet am Sonntag, dem 31.März (Laut den offiziellen Regeln). Das ganze ist unter http://js1k.com/2013-spring/ zu erreichen. Bisher gibt es schon ein paar tolle Javascript Demos und es werden Tag für Tag mehr. Oft ist einem nicht klar, wie die Entwickler mit 1024 (oder weniger) Zeichen solche Skripte hinbekommen… Die Stichwörter dürften ganz klar Algorithmen und Mathematik sein. Super! Was brauche ich? Um am Wettbewerb teilnehmen zu dürfen muss der Entwickler das folgende Template benutzen (http://js1k.com/2013-spring/shim.html) und sein Script hier einsenden. <!doctype html> <html> <head> <title>JS1k, 1k demo submission [ID]</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218 </script> <script> // start of submission // SCRIPT // end of submission // </script> </body> </html> Was muss ich beachten? Um seine Demo auf möglichst wenig Zeichen zu bekommen, kann man verschiedene Techniken anwenden. Entweder man lässt seinen Code durch einen minifier (wie z.B. den Closure Compiler oder JS Crush) laufen oder macht sich selbst an die Arbeit – Da man seinen Code selbst am besten kennt, ist die zweite Option manchmal besser geeignet. Wie kann ich Zeichen einsparen? Die Einsparungen können auf einem ganz niedrigen Level begonnen werden… Der folgende Code basiert auf dem Template von oben (bedeutet wir haben die Variablen a, b und c vorgegeben). Zuerst zeige ich euch eine komplett „unkomprimierte“ Version eines Skriptes das pro Sekunde drei farbige Kreise an zufälligen Koordinaten darstellt: var x = 500; var y = 500; c.width = x; c.height = y; a.fillStyle = '#fff'; function zeichne () { // Den Hintergrund des Canvas leeren a.fillRect(0, 0, x, y); // Kreis nr.1 a.strokeStyle = '#f00'; a.beginPath(); a.arc(x*Math.random(), y*Math.random(), 50, 0, 2*Math.PI); a.stroke(); a.closePath(); // Kreis nr.1 a.strokeStyle = '#0f0'; a.beginPath(); a.arc(x*Math.random(), y*Math.random(), 50, 0, 2*Math.PI); a.stroke(); a.closePath(); // Kreis nr.3 a.strokeStyle = '#00f'; a.beginPath(); a.arc(x*Math.random(), y*Math.random(), 50, 0, 2*Math.PI); a.stroke(); a.closePath(); } setInterval(zeichne, 1000); Dieser Quelltext hat (wenn wir großzügig alle Kommentare, Leerzeichen, Tabs und Zeilenumbrüche nicht mitzählen) 467 Zeichen… Und nun die (händisch) minimierte Version: var d = 500, e = Math, g = e.random; c.width = c.height = d; a.fillStyle = '#fff'; setInterval(function(){ function i(f){ a.strokeStyle = f; a.beginPath(); a.arc(d*g(), d*g(), 50, 0, 2*e.PI); a.stroke(); } // Den Hintergrund des Canvas leeren a.fillRect(0, 0, d, d); // Kreis nr.1 i('#f00'); // Kreis nr.1 i('#0f0'); // Kreis nr.3 i('#00f'); },1E3); Lässt man auch hier wieder Kommentare, Leerzeichen, Tabs und Zeilenumbrüche raus landen wir bei 232 Zeichen – Es konnten 235 Zeichen (also mehr als die Hälfte) eingespart werden durch einen sehr geringen Aufwand… Ich möchte kurz darauf eingehen, was alles gemacht wurde: Zu aller erst habe ich für oft verwendete Aktionen oder Variablen kürzere Variablen deklariert: x und y wurde zu d zusammengefasst, Math zu e und Math.random (bzw. e.random) zu g Die Funktion zeichne wurde als Lambda Funktion an setInterval() übergeben, dadurch spare ich mir zwei mal den String „zeichne“ Das zeichnen eines Balls wurde als Funktion ausgelagert (inkl. Parameter für die Farbe) Die Funktion a.closePath() wurde entfernt, da das Skript auch ohne funktioniert Was lässt sich noch verbessern? Sollten wir eine Demo mit mehr Formen und Funktionen (z.B. für Dreiecke, Vierecke, …) haben, so könnten wir die Variablen für deren Ausmaße (wie etwa den Radius = 50) und Funktionen a.beginPath(), a.stroke() und ggf. a.closePath() in kürzerer Schreibweise verwenden: var /*...*/ r = 50; a.a = a.beginPath; a.b = a.stroke; a.c = a.closePath; Das wars? Jain… Das minimieren des eigenen Codes ist noch nicht alles – Schließlich muss dieser auch etwas Leisten. Der Beispiel-Code von oben z.B. kommt an beinahe keinen Code der anderen Teilnehmer ran. Viel zu plump, einfallslos und simpel. Habt ihr eine gute Idee für den Wettbewerb? Immerhin lassen sich tolle Sachen gewinnen! Getreu dem Motto „Dabei sein ist alles“ werde ich mir vielleicht auch eine Kleinigkeit überlegen, die ich einschicken kann 😉 In diesem Sinn wünsche ich euch allen Happy Coding und hoffe ein paar Leute zur Teilnahme bewegen zu können!