Ein Einblick in Facebook’s React

react-featured

React, Facebook’s JS Library für die Erstellung von User Interfaces, ist seit letztem Jahr mächtig im Aufwind. Der neuste Hype wurde durch die React Conf Keynote ausgelöst, an welcher React Native vorgestellt wurde: die Möglichkeit native iOS und Android Apps mit React zu entwickeln. (mehr …)

Smashing Conf – Performance matters or why you should add some poo to your unit tests

Smashing Conference Logo

Eine der diesjährigen Smashing Conferences fand im schönen Freiburg statt. Die Namics war mit insgesamt 6 Frontendlern  aus den verschiedenen Units stark vertreten. Am 15. + 16. September waren im historischen Kaufhaus inklusive Surprise Speaker 18 Talks aus den Bereichen … Weiterlesen

Frontend Conference 2014

frontend-conf14

Was bisher geschah

Ich bin dabei: Auf der diesjährigen Frontend Conference am 28. und 29. August in Zürich ist Namics nicht nur einer der Hauptsponsoren. Mit insgesamt sieben wissbegierigen Frontendlern auf dem Event sind wir auch personell stark vertreten. Die Conference bietet eine Plattform zum Austausch und zur Weiterbildung und richtet sich an Frontend- und UX-Entwickler und -Designer gleichermaßen. Das Event findet dieses Jahr bereits zum vierten Mal in Folge statt und erfreut sich stetig steigender Besucherzahlen. Grund genug für mich, die Veranstaltung dieses Jahr zu besuchen.

Donnerstag // Introduction Keynote

Mit der Introduction Keynote eröffnen die Veranstalter das Programm: Die Talks in den kommenden zwei Tagen verteilen sich auf zwei parallel laufendeTracks. Während im Tech-Track neue Entwicklungen, Tools und Techniken vorgestellt werden, widmet sich der Design-Track den Themen Layout, Storytelling und Design. Mir ist es also nicht möglich, alle Talks anschauen zu können. Macht aber nichts, denn alle Talks werden nicht nur in die weite Welt hinaus gestreamt, sondern auch anschließend in einer aufbereiteten Version im Netz zur Verfügung gestellt. Eine tolle Sache, wie ich finde. Hier stelle ich nun einige Talks vor, die ich als meine persönlichen Highlights empfunden habe.

Donnerstag // Tech-Highlight

Wie der Titel „ECMAscript 6: Wha’t next for JavaScript“ bereits erahnen lässt, stellt Axel Rauschmayer die Neuerungen der kommenden ECMAScript-Version 6 vor. ECMAScript bildet den standardisierten Sprachkern von JavaScript, der mächtigsten Waffe des Frontendlers im Kampf gegen starre und langweilige Websites. Fazit nach dem Talk: Da kommt einiges auf uns zu! Es wird dringend nötig sein, sich mit den neuen Möglichkeiten auseinander zu setzen und altbewährtes zu hinterfragen. Wir werden vorbereitet sein..!

Donnerstag // Design-Highlight

John Peebels erzählt gerne Geschichten. Sehr gerne. Im Grunde sein besteht Talk „Designing through narrative“ aus aneinandergereihten Anekdoten und während das Publikum gebannt an seinen Ohren hängt, erklärt er uns wie beiläufig, wie wir diese Technik des „Storytelling“ im Design einer Webseite unterbringen können. Dieser Talk ist eine Mischung aus Unterhaltung, Charmanz und Wissensvermittlung und damit ganz großes Kino.

Freitag // Tech-Highlight

Früher oder später kommt die Zeit im Leben eines Frontendlers, dass er sich mit Browserkompatibilität und Mobilen Viewports auseinandersetzen muss. Crashkurs gefällig? Bitte sehr: In seinem Talk „Mobile Viewport“ erklärt Peter-Paul Koch fundiert und humorvoll (und in sehr hoher Geschwindigkeit) so viel Basiswissen, Fortgeschrittene Techniken und echte Geheimtipps, wie in eine Stunde hineinpassen. Bitte mehr davon!

Freitag // Design Highlight

Was haben das Smashing Magazine und Responsive Webdesign gemeinsam? Richtig, einen vollen Saal bei der Frontend Conference. Und wenn man Vitaly Friedman sprechen gehört hat, dann weiß man auch warum. RWD ist bis heute eines der Top-Themen der vergangenen Jahre und im Talk „Responsive Design Workflow: Clever Tricks and Techniques“ erzählt uns Friedman, welche Methoden empfehlenswert sind und welche man besser vermeiden sollte.

Fazit // Fortsetzung folgt …

Webtechnologien entwickeln sich nach wie vor in sehr kurzer Zeit ständig weiter. Neue Erkenntnisse, Tools oder Technologien bringen uns dazu umzudenken, auszuprobieren und anzuwenden. Events wie die Frontend Conference helfen nicht nur, einen Überblick über aktuelle Trends und Entwicklungen zu bekommen oder besonders interessante Themen zu fokussieren. Auch der Austausch mit den Kollegen aus aller Welt ist es, der einen nicht nur menschlich, sondern auch fachlich voranbringt. Die Conference war für mich eine sehr gelungene Veranstaltung, deren Besuch sich auf jeden Fall gelohnt hat! Gegen eine Fortsetzung in einer der nächsten Jahre hätte ich sicherlich nichts einzuwenden..

Links

Web Components: HTML Imports

Web Components

In einem früheren Post zu HTML Templates wurde erklärt wie Templates erstellt werden können. Um eine grosse Anzahl solcher Templates übersichtlich zu verwalten müssen diese ausgelagert werden und wie Stylesheets oder Skripte eingebunden werden. Dieses Ziel erreicht man durch den … Weiterlesen

Spartan – Next Generation Grid System

Spartan ist ein simples und doch extrem flexibles LessCSS Grid System, welches einem ermöglicht mit Leichtigkeit verschiedenste responsive Layouts aufzusetzen.

Egal was der Designer einem präsentiert, mit diesem Grid lässt sich alles umsetzen. Ob viewport abhängige Gutter oder sogar unterschiedliche Anzahl Columns, Spartan sind keine Grenzen gesetzt.

Dynamische online Demo.
(mehr …)

Web Components: Shadow DOM

Web Components

Das Konzept des Shadow DOM wird in aktuellen Browsern bereits genutzt. Ersichtlich ist dies bei Standard Komponenten wie Slidern, Buttons oder Videointerfaces. Hinter der Fassade der Video Steuerelemente, welche ein Browser für den <video> Tag automatisch anzeigt, stecken lediglich eine … Weiterlesen

Frontend Build-Prozess mit Grunt

Grunt ist ein Tool, mit welchem sich wiederkehrende Aufgaben im Frontend automatisieren lassen. Das ganze basiert auf einem Ökosystem an Plugins, welche in einem Gruntfile.js konfiguriert und so an das jeweilige Projekt angepasst werden können.

grunt-logo

Zu diesem Blogpost gibt es ein Grunt Beispielprojekt auf GitHub, welches die nachfolgend beschriebenen Features abdeckt:

Zudem werden CSS und Javascript Sourcemaps unterstützt sowie Live Reloading im Browser.

github-logoGrunt Beispielprojekt auf GitHub

(mehr …)

Web Components: HTML Templates

Web Components Logo
HTML Templates, das erste Puzzlestück zum Verständniss von Web Components.

Wer Mustache, Handlebars oder doT.js bereits einmal eingesetzt hat ist vertraut mit dem Konzept des Frontend Templating. HTML Templates ist die native Browserumsetzung dieses Konzepts.

HTML Templates sind Markup Schnippsel die es vereinfachen nach dem Laden einer Seite dynamisch Markup hinzuzufügen. Der Inhalt des Templates ist zu Beginn inaktiv und wird beim Seitenaufbau lediglich auf Validität überprüft. Sprich Script Code wird nicht interpretiert, Bilder, Audio sowie andere Resourcen werden nicht geladen und das Markup wird nicht gerendert.
Auf das Markup im Template kann man auch nicht zugreifen über das Dokument Objekt (sprich mit dem querySelector). Erst beim Klonen eines Templates erwacht das Template zum Leben.

(mehr …)

Web Components: Einführung

Web Components

Web Components geben den Entwickler die Möglichkeit das bestehende Set an HTML Elementen mit eigenen Definitionen zu erweitern. Diese Definitionen kapseln Markup und Styles gegen aussen und gewährleisten dass die Elemente immer wie gewünscht aussehen, ungeachtet des Kontexts. Das Konzept … Weiterlesen

Seite 2 von 3123