JavaScript Refactoring

Diese Woche bin ich über ein kleines .. simples JavaScript gestolpert. An dem möchte ich aber zeigen wie man auch sehr kleine Scripts grenzenlos schlecht machen kann. Das Script verwendet die Qooxdoo BaseLib.

Der Bug kam zu mir mit dem Hinweis daß das Script im IE8 und IE7 nicht funktioniert und das restliche JS der Seite lahmlegt.

Die Aufgabe des Scripts ist ein einfacher Container / Bildwechsel alle 5 Sekunden. Ein Container wird eingeblendet .. zwei andere werden ausgeblendet.

Orginalscript

Hier das Orginal Script mit Markup und JS.

Das kann im IE 7/8 nicht funktionieren .. weil der Browser noch nie document.getElementsByClassName unterstützt hat. Das muss man jetzt nicht wissen wenn man Junior Entwickler ist. Aber man sollte das doch auch im IE testen was man so baut. Außerdem werden da irgendwie viele Variablen übergeben .. und wer außerdem bei so ner kleinen Aufgabe 2 Schleifen ineinander baut und dann noch nen break verwendet .. okay .. das Ding stinkt .. und zwar auf den ersten Blick.

Wie gesagt .. aber es läuft in modernen Browsern klaglos.

Quickfix

Hier der Quickfix Code.

Als erstes musste natürlich ganz schnell ein Bugfix her .. keine Zeit sich groß Gedanken zu machen. Fixen .. online stellen war die Ansage.

Ich habe dem Container eine ID gegeben und hole mir das Element via ID ins JS und ermittle die Children. Die Basisfunktion habe ich dann für später aufgehoben. Außerdem kann ich ganz schnell noch 2 Variablen sparen. Die zwei Schleifen waren mir immer noch suspekt .. aber gut es soll ja erst mal nur tun.

Refactoring

Hier das Script Refactoring.

Nachdem online stellen habe ich es dann neu geschrieben. Mir gefiel der Ansatz im Markup 2 (oder mehr) Container auf hidden zu setzen und nur einen einzublenden und dies nicht per JS zu machen. Das wollte ich behalten. Alle andere habe ich gelöscht.

Auf beide Schleifen konnte ich verzichten .. ich muss ja immer nur ein Element einblenden und eins ausblenden. Alle anderen Elemente haben ja immer ein hidden. Das break konnte weg, eine zweite Zähler Variable war ebenso unnötig.

Das Interval wird gesichert indem es nur ausgeführt werden kann wenn die Variable auch wirklich ein Objekt enthält. Elemente und Children hole ich mir mit nativen JS Methoden ins Script die auch über alle Browser funktionieren.

Fertig. Elegant. Klein. Simpel.

Was lernen wir draus?

Erstmal das dies jedem passieren kann. Ich habe auch mal einen schlechten Tag oder stehe so unter Zeitdruck das ich so einen Müll schreibe .. Hauptsache es tut dann irgendwie.

Wenn man aber weiß das man da nur was hingemurkst hat muss man 1-2 Tage später (oder wenn wieder mehr Zeit ist) es so aufräumen und besser machen das es funktioniert.

Wenn man das nicht kann .. dann hat man doch zumindest das Gefühl es nicht wirklich gut gemacht zu haben. Dann geht man eben zu jemandem der besser JavaScript kann und lässt sich helfen .. und plötzlich lernt man vielleicht noch was.

Fronteers 2012

Auch dieses Jahr hat mich mein Arbeitgeber netterweise wieder auf die Fronteers nach nach Amsterdam geschickt.

Für mich persönlich die mit Abstand beste Konferenz rund um Frontend Themen und Webdevelopment .. im legendären Pathe Tuschinski hört man so 2 Tage tolle Vorträge .. trifft viele freundliche Menschen und kann sich vor allem mal über Deutschlands Grenzen hinweg austauschen .. die Veranstalter geben sich richtig viel Mühe und machen nen tollen Job .. Moderator war dieses Jahr Christian Heilmann von Mozilla.

Donnerstag ging es dann los mit:

1. Mark Boulton und Adapting to Responsive Design

  • How responsive design affects business
  • How responsive design affects process
  • How responsive design affects content
  • Fazit: Bericht aus erster Hand was man bei responsive Websites schon in der Umsetzung beachten muss, wo Stolpersteine liegen (Content Fokus, Ads, CMS, Testing, Kosten, grafiklastige Seiten)

2. Addy Osmani und The New And Improved Developer Toolbelt

  • Craftsmanship is about choosing tools well
  • Learn to love the command line. It isn’t scary
  • Sublime Text 2
  • Fazit: Wie der Workflow eines modernen Frontend Devs aussehen sollte (SVN, GIT, Shell, Aliases, SublimeText, SASS, InBrowser Dev Tools, Scaffolding, Testing, Package Management, Generators)
  • Slides

3. Peter-Paul Koch und A Pixel is not a Pixel

  • CSS Pixels Like in width:20px;
  • Device pixels -> the actual pixels on the screen
  • Density-independent pixels
  • Fazit: Einige hilfreiche Tipps für Mobile Development (Viewports für Mobile und Desktop sind unterschiedlich definiert, position:fixed funktioniert nicht wirklich auf Mobile, ‘width’ in einer media query benutzt CSS pixes, ‘device-width’ benutzt device pixels, immer width=device-width in Zusammenarbeit mit Media Queries benutzen)
  • Slides

4. Alex Graul und Using JS to build bigger, better datavis to enlighten and elate

  • Animationen und Visualisierungen mit JavaScript
  • Flash ist fast nicht mehr notwendig
  • IE7 Support = 1/3 der Zeit
  • Fazit: Sehr geile Beispiele was so alles mit JavaScript als Ersatz für Flash möglich ist Miso Project, D3.js, Demo

5. Mathias Bynens und Ten things I didn’t know about HTML

  • body bgcolor=”chucknorris”
  • document.all returns ‘false’
  • Browser sind noch zu nett zu Entwicklern und verzeihen zu viele Fehler
  • Fazit: Hardcore Talk .. und ich wusste definitiv nichts davon .. und frage mich gerade ob ich das überhaupt wissen wollte ..

6. Stephen Hay und Style guides are the new Photoshop

  • Photoshop eignet sich nicht für Mockups von responsive Websites
  • anstatt von PSDs soll man einen Stylguide direkt in HTML entwickeln
  • wartbar, mit Screenshots, automatische CSS Updates, Syntax highlighting etc.
  • Fazit: es gibt nichts auf dem Markt aber mit diversen Tools kann man sich sowas bauen: Dexy, PhantomJS und CasperJS, Template Engines, SMACSS .. ein bisschen CLI chi chi und zack boom ..
  • Slides

7. Antoine Hegeman, Bor Verkroost, Bram Duvigneau & Chris Heilmann und Accessibility panel

  • 3 körperlich behinderte Menschen erklären wie sie mit dem Web umgehen, navigieren und wo sie auf Probleme treffen
  • Fazit: Probleme mit Dropdowns, Touch Devices, wie Websites vorgelesen werden, Semantik ist wichtig, Blinde benutzen meist Custom Screenreader

8. Lea Verou und More CSS secrets: Another 10 things you may not know about CSS

  • Box-shadows mit background-attachment: scroll;, calc(), CSS3 Lightboxen
  • unterstrichene Texte mit CSS, rotating Images, Schatten und Sprechblasen
  • Glass, Blur Effekte mit CSS, Animationen
  • Fazit: die Hälfte gewusst, die andere Hälfte war neu und spannend
  • Slides

Am Freitag:

1. Marcin Wichary und The biggest devils in the smallest details

  • der Meister der Google Doodles, Pacman, Reißverschluss
  • Gamepad API, Google crushinator
  • Creating the doodles always feels a little dirty because you have to deal with different Browsers
  • Fazit: lustiger, spannender und sehr inspirierender Talk, aus dem Google Nähkästchen

2. David DeSandro und Open Source Ain’t Free

  • Quelltext anzeigen ist die beste Quelle für die Arbeit eines Frontend Developers
  • unsere wichtigsten Tools sind eigentlich nur Hobbyprojekte von Entwicklern (HTML5 Boilerplate, Modernizr, Bootstrap)
  • um Zeit für guten Support zu haben muss man damit aber Geld verdienen können
  • Fazit: put a price on it, verlange Geld für Premium Support oder Email Support, verlange Lizenzgebühren für kommerzielle Nutzung, “There is nothing wrong with making money off of honest work”
  • Slides

3. Jeroen Wijering und The State of HTML5 Video

  • Entwickler des JW Players
  • das erste YouTube Video
  • Player wird auf über 1 Million Websites eingesetzt
  • Fazit: Flash ist tot, HTML5 Videos sind schnell, zugänglich, sicher und stabil, 80% aller Webnutzer haben HTML5 video Support im Browser, MP4 und WebM, Kapitelmarken, Untertitel etc.

4. Anne van Kesteren und Building the web platform

  • Harcore Talk über Enconding
  • Browser Layers, Live DOM Viewer
  • Render Tree, Dom Tree, CSS Selecting
  • Fazit: ja .. das war hart .. fast zu detailliert .. einen Nutzen?

5. Phil Hawksworth und I can smell your CMS

  • Frage: braucht man wirklich ein CMS, Kanonen auf Spatzen
  • viele CMS machen mießen Quelltext -> Negatives Beispiel
  • CMS killen Performance .. das schnellste ist immer noch plain HTML
  • Alternativen: Jekyll, Perch
  • Fazit: das erzähle ich seit Jahren .. aber keiner will es hören .. erst mal checken was der Kunde braucht und dann nicht pauschal ein Joomla und Typo3 auf die Website klatschen .. Phil Hawksworth gibt mir Zuversicht
  • Slides

6. Peter Nederlof und Beyond simple transitions, with a pinch of JavaScript

  • Peter animiert nur noch per nativem CSS3,
  • CSS3 Matrix Tool, 3D Canvas
  • warum CSS3 Animationen: keine reflows, Hardware beschleunigt (auch auf Mobile Devices), FPS++, batterieschonend, alle modernen Browser unterstützen die Spec
  • Fazit: Animationen nur noch per CSS, User Interaktion / Start / Stop per JavaScript, beeindruckende Demos

7. Rebecca Murphey und JS Minty Fresh

  • diverse Beispiele üblicher Code Smells .. Wiederholungen, Spaghetticode, riesige Funktionsblocks die 3 Aufgaben hintereinander erledigen
  • don’t Repeat yourself, nutzt Objekte, Data Storage
  • Asynchrone Requests mit while prüfen
  • Fazit: Nichts neues für mich .. mein liebstes Hobby in den letzten Monaten, aber sicher gut für JS Einsteiger und Leute die bisher nur mit jQuery gearbeitet haben
  • Slides

8. Alex Russell und The Web Platform & the Process of Progress

  • Polyfills Are A Tax, Seitengrößen
  • The Price of Delay -> IE8 und IE7
  • Your Browser is outdated!
  • Fazit: Aufruf an alle Webdevs alte Browser auszuschließen um den Fortschritt zu beschleunigen, Beispiele: Facebook, G+, Yahoo Mail, YouTube
  • Slides

Auf der Fronteers 2011 fand ich die Talks etwas fesselnder .. aber vielleicht auch nur weil ich das erste mal dort war.

JavaScript Suchmaschine

Vorab: der Quelltext ist nicht für den Produktiveinsatz gedacht. Bulletproof würde ich sowas mit einem JavaScript Framework umsetzen.

Mir ging es darum die Arbeitsweise eines Frameworks besser zu verstehen und den Quelltext mal in purem JS zu schreiben (was kaum noch einer heute macht).

Im Internet Explorer funktioniert das Script dann auch nicht .. aber einfach nur darum weil ich keinen IE zum debuggen zuhause habe.

Im Endeffekt

hatte ich die Basis der Suchmaschine in ca. 2 Stunden fertig, mit etwas debuggen hier, komischen XHR Ladezyklen im FF da und etwas ungewohnt viel JS (wenn man in den letzten Jahren nur noch mit Frameworks arbeitet) sind dann vielleicht 5 Stunden draus geworden.

2-3 Abende an denen ich mich damit gut entspannt habe 🙂 .. mehr als ein Feierabendexperiment wird aktuell auch nicht draus werden ..

Hier könnt ihr die JavaScript Suchmaschine ausprobieren.

Da steht dann auch noch ne ganze Menge zur Funktionsweise.

Den Quelltext gibts hier.

Fähigkeiten eines Frontend Entwicklers

In den letzten Wochen bin ich mehrmals über die Frage gestolpert was ein Frontend Entwickler denn nun können muss. Ich finde das konnte man in den vergangenen 10 Jahren jedes Jahr irgendwie anders beantworten.

Im Jahr 2006 hätte ich unter anderem CSS Hacks und Cross Browser Debugging genannt .. während das heute eher in Richtung Entwicklung für Mobile Endgeräte geht .. Media Querys .. die Besonderheiten von Touch Interfaces .. etc.

Aber um mal zu Potte zu kommen ..

Layout, Design und Usability

  • die Fähigkeit gute grafische Layouts per Bildbearbeitungssoftware zu erstellen
  • ein Auge für Farben und Stil
  • Fokus auf Usability, verschiedene Auflösungen und Endgeräte
  • kennt die Möglichkeiten von responsive Webdesign

HTML

  • semantisches Verständnis der HTML/HTML5 Syntax
  • logischer und sparsamer Einsatz von Markup
  • die Fähigkeit HTML im Texteditor ohne WSIWYG zu schreiben
  • kennt die Notwendigkeit von Web accessibility
  • entwickelt W3C Konform

CSS

  • Verständnis der CSS2/CSS3 Syntax
  • klares Verständnis des CSS Box Models
  • sinnvolle Vererbung und Gruppierung von Anweisungen
  • Kenntnis aller Selektoren, Pseudoselektoren
  • Positionierung, floatende Layouts
  • Fähigkeit große CSS Files klar zu strukturieren
  • Einsatz von Media Querys
  • Graceful Degradation / Progressive Enhancement im Hinblick auf verschiedene Browser
  • kennt die Möglichkeiten von CSS3

JavaScript

  • Basiswissen über Operatoren, Variablen, Datentypen, Objekte, Methoden
  • Basiswissen über Kontrollstrukturen, Schleifen, Funktionen
  • Kenntnis von Event Handling und DOM Manipulationen
  • Grundsätzliches Verständnis von XHR
  • zuverlässiger Umgang mit mindestens einer JavaScript Bibliothek

Testen und Debugging

  • nutzt Validatoren für HTML, CSS und JavaScript
  • kann Cross Browser, Cross Plattform debuggen
  • kennt Testframeworks
  • ist sich der unterschiedlichen Browser Eigenschaften bewusst

Performance

  • weiß welches Grafikformat wann eingesetzt wird
  • minimiert immer die Anzahl der Requests, Größe der Grafiken
  • kennt Testmöglichkeiten wie YSlow oder Webpagetest

Suchmaschinenoptimierung

  • Basiswissen über OnPage SEO
  • korrekter Einsatz von HTML Elementen, Attributen

Forschergeist und Erfahrung

  • hat Webseiten vom ersten Pixel bis zum Golive betreut und erstellt
  • kann sich mit etwas Aufwand in jedem CMS oder Web Framework zurecht finden
  • hat selbst schon Weblogs oder CMS Systeme installiert und administriert
  • kann Code von fremden Seiten auseinandernehmen und verstehen
  • probiert Dinge aus die er nicht versteht
  • hat die Geduld Fehler zu finden und sich mit Quelltext auseinander zu setzen
  • weiß sich zu helfen 🙂 .. vor allem wo man welche Information findet

Es gibt noch einige Sachen die ich nicht erwarte. Kein Frontend Entwickler muss die komplette Syntax von HTML, CSS oder JavaScript im Kopf haben. Er muss aber sehr wohl wissen wie er die Syntax richtig und fehlerfrei kombiniert ..

was ich damit sagen will ..

ich glaube nicht das man alles das ich da aufgezählt habe zu 100% auf dem Kasten haben muss. Aber man muss seine Werkzeugkiste kennen und alle Werkzeuge darin bei Bedarf zur Anwendung bringen können. Wenn das heißt das man vorher was nachlesen oder ausprobieren muss ist das sicher nicht schlecht. Schlimmer wäre es gute Werkzeuge nicht zu nutzen weil man sich nicht traut oder sie schlicht nicht kennt.

Feedback ausdrücklich erwünscht 🙂

Ein schickes Webformular

Um mich vom PHP coden etwas zu entspannen habe ich mir spontan ein modernes Webformular gebaut.

Ich hasse es eigentlich Webformulare in HTML zu bauen .. positionieren macht keinen Spass, dann immer nach dem Schema INPUT > LABEL oder doch umgekehrt. Durch unterschiedliche Textlängen und Feldgrößen sehen die meisten Webformulare immer irgendwie wie ein Unfall aus (im schlimmsten Fall) oder halbfertig (in den meisten Fällen) .. da sich dann irgendwann doch Texte reinmogeln mit denen vorher kein Entwickler gerechnet hat brechen manche Formulare auch noch an den unmöglichsten stellen um.

Soweit zur Vorgeschichte .. ich hab nun also versucht was schöneres / funktionaleres / ansprechenderes zu bauen und dabei hab ich mich erst mal auf INPUT und TEXTAREAs beschränkt.

Der Benutzer soll es einfach haben, Informationen die nicht mehr gebraucht werden fliegen raus, das aktuelle Feld (das im Fokus steht) wird herausgehoben .. die Labels schreib ich direkt in die INPUT und TEXTAREAs rein ..

Rausgekommen ist (IMHO) ein recht schickes Formular. Getestet habe ich das bisher allerdings nur in aktuellen Chrome und Firefox Versionen .. allerdings ist es grundsätzlich so gebaut das es auch im IE4 funktionieren sollte .. dann natürlich ohne Schick und Pomp.

Hier ist das Formular.

Features:

  • CSS3 Transitions
  • selten benutzte CSS Selektoren
  • jede Menge Pseudo Klassen
  • und ein bisschen jQuery

CSS und JS findet ihr direkt in Files .. habs glaub ich recht übersichtlich hinbekommen.

Fronteers 2011

Long Time – No See .. ich komme hier gerade wenig zum bloggen .. aber das ändert sich sicher auch mal wieder. Anfang des Monats hat mich mein Arbeitgeber .. die 1&1 Internet AG nach Amsterdam auf die Fronteers geschickt .. und ich finde dazu kann ich auch was erzählen.

Die Fronteers ist die Konferenz in Europa die am meisten Stil hat 🙂 sie richtet sich ausdrücklich an Webdeveloper .. und so saß ich zwei Tage im Tuschinski Theater in Amsterdam und habe mich beeindrucken lassen. Referenten waren unter anderem John Resig (LeadDev jQuery) Bruce Lawson (Opera Web Evangelist), Tab Atkins (Google Web Standards Hacker), Christian Heilmann (Mozilla Developer Evangelist), Lea Verou (CSS3 Guru) ..

Folgende Vorträge gab es an den zwei Tagen:

  • Aral Balkan – The Future is Native
  • Derek Featherstone – Accessibility for the Modern Web
  • Lea Verou – CSS3 Secrets: 10 things you might not know about CSS3
  • Bruce Lawson – HTML5 Semantics: you too can be a bedwetting antfucker
  • Stephen Hay – Go with the flow
  • Tab Atkins – The Future of CSS – Current Experiments and Near-Future Reality
  • Leslie Jensen-Inman – Passion. Purpose. Promise. Pursuit.
  • Alex Russell – Web Components and Model Driven Views
  • Divya Manian – The New Developer Workflow
  • Robert Nyman – HTML5 Forms – KISS time
  • Seb Lee-Delisle – CreativeJS – beauty in the browser
  • John Resig – jQuery and the Open Source Process
  • Jake Archibald – In your @font-face
  • Christian Heilmann – The prestige of being a web developer

Ich werde nun nicht jeden Vortrag im einzelnen eingehen (keine Angst) .. aber ich picke mir mal ein paar heraus die ich am besten fand:

Die Eröffnung:

Aral Balkan hat gleich als erster Speaker die Messlatte ziemlich hoch gelegt. In seinem Vortrag The Future is Native ging es grundlegend erst mal um Web vs. Native .. ihr kennt die Diskussionen sicher .. viele Webentwickler würden am liebsten alle nativen Applikationen los werden und alles mit Webapplikationen abbilden.

Allerdings haben beide Konzepte ihre Vor- und Nachteile:

  • Nativ ist näher am Betriebssystem, kann lokal installiert werden, funktioniert auch ohne Netzzugang etc.
  • Web braucht keine manuellen Updates, funktioniert OS übergreifend, ist immer unter einer URL zu finden ..

Google und diverse weitere Firmen verfolgen dieses Konzept auch konsequent .. der Streit entbehrt allerdings jeder Grundlage und darauf wollte Aral Balkan
hinaus. Es geht weniger darum welche Technologie man einsetzt sondern darum dem User eine einfache, funktionierende und selbsterklärende Applikation für sein Problem
zu liefern. Er illustrierte das sehr Anschaulich an den Fahrkartenautomaten in Norwegen die keine Bedienungsfehler zulassen vs. Fahrkartenautomaten in Schweden die mit Features so überfrachtet sind, daß jeder einzelne nochmal eine Hilfe Taste hat um sich mit einer Hotline verbinden zu lassen.

Sein abschließendes Plädoyer: Don’t compete on features, compete on user experience.

Die Tech Talks:

  • Bruce Lawson ging auf die Semantik der HTML5 Tags ein, was ist neu, was fällt im Vergleich zu HTML4 oder XHTML weg, welche Elemente sind mit Vorsicht zu genießen, wie strukturiert man die neuen Elemente, Einsatz von H Tags innerhalb usw. Sein Fazit: The Golden Rule: There is no Golden Rule und Haarspalter kann sowieso keiner leiden 🙂
  • Das Thema von Stephen Hay war das Layout und der Flow. Im Vergleich zu Print hat es das Web immer noch sehr schwer exotische Layouts darzustellen. Ein klassisches Multi-Colum (wie bei einer Zeitung) kann man nur mit sehr viel Aufwand umsetzen. Er zeigte hier diverse Lösungsansätze mit Flexbox, CSS-Exclusions und Grid Layouts.
  • Tab Atkins zeigte uns was zukünftig mit CSS geplant (needs Webkit) ist und woran er in der CSS Spec arbeitet. Dabei freu ich mich besonders auf Elemente wie VW und VH die einen die Höhe und Breite des Viewports ermitteln lassen. Mit calc() soll man zukünftig in CSS rechnen können, mit cycle() über verschachtelte Elemente iterieren. In CSS4 plant man neue Selectoren und Pseudoelemente z.B. :any-link und :local-link. Außerdem natürlich die lange erwarteten CSS Variablen -> @variable $farbe #fff / Benutzung: color: $farbe;
  • Robert Nyman hat sich HTML5 Forumlare vorgenommen. Neue Attribute, neue Elemente, alles eine schöne neue Welt .. aber mit unterschiedlichen Interpretationen der verschiedenen Browser, das Styling per CSS funktioniert auch nicht übergreifend. Fazit: HTML5 Formulare in all ihrer Pracht, in allen modernen Browsern zu nutzen kann zu akuten Schmerzen führen.
  • Jake Archibald zeigte dann die Anwendung von Custom Fonts und wo die Tücken liegen wenn man diese auch in alten Browsern einbinden will. Der Vortrag war alles in allem ein Best Practice Workshop für die Anwendung von Font-Face.

Der Beste:

Seb Lee-Delisle zeigte mit CreativeJS ziemlich eindrucksvoll was mit ein bischen JavaScript im Browser möglich ist. Dabei ging es in erster Linie um optische Effekte und JS Programmierung für Spiele. Den Source Code seines Particle Beispiels findet man auf Github.

Der zweite Teil war dann ein Experiment:

Alle Smartphones und Tablets im Saal konnten sich lokal auf einen Server verbinden. Dann wurden Farbfolgen abgespielt und Seb versuchte dadurch die Positionen der
Geräte herauszubekommen .. aber seht es euch selbst an:

Der Abschluss:

Chris Heilmann rief uns am Ende allen nochmal ins Gedächtnis was es heißt ein Webdeveloper zu sein. Wir neigen dazu immer alles neu machen zu wollen und den eigenen Code für das Maß aller Dinge zu halten .. aus seiner Sicht ein ungenügender Ansatz .. seine Forderung an uns:

  • Reuse and improve – benutzt bekannte Techniken und entwickelt sie weiter
  • Learn from others – schaut euch an wie andere ihre Probleme lösen
  • Be inventive – denkt außerhalb von Grenzen wie ihr etwas erledigen könnt
  • Be gorgeous – gebt euer Bestes zu geben und macht es so schön wie möglich
  • Code = Poetry – nur dann können andere daraus lernen
  • Be open / Don’t be out for blood – hört auf zu trollen und zu bashen denn das würgt Innovationen ab
  • Join the band and collaborate – sucht euch Leute mit ähnlichen Ideen zum Zusammenarbeiten
  • Be your own teacher – bringt euch Neues selbst bei weil es der beste Weg ist um zu lernen
  • Fill the blanks – schaut wo es nochwas zu tun gibt uns setzt euch dran
  • Use what you heard – lasst euch nicht nur von Konferenzen inspirieren sondern setzt das Gehörte ein
  • Repeat the message – Überzeugt eure Vorgesetzten vom Einsatz neuer Technologien
  • Collect good stories – Erzählt eure Geschichten

jQuery – 10 – Simpler Content Slider

Die Content Slider gibt es zwar auch schon wie Sand am Meer .. aber ich brauch das gerade für ein privates Projekt .. und wenn ich Zeit habe bau ich dann doch am liebsten selbst .. man könnte ja was lernen 🙂

Sinnvoll ist das Script wenn ihr auf sehr beschränktem Platz doch recht viel Informationen unterbringen wollt und es nicht ganz so wichtig ist das alles gleich am Anfang zu sehen ist.

Die Sildes sind als gewöhnliche DIVs definiert die horizontal floaten. Die rechte Kontrollfläche verschwindet wenn keine weiteren Slides mehr folgen bzw. die linke Kontrollfläche ist initial nicht zu sehen.

Hier findet ihr den Quelltext des Simplen Content Slider.

Hier nochmal das Script im Ganzen

$(document).ready(function(){
  var curPos = 0;
  var slideWidth = 630;
  var slides = $(’.slide’);
  var countSlides = slides.size(); 
  var controlLeft = $(’#controlLeft’);
  var controlRight = $(’#controlRight’);  
  var floatZone = $(’.floatZone’);

/* Breite des Bereichs */ floatZone.css(‘width’, slideWidth * countSlides); /* Click abfangen */ $(’.control’).bind(‘click’, function() { /* Aktuelle Position bestimmen */ if ($(this).attr(‘id’) === ‘controlLeft’) { curPos = curPos-1; } else { curPos = curPos+1; } /* Linken Kontrollbereich ein und ausblenden */ if (curPos === 0) { controlLeft.hide() } else { controlLeft.show() } /* Rechten Kontrollbereich ein und ausblenden */ if (curPos === countSlides-1) { controlRight.hide() } else { controlRight.show() } /* Slides wechseln */ floatZone.animate({ ‘marginLeft’ : slideWidth*(-curPos) }); }); });

CSS, JavaScript und HTML findet ihr dieses mal schön kompakt zum nachmachen in einer Datei.

jQuery – 9 – Sidebar Slide In – besser

Dieses SlideIn funktioniert zwar .. aber skaliert noch nicht .. ihr könnt es nur auf ein ID im DOM anwenden .. außerdem kann man die DOM Abfragen in jQuery noch reduzieren und das ganze somit beschleunigen (das merkt man zwar nicht) .. aber wir wollen ja hier sauberen Code verbreiten ..

Darum hab ichs mir nochmal vorgenommen und verbessert .. ihr könnt nun auf beliebig viele Klassen im DOM matchen .. dazu verwenden wir die .each Methode aus jQuery.

$(document).ready(function() {
  $(".slide-out").each(function() { 
    var slideOut = $(this);  
    slideOut.bind("mouseenter",function(){
      slideOut.animate({"right": "+=80px"}, "slow");
    });   
    slideOut.bind("mouseleave",function(){
      slideOut.animate({"right": "-=80px"}, "fast");
    });    
  });
});

Hier das ganze Beispiel .. und hier das CSS dazu

In meinen Beispiel verwende ich CSS3 .. kann man natürlich auch ohne machen .. aber dann ists nicht so shiny.

HTML5 – Canvas – Snake

Auf meinem Weg zum JavaScript Ninja .. falsch .. eigentlich wollte ich nur mit dem neuen HTML5 Element Canvas rumspielen .. am Ende habe ich dann aber glaube ich mehr mit JavaScript rumgespielt .. aber darauf wird es hinauslaufen .. das CANVAS Element ist ohne Javascript im Grunde völlig nutzlos .. CANVAS ist wieder Name schon sagt die weiße Leinwand die euch zur Verfügung steht ..

Pinsel und Farben sind aber JavaScript .. und mehr muss man zu Canvas dann auch fast nicht mehr sagen ..

Das Element lässt euch machen was ihr wollt .. sofern es sich irgendwie mit JavaScript machen lässt.

Das Spiel

Inspiriert vom No Tears Guide to HTML5 Games habe ich dann beschlossen das klassische Snake das man von den alten Nokia Handys kennt in JavaScript nachzubauen .. hier könnt ihr mein Canvas Snake mal ausprobieren.

Ich habe etwas von jQuery und dem jQuery Hotkeys Plugin Gebrauch gemacht .. aber nur um die Tastatureingaben sicher abzufangen .. der Rest ist natives JS.

Der Quelltext ist schön knapp und wie ich finde sehr gut lesbar .. mal sehen .. wenn ich die Tage Zeit habe werde ich vielleicht noch ein bei “magische” Codeschnipsel kommentieren ..

Das komplizierteste war das Array das sich die Länge und Position der Schlange merkt .. und obsolete Positionen der Schlange wieder cleared ..

this.body.push([this.x, this.y])      
if (this.body.length > this.taillength) {          
  var clear = this.body.shift();
  cx.clearRect(clear[0], clear[1], this.grid, this.grid); 
}

Hier schaue ich wie lange die Schlange ist und wische dann alles was über die Länge die in der taillength Variablen steht wieder weg.

Weiterhin ist die Kollisionskontrolle etwas schwerer zu verstehen als der Rest. Es gibt einmal die Kontrolle ob die Schlange ihr Futter frisst und zum zweiten ob die Schlange crashed .. in sich selbst oder in die Begrenzung.

Für das Futter checke ich nur ob der Kopf (this.x / this.y) der Schlange sich an der gleichen Position wie das Futter befindet

if (this.x  randomPointX && this.y  randomPointY) {
  this.taillength++;
  food(); 
}

Für die Kollisionskontrolle mit der Wand oder Schwanz muss ich schauen ob sich der Kopf mit den Koordinaten die aktuell im body Array stehen überschneidet .. ganz gut hilft einem hier die .some Methode mit der man einfach schauen kann ob im kompletten Array die Werte vorkommen ..

Spielen tut man mit dem Cursor und ihr braucht einen Browser der HTML5 unterstützt ..

Hier gehts zum Canvas – HTML5 – Snake

jQuery – 8 – Bannerrotation, zufällig

Ein kleiner, sehr simpler Bannerwechsler. Ziel war es, daß bei jedem Reload der Seite ein zufälliges Banner eingeblendet wird und diese dann mit einem kleinen FadeIn/FadeOut Effekt munter vor sich her rotiert .. natürlich unobtrusive .. und barrierefrei 🙂

Hier ist das Beispiel zu finden

Das ganze hört sich jetzt nicht sonderlich kompliziert an .. allerdings muss man sich kurz mit der Erzeugung von ganzzahligen Zufallszahlen beschäftigen und die Modulo-Division hilft einem auch immens weiter.

Aber erst mal zum CSS File .. hier muss man drauf achten das die img Tags absolut positioniert werden .. da es sonst einen kleinen optischen Nebeneffekt gibt (probierts aus) .. ihr könnt aber das Elternelement gerne wieder relative setzen.

Das Javascript / jQuery:

$(document).ready(function(){
  countImages = $("#banner img").hide().size(); 
  currentImage = Math.floor(Math.random()*countImages);
  $("#banner img:eq("+currentImage+")").show();
  setInterval(rotate, 3500);
});
function rotate() {
  oldImage = currentImage%countImages;
  newImage = ++currentImage%countImages;
  $("#banner img:eq(" + newImage + ")").fadeIn("slow", function() {
    $("#banner img:eq(" + oldImage + ")").fadeOut("slow");
  });
}

countImages zählt sämtliche img Tags unter Banner durch und setzt sie display:none;
currentImage erzeugt eine ganzzahlige Zufallszahl kleiner gleich der Anzahl von img Tags.

Dann wird anhand der Zufallszahl ein img Tag ausgewählt und angezeigt. (:eq Selektor).

Wir starten ein Interval das die Funktion rotate alle 3,5 Sekunden ausführt.

Es folgen die zwei Modulo Divisionen .. diese liefern immer nur den Rest Wert. Also wenn currentImage = 3 und countImages = 4 ergibt das 0 REST 3 .. welches das aktuelle Bild ist das zufällig angezeigt wird.

Die zweite Division erhöht currentImage um 1 .. dividiert und erhält das folgende Bild .. kompliziert? .. aber notwendig .. wir müssen ja nachdem das letzte Bild (4) angezeigt wurde wieder von vorne .. beim ersten Bild (0) beginnen .. und 4 geteilt durch 4 ist 1 REST 0 🙂

Zum Schluss dann noch das ein und ausblenden ..

Hier nochmal das Beispiel der Bannerrotation zum nachmachen.

Update 01.06.2011 – Erste Revision

Nach dem Kommentar von Christoph .. die erste Überarbeitung:

$(function(){
  var bannerImg = $("#banner");
  var countImages = bannerImg.children().hide().size();
  var currentImage = Math.floor(Math.random()*countImages); 
  bannerImg.children(":eq("+currentImage+")").show();
  setInterval(function() {
    var oldImage = currentImage%countImages;
    var newImage = ++currentImage%countImages; 
    bannerImg.children(":eq(" + newImage + ")").fadeIn("slow", function() {
      bannerImg.children(":eq(" + oldImage + ")").fadeOut("slow");
    });
  }, 3500);
});

Die globalen Variablen habe ich in lokale umgewandelt .. das DOM Element Banner wird nun nur noch einmal selektiert und dann als Variable durchgereicht.

Update 02.06.2011 – Zweite Revision

$(function() {
  var bannerImg = $('#banner');
  bannerImg.children(':eq(' + ~~(Math.random() * bannerImg.children().hide().size()) + ')').show();
  setInterval(function() {
    var current = bannerImg.children(':visible').fadeOut();
    if (current.next().length > 0) {
      current.next().fadeIn();
    } else {
      bannerImg.children(':first').fadeIn();
    }
  }, 3000);
});

So .. nun habe ich auch den Delay beim Übergang vom letzten auf das erste Bild eliminiert .. es ist sicher etwas besser lesbar als Christophs Variante .. den Unterschied zwischen Math.floor und den zwei “~~” glaub ich jetzt einfach mal und das Beispiel habe ich auch auf den neusten Stand gebracht ..