Your SlideShare is downloading. ×
The backend-of-frontend Drupaljam 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

The backend-of-frontend Drupaljam 2014

758
views

Published on

Presentatie van Marc van Gend over de tools die gebruikt kunnen worden bij frontend ontwikkeling. Denk hierbij aan Sass, Compass, Grunt, Less, JSlint etc. …

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.

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
758
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?