CodePen ist für mich eine geniale Plattformen, um sich inspirieren zu lassen und herauszufinden, was durch Web-Technologien alles möglich ist.

Was mich aber störte: die Pen-Gallerie. Gerade wenn man nur kurz in das Ergebnis hereinschauen wollte, dauert es sehr lange, weil die Seite für einen Pen ganz neu aufgebaut werden musste. Dann musste man wieder zurück zur Gallerie navigieren (was auch nochmal dauerte).

Also habe durch die Konsole des Browsers per JavaScript einen kleinen Hack geschrieben:

See the Pen CodePen gallery hack by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Der Code bewirkt, dass die Links zu den Pens jeweils in einen Iframe geöffnet werden, der dann in den Vordergrund gerät. Nach einem Klick außerhalb des Iframes wird dieser wieder geschlossen und man kann den nächsten Link auswählen.

Ein kleines Problem war, dass bei einem Wechsel auf eine andere Seite das Verhalten wieder zurück gesetzt wurde. Als Workaround wird mein Programm kurz nach einem Seitenwechsel erneut ausgeführt.

So nutzt du den Hack

Während du dich in der Gallerie von CodePen befindest, öffne die Konsole deines Browsers (unter Windows ist das meistens F12). Und füge dort den Code von oben ein.

Das kannst du so machen. Allerdings müsstest du das bei jedem Besuch wiederholen, da der Code ja nicht dauerhaft gespeichert wird. Durch Browser-Erweiterungen (wie z.B. dieser für Chrome) könntest du aber erreichen, dass der Hack jedes Mal ausgeführt wird.