Javascript ist Toll!

Firefox Screenshots

Update 25.2.2023:Der Befehl wurde endgültig aus der Konsole entfernt und steht über eine Tastenkombination (STRG+SHIFT+S) zu Verfügung. Das ist für die meisten Nutzer sicher auch einfacher.

Update 3.5.2022:Da Mozilla vor hatte die Konsole zu entfernen es aber dann doch nicht tat, hatten sie den Befehl etwas geändert, um die Konsolenbefehle von denen zu unterscheiden, die zu der Webseite gehören (... mehr). Die Konsole befindet sich jetzt im "Entwicklerwerkzeug" im Menü Extras. Dort kann man im Reiter Konsole den Befehl eintippen. Diesmal ohne URL:

:screenshot --fullpage

Update 19.8.2013: Die Syntax dieses Features hat sich mittlerweile geändert, leider wird dies im Hilfetext in der aktuellen Version (22.0) nicht erwähnt. Um den hier beschriebenen Screenshot zu machen, muss der Befehle so lautet:

screenshot jstruebig.de --fullpage

Mit dem neuen Firefox 16 lassen sich nun Screenshots von Internetseiten anfertigen, ohne das dafür ein AddOn nötig wäre. Egal ob die komplette Seite oder auch nur Teilbereiche davon. Dieses neue sehr nützliche Werkzeug versteckt sich in der Entwicklerkonsole.

Geöffnet wird die Konsole entweder über das Menü Extras > Web-Entwickler > Entwickler Symbolleiste (komische Übersetzung) oder mittels Shortcut ([Umsch]+[F2]). Daraufhin öffnet sich eine Eingabekonsole am unteren Fensterrand.

Wenn dort help eingegeben wird, werden alle Befehle aufgelistet, die die Konsole momentan beherrscht. Ich möchte hier an dieser Stelle nur auf den Befehl screenshot eingehen.

Die Eingabe von:

screenshot test

speichert direkt den sichtbaren Teil dieser Seite mit dem Namen test.png im aktuellen Download Verzeichnis ab. Die Schnappschüsse werden also png Datei gespeichert.

Wenn die komplette Seite gespeichert werden soll, müssen noch zwei weitere Parameter übergeben werden:

screenshot jstruebig.de 0 true

Die Null ist die Dauer der Verzögerung, bis der Screenshot erstellt wird und true gibt an, dass die komplette Seite gespeichert werden soll. Weitere optionen können mit help screenshot angeziegt werden:

Die Hilfeseite des Befehls screenshot

Tween Beispiele

Das Tween Objekt

Ich vertiefe hier noch einmal die Verwendung meines Tween Objektes. Hier zeigt sich, wie einfach und effektiv es sich nutzen lässt. Der Code um eine Animations zu erzeugen ist sehr kurz und wie ich finde auch übersichtlich.

Auf der Seite ist ein Animationsobjekt, das mit zwei Animation erzeugt wurde. Mit Hilfe eines Formulares können einige Parameter verändert und diese Animationen in unterschieldichster Weise gestartet werden.

Beispielcode

Tween(2)

Die Technik um mit Javascript eine Bewegung zu animieren hatte ich in einem älteren Artikel bereits beschrieben und kündigte dort eine Fortsetzung an. Doch das Skript, was ich dort verwendet habe, hat sich im Umgang als etwas sperrig erwiesen, daher habe ich es nun komplett neu geschrieben.

Die neue Tween-Klasse kann nun deutlich mehr.
Mit ihr ist es möglich mehrere Elemente gleichzeitig oder auch mehrere Animationen parallel oder hintereinader zu benutzen. Der Animationsablauf läßt sich mit Events steuern. Dazu habe ich in das Skript eine kleine Event Klasse integriert.

Und das Tween Objekt läßt sich auch als Basisklasse für eigene Tweenobjekte benutzen. Es ist aber nicht auf Geschwindigkeit optimiert, trotzdem ist die Animationsgeschwindigkeit (gefühlt) ganz passabel.

[12.10.2012] Das Skript wurde mittlerweile mehrfach überarbeitet und ist dadurch was Funktionalität und Geschwindigkeit angeht deutlich besser geworden.

WordPress und Javascript

In der letzten Zeit durfte ich mich etwas intensiver mit WordPress beschäftigen und bin dabei einer Lösung eines alten Problems auf die Spur gekommen.

Seit anbeginn hat mich WordPress hier im Blog genervt, weil es Javascript Code der innerhalb von Artikeltext eingebaut ist, mit internen Funktionen vor der Ausgabe so verändert, dass er nicht mehr lauffähig ist. Ich hatte schon 2008 darüber gebloggt und konnte zwischenzeitlich zumindest den Aufwand bei Updates deutlich verringern

Das Problem war, dass eine Funktion mit den Namen convert_chars() doppelte && Zeichen umwandelt. Da diese in JS das logische-Und sind funktioniert Javascript Code nicht mehr. Denn diese Funktion wird auf jeden Artikel Text angewandt. So wurde bei in Artikel eingebetteten Javascript Quellcode aus && immer && und folglich für den Browser fehlerhaft. Bisher habe ich bei jedem update die Funktion im Code von WordPress geändert. Was lästig ist.

Dabei wäre das Problem einfach zu lösen gewesen nur ich wußte bisher nicht wie. Im Template Verzeichnis kann in der Datei functions.php Einfluss auf das Verhalten von WordPress ausgeübt werden. Unter anderem können bestimmte Events verhindern werden. Um zu verhindern, dass z.b. die oben gennante Funktion aufgerufen wird, muss lediglich folgende Zeile in die Datei eingefügt werden:

remove_action('the_content', 'convert_chars');

Und auch das Plugin Text Control, das ich bisher benutzt habe, läßt sich komplett einsparen, mit den folgenden drei Zeilen:

remove_action('the_content', 'convert_chars'); 
remove_action('the_content', 'wptexturize'); 
remove_action('the_content', 'wpautop');

Schon kann problemlos auch JS Code in die Artikel eingefügt werden.

GoodBye Google

Es macht ja nun schon einige Zeit die Runde, dass Google sich eine neue Datenschutzbestimmung zulegt. Hauptsächlich wird dies damit begründet, dass die vielen Dienste, die Google anbietet, damit alle Vereinheitlicht werden, bzw. deren AGB.

Die sogenannte Datenschutzerklärung ist online in einer Vorschau einsehbar. Was ich mich beim durchlesen zuerst gefragt habe, worin besteht hier der Schutz? [... weiterlesen]

Firefox 8 und das Audio Tag

Mittlerweile wird HTML5 immer häufiger eingesetzt. Vor allem die Multimedia Tags <audio> und <video> sind verlockend, da sie vom Flashbalast befreien und eine leichte Integration von Musik und Videos in eine Internetseite versprechen. Neben den Problemen bei der Unterstützung der unterschiedlichen Formate, gibt es aber noch hin und wieder Darstellungsprobleme.

Kürzlich tauchte in einem Forum, bei einer Frage, eine Merkwürdigkeit im Firefox auf, wenn ein Audio Tag mit controls eingebunden wird. Sobald der Browser beginnt die Inhalte zu laden, wird dieses Icon, zum symbolisieren des Vorladens, angezeigt. Ist das Vorladen beendet, wird es wieder ausgeblendet. Das hat zur Folge, dass die Bedienelemente anfangen zu springen und dadurch zum Teil der Eindruck erweckt wird, diese können nicht mehr benutzt werden. Alle anderen Browser, die das Audio Tag darstellen können, haben dieses Problem nicht.

“Mein liebstes Linuxbasiertes Betriebsystem”

Ubuntu ist nicht mehr mein "liebstes Linuxbasiertes Betriebsystem" (wie Sheldon in einer Folge der Serie Big Bang Theory mal sagt).

Seit ca. 1 1/2 Jahren bin Linuxnutzer. Genauer gesagt Nutzer von Ubuntu. Die anfänglichen Schwierigkeiten hatte ich schnell überwunden, da es mir durchaus Spaß macht, mich mit den Interna meines Rechners und seines Betriebsystem auseinander zu setzen. Mittlerweile hatte ich Ubuntu im Freundeskreis schon dreimal installiert und den einen oder anderen von den Vorzügen überzeugt Linux zu nutzen oder zumindest als Option auf dem nächsten Rechner mal auszuprobieren.

Schon seit einigen Monaten zeigte mir die Updateverwaltung eine "neue Version von Ubuntu steht zu Verfügung" an. Da ich aber bereits kritische Stimmen über das was da kommt gelesen hatte, habe ich diesen Schritt vorerst nicht gemacht.

Als ich aber vor kurzem bei einem Freund die aktuelle Version installiert hatte, gefiel mir Unity eigentlich ganz gut. Das ich zuerst nach Einstelllungen suchen musste war zwar nervig, aber solange es möglich ist sie zu finden bereitet es mir keine grossen Schwierigkeiten, mich auf ein anderes System umzugewöhnen. Also installierte ich mir Ubuntu 11.x

In der ersten Woche arbeitete ich mich in das Konzept ein und empfand es als halbwegs angenehm. Auch wenn ich hier und dort Einstellungen ändern musste. Doch nun kam der Sprung von der Version 11.04 auf 11.10 und das Grauen nahm seinen Anfang. Unity wird definitv nicht mein System!

LED Editor

LED Scroller Chareditor

Dieses Skript dient zum bearbeiten der Zeichen des LED Scrollers. Es erzeugt den Code, der für die Darstellung der Zeichen notwendig ist, um diese im LED Scroller benutzen zu können.

Round Robin Berechnung mit Javascript

Mit dem Round Robin Algorithmus können Spielpaarungen in einem rundenbasierten Turnier berechnet werden. Das betrifft z.b. Turniere vieler Ballsportarten. Das Besondere an diesem Algorithmus ist, dass sich die Spiele mit den folgenden Rahmenbedingungen berechnen lassen:

• Jedes Team soll möglichst abwechselnd Heim- und Auswärtsrecht haben
• Jedes Team soll jede Spielrunde ein Spiel austragen

Der Algorithmus wird wie folgt angewandt:

WordPressStats entfernt.

Eigentlich braucht man für einen Blog wie diesen kein Statistiken.
Ich hab' keine Werbung auf den Seiten und muss mich auch nicht selbst bestätigen, weil ich soviele tolle Besucher habe. Es ist einfach nur ein Blog, um ab und zu mal etwas über mein Hobby, Javascript zu schreiben. Vielleicht kann der eine oder andere etwas damit anfangen.

Trotzdem habe ich in diesem Blog das WordPress Plugin WordPress.com Stats eingebunden (Achtung! Nicht verwechseln mit dem Plugin WP-Stats). Der Nutzen für mich liegt darin, dass ich relativ schnell sehen kann, wenn es übermäßig viele Zugriffe gab (oder gäben täte ;) ). Aber es ist natürlich auch schön, so Kleinigkeiten, wie mit welchen Suchbegriffe meine Seite gefunden wird, was die beliebtesten Artikel sind, zu erfahren. Mit diesen Informationen habe ich z.b. immer mal wieder einen einzelnen Artikeln etwas nachgefeilt. Sei es, neue Schlüsselwörter eingefügt oder dass ich beliebte Artikel versucht habe besser zu formulieren.

Ich habe Heute dieses Plugin deaktiviert, da es, neben dem üblichen sammeln der normalen Logdaten, diese Informationen auch noch auf an kommerzielle Dienste weiterreicht. Das wußte ich nicht und scheint auch relativ neu eingeführt worden zu sein.