Recap Frontend United: wat ons bijbleef

Afgelopen vrijdag en zaterdag trokken we met 5 frontenders naar de conferentie Frontend United, een 2-daagse Europese conferentie met focus op front-end en Drupal die elk jaar op een ander locatie plaatsvindt. Gaststad dit jaar was het gezellige Gent.

25 sprekers, gespecialiseerd in UX & Design, Javascript, Frontend en Drupal gaven de aanwezigen waar voor hun geld.

We vatten samen wat ons bijbleef van Frontend United 2016.

fu.jpeg

 

CSS for Software Engineers for CSS Developers

Harry Roberts, een van de grote namen binnen de frontend community, bijtte de spits af met een zeer interessante sessie over hoe je betere CSS schrijft.

Hij had het over een aantal principes die we bij Intracto al toepassen, maar die we nog niet bij hun fancy naam noemden zoals DRY, the Single Responsibility Principle, Separation of concerns, Immutability, … Welke principles gebruik jij?

Roberts' slides vind je hier.

 

Drupal 8 theme best practices - here's where we burried the bodies

Mortendk, zeker geen onbekende in de Drupal-frontend-wereld, had het over Drupal 8 theme beste practices.

Hij sprak zich ook uit over de huidige theming-problemen bij Drupal:

  • Drupal is built by engineers for engineers
  • Developers don’t really care about design or “the frontend”
  • Sales bro’s can’t put ‘clean markup’ on a sale’s sheet

-> Niemand lijkt te begrijpen dat markup & CSS verantwoordelijk zijn voor het eindproduct dat op het scherm van de bezoeker terechtkomt.

mortendk.png

Mortendk was ook gul met een pak tips voor het aanmaken of uitbreiden van je eigen thema voor je site:

  • Gebruik de debug-functie voor naamsuggesties voor de nieuwe template-bestanden of om te weten hoe de huidige template heet.
  • Gebruik de kint() functie in plaats van dpm() om de debug output van een variabele te tonen
  • Maak gebruik van het WYSIWYG-principe: “See the site as the users do”. Dit betekent dat je geen gebruik maakt van admin-toolbars of contextuele links voor administrators
  • En nog veel meer ...

Bekijk hier alle slides: https://t.co/ZaWpSYCsMq

 

Using Flexbox Today

Zoe Mickley Gillenwater had het over Flexbox: hoe en wanneer gebruik je het?

Haar use-cases voor Booking.com zijn een aanrader voor wie Flexbox nog niet onder de knie heeft. Flexbox kan je nu overal gebruiken.

Desondanks wilt dit niet zeggen dat we nu overal per definitie een beroep moeten doen op Flexbox, maar wel waar het een verbetering betekent. Oudere browsers die Flexbox nog niet ondersteunen, tonen de pagina gewoon op een ander manier.

Een belangrijke vraag die we onszelf eerst moet stellen is:

Flexbox.png

Wil je weten hoe je Flexbox gebruikt? Bekijk hier de slides van de presentatie.

 

How conversion optimization made me a better interface designer

Karl Gilis, usability expert, pakte uit met een sterke sessie met concrete voorbeelden die aantonen dat een website meer is dan een mooi design.

Design is uiteraard belangrijk, maar goede copy, positionering van elementen, … zijn ook essentieel. Als designers en frontenders is het onze taak om bezoekers te helpen hun doel op jouw website te bereiken. Met A/B-testing en usertests neem je de proef op de som.

Ook bij Intracto testen we trouwens voortdurend uit hoe onze klanten meer uit hun website kunnen halen. Stuur ons gerust een mailtje als je hier meer over wilt weten.

 

Prototyping techniques - Effective user interface design with HTML prototyping

Johan Ronsse van Mono Company sprak over interface design en het effectief gebruik van HTML-prototyping. Het voordeel van HTML -prototyping is dat de klant beter aanvoelt hoe een design gaat werken, in tegenstelling tot statische designs. Mono Company ontwikkelde hiervoor het opensource framework Bedrock, iets wat we bij Intracto zeker gaan bekijken.

 

PostCSS - Andreas Sahle

postcss-logo_1.png

PostCSS: het is een van de hot topics in het frontend-development-land en het onderwerp van Andreas Sahle's talk. Bij Intracto gebruiken we PostCSS al een tijdje in onze Grunt & Gulp setups.

Het voordeel van PostCSS is dat het enorm lightweight en extendable is. Een downside bleek wel te zijn dat je css-files compilet waar je invalid css in steekt (scss-syntax). Ook de integratie met de meest bekende IDE’s is maar povertjes.

Vandaar dat we slechts enkele toepassingen van deze technologie bij intracto gebruiken zoals het automatsch prefixen van css-properties.

Wil je meer weten over Post-CSS? Lees dan zeker eens de talk van Andreas Sahle.

 

Large Scale CSS Refactoring

Deze sessie werd gegeven door Christoph Reinartz, een UX/UI Engineer bij Trivago. Het ging over hoe je het beste je CSS / SASS op grote schaal kan refactoren. Belangrijk is om eerst de inconsistentie uit de bestanden te verwijderen, wat je doet door een pattern library te introduceren. De pattern library waar Christoph het over had was Atomic Design.

large-scale-css-refactoring.png

Verder vertelde Reinartz hoe we grote CSS refactors kunnen testen, het gebruik van linting tools en hoe je je code quality optimaliseert.

Wil je hier meer over weten? Bekijk dan zeker de slides of lees het oorspronkelijke artikel.

 

Just Right: Goldilocks and CMS theme systems

Deze talk, door Lauri Eskola van Druid en Scott Reeves van Digital Echidna, ging over de verschillen tussen de theme systems van enkele Content Management Systems (in dit geval Drupal, Wordpress, Joomla en Concrete5).

We meten deze verschillen door enkele persona’s te definiëren (Site builder, Backend developer en Themer) en na te kijken of een CMS op een bepaalde persona focust.

goldilocks.png

Zoals je ziet zijn er andere prioriteiten per CMS, maar dit heeft ook een reden. Het CMS focussen op een bepaalde persona kan voor problemen (beveiliging van het CMS, complexiteit, ..) zorgen.

Tijdens de discussie na de talk zochten we samen een manier om de “Themer” een hogere prioriteit binnen Drupal te geven.

 

Bekijk hier de slides van Eskola en Reeves

 

The image problem of the web and how to solve it… - Christian Heilmann

Afbeeldingen: ze hebben altijd al een deel van het wereldwijde web uitgemaakt. Maar er zijn zoveel manieren om ze op webpagina's te tonen. Zeker omdat je tegenwoordig rekening moet houden met mobiele toestellen en zaken als high-pixel-density-schermen. Dat zei Christian Heilmann bij het begin van zijn presentatie.

Gelukkig bestaat daarom het picture-element. Dat zorgt er namelijk voor dat je op een relatief eenvoudige manier steeds de juiste afbeelding toont op het juiste toestel.

Verder ging Heilmann ook verder over EXIF-data. Dit is extra informatie die je aan een afbeelding meegeeft. Neem je bijvoorbeeld een foto met je smartphone, dan worden hier zaken als de datum of locatie opgeslagen. Het kan ook gaan om data zoals thumbnails van de afbeelding, handig voor een preview van het beeld zonder dat je de hele afbeelding hoeft in te laden.

Hier herbekijk je de volledige presentatie.

Meer weten? Contacteer ons!