Das Leben ist immer anders als die Realität.

Javascript objektorientiert

Longneck, 30. Juli 2010, 14:24 Uhr

Der Claude hat gestern die Prototyp-basierte Vererbung begriffen – glaubt er zumindest.

Wie es dazu kam? Er wurde vom CCC angefragt: Das Javascript-Blinkenlights sei eine prima Sache; ob man das auch für Arcade- und Stereoscope-Movies verwenden kann?

Arcade: Da kommen 8 Helligkeitsstufen hinzu. Nicht allzuviel Aufwand.

Stereoscope: Das sind 4 (!!) Screens, die synchronisiert ein Blinkenmovie abspielen.
4 Blinkenmovies gleichzeitig…

Tja, wie mach’ ich das jetzt. Das JS-Blinkenlights ist ein Gebäude, bestehend aus einem Fenstergrid. Das Teil lädt ein XML, hat Frames, Timer und spielt das Filmchen ab.

Jetzt das Ganze mal 4.
Claude möchte aber nicht 3x Code kopieren; sondern einmal ein Gebäude mit den Funktionalitäten erstellen, und das Teil soll dann dupliziert werden und die 4 Screens sollen dann eigenständig laufen. Mit eigenen XMLs, Frames und Timern.

Langsam begreift auch Claude: Jetzt ist es Zeit für objektorientiertes Javascript!

[mehr...]

…und es bewegt sich doch:

Longneck, 27. Juli 2010, 23:54 Uhr

Die Blinkenmovies sind jetzt Einbettbar. Gefällt.

Und ich habe eine Kategorie Blinken TV erstellt, unter welcher ich blinkende Kunstwerke vorstelle.

We are the metalheads!

Longneck, 26. Juli 2010, 22:31 Uhr

Meine erste “richtige” Blinkenlights-Animation: #wacken2010

www.wacken.com

Javascript meets Blinkenlights

Longneck, 25. Juli 2010, 17:47 Uhr

Kleines Projekt, entstanden an ein paar verregneten Nachmittagen:

Blinkentube – das ist Blinkenlights im Browser!

Blinkenlights erblickte 2001 die Lichter der Welt. Ein Hochhaus mit 8 Stockwerken und 18 Fensterreihen – platziert man hinter jedes Fenster einen Scheinwerfer, ergibt das ein Display mit 18×8 Pixeln.
Jeder konnte mit Blinkenpaint seine eigenen Blinkenlights-Movies erstellen und auf dem Gebäude abspielen lassen.

Es gab zahlreiche Folgeprojekte und Nachbauten. Blinkenlights mit LEDs, Simulatoren, räumliche Blinkenlights, Wände, Uhren, C64 Lights und viele mehr.
Ein Nachbau fehlte mir aber auf dieser Liste: Blinkenlights im Browser.

Ich habe mit Blinkenpaint herumgespielt, und es fiel mir auf, dass die CPU-Auslastung konstant auf 100% war. Und die Animationen spielten sich eher etwas langsamer ab. Auch das Laden eines Blinkenmovies (eine XML-Datei) kann schon mal 2 Sekunden dauern…
Ich habe mich gefragt: Ist es wirklich so rechenaufwändig, ein paar Lichter an- und auszuschalten? Geht das auch in meinem Browser?

Und ob!
Nach einem Abend habe ich die Lichter (ok, “1″ und “0″ in einer HTML-Tabelle) zufallsmässig an- und ausgeschaltet. Läuft prima.
Hmm… Ich muss ja das Rad nicht neu erfinden. Warum nicht gleich Blinkenmovies laden und abspielen? Ob das Parsen von 3000 Zeilen XML wohl genug schnell geht?

Und ob!
Am nächsten Abend spielt ein Blinkenmovie in meinem Browser. Das Parsen geht *zagg* *bumm* – sofort da. Wonderful.

Aber die HTML-Tabelle ist hässlich. Wenn schon, dann jetzt mit den Originalbildern der leuchtenden Fenster.

Tabellenlos. Und es läuft immer noch tipptopp in Echtzeit und ohne gröbere CPU-Belastung…
Und – das hat mir dann die Schuhe ausgezogen – selbst im IE6! :P

Und als kleines Goodie vom verregneten Samstagnachmittag: Man kann seine eigenen mit Blinkenpaint erstellten Movies hochladen.

Blinkenpaint: http://blinkenlights.net/blinkenlights/blinkenpaint

Namics Blinkenmovie: http://scratchbook.ch/blinkentube/#namics

Filme, die ich im Netz gefunden habe:
http://scratchbook.ch/blinkentube/#changing-figures
http://scratchbook.ch/blinkentube/#ampel
http://scratchbook.ch/blinkentube/#the-game
http://scratchbook.ch/blinkentube/#bit-laden
http://scratchbook.ch/blinkentube/#column-shooting
http://scratchbook.ch/blinkentube/#le-chat-noir
http://scratchbook.ch/blinkentube/#g
http://scratchbook.ch/blinkentube/#der-wasserhahn
http://scratchbook.ch/blinkentube/#james-blond
http://scratchbook.ch/blinkentube/#labyrinth
http://scratchbook.ch/blinkentube/#tetris
http://scratchbook.ch/blinkentube/#the-fly
http://scratchbook.ch/blinkentube/#thunderstorm
http://scratchbook.ch/blinkentube/#winter-in-the-city
http://scratchbook.ch/blinkentube/#worm
http://scratchbook.ch/blinkentube/#x-ball

HTML5 and web standards

Longneck, 4. Juni 2010, 14:50 Uhr

Every new Apple mobile device and every new Mac — along with the latest version of Apple’s Safari web browser — supports web standards including HTML5, CSS3, and JavaScript. These web standards are open, reliable, highly secure, and efficient. They allow web designers and developers to create advanced graphics, typography, animations, and transitions.

Standards aren’t add-ons to the web. They are the web.
And you can start using them today.

http://www.apple.com/html5/

[mehr...]

Stop Facebook, Save the World!

Longneck, 12. Mai 2010, 13:39 Uhr

Overplaying your hand
=================
The biggest mistake most new players make at poker is overplaying
their hand. They spend so much time thinking of the ways they can win
that they forget all the ways they can lose. Overplaying hands can
affect even the most seasoned players, especially after they’ve won a
couple of hands in a row.

Over the past month, Mark Zuckerberg, the hottest new card player in
town, has overplayed his hand. Facebook is officially “out,” as in
uncool, amongst partners, parents and pundits all coming to the
realization that Zuckerberg and his company are–simply put–not
trustworthy.

[mehr...]

Das neue alte Kritzelbuch

Longneck, 15. Januar 2010, 02:00 Uhr

JA!!

Es ist wieder da.

Das Original Scratchbook-Design.

Wie Anno dazumal, als ich es 2005 als mein erstes grosses PHP-Projekt ins Netz stellte.
Damals noch mit Tabellenlayout :D

Doch jetzt kommt es als Wordpress Template daher, tabellenlos, XHTML 1.0 Strict. Das Original Design, fein aufgebohrt und wieder komplett in Deutsch.

Dieses typische Scratchbook-Design strahlt einen Charme aus mit seinen Sandpapiertagebuchfarben. Jaa, genau so war’s als ich angefangen habe. Nostalgie!
Ausserdem: Die Schrift ist lesbar und sieht toll aus. Mir gefällt’s einfach, und viele Leute seufzten sehnsüchtig, als ich bei einer Convention Bilder vom alten (diesem) Design zeigte.
Nein – davon wollen wir uns nicht trennen!

Ausserdem gibt’s noch ein paar Extras:

CtrlAltDelete

Broadcast message from root (pts/0) (Thu Jan 14 01:07:53 2010):
The system is going down for reboot NOW!

Das waren keine Bilder, sondern neue CSS-Styles! ;)

<kbd>Rockt.</kbd>
 
<code>Hello World.
Again.</code>

Rockt.

Hello World.
Again.

Da ist eine Katze im Sack…

Longneck, 13. Januar 2010, 22:07 Uhr

Ich verrat’ euch aber noch nichts. Ihr ahnt es bereits…

Es hat mich gepackt. Und ich bin dran.

print_r für Javascript

Longneck, 11. Juli 2009, 14:29 Uhr

Die Funktion, die ich bei Javascript am meisten vermisst habe, ist das PHP-Equivalent “print_r” – einfach mal den Inhalt von Objekten schön darstellen.

Es gibt im Netz schon eine Version – aber deren Ausgabe sieht nicht genau so aus wie bei PHP. Deshalb hier meine Version mit kleinen Modifikationen:

/**
 * PHP. Javascript. Print_r. Nice. Object. Dumper.
 * Original. Code: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
 * Modified. By. Claude. Hohl. Namics.
 */
 
function print_r(arr, level) {
 
	var dumped_text = "";
	if (!level) level = 0;
 
	//The padding given at the beginning of the line.
	var level_padding = "";
	var bracket_level_padding = "";
 
	for (var j = 0; j < level + 1; j++) level_padding += "    ";
	for (var b = 0; b < level; b++) bracket_level_padding += "    ";
 
	if (typeof(arr) == 'object') { //Array/Hashes/Objects 
		dumped_text += "Array\n";
		dumped_text += bracket_level_padding + "(\n";
		for (var item in arr) {
 
			var value = arr[item];
 
			if (typeof(value) == 'object') { //If it is an array,
				dumped_text += level_padding + "[" + item + "] => ";
				dumped_text += print_r(value, level + 2);
			} else {
				dumped_text += level_padding + "[" + item + "] => " + value + "\n";
			}
 
		}
		dumped_text += bracket_level_padding + ")\n\n";
	} else { //Stings/Chars/Numbers etc.
		dumped_text = "===>" + arr + "<===(" + typeof(arr) + ")";
	}
 
	return dumped_text;
 
}

Testen (irgendwo in ein HTML einbetten):

var obj = {
	wert1: 'pfu',
	wert2: 'bla',
	schachtel: {
		foo: 'bar'
	},
	nummer: 2,
	und: 'so weiter'
}
 
alert(print_r(obj));

Ausgabe:

Array
(
    [wert1] => pfu
    [wert2] => bla
    [schachtel] => Array
        (
            [foo] => bar
        )
 
    [nummer] => 2
    [und] => so weiter
)

Danke Longneck. Aber ein paar Wünsche sind da noch…

Freidenker, 1. Mai 2009, 17:23 Uhr

Nach längerem auch mal ein Lebenszeichen von mir ;-)

Finde es toll, dass Longneck wieder zurück zu den Wurzeln geht – sprich scratchbook.ch!!!

Mit dabei: Eine Designänderung. Es geht jetzt nur noch um Text. Keine Banner, kein Blingbling.
Einfach nur Inhalt. — Longneck

Ausser vom Design des Blogs ist die Ausrichtung immer noch die gleiche: Texte, Fotos, Video- und Musikschnipsel.

Aber: Der Inhalt bleibt gleich. Selbstverständlich! Denn das ist das wichtigste. — Longneck

Der Inhalt ist das Wichtigste. Doch was bringt es mir, wenn die Aufmachung dazu unansehlich ist? Auf mich wirkt das Wordpress Theme wie ein spannender Manga, aber nur in Schwarz/Weiss ohne Graustufen. Schattierungen entfallen total und die daraus erzeugte Athmosphäre erst…

Ergo: Das Design von Scratchbook ist uns (ok, wenigstens mir) auch wichtig, denn es wurde doch Herzblut investiert und durch die vielen kleinen Details war die Seite nur schon als Seite etwas Besonderes, Einmaliges – so speziell wie wir alle sind. Das passt.

Ich erinnere nur all zu gerne an diese winzigen Finessen, welche der Seite ein Eigenleben zu verleihen schien:

  • Thumbnails unserer Avatarbildchen, welche beim Banner umherschwirrten, wenn der/diejenige eingeloggt war
  • Ein Kugelschreiber mit dem Usernamen auf Pergament
  • Mini-Chat resp. Shoutbox ähnliches Feature zum Chatten in der Sidebar
  • Autorenseite
  • etc…

Entsprechen ein paar Wünsche von mir. Ich will ja nicht, dass wir wieder unser altes, hauptsächlich von Longneck, entwickeltes Blogsystem wiederbeleben.  Die Vorteile von Wordpress sind mir schon bewusst. Aber es gibt keinen Grund, der gegen ein liebevolles Tweaken dieser Wordpress Installation spricht und den jetzigen 0815-Look verjagt:

  • Blog Header wieder mit random Hintergrundbild – das war top. Auch weil es sich nicht um 0815 Bilder aus dem Internet handelte, sondern von Longneck. Diese Idee könnte ausgebaut werden: Wer Lust hat, lädt eigene Bilder im richtigen Format auf einen XY Verzeichnis hoch, woraus sich das Randomskript bedient.
  • Eine Shoutbox muss zurück. Das war so fun!
  • Keine Avatarbilder mehr? Nene… so schwer kann das doch nicht sein. Auch ohne Gravatar & co.
  • Reintegration der umherschwirrenden Avatarthumbnails. Ja genau! Recycle your code! Still useful.
  • Möglichkeit Messages wieder anderen Autoren schicken zu können!
  • In der Detailansicht eines Beitrages zuunterst nicht nur darauf hinweisen, dass man eingeloggt sein muss, sondern auch bitte den Link dazu! Sonst sind das ja Verhältnisse wie bei den Behörden: Wir können Ihre Anfrage leidern nicht entgegennehmen, Herr XY, weil Sie noch nicht das dazu notwendige Formular YZ ausgefüllt haben…. ARGH!
  • Wieder Buttons um verschiedene Schriftgrössen einstellen zu können, was dann auch im Cookie und/oder Profil gespeichert wird. Let the user decide! (Finds nämlich ein bisserl gross auf meinem Monitor… und jedesmal resizen….)
  • Apropos Buttons zum Umschalten… wie wärs mit ‘ner Nachtansicht? So wie Nocturne. Warum? Weil so viel Weiss meinen müden Augen am Abend weh tun kann und ich ned immer an meinem eigenen nocturefähgien Laptop bin. Anderes Argument: Viel weisse Fläche braucht mehr Energie. Also GET  GREEN, Strom sparen mit invertiertem Theme. Hehe…… wie auch immer, gibt noch weitere fadenscheinige Argumente :-D
  • Mehr Smilies bitte, die ich im WYSIWYG Editor auswählen kann
  • rechte sidebar ist also fürs Menü, ok. Wie wärs zusätzlich dazu noch ‘ne linke Sidebar ins Leben zu rufen? Inhalt: die letzten 20 Comments, die top 10  Posts nach Anzahl Views oder Comments, sowie top 10 autoren nach posts
  • Ein 5-Sterne Rating der Beiträge und ensprechenden Auflistung in ‘ner Page wär auch noch was…
  • Eine Seite, wo man wieder alle Autoren auf einen Blick sieht, inkl. Anzahl Beiträge und Links zu all ihren Beiträgen! Sowie wann der Autor das letzte Mal online war.
  • Tag Cloud daher!
  • So, ich mach mal Pause, wenn ich weiter überlegen würde, käme sicher noch mehr, aber fürs Erste reichts mal. Otherwise Longneck will not be amused ;)

Scratchbook war einmalig. Lasst es uns wieder so werden. Ich helfe gerne mit, Longneck. Entweder remote, wenn du deine Paranoia überwinden kannst und mich berechtigst, oder an einer weiteren DevCon (die letzte war im 2006. wow ist das lange her!!!), würde mich auch freuen :)

Es grüsst Freidenker (auch so ein Punkt zum Verbesseren: Beim Beitragstitel muss der Autor wieder erkennbar sein. Okok, bin ja schon ruhig, hehe…)