Presentation about modern front-end development techniques. With websites growing in complexity we have an increasing need for better tools to help build, test, and monitor our code. Everything from build scripts to monitoring and device testing are now important parts of the front-end developer’s job. After this presentation your front-end muscles increased by 31%. WordCamp Antwerp 2016

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