The backend-of-frontend Drupaljam 2014

20 %
80 %
Information about The backend-of-frontend Drupaljam 2014
Technology

Published on May 5, 2014

Author: triquanta

Source: slideshare.net

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.

THE BACKEND OF FRONTEND Marc van Gend DrupalJam 2014

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

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

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

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

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

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

INGREDIENTS HTML CSS Javascript Fonts SVG Flash

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

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

METHODOLOGY (CUISINE) HAVING A STRATEGY FOR QUALITY

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

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

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

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

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

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

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(); }, }; });

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

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

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

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

SASS: ALTERNATIVES Less Stylus

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);

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

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

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

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

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; } }

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

LIBRARIES (RECIPES) TRIED AND TESTED COMBINATIONS OF INGREDIENTS

JQUERY ...and plugins ...and jQueryUI

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

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

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

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

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

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

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

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

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

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

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

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

DRUPAL Can I startusing this tomorrow?

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

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>

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

BASE THEMES Pre-configured best-practice powerhouses.

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)

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

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

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)

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

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

THANK YOU for being awesome QUESTIONS?

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

You've got mail! - Transactional E-mail @ DrupalJam 2014 ...

Home; Technology; You've got mail! - Transactional E-mail @ DrupalJam 2014 - Vincent van Scherpenseel
Read more

Victory of the Commons - Drupaljam 2013 Rotterdam - Technology

Victory of the Commons - Drupaljam 2013 Rotterdam Dec 25, 2014 Technology joost-de-valk
Read more

Aantekeningen Drupaljam 2014, Maarssen | Wunderkraut Nederland

The backend of frontend door Marc van Gend. De tijd dat je al je HTML, ... Drupaljam 2014, goed geregeld. Hulde aan de organisatie, ...
Read more

Drupal Give | Triquanta Drupal Specialists

This page is part of the Drupal give initiative. Modules, patches ... Triquanta was gold sponsor of DrupalJam 2014, ... The backend of frontend. Drupal Dev ...
Read more