Refresh Tallahassee: The RE/MAX Front End Story
Upcoming SlideShare
Loading in...5
×
 

Refresh Tallahassee: The RE/MAX Front End Story

on

  • 531 views

Come join us downstairs at the Proof Brewing Company for another excellent evening of inspiration! Rachael Moore, the front-end lead on the new remax.com, 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 remax.com, 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.

Statistics

Views

Total Views
531
Slideshare-icon Views on SlideShare
531
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Refresh Tallahassee: The RE/MAX Front End Story Refresh Tallahassee: The RE/MAX Front End Story Presentation Transcript

    • Refresh TallahasseeRE/MAX Front End Story
    • function moore (you) { var me = { name: Rachael L Moore, tel: (646) 504-0616, tweet: @morewry }; return { success: you + me };}
    • Performance○ High availability○ Efficient use of resources○ Fast response○ Quick transfer & load times
    • Maintainability○ Easy to add new content○ Easy to move content○ Easy to remove content○ Easy to identify problem code
    • Thick Client○ Runs on client side○ Natural fit for web○ Lower server requirements○ Lowers cost○ Increases availability
    • Require.js○ Asynchronous file loader○ Based on CommonJS AMD proposal○ Important for performance○ Helps with maintainability
    • https://www.youtube.com/watch?v=eX1d6ugKd1gClick to play video -- Example of loadingfiles (particularly JS) asynchronously withRequire.js
    • Require.js Config○ baseUrl require.config({○ paths baseUrl: "/js/libs", paths: { "app": "/js/app", "jquery": "..." } });
    • Require.js Modules○ ID (optional) define(○ Dependencies id, [dependencies], array (optional) function(){ // callback○ Callback } function );
    • Backbone.js○ Lightweight○ Works with JSON○ Keeps back end data in sync with front end○ Provides structure for models & views
    • https://www.youtube.com/watch?v=zmRIBAKQToIClick to play video -- Example of backboneview and model in action
    • Backbone.js Models○ attributes○ initialize var Listing = Backbone.Model.extend({○ custom methods initialize: function() {}, custom: function() {} });
    • 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
    • Mustache○ Logic-less templates○ Hogan.js on client side○ Nustache on server side
    • https://www.youtube.com/watch?v=EFiilk2LQLMClick to play video -- Example of Hogan (clientside) and Nustache (server side) rending HTMLusing the same Mustache templates
    • Mustache Tags○ Variables○ Sections {{#pages}} ■ If (basically) <a href="{{url}}"> {{num}} ■ Loop </a> {{/pages}}
    • Sass○ Valid CSS is valid Sass○ Outputs plain CSS○ Provides valuable features to developers
    • Sass ImportCSS Sass@import "buttons.css" @import "buttons"Unlike CSS imports, Sass importsdont necessarily generateanother HTTP request.
    • Sass VariablesCSS Sass.error { .error { color: #d40015; color: $error-color;} }
    • 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; );} }
    • Sass PlaceholdersCSS Sass.error { %error { color: #d40015; color: $error-color;} }Placeholders are like classes,except they dont get outputuntil they are used.
    • 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;}
    • Sass + OOCSS = Awesome
    • Semantics○ Study of meaning○ "What is this?"○ Has > 1 answer
    • Content Semantics○ Document = HTML○ Internal Real estate agent class="agent"○ External A person, i.e. microformat hCard
    • Visual Semantics○ The vocabulary for CSS○ Two categories ■ Skeleton ■ Skin
    • Analyze the design
    • Identify SkeletonsStep 1: Find repeating structures"Abstractable layout patterns"
    • Skeletons○ Inline block text next to others: inline block layout○ Floating complex blocks next to others: grid layout display, float, position, width
    • Identify Skins2. Find repeating skins "Repeating visual qualities"
    • Skins○ Headings & Links: color, font○ Containers & Buttons: bg color & gradient, shadow, borders○ Iconscolor, background, border, text-shadow, box-shadow, border-radius, etc.
    • Identify ModulesStep 3: Find content modules"Verbally identifiable content"
    • Modules○ Search results ○ Listing○ Refine search toolbar○ Breadcrumbs
    • 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; }