Front-end on Steroids

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

Transcript

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