League of extraordinary front end dev tools
-
Upload
sherif-tariq -
Category
Design
-
view
73 -
download
0
Transcript of League of extraordinary front end dev tools
![Page 1: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/1.jpg)
The League of Extraordinary
Front End Dev Tools
![Page 2: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/2.jpg)
DEV CITY ...
![Page 3: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/3.jpg)
THE TROLL!
![Page 4: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/4.jpg)
Embrace. Extend. Extinguish!
![Page 5: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/5.jpg)
The Church of Web Standards tried to negotiate a truce.
![Page 6: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/6.jpg)
The Army of Vendor Pre-fixes
Pointy Haired Boss
DEADLINE
The Hacker
But then came the dark times.
![Page 7: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/7.jpg)
BEM!
SMACSS!
OOCSS!
![Page 8: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/8.jpg)
Dev City Needed a New Hero.
The League answered the call!
![Page 9: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/9.jpg)
Lint and Hint
![Page 10: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/10.jpg)
Sass
Don’tREpeatyourself!
![Page 11: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/11.jpg)
Sass
Change it in once place, Sass updates every reference to that mixin.No need to hunt down dozens, hundreds of instances across multiple files!
CSS
@mixin body-font-bold { font-family: 'Open Sans', sans-serif; font-weight: 700; }
.module_type_title { ... @include display-font-bold; }
...
.module_header_row { ... @include display-font-bold; }
...
![Page 12: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/12.jpg)
Compass
![Page 13: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/13.jpg)
Compass
CSS
.simple { @include border-radius(4px, 4px); }
.simple { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; }
![Page 14: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/14.jpg)
JavaScript
![Page 15: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/15.jpg)
jQuery!
FIND SHOWparent
![Page 16: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/16.jpg)
Douglas Crockford
![Page 17: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/17.jpg)
JSON!
![Page 18: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/18.jpg)
Node.js
![Page 19: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/19.jpg)
npm install -g sass
npm install -g compass
www.npmjs.org
-G meansGLOBAL
![Page 20: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/20.jpg)
The workflow!
![Page 21: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/21.jpg)
Grunt.js
![Page 22: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/22.jpg)
module.exports = function(grunt) { "use strict";
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { build: { options: { style: 'expanded' //Development }, files: { 'css/main.css':'css/scss/main.scss', } } },
watch: { css: { files: ['css/scss/**/*.scss', tasks: ['buildcss'] } } });
grunt.loadTasks('tasks'); grunt.registerTask('buildcss',['sass']);};
Grunt monitored the .SCSS files and when they changed, directed Sass to transform them into valid CSS!
![Page 23: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/23.jpg)
Meanwhile, back at GitHub...
![Page 24: League of extraordinary front end dev tools](https://reader034.fdocuments.us/reader034/viewer/2022042706/589e73f61a28ab300b8b4f51/html5/thumbnails/24.jpg)
The League is always growing.
The End.
Yeoman MVC
BowerJasmineHuxley
Gulp
Rhino