Front-end on Steroids
55
Frontend on steroids! FRONT-END ON STEROIDS Tom Janssens at WordCamp Antwerp 2016
Transcript of Front-end on Steroids
Frontend on steroids!
FRONT-END ON STEROIDSTom Janssens at WordCamp Antwerp 2016
Tom JanssensThe 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
Now what ?!
Front-end on Steroids WordCamp Antwerp 2016
Mobile First
https://flic.kr/p/gTH5oL
Front-end on Steroids WordCamp Antwerp 2016
goo.gl/9AFDSigoo.gl/9AFDSi
Front-end on Steroids WordCamp Antwerp 2016
DON’T:
@media (max-width: ...) { …
}
DO:
@media (min-width: ...) { …
}
Front-end on Steroids WordCamp Antwerp 2016
goo.gl/9AFDSigoo.gl/9AFDSi
Front-end on Steroids WordCamp Antwerp 2016
goo.gl/9AFDSi
Front-end on Steroids WordCamp Antwerp 2016
Future-proof
Front-end on Steroids WordCamp Antwerp 2016
www.lokalepolitie.be/leuven
Front-end on Steroids WordCamp Antwerp 2016
Device Mode in Chrome
Front-end on Steroids WordCamp Antwerp 2016
bradfrost.com/demo/ish/
Front-end on Steroids WordCamp Antwerp 2016
Progressive Enhancement
https://flic.kr/p/4bcAb6
Front-end on Steroids WordCamp Antwerp 2016
Wait… what ?!
Front-end on Steroids WordCamp Antwerp 2016
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
Javascript enabled
Front-end on Steroids WordCamp Antwerp 2016
Javascript disabled
Front-end on Steroids WordCamp Antwerp 2016
Javascript enabled
Front-end on Steroids WordCamp Antwerp 2016
Javascript disabled
Front-end on Steroids WordCamp Antwerp 2016
styleguide.sc5.io
Front-end on Steroids WordCamp Antwerp 2016
https://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016
https://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016
Open Graphhttps://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016
Front-end on Steroids WordCamp Antwerp 2016
dev.twitter.com/cards/types/summary
Front-end on Steroids WordCamp Antwerp 2016
Linked Data
https://www.ted.com/talks/tim_berners_lee_on_the_next_web
Front-end on Steroids WordCamp Antwerp 2016
schema.org
Microdata
Front-end on Steroids WordCamp Antwerp 2016
schema.org
JSON Linked Data
Front-end on Steroids WordCamp Antwerp 2016
webmasters.googleblog.com/2016/05/introducing-rich-cards.html
Google introduced rich cards
Front-end on Steroids WordCamp Antwerp 2016
search.google.com/structured-data/testing-tool
Structured Data Testing Tool
Front-end on Steroids WordCamp Antwerp 2016
SassSyntactically Awesome Style Sheets
Front-end on Steroids WordCamp Antwerp 2016
BEMBlock Element Modifier
Front-end on Steroids WordCamp Antwerp 2016
www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem
Front-end on Steroids WordCamp Antwerp 2016
Atomic Design
Front-end on Steroids WordCamp Antwerp 2016
bradfrost.com/blog/post/atomic-web-design
Front-end on Steroids WordCamp Antwerp 2016
Grunt
Front-end on Steroids WordCamp Antwerp 2016
$ npm install grunt-sass --save-dev
Front-end on Steroids WordCamp Antwerp 2016
{"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
$ npm install
Front-end on Steroids WordCamp Antwerp 2016
// Sass task sass: { dist: { files: { 'css/style.css': 'css/style.scss' } } }
SASS TASK
Front-end on Steroids WordCamp Antwerp 2016
// Watch task watch: { sass: { files: 'css/*.scss', tasks: ['sass'] }
WATCH TASK
Front-end on Steroids WordCamp Antwerp 2016
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
$ grunt
Front-end on Steroids WordCamp Antwerp 2016
Yellow Lab Tools
Front-end on Steroids WordCamp Antwerp 2016
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016
www.vlaanderen.be
Front-end on Steroids WordCamp Antwerp 2016
BrowserStack
Front-end on Steroids WordCamp Antwerp 2016
One last thing ...
https://flic.kr/p/2SvT9M
Front-end on Steroids WordCamp Antwerp 2016
BrowserSync
Front-end on Steroids WordCamp Antwerp 2016
Demo
Let’s build a device lab
Disclaimer: live demos are a recipe for disaster
Front-end on Steroids WordCamp Antwerp 2016
We build things for the webwww.timble.net
Thank you! Questions?tom.janssens.me - @JanssensTom
