Hardboiled Front End Development — Found.ation

download Hardboiled Front End Development — Found.ation

of 46

  • date post

    19-Aug-2014
  • Category

    Engineering

  • view

    2.393
  • download

    5

Embed Size (px)

description

A presentation I gave at Found.ation in Athens, about Front End Development best practices.

Transcript of Hardboiled Front End Development — Found.ation

  • berlin amsterdam san francisco stuttgart edenspiekermann_ Hardboiled Front End Development Found.ation talk 10th June 2014
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ Introduction Web Developer at Edenspiekermann. ! Previously: Head of Design @ DailySecret.com. Head of Front End @ Liberis Publications. ! Enjoys: CSS architecture. Refactoring code. 2
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ Contents 1. CSS Architecture OOCSS. Design modules, not pages. BEM. Protecting scope. Hacking CSS. Sass. Enabling modularity. Pitfalls of extending and using mixins. Living Styleguides. Keeping the mess observable. Best Practices. Class prefixes, shame.css, z-index.css. ! 2. Javascript Modularity Modularity. Breaking the $(document).ready long file into modules. Module Tools. Including functionality on demand with requireJS. Automating tasks. Automating with Grunt and managing packages with Bower. Frameworks. Angular, Backbone, a very quick overview. Little useful tools. Backbone.wreqr, waypoints, owl carousel. 3
  • edenspiekermann_ CSS ARCHITECTURE
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture CSS Advantages: Fast, quick to put something out. Small learning curve. Easy to override defaults. ! Problems with CSS: All the above :-). No inherent modularity. No scope. Specificity. 5
  • edenspiekermann_ Think Modular
  • 7
  • 8
  • 9
  • 10
  • edenspiekermann_ Tools for modularity: SMACSS OOCSS
  • edenspiekermann_
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture ! Decouple Structure from Skin. Modifier classes. File structuring flexibility. Tackle Specificity issue (completely). 14 SMACSS OOCSS
  • edenspiekermann_ What about specificity?
  • edenspiekermann_ http://designshack.net/articles/css/what-the-heck-is-css-specificity/
  • edenspiekermann_ http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
  • edenspiekermann_ http://cssspecificity.com/
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ body {! font-size: 100%;! font-family: Georgia, serif;! }! ! .o-chosen-select-box.chosen- container,.m-font- autocomplete{display:inline- block;position:relative;vertical- align:middle}.o-chosen-select- box .chosen-single,.m-font- autocomplete__input{background- color:#f9f8f3;color:#262626;-webkit-box- sizing:border-box;-moz-box-sizing:border-box;box- sizing:border-box;border:4px solid #fff;display:block;cursor:pointer;height:2.5em;line- height:1.25em;padding:0 2.125em;-webkit-transition:background- color 150ms,border-color 150ms;-moz-transition:background-color 150ms,border-color 150ms;! .l-modal__tooltip__pane{z-index:30}.o-error{z-index:10}.o- pulldown-panel__list{z-index:10}.l-tryout-page__canvas{z-index: 1}.l-tryout-page__header{z-index:30}.m-tryout- textblock__action{z-index:20}.m-tryout- textblock__editable{z-index:20}.m-tryout- textblock__placeholder{z-index:10}.m-font- autocomplete__dropdown,.o-chosen-select- box{z-index:40}.l-tryout-page__template- links,.l-tryout-page__bgimage-info{z- index:50}.l-tryout-page__meta-links{z- index:10000}.m-tryout-template-links centered{z-index:10}! ! #footer .left-column .article ul.links > li a img {! border-color: #0A0;! }! CSS Architecture Scientifically proven fact: we cant keep track of specificity throughout a CSS document. 19
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ .o-square {! height: 100px;! width: 100px;! }! ! .o-square--black {! background-color: black;! }! ! .o-square--green {! background-color: green;! }! ! .o-square__inner-circle {! border-radius: 100%;! }! ! .o-square__inner-circle--blue {! background-color: blue;! }! CSS Architecture Enter BEM. BEM stands for Block Element Modifier. Works like this: .block _ _ element - - modifier Self explanatory in both HTML & CSS. Shields objects scope. ! Things to remember: Never nest selectors (to ensure specificity == 1). Always & only, use classes. One object per file. 20
  • edenspiekermann_ Living Styleguides
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture Advantages: Nice overview of all your objects. Enforces good practices. Enhances developer designer collaboration. Helpful for context free development. ! Challenges: Hard to initially set up. If not set up correctly, can have dulicate views in production & styleguide. Same object, different data issues. ! Tools: https://github.com/kneath/kss http://livingstyleguide.org http://kaleistyleguide.com/ 22
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ gem install kss CSS Architecture Setting up KSS. Install gem. 23
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ @styleguides = Kss::Parser.new(/ public/css)! CSS Architecture Setting up KSS. Install gem. Parse CSS folder into an object. 24
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture Setting up KSS. Install gem. Parse CSS folder into an object. Iterate object in view. 25 - @styleguides.each do |styleguide|! - [...]!
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ /*! The global button object.! ! .button - Primary button.! .button--green - Green variation.! ! Styleguide 1.0 Button! */! ! .button {! height: 20px;! text-align: center;! width: 100px;! }! ! .button--green {! background-color: green;! }! CSS Architecture Setting up KSS. Install gem. Parse CSS folder into an object. Iterate object in view. Use the magic KSS syntax. 26
  • edenspiekermann_ Automating with Sass.
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture Sass enables: Modular file structure with @import globbing. Eliminating inconsistencies. Vars for colours, typographic rythm units, breakpoints, animation durations. ! Pitfalls: Mixins print content inside of rule. Duplicate content. Extends group selectors where used. Rules are moved out of intended place, watch out for split CSS files. Slow compiling of too many files, in Rails. Use libsass. 28
  • edenspiekermann_ Tips and Tricks.
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ CSS Architecture Tips: Helpful to prefix classes (o-, l-, m-), that way you recognize their type in markup. Prefix JS hooks with js-. That way HTML/CSS restructuring doesnt affect javascript functionality. Use is- for dynamic states, induced by JS. For different kinds of states, use BEM modifiers. Put all rushed code in shame.css. Always write reason of inclusion in comments. Keep all z-index values in z-index.css and always use increments of 10 or more. 30
  • edenspiekermann_ Ddddddemo CSS Architecture next.fontshop.com
  • edenspiekermann_ JS MODULARITY
  • Hardboiled Front End Development 10.06.2014edenspiekermann_ $(document).ready(function() {! ! $(window).on('resize', resizeHandler);! app.windowWidth = $window.width();! app.windowHeight = $window.height();! ! $(window).on("resizestart", function(){! app.vent.trigger('fs:resize-start', app.windowWidth, app.windowHeight);! }).on("resizestop", function(){! app.vent.trigger('fs:resize-stop', app.windowWidth, app.windowHeight);! });! ! //Scrolling event, debounced at 500ms! $(window).on("scroll", function(){! var scrollFunc = _.debounce(function() {! app.vent.trigger('fs:scroll', $ (this).scrollTop());! }, 500);! scrollFunc();! });! ! // Show the targeted offscreen panel by emitting the offscreen-panel:show event.! // Creates one offscreen panel if it doesn't exist already (as in editor or languages list)! $(document).on('click', ".js-show- offscreen-panel, .js-family-finder- trigger", function(event){! Breaking long script files into chunks Traditional approach: one long file Variable scope problems. Duplicate logic. Error prone. Impossible to maintain. 33
  • edenspiekermann_ Axiom: Projects will ALWAYS scale. https://w