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