Bananas Development Blog: share your thoughts

Iteration über ein JS Objekt

Ist für manche ein alter Hut.

Hiermit kann man ein eindimensionales Objekt durchlaufen und sich das Ergebnis in die Konsole des Browser schreiben lassen. Wobei obj das zu durchlaufende Objekt ist.
Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

Ist eher was für Debug Zwecke, denn es ist nicht performant.

getElementById und jQuery

Warum muss jQuery da eine eigene Suppe kochen ?

Normales JS:
if(document.getElementById('theID')) {
// do stuff
}
else {
// do stuff if not there
}


Das Gleich mit jQuery:
if($('#theID').length == "0") {
// do stuff
}
else {
// do stuff if not there
}


Darauf muss man erst mal kommen !
Warum kann da jQuery nicht einfach false zurück geben, wenn NICHTS gefunden wurde ?

Neues ist nicht immer gut

Das hippe Dinge nicht immer das Wahre sind, hat sich ja mit dem Hashbang gezeigt.

Leider haben die das nicht so ganz kapiert...

Twitter crashes itself with commas
Today Twitter died in Opera while I was using it. One tweet sent, one distracting link read - and all of a sudden the UI was incomplete, missing the "Tweet" box on the left and various features like "retweet" were no longer working.


Und kommt mir blos nicht mit dem Opera bullshit... Macht es erst mal selber. Dann sehen wir weiter.

Hier ist wahrscheinlich der Grund dazu. Der Autor selber sagt, dass es eigentlich nur spielerei ist.

Na endlich ! Back to the roots

Endlich.
Nach dem man den Hashbang eingeführt hat und meinte es wäre toll.

Client-side rendering ist bullshit und bremst nur aus. Twitter hat das nun endlich kapiert. Danke.

Man, oh, man....

Motion tracking mit JS

Das nenne ich mal ne Leistung. Zwar wieder zu Lasten des Clients aber an sich eine schöne Sache:

Javascript motion tracking

Hier ist das Demo Video dazu. Da kann man live mit spielen also kein fertiges.

Backups sind wichtig

What Is Happening To The jQuery Plugins Site?

Die haben einfach mal die Plugin Site gelöscht. Einfach so. Aber das Beste kommt noch. Das letzte Backup ist EIN Jahr alt ! Was für Vollpfosten sind denn da am Werk ?

In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup


Wenn man wirklich was bereinigen will, dann macht man doch erst recht ein Backup ?
jQuery war ja noch nie mein Fall und dies bestätigt sich mit so einem stümperhaften Anfängerfehler...

Asynchrones laden von Typekit

Wenn man 3.Anbieter verwendet kann es immer mal wieder vorkommen, dass diese ausfallen. Im Standart lädt sich Typekit im head Bereich der HTML Datei und blockiert den weiteren Aufbau der Seite.

Dies kann man mit verschiedenen Möglichkeiten umgehen:
Typekit, slow hosted scripts and the Flash of Unset Text
Loading Typekit fonts asynchronously

Meine liebste Lösung ist das laden mit dem async Attribut.

Uploads mit Javascript und HTML5

Bei einem Upload einer Datei sollte er Benutzer feedback bekommen ob alles so ist wie es sein soll.
Damit der Benutzer nicht so lange warten muss bis die Datei am Server angekommen ist, kann man nun in modernen Browsern diesen Check in den Browser/Client auslagern.
( Dies ersetzt NICHT die Überprüfung auf dem Server ! )

Wie das funktioniert wird in dem folgenden Artikel beschrieben:
Reading local files in JavaScript

Mif.tree mit Mootools 1.3.2

Das aktuelle Release von Mif.Tree funktioniert nicht mit Mootools 1.3.2 nocompat. Nun habe ich mal damit angefangen die Beispiele mit der aktuellen Version von Mootools zum fliegen zu bringen.

Hier der Code.

Wer mitmachen will kann sich hier beteiligen.

Print preview im IE und HTML5

HTML5 kennt ja einige neue Tags. Nun sind die leider nicht mit IE kompatibel. Mal wieder. Aber dies ist ein anderes Thema.

Nun könnte man ja denken, dass man mit einem print CSS alles so hinbiegen kann wie man möchte. Ne. Pustekuchen.

Leider kann der IE die neuen Elemente auch nicht richtig mit CSS versehen. Wie und was genau liegt im dunkeln.

Der Weg an diesem "Problem" vorbei liegt darin, dass man einfach diese Tags mit "normalen" Tags ersetzt.

Hier ist mal ein sehr einfacher Ansatz mit Hilfe von jQuery;
window.onbeforeprint = printFix;
function printFix() {
    $("footer").replaceWith(function () {
      var attClass = $(this).attr('class');
      var attId = $(this).attr('id');
      var attStyle = $(this).attr('style');
      var add = '';
		
      if(attClass) { add = 'class="'+attClass+'"' };
      if(attId) { add = add+' id="'+attId+'"' };
      if(attStyle) { add = add+' style="'+attStyle+'"' };
		
      return "
" + $(this).html() + "
"; }); }


Je nach CSS Angaben kann es natürlich sein, dass diese Methode nicht funktioniert. Es sollte auch darauf geachtet werden, dass aus ‹footer› ein ‹div› wird. Daher sollte man für solche Tags ohne Attribute eines für das print CSS einbauen.
Würde dann so aussehen:
< footer id="footer-print">< /footer>

Wird dann zu:
< div id="footer-print">< /div>


Mit dieser Methode sollte man die Druckansicht der einzelnen Browser in den Griff zu bekommen.
Wer es besonders speziell will, der sollte ein Druck Layout durch einen Drucken Knopf auf der Website anbieten.




UPDATE: 09.07.2014
An dank an Robert, der mich auf den nicht mehr aktiven Link von w3schools hingewisen hat. Dieser ist nun wieder aktuell.
Robert hat auch eine Alternative zu der Übersicht auf w3schools.

Hash Bang Analyse

Wir hatten ja das Thema schon mal.

Nu hat sich Jeni Tennison die Mühe gemacht und das mal näher analysiert. Sehr genau wie ich finde und auch sehr ausführlich.

Hash URIs
The semantics of hash URIs have changed over time. Look back at RFC 1738: Uniform Resource Locators (URL) from December 1994 and fragments are hardly mentioned; when they are, they are termed “fragment/anchor identifiers”, reflecting their original use which was to jump to an anchor within an HTML page (indicated by an <a> element with a name attribute; those were the days).



Warum muss man alles komplizierter machen ? Hashbang story

Hier mal eine Erklärung was es mit diesem Hashbang hape auf sich hat und warum es totaler Bullshit ist.

Broken Links
I’ve been getting madder and madder about the increasing use of dorky web links; for example, twitter.com/timbray has become twitter.com/#!/timbray. Others have too; see Breaking the Web with hash-bangs and Going Postel. It dawns on me that a word of explanation might be in order for those who normally don’t worry about all the bits and pieces lurking inside a Web address.


Warum versucht man so viel wie möglich in den Browser auszulagern, wenn der Server eigentlich dazu da ist ?
Warum eine Abfrage verdoppeln wenn man die Kriterien schon beim ersten Aufruf hat ?

Manchmal wünsche ich mir schon mal die Zeit wieder zurück in der JavaScript verpönt war....

Warum Dokumentationen so wichtig sind

Jeder kennt das. Code schreiben ist viel toller als Dokumentation.

Leider produziert eine Fehlerhafte oder nicht mehr aktuelle Dokumentation Kosten. Denn wenn man Stunden nach dem "Fehler" sucht nur im an Ende feststellen zu müssen, dass die Dokumentation falsch war und sich mittlerweile die Konfigurationsvariable geändert hat !

Da geht richtig Geld flöten !!

TinyMCE external_template_list_url
Diese Konfigurationseinstellung ist leider falsch.

Hier ist die richtige Stelle dazu:
TinyMCE Plugins Template

Das "Problem" hat mich viel Zeit gekostet..... Ich kann ja verstehen, dass Doku schreiben keinen Spass macht, aber so was sollte nicht vorkommen.


Preload von JS ohne es auszuführen

Preload CSS/JavaScript without execution
Preloading components in advance is good for performance. There are several ways to do it. But even the cleanest solution (open up an iframe and go crazy there) comes at a price - the price of the iframe and the price of parsing and executing the preloaded CSS and JavaScript. There's also a relatively high risk of potential JavaScript errors if the script you preload assumes it's loaded in a page different than the one that preloads.


Mal sehen was man damit alles machen kann...

Arbeiten mit MooTools

Ich bevorzuge MooTools als mein JavaScript Framework.

Nun hat sich David Walsh mal wieder hingesetzt und eine schöne Übersicht geschrieben was und wie es anwendet und wie man seinen JS Code besser macht.

Make your MooTools Code Shorter, Faster, and Stronger
MooTools is one of the most flexible, modular, and well written JavaScript frameworks available. So many people use it but many of them don’t optimize their code. This post will provide you with fifteen simple tips for making your MooTools code shorter, faster, and stronger.


Viel Erfolg !