The document discusses modern front-end development tools and methodologies, highlighting the evolution from traditional systems to more efficient workflows with tools like Gulp and Grunt. It emphasizes the importance of proper coding standards, automation, and leveraging CSS preprocessors to streamline code organization and reduce errors. The author advises on wisely selecting tools and managing dependencies to enhance productivity in a Drupal development environment.

2. TOOLING
THEMING, MADE EASY
Created by /Evan Butera @egosumentropia
Developer @wellnet (yeah, we rock)

3. "Hey, computers are faster now! and also
the internet download speeds are better!"
guy who hates Front-End Engineering

4. TOOL WAT?

5. SOME HISTORY

7. More sophisticated Toos started to appeared

8. gulp,
and many more
Today is Tool pollution time
brunch, grunt, yeoman, codekit, livereload, bower,
bootstrap, foundation, purecss, CSS Lint, jquery, phantomjs,
modernizr, mustache, handlebars, JS Hint, uglifyjs, sass,
compass, coffescript, prepros, koala, typescript

9. TOOLS HELP YOU TO
be faster
organize your code better
be less prone to error
and automate

10. OK, BUT DRUPAL?
bootstrap themes and modules
handle dependencies
write less code
coding standards

11. BOOTSTRAP
no, not that one
the easy way

14. ...and you can create your own yeoman generator
to bootstrap projects your way

15. DEPENDENCIES
the easy way

17. STYLE
The easy way

18. Drupal 8 CSS coding standards
BEM

19. VANILLA CSS
.block{
unicorn: fluffy;
}
.block--modifier{
unicorn: dancing;
}
.block__element{
pony: awsome;
}
.block__element--modifier{
quaggan: fooooo;
}

20. CSS PREPROCESSORS TO THE RESCUE
// SCSS, LESS
.block{
unicorn: fluffy;
&--modifier{
unicorn: dancing;
}
&__element{
pony: awsome;
&--modifier{
quaggan: fooo;
}
}
}

21. SOME MAGIC
or how to programmaticaly generate stuff w/ preprocessors
// SCSS syntax
$list: (
goofy : (quaggan : fooo),
donald : (quaggan : baaaar),
sora : (quaggan: none)
);
@each $char, $attribute in $list{
.block__element{
&--#{$char}{
quaggan: map-get($attribute, quaggan);
}
}
}

22. Two extra cents
// SCSS syntax
%block{ unicorn: pink; }
.stuff{
quaggan: blue;
@extend %block;
}
.thing{
@extend %block;
}
// compile to
.stuff, .thing{ unicorn: pink; }
.stuff{ quaggan: blue; }
avoid extend abuse, stay away from nesting hell

23. Drupal 8 CSS coding standards
SMACSS
separation of concerns is up to you

24. TAKE A TOUR
SASS
LESS
STYLUS

25. JAVASCRIPT
The easy way

26. Drupal 8 JS coding standards
drupal.org/node/172169
strict code, indentation, spacing ...

27. JSBEAUTIFIER AND JSHINT
import settings, run...
...cry 'cause jshint will hurt your feelings...
...and set your code right

28. OK, I GET IT, TOOLS ARE NICE
but I still need to handle them all
isn't this a waste of time?

29. AUTOMATING
the easy way

30. INTRODUCING GRUNT
gruntfile.js
module.exports = function(grunt) {
// Project configuration
grunt.initConfig({
sass: { core: { files: {
'assets/main.css': 'css/main.scss',
} },
},
autoprefixer: { dist: { src: 'css/main.css' } },
});
// define dependencies
grunt.loadNpmTasks( 'grunt-sass' );
grunt.loadNpmTasks( 'grunt-autoprefixer' );
// register tasks
grunt.registerTask( 'default', [ 'css' ] );
grunt.registerTask( 'css', [ 'sass', 'autoprefixer'] );
};
configuration over code

31. INTRODUCING GULP
gulpfile.js
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
notify = require('gulp-notify');
// Define a task
gulp.task('style', function () {
return gulp.src('assets/styles/**/*.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('styles'))
.pipe(notify({message: 'Styles task complete'}))
});
code over configuration

32. THE CHOICE IS UP TO YOU
consider
Grunt Gulp
Version 0.4.5 3.9.0
Fork ~1250 ~2000
GitHub issues 112 36
Plugins ~4.5 k ~ 2.0 k
2015/12

33. OK, GREAT, WHAT SHOULD I USE?

34. FOUR SIMPLE TIPS

35. CHOOSE TOOLS WISELY
changes to workflow are hard
stuff must be implemented and mantained

36. USE ONLY TASK YOU REALLY NEED
cool stuff are not always the best stuff
overdoing is never right even if fun as hell

37. DON'T COMMIT ARTEFACTS
neveah. period.
you can have a dist and a dev task dude

38. LIMIT EXTERNAL DEPENDENCIES
period

39. consider
AVOID RUBY GEMS
'cause damn slow
Timings for processing a 200KB file to plain CSS
SASS 4.9s
SASS (w/ warm cache) 2.5s
Libsass 0.2s
Stylus 1.7s
LESS 0.5s
data from @jo_liss

40. and remember to
"postinstall": "find node_modules/ -name '*.info' -type f -delete"
in package.json
if running NPM modules inside D7

41. TL;DR
it's fucking 2015 dude. DREAMWEAVER time is long gone

42. THE END
special thanks to
@graze, @milanojs, @wellnet

43. ask your questions

44. WE ARE HIRING
info@wellnet.it

45. also
Tomorrow hackaton && Drupal school
June 2016 Drupal dev days
Whatever you do, we can use your skills to improve Drupal