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


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


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

edenspiekermann_

Tools for modularity: – SMACSS – OOCSS

edenspiekermann_


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

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

edenspiekermann_

http://cssspecificity.com/

http://cssspecificity.com/


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 can’t keep track of specificity throughout a CSS document.

19


.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 object’s scope. !

Things to remember: – Never nest selectors (to ensure specificity == 1). – Always & only, use classes. – One object per file.

20

edenspiekermann_

Living Styleguides


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

https://github.com/kneath/kss

http://livingstyleguide.org

http://kaleistyleguide.com/


gem install kss

CSS Architecture

Setting up KSS. – Install gem.

23


@styleguides = Kss::Parser.new(“/public/css“)!

CSS Architecture

Setting up KSS. – Install gem. – Parse CSS folder into an object.

24


CSS Architecture

Setting up KSS. – Install gem. – Parse CSS folder into an object. – Iterate object in view.

25

- @styleguides.each do |styleguide|! - [...]!


/*!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.


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.


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 doesn’t

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_

DdddddemoCSS Architecture

next.fontshop.com

http://next.fontshop.com

edenspiekermann_

JS MODULARITY


$(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){! var $this = $(this);!

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://www.flickr.com/photos/astrid/2583356797

https://www.flickr.com/photos/astrid/2583356797


...!! <script src="jquery.js"></script>! <script src="module1.js"></script>! <script src="module2.js"></script>! <script src="module3.js"></script>!! </body>! </html>!


Alternative approach: Split & Include manually – Too much manual labour. – How do you handle common dependencies? – Conflicts in the global object. – Order of loading is important.

35


define([


Better approach: Modularize everything – Create a new file and define a module.

36


define([! "jquery",! "jquery-ui"!],!function ($, jqueryUI) {!


Better approach: Modularize everything – Create a new file and define a module. – State its dependencies.

37


define([! "jquery",! "jquery-ui"!],!function ($, jqueryUI) {!! var init = function (options) {! //...implement logic! };!! init(options);!!});!


Better approach: Modularize everything – Create a new file and define a module. – State its dependencies. – Implement your logic.

38


JS Module Creation Tools

– requireJS. http://requirejs.org – Browserify. http://browserify.org – Webpack. http://webpack.github.io

39

http://webpack.github.io

edenspiekermann_

Automating your workflow with off-browser JS.


module.exports = function(grunt) {!! // Load libs! grunt.loadNpmTasks('grunt-watch');! grunt.loadNpmTasks('grunt-jshint');! grunt.loadNpmTasks('grunt-requirejs');! ! // Project configuration.! grunt.initConfig({! pkg: '<json:package.json>',! jshint: {! options: {! curly: true,! eqnull: true,! browser: true,! sub: true,! boss: true! }! }! ! // Define task.! grunt.registerTask('syntax', ['jshint:src']);};!

Automating tasks with Grunt (http://gruntjs.com)

Things you can do: – Get immediate feedback on syntax errors. – Live reload project. – Minify, uglify, pack code. – Also, use requireJS optimizer. – libSass. Blazingly fast Sass compilation. – Image compression. –Control everything from one config file: gruntfile.js !

– Alternative: Gulp (http://gulpjs.com). Lot of buzz lately.

41

http://gruntjs.com

http://gulpjs.com


{! "name": "Fontshop Relaunch",! "version": "1",! "dependencies": {! "fittext": "",! "jquery": "1.11",! "underscore": "",! "backbone": "",! "backbone.wreqr": "",! "backbone.marionette": "",! "modernizr": "",! "picturefill": "",! "jquery-waypoints": "",! "jquery-sortable": "",! "OwlCarousel": "",! "jasmine.async": "",! "angular": "",! "angular-chosen-localytics": "",! "angular-local-storage": "",! "ng-clip": "",! "zeroclipboard": ""! }!}!

Manage Dependencies with Bower (http://bower.io)

Things you can do: – Manage dependencies from one file. – You can specify version of scripts. – You can change folder (to fit your folder structuring). !

Things you can’t do: – Include in page automatically. Use requireJS for

that :).

42

http://bower.io

A wee bit of JS frameworks & tools.

edenspiekermann_


Backbone and Angular in Fontshop.

1. Backbone – FS wasn’t an SPA. Used Backbone as a structuring tool for our JS modules. – Helpful events object, this.$(“…”) selector, initializers. – Create multiple instances easily. – Enforces good OO practices. !

2. Angular – Used it in the tryout (http://next.fontshop.com/tryout) section. – No boilerplate code. – Provides one point of change (Model). – Very quick to set functionality up.

44

http://next.fontshop.com/tryout


Some small favorite scripts :)

Backbone.wreqr (https://github.com/marionettejs/backbone.wreqr) – True events based apps. – Enable true modularity. !

Waypoints (http://imakewebthings.com/jquery-waypoints) – No more scrolling window, object, offset calculations. – Also, sticky headers, easily done. !

owlCarousel (http://www.owlgraphic.com/owlcarousel) – Touch based (draggable). – Responsive be default. – Uses CSS 3D transforms, where possible. !

45

https://github.com/marionettejs/backbone.wreqr

http://imakewebthings.com/jquery-waypoints

http://www.owlgraphic.com/owlcarousel

berlin amsterdam san francisco stuttgart

edenspiekermann_

Thank you.

Spiros Martzoukos, Web Developer

tw @martzoukos

T +49 157 84340808

!

[email protected]

www.edenspiekermann.com

mailto:[email protected]?subject=

http://www.edenspiekermann.com

Hardboiled Front End Development — Found.ation

Engineering

Transcript of Hardboiled Front End Development — Found.ation