Your SlideShare is downloading. ×
Refresh Tallahassee: The RE/MAX Front End Story
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

Refresh Tallahassee: The RE/MAX Front End Story


Published on

Come join us downstairs at the Proof Brewing Company for another excellent evening of inspiration! Rachael Moore, the front-end lead on the new, has kindly agreed to share the story and take …

Come join us downstairs at the Proof Brewing Company for another excellent evening of inspiration! Rachael Moore, the front-end lead on the new, has kindly agreed to share the story and take a peek under the hood of this massive (and really nicely done) site. Among the likely topics of discussion are: Object-oriented CSS, CSS preprocessors, JavaScript frameworks, and the ins and outs of working with a distributed team.

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Refresh TallahasseeRE/MAX Front End Story
  • 2. function moore (you) { var me = { name: Rachael L Moore, tel: (646) 504-0616, tweet: @morewry }; return { success: you + me };}
  • 3. Performance○ High availability○ Efficient use of resources○ Fast response○ Quick transfer & load times
  • 4. Maintainability○ Easy to add new content○ Easy to move content○ Easy to remove content○ Easy to identify problem code
  • 5. Thick Client○ Runs on client side○ Natural fit for web○ Lower server requirements○ Lowers cost○ Increases availability
  • 6. Require.js○ Asynchronous file loader○ Based on CommonJS AMD proposal○ Important for performance○ Helps with maintainability
  • 7. to play video -- Example of loadingfiles (particularly JS) asynchronously withRequire.js
  • 8. Require.js Config○ baseUrl require.config({○ paths baseUrl: "/js/libs", paths: { "app": "/js/app", "jquery": "..." } });
  • 9. Require.js Modules○ ID (optional) define(○ Dependencies id, [dependencies], array (optional) function(){ // callback○ Callback } function );
  • 10. Backbone.js○ Lightweight○ Works with JSON○ Keeps back end data in sync with front end○ Provides structure for models & views
  • 11. to play video -- Example of backboneview and model in action
  • 12. Backbone.js Models○ attributes○ initialize var Listing = Backbone.Model.extend({○ custom methods initialize: function() {}, custom: function() {} });
  • 13. Backbone.js Views○ el (DOM var ListingDetail = Backbone.View.extend({ context) events: {○ events "click .btn": "qmToggle", },○ initialize initialize: function () {}, render: function () {},○ render qmToggle: function () {} });○ custom methods
  • 14. Mustache○ Logic-less templates○ Hogan.js on client side○ Nustache on server side
  • 15. to play video -- Example of Hogan (clientside) and Nustache (server side) rending HTMLusing the same Mustache templates
  • 16. Mustache Tags○ Variables○ Sections {{#pages}} ■ If (basically) <a href="{{url}}"> {{num}} ■ Loop </a> {{/pages}}
  • 17. Sass○ Valid CSS is valid Sass○ Outputs plain CSS○ Provides valuable features to developers
  • 18. Sass ImportCSS Sass@import "buttons.css" @import "buttons"Unlike CSS imports, Sass importsdont necessarily generateanother HTTP request.
  • 19. Sass VariablesCSS Sass.error { .error { color: #d40015; color: $error-color;} }
  • 20. Sass MixinsCSS Sass.error { .error { color: #d40015; color: $error-color; background-image: -webkit-linear-gradient(#fdf2f3, #f4bfc4); @include background( background-image: -moz-linear- linear-gradient(gradient(#fdf2f3, #f4bfc4); background-image: -o-linear- lighten($error-color, 95%),gradient(#fdf2f3, #f4bfc4); background-image: linear-gradient lighten($error-color, 75%)(#fdf2f3, #f4bfc4); ) background-color: #fdf2f3; );} }
  • 21. Sass PlaceholdersCSS Sass.error { %error { color: #d40015; color: $error-color;} }Placeholders are like classes,except they dont get outputuntil they are used.
  • 22. Sass ExtendCSS Sass.error, .button-delete {.button-delete { @extend .error; color: #d40015; } background-image: -webkit-linear-gradient(#fdf2f3, #f4bfc4); background-image: -moz-linear-gradient(#fdf2f3, #f4bfc4); background-image: -o-linear-gradient(#fdf2f3, #f4bfc4); background-image: linear-gradient(#fdf2f3, #f4bfc4); background-color: #fdf2f3;}
  • 23. Sass + OOCSS = Awesome
  • 24. Semantics○ Study of meaning○ "What is this?"○ Has > 1 answer
  • 25. Content Semantics○ Document = HTML○ Internal Real estate agent class="agent"○ External A person, i.e. microformat hCard
  • 26. Visual Semantics○ The vocabulary for CSS○ Two categories ■ Skeleton ■ Skin
  • 27. Analyze the design
  • 28. Identify SkeletonsStep 1: Find repeating structures"Abstractable layout patterns"
  • 29. Skeletons○ Inline block text next to others: inline block layout○ Floating complex blocks next to others: grid layout display, float, position, width
  • 30. Identify Skins2. Find repeating skins "Repeating visual qualities"
  • 31. Skins○ Headings & Links: color, font○ Containers & Buttons: bg color & gradient, shadow, borders○ Iconscolor, background, border, text-shadow, box-shadow, border-radius, etc.
  • 32. Identify ModulesStep 3: Find content modules"Verbally identifiable content"
  • 33. Modules○ Search results ○ Listing○ Refine search toolbar○ Breadcrumbs
  • 34. CombineHTML Sass<article class="listing"> .listing { @extend %skin-12; } .listing-head { @extend %grid-row; } <header class="listing-head"> .listing-title { <h1 class="listing-title" /> @extend %grid-unit; <dl class="listing-price /> @extend %text-14; </header> @extend %width-2of3; <div class="listing-body"> } .listing-price { <img class="listing-img"> @extend %grid-unit; <div class="listing-caption"> @extend %text-20; ... @extend %width-1of3; </div> } .listing-body { @extend %grid-row; } </div> .listing-img { @extend %grid-unit; }</article> .listing-caption { @extend %grid-last; }