Presentatie van Marc van Gend over de tools die gebruikt kunnen worden bij frontend ontwikkeling. Denk hierbij aan Sass, Compass, Grunt, Less, JSlint etc. Deze presentatie is gegeven op DRupaljam 2014 en Drupal Dev Days 2014.

1. THE BACKEND
OF FRONTEND
Marc van Gend
DrupalJam 2014

2. today, we're going to talkabout
COOKING
OK. Notreally.

3. first, let's talkabout
YOU & ME
Show of hands...
Who likes to cook?
Do you consider yourself a front-ender or themer?
Do you ever wonder which tools and libraries to use?
Marc van Gend (@marcvangend)
Web developer atTriquanta, Amsterdam, NL

4. today, we're going to talkabout
FRONT END
DEVELOPMENT
Notepad
Frontend developmentis changing rapidly.
dependencies (libraries)
naming things
inconsistencies (IE, anyone?)
maintainability

5. SOLUTION?
InstallRuby
InstallGems
InstallNodeJS
InstallPackages
Run it
If itbreaks... Installmore.

6. SCARY STUFF
Let's juststick with notepad?
Choose whatworks for you.

7. butseriously:
FRONTEND = COOKING
Processing and combining ingredients in the rightorder.

8. INGREDIENTS
HTML
CSS
Javascript
Fonts
SVG
Flash

9. BEING A FRONT END
CHEF
Recipes … Libraries
Utensils … Tools
Cuisine … Methodology

10. TODAY'S MENU
Methodology, Tools &Libraries:
Stuff thatworks for me
Some practicalexamples
Alternatives thatwork for others
Apeek into the future
How it's used in Drupal

11. METHODOLOGY (CUISINE)
HAVING A STRATEGY FOR QUALITY

12. QUALITY
Modular
Reusable
Understandable
Performant
Cross-browser /Cross-device

13. HTML: SEMANTIC
MARKUP
Nothing new, butwe're getting closer
HTML5 adoption is increasing

14. CSS: GET ORGANIZED
OOCSS:ObjectOriented CSS
Smacss:Scalable and Modular Architecture for CSS
BEM:Block, Element, Modifier

15. CSS: OOCSS
Abstracting css into classes
.button{
background:red;
padding:10px;
}
<inputtype="submit"class="button">Submit</input>
<aclass="button">Subscribenow</a>
Notverysemantic, notDrupalfriendly
Nicole Sullivan, http://www.stubbornella.org

16. CSS: BEM
Block
Element( __)
Modifier ( --)
.menu{}
.menu__item{}
.menu__item--active{}
.block--collapsed__title{}
StillnotDrupalfriendly.
Yandex, http://bem.info

17. CSS: SMACSS
Base
Layout
Module
State
Theme
Expectto see them in D8!(*.libraries.yml)
Jonathan Snook, http://www.smacss.com

18. JS: IT DEPENDS
Declaring asynchronouslyloading dependencies in your JS code
CommonJS
AMD (Asynchronous Module Definition)
define(["jquery","drupal"],function($,Drupal){
Drupal.behaviors.myCustomBehavior={
attach:function(context,settings){
$('#my-element',context).doFunkyStuff();
},
};
});

19. JS: FUTURE
Drupal8: *.libraries.yml
jquery.form:
remote:https://github.com/malsup/form
version:3.39
js:
assets/vendor/jquery-form/jquery.form.js:{}
dependencies:
-core/jquery
-core/jquery.cookie
thanks _nod!
AMD in D9:drupal.org/node/1542344

20. TOOLS (UTENSILS)
UTENSILS DON'T END UP IN YOUR FOOD

21. SASS$drupal-blue:#0073ba;
.drupal{
color:$drupal-blue;
a{
color:darken($drupal-blue,20%);
}
}
↧
.drupal{
color:#0073ba;
}
.drupala{
color:#003454;
}
Reusable, maintainable, organized CSS.

22. SASS: FUTURE 3.3
maps ("associative arrays")
a more flexible parentselector ( &)
the @at-rootdirective
Expectupdated libraries!

23. SASS: ALTERNATIVES
Less
Stylus

24. COFFEESCRIPT
"Sass for JavaScript"
foriin[0..5]
console.log"Hello#{i}"
↧
(function(){
vari;
for(i=0;i<=5;i++){
console.log("Hello"+i);
}
}).call(this);

25. JSHINT
Detectproblems in JS code:
errors
potentialerrors
coding standards violations
optimizations

26. GRUNT
NodeJS based task runner:
sass /scss changed → compile CSS → trigger LiveReload
readyfor release → re-compile CSS → JSHint→ minifyJS
templates:{
files:[
'template.php',
'templates/**'
]
}

27. GRUNT: ALTERNATIVES
Guard, Like GruntbutRuby
Gulp,
faster than Grunt
easier syntax
http://guardgem.org
http://gulpjs.com

28. BUNDLER
Dependencymanagementfor rubygems.
gem'bundler','~>1.5.2'
gem'compass','~>0.12.2'
gem'singularitygs','~>1.1'
gem'breakpoint','~>2.0'
Usage:
$bundleexeccompasswatch

29. LIVERELOAD
Automaticallyupdate your browser
No browser plugins when used with Grunt
Even works with IE9 in a VM!
functionMYTHEME_css_alter(&$css){
//ForceCSStobeaddedwithlinktags,ratherthan@import.
//Otherwise,Chrome+inspector+livereload=crash.
foreach($cssas$key=>$value){
$css[$key]['preprocess']=FALSE;
}
}

30. BUT WAIT, THERE'S
MORE!
BOWER
Frontend package manager, http://bower.io
YEOMAN
Scaffolding toolfor webapps, http://yeoman.io
ASSETIC
Symfony's assetmanager,

31. LIBRARIES (RECIPES)
TRIED AND TESTED
COMBINATIONS OF INGREDIENTS

32. JQUERY
...and plugins
...and jQueryUI

33. COMPASS
Libraryof Sass mixins and extensions, .http://compass-style.org
create image sprites
cross-browser CSS
Ever wondered where Sass ends and Compass begins?

34. COMPASS: EXAMPLE
.box-shadow{
@includebox-shadow(red2px2px10px);
}
↧
.box-shadow{
-webkit-box-shadow:red2px2px10px;
-moz-box-shadow:red2px2px10px;
box-shadow:red2px2px10px;
}

35. COMPASS: ALTERNATIVE
Bourbon, http://bourbon.io
COMPASS: FUTURE
Compass 1.0

36. SUSY
ASass-based semantic grid system, http://susy.oddbird.net
No more:
<divid="main"class="grid_6prefix_2suffix_4">
Whatifyouhaveonly4columnsonmobile?
</div>

37. SUSY: EXAMPLE
$susy:(
columns:7,
gutters:1/5,
);
#page{@includecontainer(80em);}
#main{@includespan(last5);}

38. SUSY: FUTURE
Susy2 is here!
SUSY: ALTERNATIVES
SingularityGS,
Zen Grids,
...
http://singularity.gs
http://zengrids.com

39. BREAKPOINT
Easymedia queries with Sass, http://breakpoint-sass.com/
Used bygrid systems like Susyand Singularity.

40. BREAKPOINT: EXAMPLE
$breakpoint-medium:500px;
.foo{
padding:10px;
@includebreakpoint($breakpoint-medium){
padding:20px;
}
}
↧
.foo{padding:10px;}
@media(min-width:500px){
.foo{padding:20px;}
}

41. MODERNIZR
HTML5 and CSS3 feature detection, http://modernizr.com
Drupal8:in core.

42. MODERNIZR: EXAMPLE
CSS:
.multiplebgsbody{
background:url(background-1.png)topleftrepeat-x,
url(background-2.png)bottomleftrepeat-x;
}
JS:
if(Modernizr.geolocation){
//Dogeolocationstuff...
}

43. BUT WAIT, THERE'S
MORE!
POLYFILLS
HTML5 shiv, - D8 core
Respond JS,
https://code.google.com/p/html5shiv
https://github.com/scottjehl/Respond
DATA VISUALIZATION
RaphaëlJS,
Processing JS,
http://raphaeljs.com
http://processingjs.org

44. WAIT, THERE'S STILL
MORE!
JS-BASED MVC FRAMEWORKS
Backbone JS (&Underscore), - D8 core
Angular JS,
http://backbonejs.org
http://angularjs.org
JS SCRIPT LOADERS
Require.js,
Browserify,
JS scriptloaders in D9:drupal.org/node/1033392
http://requirejs.org
http://browserify.org

45. DRUPAL
Can I startusing this tomorrow?

46. CLEAN(ER) MARKUP
Do yourself a favor!
Fences,
DisplaySuite,
Certain base themes
Views configuration
https://drupal.org/project/fences
https://drupal.org/project/ds

47. CLEAN(ER) MARKUP: FUTURE
Drupal8 says (drupal.org/node/1833912):
Use classes for css
<divclass="highlight">Iwillbestyled</div>
Use data attributes for JS.
<divdata-animation="fade-in">Iwillbeanimated</div>

48. JQUERY UPDATE
Tip:use 7.x-2.x-dev
includes 1.9 and 1.10
differentjQueryversion for admin pages

49. BASE THEMES
Pre-configured best-practice powerhouses.

50. BASE THEMES: AURORA
Grunt(opt-in)
Bower (opt-in)
Bundler
LiveReload
Singularity
sub theme scaffolding:Aurora Gem
maintained bySam Richards (snugug, Singularity) and Ian
Carrico (ChinggizKhan)

51. BASE THEMES: OMEGA
Gruntand Guard
Bower
Bundler and RVM
LiveReload
Susy
sub theme scaffolding:Drush
maintained bySebastian Siemssen (fubhy) and MattSmith
(splatio)

52. MAGIC
Collaboration oof Aurora and Omega maintainers
Excluding core CSS/JS files
Backportof Drupal8 JavaScripthandling
Modernizr indicator
Move Javascriptto the footer

53. BREAKPOINTS & PICTURE
Responsive images using the <picture>element(W3C
draft)
TellDrupalaboutyour breakpoints
Map breakpoints to image styles
Use in a field formatter
Backported from Drupal8 (responsive_image)

54. PICTURE: EXAMPLE
<picture>
<sourcemedia="(min-width:45em)"srcset="large.jpg">
<sourcemedia="(min-width:18em)"srcset="medium.jpg">
<imgsrc="small.jpg"alt="Thepictureelementisfun.">
</picture>

55. WRAPPING UP
The juryis stillout.
You can join the jury.
Justdon'tbe scared.

56. THANK YOU
for being awesome
QUESTIONS?