Successfully reported this slideshow.
Your SlideShare is downloading. ×

Front-end on Steroids

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Front-end on Steroids
Front-end on Steroids
Loading in …3
×

Check these out next

1 of 55 Ad

Front-end on Steroids

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Similar to Front-end on Steroids (20)

Advertisement

Front-end on Steroids

  1. 1. Frontend on steroids! FRONT-END ON STEROIDS Tom Janssens at WordCamp Antwerp 2016
  2. 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. 3. Now what ?! Front-end on Steroids WordCamp Antwerp 2016
  4. 4. Mobile First https://flic.kr/p/gTH5oL Front-end on Steroids WordCamp Antwerp 2016
  5. 5. goo.gl/9AFDSi goo.gl/9AFDSi Front-end on Steroids WordCamp Antwerp 2016
  6. 6. DON’T: @media (max-width: ...) { … } DO: @media (min-width: ...) { … } Front-end on Steroids WordCamp Antwerp 2016
  7. 7. goo.gl/9AFDSi goo.gl/9AFDSi Front-end on Steroids WordCamp Antwerp 2016
  8. 8. goo.gl/9AFDSi Front-end on Steroids WordCamp Antwerp 2016
  9. 9. Future-proof Front-end on Steroids WordCamp Antwerp 2016
  10. 10. www.lokalepolitie.be/leuven Front-end on Steroids WordCamp Antwerp 2016
  11. 11. Device Mode in Chrome Front-end on Steroids WordCamp Antwerp 2016
  12. 12. bradfrost.com/demo/ish/ Front-end on Steroids WordCamp Antwerp 2016
  13. 13. Progressive Enhancement https://flic.kr/p/4bcAb6 Front-end on Steroids WordCamp Antwerp 2016
  14. 14. Wait… what ?! Front-end on Steroids WordCamp Antwerp 2016
  15. 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. 16. Javascript enabled Front-end on Steroids WordCamp Antwerp 2016
  17. 17. Javascript disabled Front-end on Steroids WordCamp Antwerp 2016
  18. 18. Javascript enabled Front-end on Steroids WordCamp Antwerp 2016
  19. 19. Javascript disabled Front-end on Steroids WordCamp Antwerp 2016
  20. 20. styleguide.sc5.io Front-end on Steroids WordCamp Antwerp 2016
  21. 21. https://flic.kr/p/2SvT9M Front-end on Steroids WordCamp Antwerp 2016
  22. 22. https://flic.kr/p/2SvT9M Front-end on Steroids WordCamp Antwerp 2016
  23. 23. Open Graph https://flic.kr/p/2SvT9M Front-end on Steroids WordCamp Antwerp 2016
  24. 24. ogp.me Front-end on Steroids WordCamp Antwerp 2016
  25. 25. Front-end on Steroids WordCamp Antwerp 2016
  26. 26. dev.twitter.com/cards/types/summary Front-end on Steroids WordCamp Antwerp 2016
  27. 27. Linked Data https://www.ted.com/talks/tim_berners_lee_on_the_next_web Front-end on Steroids WordCamp Antwerp 2016
  28. 28. schema.org Microdata Front-end on Steroids WordCamp Antwerp 2016
  29. 29. schema.org JSON Linked Data Front-end on Steroids WordCamp Antwerp 2016
  30. 30. webmasters.googleblog.com/2016/05/introducing-rich-cards.html Google introduced rich cards Front-end on Steroids WordCamp Antwerp 2016
  31. 31. search.google.com/structured-data/testing-tool Structured Data Testing Tool Front-end on Steroids WordCamp Antwerp 2016
  32. 32. Sass Syntactically Awesome Style Sheets Front-end on Steroids WordCamp Antwerp 2016
  33. 33. BEM Block Element Modifier Front-end on Steroids WordCamp Antwerp 2016
  34. 34. www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem Front-end on Steroids WordCamp Antwerp 2016
  35. 35. Atomic Design Front-end on Steroids WordCamp Antwerp 2016
  36. 36. bradfrost.com/blog/post/atomic-web-design Front-end on Steroids WordCamp Antwerp 2016
  37. 37. Grunt Front-end on Steroids WordCamp Antwerp 2016
  38. 38. $ npm install grunt-sass --save-dev Front-end on Steroids WordCamp Antwerp 2016
  39. 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. 40. $ npm install Front-end on Steroids WordCamp Antwerp 2016
  41. 41. // Sass task sass: { dist: { files: { 'css/style.css': 'css/style.scss' } } } SASS TASK Front-end on Steroids WordCamp Antwerp 2016
  42. 42. // Watch task watch: { sass: { files: 'css/*.scss', tasks: ['sass'] } WATCH TASK Front-end on Steroids WordCamp Antwerp 2016
  43. 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. 44. $ grunt Front-end on Steroids WordCamp Antwerp 2016
  45. 45. Yellow Lab Tools Front-end on Steroids WordCamp Antwerp 2016
  46. 46. www.vlaanderen.be Front-end on Steroids WordCamp Antwerp 2016
  47. 47. www.vlaanderen.be Front-end on Steroids WordCamp Antwerp 2016
  48. 48. www.vlaanderen.be Front-end on Steroids WordCamp Antwerp 2016
  49. 49. www.vlaanderen.be Front-end on Steroids WordCamp Antwerp 2016
  50. 50. BrowserStack Front-end on Steroids WordCamp Antwerp 2016
  51. 51. ngrok Front-end on Steroids WordCamp Antwerp 2016
  52. 52. One last thing ... Front-end on Steroids WordCamp Antwerp 2016
  53. 53. BrowserSync Front-end on Steroids WordCamp Antwerp 2016
  54. 54. Demo Let’s build a device lab Disclaimer: live demos are a recipe for disaster Front-end on Steroids WordCamp Antwerp 2016
  55. 55. We build things for the web www.timble.net Thank you! Questions? tom.janssens.me - @JanssensTom

×