the backend-of-frontend drupaljam 2014
DESCRIPTION
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.TRANSCRIPT
![Page 1: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/1.jpg)
THE BACKENDOF FRONTEND
Marc van Gend
DrupalJam 2014
![Page 2: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/2.jpg)
today, we're going to talk about
COOKINGOK. Not really.
![Page 3: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/3.jpg)
first, let's talk about
YOU & MEShow 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 at Triquanta, Amsterdam, NL
![Page 4: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/4.jpg)
today, we're going to talk about
FRONT ENDDEVELOPMENT
Notepad
Front end development is changing rapidly.
dependencies (libraries)naming thingsinconsistencies (IE, anyone?)maintainability
![Page 5: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/5.jpg)
SOLUTION?Install RubyInstall GemsInstall NodeJSInstall PackagesRun it
If it breaks... Install more.
![Page 6: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/6.jpg)
SCARY STUFFLet's just stick with notepad?
Choose what works for you.
![Page 7: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/7.jpg)
but seriously:
FRONTEND = COOKINGProcessing and combining ingredients in the right order.
![Page 8: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/8.jpg)
INGREDIENTSHTMLCSSJavascript
FontsSVGFlash
![Page 9: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/9.jpg)
BEING A FRONT ENDCHEF
Recipes … LibrariesUtensils … ToolsCuisine … Methodology
![Page 10: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/10.jpg)
TODAY'S MENUMethodology, Tools & Libraries:
Stuff that works for meSome practical examplesAlternatives that work for othersA peek into the futureHow it's used in Drupal
![Page 11: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/11.jpg)
METHODOLOGY (CUISINE)
HAVING A STRATEGY FOR QUALITY
![Page 12: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/12.jpg)
QUALITYModularReusableUnderstandablePerformantCross-browser / Cross-device
![Page 13: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/13.jpg)
HTML: SEMANTICMARKUP
Nothing new, but we're getting closer
HTML 5 adoption is increasing
![Page 14: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/14.jpg)
CSS: GET ORGANIZEDOOCSS: Object Oriented CSSSmacss: Scalable and Modular Architecture for CSSBEM: Block, Element, Modifier
![Page 15: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/15.jpg)
CSS: OOCSSAbstracting css into classes
.button { background: red; padding: 10px;}
<input type="submit" class="button">Submit</input><a class="button">Subscribe now</a>
Not very semantic, not Drupal friendly
Nicole Sullivan, http://www.stubbornella.org
![Page 16: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/16.jpg)
CSS: BEMBlockElement ( __ )Modifier ( -- )
.menu {}
.menu__item {}
.menu__item--active {}
.block--collapsed__title {}
Still not Drupal friendly.
Yandex, http://bem.info
![Page 17: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/17.jpg)
CSS: SMACSSBaseLayoutModuleStateTheme
Expect to see them in D8! (*.libraries.yml)
Jonathan Snook, http://www.smacss.com
![Page 18: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/18.jpg)
JS: IT DEPENDSDeclaring asynchronously loading dependencies in your JS code
CommonJSAMD (Asynchronous Module Definition)
define(["jquery", "drupal"], function ($, Drupal) { Drupal.behaviors.myCustomBehavior = { attach: function (context, settings) { $('#my-element', context).doFunkyStuff(); }, };});
![Page 19: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/19.jpg)
JS: FUTUREDrupal 8: *.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
![Page 20: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/20.jpg)
TOOLS (UTENSILS)
UTENSILS DON'T END UP IN YOUR FOOD
![Page 21: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/21.jpg)
SASS$drupal-blue: #0073ba;.drupal { color: $drupal-blue; a { color: darken($drupal-blue, 20%); }}
↧.drupal { color: #0073ba;}.drupal a { color: #003454;}
Reusable, maintainable, organized CSS.
![Page 22: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/22.jpg)
SASS: FUTURE 3.3maps ("associative arrays")a more flexible parent selector ( & )the @at-root directive
Expect updated libraries!
![Page 23: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/23.jpg)
SASS: ALTERNATIVESLessStylus
![Page 24: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/24.jpg)
COFFEESCRIPT"Sass for JavaScript"
for i in [0..5] console.log "Hello #{i}"
↧(function() { var i; for (i = 0; i <= 5; i++) { console.log("Hello " + i); }}).call(this);
![Page 25: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/25.jpg)
JSHINTDetect problems in JS code:
errorspotential errorscoding standards violationsoptimizations
![Page 26: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/26.jpg)
GRUNTNodeJS based task runner:
sass / scss changed → compile CSS → trigger LiveReloadready for release → re-compile CSS → JSHint → minify JS
templates: { files: [ 'template.php', 'templates/**' ] }
![Page 27: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/27.jpg)
GRUNT: ALTERNATIVESGuard, Like Grunt but Ruby
Gulp, faster than Grunteasier syntax
http://guardgem.org
http://gulpjs.com
![Page 28: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/28.jpg)
BUNDLERDependency management for ruby gems.
gem 'bundler', '~>1.5.2'gem 'compass', '~>0.12.2'gem 'singularitygs', '~>1.1'gem 'breakpoint', '~>2.0'
Usage:
$ bundle exec compass watch
![Page 29: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/29.jpg)
LIVERELOADAutomatically update your browserNo browser plugins when used with GruntEven works with IE9 in a VM!
function MYTHEME_css_alter(&$css) { // Force CSS to be added with link tags, rather than @import. // Otherwise, Chrome + inspector + livereload = crash. foreach ($css as $key => $value) { $css[$key]['preprocess'] = FALSE; }}
![Page 30: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/30.jpg)
BUT WAIT, THERE'SMORE!
BOWERFront end package manager, http://bower.io
YEOMANScaffolding tool for webapps, http://yeoman.io
ASSETICSymfony's asset manager,
![Page 31: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/31.jpg)
LIBRARIES (RECIPES)
TRIED AND TESTEDCOMBINATIONS OF INGREDIENTS
![Page 32: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/32.jpg)
JQUERY...and plugins
...and jQueryUI
![Page 33: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/33.jpg)
COMPASSLibrary of Sass mixins and extensions, .http://compass-style.org
create image spritescross-browser CSS
Ever wondered where Sass ends and Compass begins?
![Page 34: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/34.jpg)
COMPASS: EXAMPLE.box-shadow { @include box-shadow(red 2px 2px 10px);}
↧.box-shadow { -webkit-box-shadow: red 2px 2px 10px; -moz-box-shadow: red 2px 2px 10px; box-shadow: red 2px 2px 10px;}
![Page 36: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/36.jpg)
SUSYA Sass-based semantic grid system, http://susy.oddbird.net
No more:
<div id="main" class="grid_6 prefix_2 suffix_4"> What if you have only 4 columns on mobile?</div>
![Page 37: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/37.jpg)
SUSY: EXAMPLE$susy: ( columns: 7, gutters: 1/5,);#page { @include container(80em); }#main { @include span(last 5); }
![Page 38: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/38.jpg)
SUSY: FUTURESusy 2 is here!
SUSY: ALTERNATIVESSingularity GS, Zen Grids, ...
http://singularity.gshttp://zengrids.com
![Page 39: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/39.jpg)
BREAKPOINTEasy media queries with Sass, http://breakpoint-sass.com/
Used by grid systems like Susy and Singularity.
![Page 40: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/40.jpg)
BREAKPOINT: EXAMPLE$breakpoint-medium: 500px;.foo { padding: 10px; @include breakpoint($breakpoint-medium) { padding: 20px; }}
↧.foo { padding: 10px; }@media (min-width: 500px) { .foo { padding: 20px; }}
![Page 41: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/41.jpg)
MODERNIZRHTML5 and CSS3 feature detection, http://modernizr.com
Drupal 8: in core.
![Page 42: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/42.jpg)
MODERNIZR: EXAMPLECSS:
.multiplebgs body { background: url(background-1.png) top left repeat-x, url(background-2.png) bottom left repeat-x;}
JS:
if (Modernizr.geolocation) { // Do geolocation stuff...}
![Page 43: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/43.jpg)
BUT WAIT, THERE'SMORE!POLYFILLS
HTML5 shiv, - D8 coreRespond JS,
https://code.google.com/p/html5shivhttps://github.com/scottjehl/Respond
DATA VISUALIZATIONRaphaël JS, Processing JS,
http://raphaeljs.comhttp://processingjs.org
![Page 44: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/44.jpg)
WAIT, THERE'S STILLMORE!
JS-BASED MVC FRAMEWORKSBackbone JS (& Underscore), - D8 coreAngular JS,
http://backbonejs.orghttp://angularjs.org
JS SCRIPT LOADERSRequire.js, Browserify, JS script loaders in D9: drupal.org/node/1033392
http://requirejs.orghttp://browserify.org
![Page 45: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/45.jpg)
DRUPALCan I start using this tomorrow?
![Page 46: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/46.jpg)
CLEAN(ER) MARKUPDo yourself a favor!
Fences, Display Suite, Certain base themesViews configuration
https://drupal.org/project/fenceshttps://drupal.org/project/ds
![Page 47: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/47.jpg)
CLEAN(ER) MARKUP: FUTUREDrupal 8 says (drupal.org/node/1833912):
Use classes for css
<div class="highlight">I will be styled</div>
Use data attributes for JS.
<div data-animation="fade-in">I will be animated</div>
![Page 48: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/48.jpg)
JQUERY UPDATETip: use 7.x-2.x-dev
includes 1.9 and 1.10different jQuery version for admin pages
![Page 49: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/49.jpg)
BASE THEMESPre-configured best-practice powerhouses.
![Page 50: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/50.jpg)
BASE THEMES: AURORAGrunt (opt-in)Bower (opt-in)BundlerLiveReloadSingularitysub theme scaffolding: Aurora Gemmaintained by Sam Richards (snugug, Singularity) and IanCarrico (ChinggizKhan)
![Page 51: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/51.jpg)
BASE THEMES: OMEGAGrunt and GuardBowerBundler and RVMLiveReloadSusysub theme scaffolding: Drushmaintained by Sebastian Siemssen (fubhy) and Matt Smith(splatio)
![Page 52: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/52.jpg)
MAGICCollaboration oof Aurora and Omega maintainers
Excluding core CSS/JS filesBackport of Drupal 8 JavaScript handlingModernizr indicatorMove Javascript to the footer
![Page 53: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/53.jpg)
BREAKPOINTS & PICTUREResponsive images using the <picture> element (W3C
draft)
Tell Drupal about your breakpointsMap breakpoints to image stylesUse in a field formatterBackported from Drupal 8 (responsive_image)
![Page 54: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/54.jpg)
PICTURE: EXAMPLE<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="medium.jpg"> <img src="small.jpg" alt="The picture element is fun."></picture>
![Page 55: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/55.jpg)
WRAPPING UPThe jury is still out.
You can join the jury.
Just don't be scared.
![Page 56: The backend-of-frontend Drupaljam 2014](https://reader034.vdocument.in/reader034/viewer/2022051819/54c760124a795918288b4580/html5/thumbnails/56.jpg)
THANK YOUfor being awesome
QUESTIONS?