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