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.

Übergroße Formelemente für die Darstellung auf Smartphones

Wenn man Formularelemente in einer Website übergroß darstellen möchte muss man sich was einfallen lassen. Den Radiobutton oder die Checkbox kann man nicht einfach per CSS width und height in der Größe variieren.

In meinen Beispiel blende ich die nativen HTML Elemente aus und arbeite nur noch mit den Labels .. hier füge ich dann wahlweise ein grafisches Element oder per CSS gestylte Elemente ein die das selbe verhalten wie die nativen Formularelemente haben.

Hier das komplette Beispiel

CSS3 Tooltips

die ohne JavaScript funktionieren .. ich habe mal 3 verschiedene Arten einen CSS3 Tooltip zu bauen in einem Beispiel zusammengefasst.

Ein HTML5 Data Attribut via :before oder :after Pseudoselector auszulesen ist sicher die sauberste Methode. Allerdings bekomme ich in den Inhalt des Tooltips auch kein Markup. Außerdem eignet es sich auch nicht für lange und umfangreiche Texte da hier ja die Lesbarkeit gewährleistet bleiben muss. (siehe Variante 1)

Eine weitere Methode wäre den Inhalt des Tooltips als Kindelement dem zu öffnenden Element zuzuordnen .. für CSS kein Problem .. allerdings steht dann der Inhalt des Tooltips für Screenreader, Spider und Menschen die ggf. custom CSS zum anzeigen der Seite benutzen direkt im Fließtext. (siehe Variante 2)

Variante 1 und 2 funktionieren per mousehover .. doof für Touch Interfaces und wenn man den Text vielleicht herauskopieren möchte. Variante 3 bedient sich darum beim :target selector .. man muss also explizit auf den Link zum öffnen klicken. Danach wird das versteckte Target Ziel eingeblendet … ein CLOSE Button ist dann natürlich auch notwendig. (siehe Variante 3)

Hier alle CSS3 Tooltips zum testen .. das CSS steht direkt im Quelltext.

Meanwhile – CSS3 Loading Animation

Ich hab da mal eine Ladegrafik in CSS gebaut .. funktioniert in Webkit und Firefox .. die Styles für andere Browser müsste man noch ergänzen. Der Browser muss aber zwingend CSS3 transform, animation und keyframes unterstützen.

Ich hab jetzt aufgehört weiter dran zu basteln .. sonst fange ich noch an mit CSS3 ganze Bilder zu malen 🙂

Das CSS steht direkt im Quelltext.

Hier das Beispiel der CSS3 Ladegrafik.

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 🙂

CSS3 Lightbox mit Media Querys

Die CSS3 Lightbox von gestern war ja schon ganz nett .. allerdings gabs auf dem iPhone noch ein paar Probleme .. also je nacht Sichtweise .. 🙂

Die Lightbox war auf eine max. Breite von ca. 45% eingestellt. Für den kleinen Screen eines iPhones natürlich nicht wirklich geeignet (zwar lesbar .. aber nicht schön). Daneben gab es ein kleines Darstellungsproblem wenn der Inhalt der Lightbox sehr umfangreich war .. durch position:fixed hatte man nicht die Möglichkeit zu scrollen.

Beides habe ich nun gelöst ..

Die Breite der Lightbox ist nun von der Breite des Viewports abhängig. d.h. ein iPhone4 bekommt die Lightbox in ca. 80% Breite, ein großer Monitor mit 45% Breite angezeigt.

Ebenso kann man nun den kompletten Inhalt einer überlangen Lightbox erscrollen.

Verändert beim testen einfach die Fenstergröße des Browsers .. damit man es besser sieht stehr oben immer die gerade aktive Auflösung drin .. und die Farbe der Lightbox variiert.

Hier die CSS3 Lightbox mit Media Querys.

CSS3 Lightbox ohne JavaScript

Ich hacke ja schon etwas länger an HTML5 und CSS3 rum und probiere wie weit man es treiben UND dann auch noch verwenden kann. Mit dem Path Menü hab ich damals den Hack mit dem checked Selector und den versteckten Input Felder ausprobiert.

Die CSS3 Lightbox die ich gebaut habe funktionieren im IE10, FF, Chrome und Safari. Auf mobilen Endgeräten funktionieren die Boxen auch. Getestet auf dem iPhone und iPad unter iOS > 5.1.

Der Selector bei diesem Beispiel ist der TARGET Selector. Er ist dazu gedacht, das aktive TARGET Element, das per Anker angesprungen wurde zu stylen. Daneben spiele ich mit der VISIBILITY und der OPACITY um einen Lightbox Effekt zu erzielen.

Beide Eigenschaften sind auch notwendig da die ganzen Overlays ja direkt in den Viewport geklebt werden .. aber (erst mal) nicht klickbar sein sollen wenn sie nicht zu sehen sind.

Wenn die Lightbox offen ist .. soll jeder Klick um die Lightbox herum zum schließen der Lightbox führen .. so kennt es der User .. dazu muss man das komplette teiltransparente graue Overlay nach dem erscheinen der Lightbox klickbar machen.

Auch kein Problem .. einfach dem Overlay einen leeren Ankerlink verpassen und den Cursor auf default setzen.

Mit dem PLUS Selector und ein paar CSS Transitions kann man dann daraus jede Menge Sachen machen die vorher nur per JS möglich waren .. in diesem Fall ein paar Lightboxen.

Das CSS steht direkt im HTML Dokument .. und auch sonst hab ichs erst mal einfach gehalten.

Hier das Beispiel – CSS3 Lightbox ohne JavaScript.

Shiny Micro Menü in CSS3

Seit einigen Tagen benutze ich Path .. die App ist ziemlich schick und hat einige tolle UI Features die man so noch nicht gesehen hat. Mir hat es besonders das Menü angetan mit dem man seinen Status posten kann.

Am Samstag habe ich dann überlegt, daß man das auch mit CSS3 und vielleicht sogar ganz ohne JavaScript nachbauen könnte. Ich wollte es nicht 100% klonen sondern mich nur etwas inspirieren lassen.

Rausgekommen ist dann mein Menü inspiriert von Path das wirklich nur mit CSS3 und HTML gebaut wurde.

Das CSS findet ihr direkt im Quelltext der HTML Datei. Neben dem Tilde Selektor und ein paar abgefahrenen CSS3 Transitions besteht das einzige Problem im Grunde darin, daß ONCLICK die Menü Elemente herausfliegen und dann auch auf ihrer Position bleiben sollen wenn man den Mauszeiger vom Menü wegbewegt.

Die habe ich mit dem :CHECKED Selector gemacht .. das Input Feld wird ausgeblendet und das Label des Input Feldes dient als Menü Schaltfläche ..

Kann man natürlich auch mit :HOVER machen .. allerdings bleibt das Menü nur dann offen wenn sich die Maus darauf befindet … hier mein shiny Micro Menü .. ;-.)

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.