1.
Frontend on steroids!
FRONT-END ON STEROIDS
Tom Janssens at WordCamp Antwerp 2016

2.
Tom Janssens
The web platform is my box of LEGOs.
tom.janssens.me - @JanssensTom
I'm a Belgian web developer
and co-founder of Timble.
Front-end on Steroids WordCamp Antwerp 2016

3.
Now what ?!
Front-end on Steroids WordCamp Antwerp 2016

4.
Mobile First
https://flic.kr/p/gTH5oL
Front-end on Steroids WordCamp Antwerp 2016

5.
goo.gl/9AFDSi
goo.gl/9AFDSi
Front-end on Steroids WordCamp Antwerp 2016

6.
DON’T:
@media (max-width: ...) {
…
}
DO:
@media (min-width: ...) {
…
}
Front-end on Steroids WordCamp Antwerp 2016

7.
goo.gl/9AFDSi
goo.gl/9AFDSi
Front-end on Steroids WordCamp Antwerp 2016

8.
goo.gl/9AFDSi
Front-end on Steroids WordCamp Antwerp 2016

9.
Future-proof
Front-end on Steroids WordCamp Antwerp 2016

10.
www.lokalepolitie.be/leuven
Front-end on Steroids WordCamp Antwerp 2016

11.
Device Mode in Chrome
Front-end on Steroids WordCamp Antwerp 2016

12.
bradfrost.com/demo/ish/
Front-end on Steroids WordCamp Antwerp 2016

13.
Progressive Enhancement
https://flic.kr/p/4bcAb6
Front-end on Steroids WordCamp Antwerp 2016

14.
Wait… what ?!
Front-end on Steroids WordCamp Antwerp 2016

15.
No JavaScript for 1 in 93 people
https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/
Front-end on Steroids WordCamp Antwerp 2016

16.
Javascript enabled
Front-end on Steroids WordCamp Antwerp 2016

17.
Javascript disabled
Front-end on Steroids WordCamp Antwerp 2016

18.
Javascript enabled
Front-end on Steroids WordCamp Antwerp 2016

19.
Javascript disabled
Front-end on Steroids WordCamp Antwerp 2016

20.
styleguide.sc5.io
Front-end on Steroids WordCamp Antwerp 2016

21.
https://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016

22.
https://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016

23.
Open Graph
https://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016

24.
ogp.me
Front-end on Steroids WordCamp Antwerp 2016

25.
Front-end on Steroids WordCamp Antwerp 2016

26.
dev.twitter.com/cards/types/summary
Front-end on Steroids WordCamp Antwerp 2016

27.
Linked Data
https://www.ted.com/talks/tim_berners_lee_on_the_next_web
Front-end on Steroids WordCamp Antwerp 2016

28.
schema.org
Microdata
Front-end on Steroids WordCamp Antwerp 2016

29.
schema.org
JSON Linked Data
Front-end on Steroids WordCamp Antwerp 2016

30.
webmasters.googleblog.com/2016/05/introducing-rich-cards.html
Google introduced rich cards
Front-end on Steroids WordCamp Antwerp 2016

31.
search.google.com/structured-data/testing-tool
Structured Data Testing Tool
Front-end on Steroids WordCamp Antwerp 2016

32.
Sass
Syntactically Awesome Style Sheets
Front-end on Steroids WordCamp Antwerp 2016

33.
BEM
Block Element Modifier
Front-end on Steroids WordCamp Antwerp 2016

34.
www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem
Front-end on Steroids WordCamp Antwerp 2016

35.
Atomic Design
Front-end on Steroids WordCamp Antwerp 2016

36.
bradfrost.com/blog/post/atomic-web-design
Front-end on Steroids WordCamp Antwerp 2016

37.
Grunt
Front-end on Steroids WordCamp Antwerp 2016

38.
$ npm install grunt-sass --save-dev
Front-end on Steroids WordCamp Antwerp 2016

39.
{
"name": "internet-platform",
"devDependencies": {
"grunt-browser-sync": "latest",
"grunt": "^0.4.5",
"grunt-contrib-watch": "~0.6.1",
"grunt-sass": "^0.17.0",
"load-grunt-tasks": "^0.6.0"
}
}
PACKAGE.JSON
Front-end on Steroids WordCamp Antwerp 2016

40.
$ npm install
Front-end on Steroids WordCamp Antwerp 2016

41.
// Sass task
sass: {
dist: {
files: {
'css/style.css': 'css/style.scss'
}
}
}
SASS TASK
Front-end on Steroids WordCamp Antwerp 2016

42.
// Watch task
watch: {
sass: {
files: 'css/*.scss',
tasks: ['sass']
}
WATCH TASK
Front-end on Steroids WordCamp Antwerp 2016

43.
module.exports = function(grunt) {
// Load all grunt plugins
require('load-grunt-tasks')(grunt);
// Tasks
grunt.initConfig({
sass: { … }
watch: { … }
});
grunt.registerTask('default', ['watch']);
};
GRUNTFILE.JS
Front-end on Steroids WordCamp Antwerp 2016

44.
$ grunt
Front-end on Steroids WordCamp Antwerp 2016

45.
Yellow Lab Tools
Front-end on Steroids WordCamp Antwerp 2016

46.
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016

47.
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016

48.
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016

49.
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016

50.
BrowserStack
Front-end on Steroids WordCamp Antwerp 2016

51.
ngrok
Front-end on Steroids WordCamp Antwerp 2016

52.
One last thing ...
Front-end on Steroids WordCamp Antwerp 2016

53.
BrowserSync
Front-end on Steroids WordCamp Antwerp 2016

54.
Demo
Let’s build a device lab
Disclaimer: live demos are a recipe for disaster
Front-end on Steroids WordCamp Antwerp 2016

55.
We build things for the web
www.timble.net
Thank you! Questions?
tom.janssens.me - @JanssensTom