Weather Fronts Warm Front Cold Front Stationary Front Occluded Front.
Hardboiled Front End Development — Found.ation
-
Upload
spiros-martzoukos -
Category
Engineering
-
view
2.412 -
download
5
description
Transcript of Hardboiled Front End Development — Found.ation
![Page 1: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/1.jpg)
berlin amsterdam san francisco stuttgart
edenspiekermann_
Hardboiled Front End Development
Found.ation talk
10th June 2014
![Page 2: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/2.jpg)
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
![Page 3: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/3.jpg)
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
![Page 4: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/4.jpg)
edenspiekermann_
CSS ARCHITECTURE
![Page 5: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/5.jpg)
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
![Page 6: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/6.jpg)
edenspiekermann_
Think Modular
![Page 7: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/7.jpg)
7
![Page 8: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/8.jpg)
8
![Page 9: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/9.jpg)
9
![Page 10: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/10.jpg)
10
![Page 11: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/11.jpg)
![Page 12: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/12.jpg)
edenspiekermann_
Tools for modularity: – SMACSS – OOCSS
![Page 13: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/13.jpg)
edenspiekermann_
![Page 14: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/14.jpg)
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
✓
×
✓
×
![Page 15: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/15.jpg)
edenspiekermann_
What about specificity?
![Page 16: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/16.jpg)
edenspiekermann_
http://designshack.net/articles/css/what-the-heck-is-css-specificity/
![Page 17: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/17.jpg)
edenspiekermann_
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
![Page 19: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/19.jpg)
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 can’t keep track of specificity throughout a CSS document.
19
![Page 20: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/20.jpg)
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 object’s scope. !
Things to remember: – Never nest selectors (to ensure specificity == 1). – Always & only, use classes. – One object per file.
20
![Page 21: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/21.jpg)
edenspiekermann_
Living Styleguides
![Page 22: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/22.jpg)
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
![Page 23: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/23.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
gem install kss
CSS Architecture
Setting up KSS. – Install gem.
23
![Page 24: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/24.jpg)
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
![Page 25: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/25.jpg)
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|! - [...]!
![Page 26: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/26.jpg)
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
![Page 27: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/27.jpg)
edenspiekermann_
Automating with Sass.
![Page 28: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/28.jpg)
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
![Page 29: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/29.jpg)
edenspiekermann_
Tips and Tricks.
![Page 30: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/30.jpg)
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 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
![Page 32: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/32.jpg)
edenspiekermann_
JS MODULARITY
![Page 33: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/33.jpg)
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){! 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
![Page 34: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/34.jpg)
edenspiekermann_
Axiom: Projects will ALWAYS scale.
https://www.flickr.com/photos/astrid/2583356797
![Page 35: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/35.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
...!! <script src="jquery.js"></script>! <script src="module1.js"></script>! <script src="module2.js"></script>! <script src="module3.js"></script>!! </body>! </html>!
Breaking long script files into chunks
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
![Page 36: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/36.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
define([
Breaking long script files into chunks
Better approach: Modularize everything – Create a new file and define a module.
36
![Page 37: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/37.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
define([! "jquery",! "jquery-ui"!],!function ($, jqueryUI) {!
Breaking long script files into chunks
Better approach: Modularize everything – Create a new file and define a module. – State its dependencies.
37
![Page 38: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/38.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
define([! "jquery",! "jquery-ui"!],!function ($, jqueryUI) {!! var init = function (options) {! //...implement logic! };!! init(options);!!});!
Breaking long script files into chunks
Better approach: Modularize everything – Create a new file and define a module. – State its dependencies. – Implement your logic.
38
![Page 39: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/39.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
JS Module Creation Tools
– requireJS. http://requirejs.org – Browserify. http://browserify.org – Webpack. http://webpack.github.io
39
![Page 40: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/40.jpg)
edenspiekermann_
Automating your workflow with off-browser JS.
![Page 41: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/41.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
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
![Page 42: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/42.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
{! "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
![Page 43: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/43.jpg)
A wee bit of JS frameworks & tools.
edenspiekermann_
![Page 44: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/44.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
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
![Page 45: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/45.jpg)
Hardboiled Front End Development 10.06.2014edenspiekermann_
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
![Page 46: Hardboiled Front End Development — Found.ation](https://reader033.fdocuments.in/reader033/viewer/2022051311/53f47d5a8d7f72c80e8b4a5f/html5/thumbnails/46.jpg)
berlin amsterdam san francisco stuttgart
edenspiekermann_
Thank you.
Spiros Martzoukos, Web Developer
tw @martzoukos
T +49 157 84340808
!
www.edenspiekermann.com