front-end on steroids

Frontend on steroids!

FRONT-END ON STEROIDSRobin Poort - PFCongres 2016

“ Een gemiddelde pagina in

2015 is 150x groter dan in 1995 ”

Front-end on Steroids PFCongres 2016

14KBin 1995


2MBin 2015


2.15MBholland.com


6MBvlaanderen.be


927KBfrance.fr


4.73MBdeutschland.de


1.1MBbelastingdienst.nl


1MBklm.com


1.38MBbooking.com


4MBairbnb.com


tweakers.net


1MBtweakers.net


2.48MBin 2016


Now what ?!


No JavaScript for 1 in 93 people

https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/





booking.com

Verkeerde meta-data op Facebook



Onnavigeerbare menus voor screenreaders




Nieuwe styling voor bestaande classes




Nieuwe styling voor bestaande classes

Elk project andere naming



It’s costing money

Mobile First

https://flic.kr/p/gTH5oL


goo.gl/9AFDSigoo.gl/9AFDSi


http://goo.gl/9AFDSi


DON’T:

@media (max-width: ...) { …

}

DO:

@media (min-width: ...) { …

}


goo.gl/9AFDSigoo.gl/9AFDSi




// Set max-width for old browsers

body {max-width: 600px;

}

// Reset the max-width on capable browsers

@media (min-width: 600px) {body {

max-width: none;}

}


goo.gl/9AFDSi


Future-proof


www.lokalepolitie.be/leuven


http://www.lokalepolitie.be/leuven

http://www.lokalepolitie.be/leuven


Device Mode in Chrome

Progressive Enhancement

https://flic.kr/p/4bcAb6


Wait… what ?!


Better.. But still


Javascript enabled


Javascript disabled


Javascript enabled


Javascript disabled


Open Graphhttps://flic.kr/p/2SvT9M


ogp.me


http://ogp.me/

http://ogp.me/

Linked Data

https://www.ted.com/talks/tim_berners_lee_on_the_next_web




schema.org

Microdata


https://schema.org/

https://schema.org/

schema.org

JSON Linked Data


https://schema.org/

https://schema.org/

webmasters.googleblog.com/2016/05/introducing-rich-cards.html

Google introduced rich cards


https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html

https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html


Accessibility

SassSyntactically Awesome Style Sheets


BEMBlock Element Modifier


www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem


http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem

http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem

Atomic Design


bradfrost.com/blog/post/atomic-web-design


http://bradfrost.com/blog/post/atomic-web-design/

http://bradfrost.com/blog/post/atomic-web-design/

DRY code

// Media object

.media { … }

.media__body { … }

.media__image { … }

.media__image img { … }

.media--flipped { … }


Split JS from CSS

<button class="toggle-button">One</button>

<button class="toggle-button">Two</button>

<button class="toggle-button">Three</button>


Split JS from CSS

jQuery(".toggle-button").on("click",function(){…

});


Split JS from CSS

<button class="toggle-button js-toggle-button">One

</button>

<button class="toggle-button js-toggle-button">Two

</button>


Split JS from CSS

.js-toggle-button { … }

.toggle-button { … }

.main-button { … }

.active { … }

.is-active { … }

.has-children { … }


_shame.scss


Grunt


$ grunt


Yellow Lab Tools


www.vlaanderen.be


http://www.vlaanderen.be

http://www.vlaanderen.be

BrowserStack


https://www.browserstack.com

https://www.browserstack.com

ngrok


https://ngrok.com/

https://ngrok.com/

One last thing ...

https://flic.kr/p/2SvT9M


BrowserSync


Demo

Let’s build a device lab

Disclaimer: live demos are a recipe for disaster


<1MBin 2017


// Thank you//// Author: Robin Poort// Twitter: @rhcpoort//// PFCongres 2016


front-end on steroids

Technology