Herausragend waren für mich die Vorträge von Addy Osmani über Lade-Performance-Optimierungen und Anjana Vakils Beitrag, der der Frage nachging, wie man in Javascript unveränderbare Datenstrukturen („Immutables“) implementieren kann.

Der für mich beste nicht-technische Vortag war von Emily Gorcenski über die technische und moralische Verantwortung der Entwicklung von IoT Applikationen/Hardware.

Folgende Technologien und Werkzeuge muss ich mir näher ansehen: die Chrome Erweiterung Lighthouse zur Performance Optimierung / Analyse, die Javascript Bibliothek Immutable und/oder Mori, pa11y für automatisiertes Testing hinsichtlich WCAG, den Testrunnner Jest sowie Prepack zur Code Optimierung.

Insgesamt haben die Organisiatoren ein sehr gelungenes Konferenzpacket zusammengestellt und damit gut Werbung für die JSConf/CSSconf Konferenzen weltweit gemacht.

Highlights waren für mich waren David Khourshids sehr technischer Vortrag „Getting Reactive with CSS“ mit der Verknüpfung von CSS Variablencustom properties mit reaktivem Javascript Code und die Live-Coding Session mit Una Kravets „Let’s Build a CSS Game“ – unglaublich wie viel Interaktion ohne Javascript möglich ist (hier das Ergebnis).

Folgende CSS Tools muss ich mir wohl in naher Zukunft ansehen: CSS-in-JS, styled-components, den CSS Shapes Editor und den CSS clip-path maker.

Zu den durchwegs guten Vorträgen kam noch eine perfekte Organisation sowie super Verpflegung (Frühstück, Mittagessen, Snacks zwischendurch und Abendessen).

Besonders herausgestochen ist für mich die Keynote von Jake Archibald, der hervorgehoben und gezeigt hat, dass SPAs nicht zwangsläufig besser und schneller als serverseitig (vor)gerenderte Seiten. Eine Vorträge zum Thema Javascript auf (low end) Hardware, z.B. von Gordon Williams, Tomomi Imura und Sayanee Basu, waren sehr motivierend und zeigen in welche Richtung sich die Scriptsprache Javascript entwickeln wirdt.

Wie einfach man Javascript Memory Leak Debugging betreiben kann – und sollte! – und auf welche Punkte man beim Entwickeln achten muss um eben diese zu gar nicht erst entstehen zu lassen hat Christian Speckner in seinem Vortrag gezeigt. Franziska Hinkelmann hat in ihrem Talk einen faszinierenden Einblick gegeben wie Googles V8 Javascript Engine intern arbeitet und Javascriptcode in Maschinencode übersetzt und optimiert.

Insgesamt ein sehr gelungenes Konferenz-Debüt, das allerdings organisatorisch noch etwas Luft nach oben gelassen hat. Gut fand ich, dass sämtliche Vorträge für hörbeinträchtigte Personen live in Gebärdensprache übersetzt wurden.

Sobald die Videos der Vorträge verfügbar sind, werde ich den Link hier posten.

Und ich werde den JS Kongress Twitter Account im Auge behalten um mir mein Ticket für 2017 möglichst bald zu sichern.

Eine ausgezeichnete Mischung aus technik- / programmierlastigen Vorträgen und Wissenswertem aus Randgebieten der Frontend-Entwicklung (GIT, Kommunikation mit dem Product-Manager, …) garniert mit einem hervorragend geeigneten Veranstaltungsort und gutem Catering. Was will man mehr?

Herausgestochen sind für mich die Vorträge Test-driven HTML von Heydon Pickering, The Future of CSS von Max Stoiber, Dirty Little Tricks From The Dark Corners Of Front-End von Vitaly Friedman und Refactoring CSS Without Losing Your Mind von Harry Roberts.

Bei den Lightning-Talks war das Projekt Triality präsentiert von Michael Fretz mein persönliches Highlight.

Die Organisatoren der Konferenz & auch alle Vortragenden haben wieder einmal hervorragende Arbeit geleistet und für zwei wunderbare Konferenztage – und natürlich eine tolle Party am ersten Abend – gesorgt. Danke an alle!

Videos aller Vorträge sind auf Vimeo zu finden.

„Rethinking backend with webtasks“ von Martin Gontovnikas erklärt das von ihm erdachte Konzept die Backend-Programmierung ins Frontend zu verlagern, in dem man Backend-Aufgaben (z.B. Email-Versand, MongoDB Zugriffe, …) als „Funktionstext“ vom Frontend an das Backend sendet, wo dieser dann „eval’d“ wird und danach das Ergebnis zurück ans Frontend geschickt wird. Ein interessantes Gedankenexperiment, aber für grössere Applikationen eher unbrauchbar.

„How to build Photoshop – WebGL not just for 3D“ von Felix Palmer war der technischte Vortrag an der Frontend Conference Zurich 2015 und hat sehr praxisnah gezeigt, wie man mit Javascript über WebGL die GPU des Clients ansprechen kann um rechenaufwändige Aufgaben dorthin zu verlagern. Sehr interessant.

Die Lightning Talks im Raum Unic waren dieses Jahr leider nicht sehr herrausragend oder technisch interessant.

„2015: A Static Site Generator Odyssey“ von Thomas Jaggi und Olga Skurativska: Die beiden Unic Mitarbeiter stellten ihren Technology-Stack zum Erzeugen und Handhaben von Living Styleguides vor. Es waren einige gute Ideen dabei, aber der Vortrag hat auch gut gezeigt, was meiner Meinung nach eines der grössten Probleme in der modernen Webentwicklung ist: Jeder Entwickler hat ähnliche ProblemeHerausforderungen, die sich aber nicht 100% gleichen, und deswegen wird ein neues „Framework“ gebaut (siehe XKCD „Standards“).

„Modular CSS: Breaking it down and building it back up“ von Jonathan Snook war der letzte Vortrag. Der Vortragende stellte seine Ideen und Konzept im Bezug auf das modularisieren von CSS-Code vor und es waren einige Denkanstösse dabei, wie man seinen eigenen CSS-Code wartbarer und lesbarer machen kann.

Wie auch die letzten zwei Jahre war die Frontend Conference Zurich 2015 perfekt organisiert und ich werde 2016 definitiv wieder dabei sein. Vielen Dank an die Organisatoren und Vortragenden! Und natürlich auch Dank an die Teilnehmer, die die Konferenz erst zu dem machen, was sie ist.

Die Videos der einzelnen Vorträge werden (hoffentlich) bald online und frei verfügbar sein!

„Mobile UX Prototyping Toolchain with Sketch + Framer.js“ von David Condrau ist wegen Krankheit leider ausgefallen. Schade, denn hiervon habe ich mir – speziell im Bereich Code-Beispiele und Best-Practices – viel erwartet.

„Smart eCommerce Checkout Design Patterns“ von Vitaly Friedman wurde als Ersatz kurzfristig organisiert und war das Highlight des ersten Konferenztags. Vitaly zeigte die Ergebnisse von 3 Monaten Forschung auf Websites und Studien bezogen auf den Prozess vom Aussuchen einer Ware bis zum Absenden der Kaufbestätigung. Mit seiner unvergleichlichen Art untermauert und aufgelockert von zahlreichen (positiven und weniger positiven) Praxisbeispielen hat Vitaly einen tollen Vortrag gehalten.

„Clear cache & refresh“ von Adrian und Flurin Egger war ein witzig präsentierter Vortrag mit der Grundaussage, dass Designer sich weg von Photoshop und Illustrator bewegen müssen um Prototypen zu schaffen, die näher an der Frontend-Entwicklung angesiedelt sind. Auch wenn ich die Meinung der beiden nicht zu 100% teile und leider abermals keine Codebeispiele und konkrete Tools genannt wurden war es doch ein interessanter Vortrag.

„Look, no mediaqueries!“ von Visalis van Gemert hat endlich die konkreten Praxisbeispiele gebracht und einige mir bis dato unbekannten Sass und CSS Tricks nähergebracht (Slides).

„Taking the Web Offline“ von Erik Runyon hat die aktuell verfügbaren Möglichkeiten des Offline-Speicherns im Browser (Cookies, WebSQL, IndexedDB, Web Storage, Appcache) handlich zusammengefasst. Speziell die Technologie Appcache war mir bisher nur als Schlagwort bekannt und wurde mir anhand einiger überblicksmässig vorgestellten Praxisbeispiele sehr schmackhaft gemacht. Schade nur, dass der Vortrag nur das „lesend-konsumierte“ Offline-Web behandelt hat und die Synchronisation zwischen von Benutzern im Offline-Modus erstellten Daten mit Online-Daten nicht behandelt wurde (Slides).

„3 years of purging Sass“ von Hugo Giraudel hat einige Do’s & Dont’s für SASSSass vorgestellt und sich darüber beschwert, dass viele grosse Open Source Projekte (z.B Bootstrap) Sass vollkommen falsch einsetzen. Ein paar kleine Code-Kniffe konnte ich aus dem Vortrag mitnehmen, aber leider war Hugos Englisch mit französischem Akzent für mich nicht immer leicht zu verstehen.

Die Party im Impact Hub Zurich war wie letztes Jahr optimal organisiert und neben Essen und Trinken gab es auch genug Zeit zum Netzwerken und Plaudern.

Wer die Konferenzbeiträge von Freitag live sehen möchte kann das hier tun.

Viele tolle Vorträge auf einer sehr familiären und angenehmen Konferenz im Zentrum für Kulturproduktion in Bern.

Hervorzuheben sind der AngularJS 2 Vortrag von Gion Kunz, „Creating UIs for the Web Audio API“ von Stephen Band, der Lightning Talk von Raphael Saunier zum Thema „Déjà Vue„, Reto Schläpfers Beitrag zu Typescript, Gilles Doges Lightning Talk über sein Petproject „Postacard“ und Philip Hofstetters Vortrag „This talk lasts 三十分钟„.

Viele der Slides und Github-Links der Projekte sind auf lanyrd.com verfügbar.

Ich bin nächstes Jahr sicher wieder dort! Termin: 4. Juni 2016.

Bearbeitet 16. September 2015: Nun sind endlich auch die Vorträge als Videos via Youtube erhältlich.

Für Endgeräte mit einer Bildschirmbreite von 240 Pixel oder weniger funktioniert das float: right System konzeptionell nicht, weil dann eine Überlappung der rechts am Rand positionierten Elemente mit dem restlichen Inhalt stattfindet. Aus diesem Grund wird in dem Fall eine weitere CSS Datei mobile240.css geladen, die diese Elemente verkleinert und absolut positioniert.

Zusätzlich wird für Opera Mini ein weiteres CSS mobile240.css geladen, weil in diesem Browser das vertikale Zentrieren mittels der CSS Eigenschaft line-height nicht funktioniert. Im Code unten wird das mit Javascript erreicht. Das dient nur zur Veranschaulichung und zur Debug-Ausgabe. Im Produktivsystem wird dies mit CSS Mediaqueries erreicht:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 240px)" href="css/mobile240.css" />

Das System funktioniert hervorragend, ausser bei Opera Mini.

<!DOCTYPE html>
<html>
<head>
	<title>Opera Mini Test</title>
	<script type="text/javascript">// <![CDATA[
		function loadCss(cssfile) {
			loadcss = document.createElement('link')
			loadcss.setAttribute('rel', 'stylesheet')
			loadcss.setAttribute('type', 'text/css')
			loadcss.setAttribute('href', 'css/' + cssfile)
			document.getElementsByTagName('head')[0].appendChild(loadcss)
		}

		var status = '';
		var operaMini = (/opera mini/i.test(navigator.userAgent.toLowerCase()));
		if (operaMini) {
			status += 'loading operamini.css<br />';
			loadCss('mobile_operamini.css');
		}

		screenWidth = screen.width;
		if (screenWidth < '320') {
			status += 'loading mobile240.css<br />';
			loadCss('mobile240.css');
		}

		status += 'screen values: ' + screen.width + "x" + screen.height + ', ';
		status += window.innerWidth + 'x' + window.innerHeight;
	// ]]></script>
	<style type="text/css">
	<!--
		body {
			margin: 0px;
			padding: 0px;
		}

		#testcontainer {
			height: 50px;
			width: 320px;
			background: #666666 url('image/debug-width-2.png') 0px 0px no-repeat;
		}
	-->
	</style>
</head>
<body>
	<div id="testcontainer">
		Opera Mini Test
	</div>
	<div id="browserinfo">
	</div>
	<script type="text/javascript">// <![CDATA[
		document.getElementById('browserinfo').innerHTML = status;
	// ]]></script>
</body>
</html>

Opera Mini gibt auf dem Samsung Galaxy Ace GT-S5830 Testgerät bei obigem Code folgendes als Ausgabe:

loading operamini.css
loading mobile240.css
screen values: 228x245,229x246

Das Galaxy Ace hat eine Bildschirmauflösung von 320×480 Pixel, warum liefert Opera Mini als Wert für screen.width 228? Im Opera Mini Forum wird die gleiche Frage gestellt und vermutet, dass das Verhalten mit der Tatsache zusammenhängt, dass alle via Opera Mini aufgerufenen Seiten auf den Servern von Opera gerendert und dann erst an das mobile Endgerät geschickt werden. Eine Lösung wurde dort aber leider nicht gepostet.

Opera Mobile und der Andriod Browser liefern für obigen Code das erwartete Ergebnis. Auch der Opera Mobile Emulator unter Windows liefert sinnvolle Werte:

Ich bin für jeden Lösungsvorschlag dankbar, der mich näher zum Ziel führt zuverlässig zu erkennen, ob bei der Verwendung von Opera Mini das 240er CSS geladen werden muss oder nicht.