Front-end on steroids

Presentation about modern front-end development techniques.

With pages and applications growing in complexity, we now 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.

Transcript

1. Frontend on steroids! FRONT-END ON STEROIDS Joomladagen 2015 - Robin Poort & Tom Janssens
2. MOBILE FIRST https://flic.kr/p/gTH5oL
4. www.gov.uk
5. PROGRESSIVE ENHANCEMENT https://flic.kr/p/4bcAb6
6. Javascript enabled
7. Javascript disabled
10. ACCESSIBILITY https://flic.kr/p/dpuB6e
14. DEMO TIME
15. OPEN GRAPH https://flic.kr/p/2SvT9M
16. ogp.me
17. dev.twitter.com/cards/types/summary
18. LINKED DATA
19. schema.org MICRODATA
20. schema.org JSON LINKED DATA
21. BEM
22. www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem
23. ATOMIC DESIGN
24. bradfrost.com/blog/post/atomic-web-design
25. SASS
26. SUSY
27. $beta: 580px; $charlie: 740px; .sidebar { @include breakpoint($beta) { @include span(4 of 12); } @include breakpoint($charlie) { @include span(3 of 12); } }
28. .content { @include breakpoint($beta) { @include span(8 of 12); } @include breakpoint($charlie) { @include span(9 of 12); } }
29. @media screen and (min-width: 580px) { .sidebar { width: 32.20339%; float: left; margin-right: 1.69492%; } } @media screen and (min-width: 740px) { .content { width: 74.57627%; float: left; margin-right: 1.69492%; } }
30. @media screen and (min-width: 740px) { .sidebar { width: 23.72881%; float: left; margin-right: 1.69492%; } } @media screen and (min-width: 580px) { .content { width: 66.10169%; float: left; margin-right: 1.69492%; } }
31. BOWER
32. # registered package $ bower install jquery # GitHub shorthand $ bower install desandro/masonry # Git endpoint $ bower install git://github.com/user/package.git # URL $ bower install http://example.com/scr.js
33. { "name": "internet-platform", "devDependencies": { "html5shiv": "aFarkas/html5shiv#3.7.*", "illusion": "timble/illusion#master", "magnific-popup": "dimsemenov/Magnific", "select2": "ivaynberg/select2#3.5.*", "susy": "ericam/susy#2.2.*" } } BOWER.JSON
34. $ bower install
35. GRUNT
36. $ npm install grunt-sass
37. { "name": "internet-platform", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-watch": "~0.6.1", "grunt-sass": "^0.17.0", "load-grunt-tasks": "^0.6.0" } } PACKAGE.JSON
38. $ npm install
39. module.exports = function(grunt) { // load time-grunt and all grunt plugins require('load-grunt-tasks')(grunt); grunt.initConfig({ // Tasks }); grunt.registerTask('default'); }; GRUNTFILE.JS
40. grunt.initConfig({ // Sass sass: { dist: { files: { css/style.css': 'scss/style.scss', css/ie9.css': 'scss/ie9.scss' } } } }); SASS TASK
41. grunt.initConfig({ // Watch watch: { sass: { files: 'scss/*.scss', tasks: ['sass'] } }); WATCH TASK
42. module.exports = function(grunt) { // load time-grunt and all grunt plugins require('load-grunt-tasks')(grunt); grunt.initConfig({ sass: {...} watch: {...} }); grunt.registerTask('default', ['watch']); }; GRUNTFILE.JS
43. $ grunt
44. PERFORMANCE https://flic.kr/p/2SvT9M
46. www.openpolice.be/stack OUR STACK
47. ONE LAST THING ... https://flic.kr/p/2SvT9M
49. DEMO TIME
50. We build things for the web www.timble.net Thank you! www.openpolice.be - @OpenPoliceBE