Front End Development

Day 1
Pascal Rettig / CTO at Fundraise.com / @cykod
http://bitly.com/bss-frontend

2-Day schedule - Day 1

What is the web?
What does front end mean?
The Ages of the Web
What is the role of the client?
HTML5 & Semantics
CSS, Styling & best practices
Bootstrap / Boilerplate
JavaScript the language
jQuery
Ajax
Exercise

2-Day schedule - Day 2

Client side templating
OOP Patterns in JavaScript
Debugging JavaScript
Front End / Back End architectures
Structuring your Application
Intro to Backbone
Integrating with Kinvey
Building a music-twitter clone

What is the Web?

The world wide web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks.

What can you do
on the web?

Just about anything...It's no longer just sites of text. Bookcase

The web is....

Whatever you want to build.

The Good:

If you can dream it,
you can build it
...and deliver it to Billions of people instantly

The Bad:

There's a lot to learn

The Ages of the Web

1991-1998: The HTML Age
1999-2005: The Lamp Age
2006-2009: The Ajax Age
2010-??: The JavaScript Age
Source: MetaMarkets

What is
"Front end"?

A set of technologies, guided by standards used on the client.

Front-end technologies

HTML
CSS
JavaScript
Data-transport (XML,JSON, HTML)

What's the point of each?

HTML - Semantics, Content, Information, Data
CSS - Layout and Styling
Javascript - Create Dynamism, interaction
Data-transport - Transmit information, transform into HTML w/ JavaScript

What is
"The Client"?

Usually - the browser (Chrome, Firefox, Safari, IE)

What does the client do (simplified)?

Look-up a domain, get an IP address, make a HTTP request, make sub requests, download a page ...

nslookup reddit.com
...

telnet 204.245.162.17 80
Trying 204.245.162.17...
Connected to a204-245-162-17.deploy.akamaitechnologies.com.
Escape character is '^]'.
GET / HTTP/1.1
Host: www.reddit.com

...

.. what does the client do (cont.)?

Parses the page, creates the DOM
Start downloading assets in parallel (to a per domain limit)
Executes JavaScript as it come across it (page stops rendering at JavaScript)
Finishes parsing DOM / JavaScript
Fires a DOM Ready event (depends on browser)
Finishes downloading pages
Fires window.onload

HTML

Hypertext Markup Language

HTML is a markup language, which means you're annotating (marking up) plain text to give it structure and meaning, similar to the way you would underline or make notes in a book.

HTML "1.0"

Original draft from 1992
20 Tags, including: section, h1-h6, p, a, menu, ul, ol, dir, li, dl dt, dd
How stuff was displayed was left up to the browser
Was more concerned with “Semantic” markup of documents

The Browser War, Round 1

Mozilla vs. Microsoft.
Started adding features fast and furious
Lots of incompatabilities

XHTML

Reaction to “looseness” of HTML
A XHTML page is a valid XML document
In XHTML Strict, document won’t render if there’s a mistake in the HTML
Boring & Painful...Coming down from the W3C

HTML5 and The New Hope

Previous versions of HTML came from the IETF (Now Defunct) and W3C
2004: There was a rebellion over XHTML (non-backwards compatible version of HTML)
WHATWG Formed (Apple, Mozilla, Opera)
2007: Adopts HTML5, drops XHTML

Last numbered version of HTML
Browser makers driving features
Feature coming fast and furious
Browser Wars Round #2

New in "HTML5"

New Semantic Tags
Hardware Accelerated 2D + 3D Graphics
CSS3 - visual goodies, transitions
Audio, Video
WebSockets
Local Storage
Offline Storage
SVG
New Events (touch, orientation, accel)
Geolocation (via GPS)
WebRTC

Attributes

Tell the browser about your content

HTML tags/elements can have attributes
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
<element name = "value">

Attributes

Available on almost tags

CLASS - this defines one or more CSS class names to assign to the tag.
ID - this defines a unique identifier that uniquely refers to this one tag.
STYLE - this defines the CSS styles to use for this particular element.
others: href, src, data-*

HTML5 Semantic Structure

HTML5 Semantic Tags

Most Common Tags

<head> = Meta Info
<body> = Site Content
<header> = Header (Head area of the site)
<nav> = Navigation (Menu/Navigation Area)
<section> = Section, organizing similar content
<article> = Article, self-contained piece of content
<footer> = Footer Area
<aside> = Content ancillary to the main content (sidebar, ad)

how you might use these tags

Writing Good HTML

"A Semantic Chop"

The Goals

HTML tags used in Meaningful ways
Validating markup
All dynamic interactions added “unobtrusively” (usually via jQuery)

Reminder! your HTML is not your design CSS Zen Garden

Cascading Style Sheets

Used for “presentation” of your HTML
Controls the styles of your page
Also Controls the layout of your page (where stuff is positioned)
Can have different styles different media formats (eg. print and screen) stylesheets for

Available selectors

name of element (e.g. p, div, h1)
class name preﬁxed with a period (.)
<div class=‘my-class-name’>..</div>
= .my-class-name { ... }
element id preﬁxed with a pound sign (#)
<div id=‘my-id’>..</div>
= #my-id{ ... }

Selectors

<style>

</style>

Selector combinations

Can have a declaration apply to multiple styles with a comma (,)
- .my-class-one, .my-class-two { color:red; }
Can “Cascade” styles with spaces
- ```
<div id='outer'><p> ... </p></div>
```
  #outer p { color:red; } /* only p's inside of outer */
Can select only "child" styles with spaces
- ```
<div id='outer'><div><div> ... </div></div></div>
```
  #outer > div { background-color:red; } /* only div's that are direct children of outer */
Psudeo-classes that apply to elements in certain conditions
- a:hover{ color:blue; } /* only links we are hovering over */
  a:visited> { color:red; } /* links we've visited already */
  p:first-child > { color:red; } /* the first paragraph in a container */
Also can select by arbitrary attributes
- input[type=radio]{ color:blue; } /* only radio buttons */

Selector Combination Exercise

<style>

</style>
<header>
  <h1>My Site!</h1>
  <nav><ul>
    <li><a href='#'>Link 1</a></li>
    <li><a href='#'>Link 2</a></li>
  </ul></nav>
</header>

<section id='content'>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>
  <article class='blog-post'>
    <h1>Blog Post 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac elit at nisl sagittis consequat sed eget tellus. Aliquam gravida, nunc sit amet viverra dictum, nibh justo semper massa</p>
  </article>

</section>
<footer>
  <a href='#'>Link 1</a> | <a href='#'>Link 2</a>
</footer>

Cascading - What Color?

<style>
  p { color:red;}
  .blue { color:blue; }
  #menu p { color:black; }
</style>

<div id="menu">
  <p class='blue'>This is the paragraph</p>
</div>

Cascading Hierarchy: 999

Inline style (those defined directly with a style='....' attribute in the tag)
Number of ID selectors (hundreds digit)
Number of Class selectors (tens digit)
Number of tag selectors (ones digit)
Order of appearance last to first
Style inheritance

Laying out a page w/ CSS

You're on your own...

CSS Transitions Example

More Examples

<style>
  #box {
    transition: background-color 2s;
    -moz-transition: background-color 2s;
    -webkit-transition: background-color 2s;
    -ms-transition: background-clor 2s;
    -o-transition: background-color 2s;
    width:50px;
    height:50px;
    background-color:green;
  }

  #box:hover {
    background-color:red;

  }
</style>
<div id='box'></div>

CSS3 Animations

Are defined with keyframes
Have a name
Can have a number of other properties including direction, repeat, duration
See the spec

CSS3 Animations Example

You'll need all your prefixes here! (-webkit, -moz, -ms) - only showing webkit for brevity

<style>

  @-webkit-keyframes coloranim {
    0% {
      background-color:green;
    }
    50% {
      background-color:red;
    }
    100% {
      background-color:blue;
    }
  }

  #box:hover { 
    -webkit-animation-name:none;
  }

  #box {
    background-color:black;
    width:50px;
    height:50px;
    -webkit-animation-name: coloranim;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction:alternate;
    -webkit-animation-timing-function: ease-in-out;
  }
</style>
<div id='box'></div>

HTML / CSS Best practicies

1.Organizing Your CSS

Start with your reset
Set your body
Set your base element styles (p, h1, h2, blockquote)
Set your reusable class styles
Set your layout styles
Set your module styles (additional sub-themes like blogs,custom pages, etc )

Use a pre-processor

Pre-processor will let you write reusable code with abstractions.

LESS - Less CSS
Sass - Syntactically Awesome Stylesheets

html5 boilerplate

understand and use! (what you need)

Twitter Bootstrap

Don't reinvent the wheel!

A Little Demo

The goal is to understand everything in here by the end of class today

<script>
  $(function() {
  var images = [
    { img: "images/image1.jpg", 
      title: "This is a drop",
      url: "http://www.google.com",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image2.jpg", 
      title: "Dog here",
      url: "http://www.petfinder.com",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image3.jpg", 
      title: "Some sort of building",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image4.jpg", 
     title: "Nightscape",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" }
    ];
  
  $.each(images,function() {
    var imageInfo = this;
    
    var img = $("<img>").attr({'src' : imageInfo.img,
                     'width' : 128 }).data('properties',this);
    img.click(function() {
      var url;
      if(url = $(this).data('properties').url) {
       window.open(url,"mywin");
      } else {
       window.open(this.src,"mywin","status=0,toolbar=0,width=400,height=400");
      }
    });
    
    img.hover(function() {
      $(this).addClass("selected");
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 0.4});

      $("#details").show();
      $("#title").text(imageInfo.title);
      $("#description").text(imageInfo.description);

    },function() {
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 1.0});
      $(this).removeClass("selected");
      
      $("#details").hide();
    });

    img.appendTo("#thumbnails");
  });
  
});
  
</script>

<section id='thumbnails'>
  
</section>
<section id='details' style='display:none;'>
<h2>Title: <span id='title'></span></h2>
<p>Description: <span id='description'></span></p>
</section>

<style>
  #thumbnails img {
    margin:10px;
    border:4px solid white;
  }
  
  #thumbnails img:hover {
    border-color:#CCC;
  }
</style>

Javascript Housekeeping

<script>
  // Two double slashes are one line comments

  /* 
     Slash star, star slash are multi-line comments
   */

  // Statements should end in a semi-colon:
  alert("Statement 1");
  alert("Statement 2");
</script>

Hello World!

Call the built in 'alert' function and have it say "Hello World!" We don't use this all that often (it's ugly) - but it's really useful for debugging.


  <script>
     // Function call to Alert goes here
  </script>

Our friend the console and console.log

Puts a result in the console - use Chrome or Firebug (must be open)


  <script>
     console.log(10);
  </script>

Variables

Let's do some math and some string manipulation and write out to the console.

  <script>
     var a = 10;
     var b = 5;

     // b += 10;

     console.log("A: " + a);
     console.log("B: " + b);
     console.log("A + B: " + (a + b))

  </script>

Functions

Created with the "function" keyword, create reusable pieces of functionality.

  <script>

    function sqr(num) {
       // call console.log on the square of num
    }

    sqr(10); // Should log 100
    sqr(5);  // Should log 25
    sqr(4);  // Should log 16
  </script>

Scope

You can only use variables that are defined in the scope you call them.

  <script>
     var a = 10;

     function myFunc() {
      var c = 200;

       console.log("in myFunc A: " + a);
       console.log("in myFunc C: " + c);
     }
     myFunc();

     console.log("A: " + a);
     console.log("C: " + c);
  </script>

Returning from Functions

Use the return keyword to pass a value back to whatever called the function

  <script>

    function sqr(num) {
       // return the square of the number
    }

    console.log(sqr(10)); // Should log 100
    alert(sqr(5));  // Should alert 25

    var value = sqr(sqr(4));  

    alert(value);  // What is this?
  </script>

Timeouts

we can use setTimeout to have something happen later, try it

  <script>

    var delay = 5000; // Delay in MS

    function callback() {
         alert("Timer went off!");
    }

    setTimeout(callback,delay);

  </script>

Anonymous functions, callbacks

We don't have to give our callback function a name, we can do it anonymously

  <script>


    setTimeout(function() {
      console.log('Timer1');
    },5000);

    // Add a second timer, called 5 second after the first

  </script>

Why callbacks?

A lot of stuff on the web happens "Asynchronously" - AJAX, user actions, etc

  <button id='my-button'>Click me Yo!</button>
  <script>

    var clickCount = 0;

    // This here is some jQuery, don't worry about it
    // We'll cover it in a few slides.
    $("#my-button").click(function() {
      clickCount += 1;

      alert("Time's I've been clicked:" + clickCount);
    });
  </script>

Arrays

Usually created with the bracket [ ] operator:
```
var arr = [ 10, 20, 30 ];
```
Pull out a value using square brackets [] starting at 0:
```
arr[0] // 10
arr[1] // 20
```
get the number of entries with .length
```
arr.length // 3                
```

Playing with arrays

  <script>

    var myArray = [ 0, 10, 20, 30, 40 ];

    console.log("myArray[2] is:" + myArray[2]);

    var index = 2;

    // Using a variable as an index
    console.log("myArray[" + index + "] is:" + myArray[index]);

    // Showing all variable values with jQuery $.each and a callback
    // Stored in this
  /*  $.each(myArray,function(idx) {
      console.log("myArray[" + idx + "] is:" + this);
    }); */

  </script>

Objects

A way to store data and methods together.
Array was an example of a built in object
Can create with JSON notation:
```
var obj = { a: 1, b: 2 };
```
Access the same as arrays - with square brackets.
```
obj['a'] // 1 
obj['b'] // 2
```
Can also access with the dot operator
```
obj.a // 1
obj.b // 2
```
Can also have functions as properties
Those functions can use the this property when called

Objects

  <script>
    var myObject = { 'a' : 10,
                     'b' : 'Stringer',
                     'c' : 20
                   };

   // Try pulling out various pieces of myObject using
   // both square brackets and the dot operator

    alert(myObject.a);

  </script>

Conditionals

Things in javascript are either true or not true.
0, false, null, "" are all false
Everything else is true.

Use operands to check relationship between two values:

==, ===, <=, >=, !=

1 == 2 // false
1 == 1 // true

Basic conditionals:

```
if(condition) { }
```
```
if(condition) { } else { }
```
```
if(condition) { } else if { } else { }
```

Conditional Exercise

Use a conditional to check if a user confirmed a ok/cancel question. Then use prompt and test against a return value.

  <script>
    console.log(confirm("Really delete everything?"));
    console.log(prompt("Delete how many items?"));
  </script>

jQuery Basics

Everything is “namespaced” inside of the jQuery object, which is aliased with “$”
...which means everything you do in jQuery starts with a $
Uses CSS selectors for picking pieces of the DOM out.

Docs are your Friend

Get comfortable with docs.jquery.com

Loading jQuery

Include from a CDN or locally

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

Or

<script src='js/jquery.min.js'></script>

Need to make sure we have the file in the right location, can view in browser if there's a problem.

Using jQuery

Since we often include Javscript in the head of the document, we need to make sure we wait until the page is loaded before we use it. We can use the jQuery bind function to load stuff at the appropriate point.

<script>
$(document).on("ready",function() {
  // Dom Loaded
});
</script>

Why this is important..

<script>
  $("#header").html("Modified Header");
</script>
<h2 id='header'>A Header</h2>

Shorthand

Since this is so common, we can use a shorthand for this of $(function() { }) ...

<script>
$(function() {
  // Dom Loaded
});
</script>

Basic selection + manipulation

Let's try out $.text, $.html, $.hide, $.show, $.css, $.attr, $.addClass, $.hasClass, $.removeClass Selector Docs / Manipulation Docs

<script>
$(function() {


});
</script>
<header>
   <h1>Site Header</h1>
</header>
<nav id='main-nav'>
  <a href='#'>Item 1</a> <a href='#'>Item 2</a> <a href='#'>Item 3</a>
</nav>
<section>
  <article>
  <h1 class='article-header'>Title</h1>
  <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
  <article>
    <h1  class='article-header'>Title 2</h1>
    <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
</section>

Some basic DOM insertion

Let's try out creating elements with $(), then using $.before, $.after, $.append, $.prepend, $.wrap, $.appendTo, both with text and elements.

<script>
$(function() {


});
</script>
<header>
   <h1>Site Header</h1>
</header>
<nav id='main-nav'>
  <a href='#'>Item 1</a> <a href='#'>Item 2</a> <a href='#'>Item 3</a>
</nav>
<section>
  <article>
  <h1 class='article-header'>Title</h1>
  <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
  <article>
    <h1  class='article-header'>Title 2</h1>
    <p>Lorem Ipsum Dolor Sic Amet</p>
  </article>
</section>

Fun Stuff: Animation and transforms

$.fadeOut, $.fadeIn, $.slideDown, $.slideUp, $.toggle, $.stop, $.animate

<script>
$(function() {


});
</script>


<style>
  .box { 
    position:absolute; 
    width:100px; 
    height:100px;
    background-color:red;
    }

  #box2 { right:0px; }
</style>

<div class='box' id='box1'></div>
<div class='box' id='box2'></div>

Events

$.click, $.on, $.off, $.hover

<script>

$(function() {


});

</script>


<style>
  .box { 
    position:absolute; 
    width:100px; 
    height:100px;
    background-color:red;
    }

  #box2 { right:0px; }
</style>

<div class='box' id='box1'></div>
<div class='box' id='box2'></div>

Demo Revisited

The goal is to understand everything in here by the end of class today

<script>
  $(function() {
  var images = [
    { img: "images/image1.jpg", 
      title: "This is a drop",
      url: "http://www.google.com",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image2.jpg", 
      title: "Dog here",
      url: "http://www.petfinder.com",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image3.jpg", 
      title: "Some sort of building",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" },
    { img: "images/image4.jpg", 
     title: "Nightscape",
     description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum risus quam, commodo ac posuere non, facilisis et ligula. Praesent elementum sodales leo, non ultrices dolor cursus at. Suspendisse sed ipsum tempor est volutpat commodo nec quis libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit" }
    ];
  
  $.each(images,function() {
    var imageInfo = this;
    
    var img = $("<img>").attr({'src' : imageInfo.img,
                     'width' : 128 }).data('properties',this);
    img.click(function() {
      var url;
      if(url = $(this).data('properties').url) {
       window.open(url,"mywin");
      } else {
       window.open(this.src,"mywin","status=0,toolbar=0,width=400,height=400");
      }
    });
    
    img.hover(function() {
      $(this).addClass("selected");
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 0.4});

      $("#details").show();
      $("#title").text(imageInfo.title);
      $("#description").text(imageInfo.description);

    },function() {
      $("#thumbnails img:not(.selected)").stop().animate({opacity: 1.0});
      $(this).removeClass("selected");
      
      $("#details").hide();
    });

    img.appendTo("#thumbnails");
  });
  
});
  
</script>

<section id='thumbnails'>
  
</section>
<section id='details' style='display:none;'>
<h2>Title: <span id='title'></span></h2>
<p>Description: <span id='description'></span></p>
</section>

<style>
  #thumbnails img {
    margin:10px;
    border:4px solid white;
  }
  
  #thumbnails img:hover {
    border-color:#CCC;
  }
</style>

Putting it all together

Let's use two buttons to increase and decrease a counter.

  <button id='increase'>Increase</button>
  <button id='decrease'>Decrease</button>

  <div id='counter'>0</div>
  <script>

    var counterValue = 0;

    // Use the click method on $("#increase").click(function() { ... });
    // Use console.log to map the value

    // Next use the click method on #decrease to decrease the counter

    // Now use the html() method to set the value of coutner

    // Now make sure we don't go under 0 or over 10
  </script>

Plugins

Let's use the cycle plugin: http://jquery.malsup.com/cycle/ (images from http://lorempixel.com)

<html>
  <head>
    <!-- We include jquery -->
    <script src='dist/jquery.min.js'></script>
    <!-- We include the plugin -->
    <script src='dist/jquery.cycle.all.js'></script>
  </head>
  <body>
    <div id='slideshow'>
      <img src='images/image1.jpg'/>
      <img src='images/image2.jpg'/>
      <img src='images/image3.jpg'/>
      <img src='images/image4.jpg'/>
    </div>
    <script>
      $(document).ready(function() {
        $('#slideshow').cycle();
        });     
    </script>
  </body>

Ajax

$.ajax, $.get, $.post, $.getJSON

<script>
$(function() {

var ajax = $.get("names.json",function(data) {
  alert(data);
});

});

</script>

JSONp

Ajax is same-domain only. So there's a hack to pull data across domains called $.getScript

<script>
$(function() {
 var username = 'aplusk';
 var count = 10;
 // aplusk.json
 $.getJSON('http://twitter.com/statuses/user_timeline/' + username + '.json?callback=?',
	  function(data) {
		alert(data);
		console.log(data);
	  });
});
</script>

Project

Download Boilerplate
Download Bootstrap
Find a JavaScript API or two - perferably JSONp Programmable Web
Create a Mashup using Bootstrap to style

Front End Development

Day 1 Pascal Rettig / CTO at Fundraise.com / @cykod http://bitly.com/bss-frontend

2-Day schedule - Day 1

What is the web?

What does front end mean?

The Ages of the Web

What is the role of the client?

HTML5 & Semantics

CSS, Styling & best practices

Bootstrap / Boilerplate

JavaScript the language

jQuery

Ajax

Exercise

2-Day schedule - Day 2

Client side templating

OOP Patterns in JavaScript

Debugging JavaScript

Front End / Back End architectures

Structuring your Application

Intro to Backbone

Integrating with Kinvey

Building a music-twitter clone

What is the Web?

The world wide web is a system of interlinked hypertext documents accessed via the Internet. With a web browser, one can view web pages that may contain text, images, videos, and other multimedia and navigate between them via hyperlinks.

The Web is Content

What can you do on the web?

Just about anything...It's no longer just sites of text. Bookcase

The web is....

Whatever you want to build.

The Good:

If you can dream it, you can build it ...and deliver it to Billions of people instantly

The Bad:

There's a lot to learn

The Ages of the Web

1991-1998: The HTML Age

1999-2005: The Lamp Age

2006-2009: The Ajax Age

2010-??: The JavaScript Age

Source: MetaMarkets

What is "Front end"?

A set of technologies, guided by standards used on the client.

Front-end technologies

HTML

CSS

JavaScript

Data-transport (XML,JSON, HTML)

What's the point of each?

HTML - Semantics, Content, Information, Data

CSS - Layout and Styling

Javascript - Create Dynamism, interaction

Data-transport - Transmit information, transform into HTML w/ JavaScript

What is "The Client"?

Usually - the browser (Chrome, Firefox, Safari, IE)

What does the client do (simplified)?

.. what does the client do (cont.)?

Parses the page, creates the DOM

Start downloading assets in parallel (to a per domain limit)

Executes JavaScript as it come across it (page stops rendering at JavaScript)

Finishes parsing DOM / JavaScript

Fires a DOM Ready event (depends on browser)

Finishes downloading pages

Fires window.onload

HTML

Hypertext Markup Language

HTML "1.0"

Original draft from 1992

20 Tags, including: section, h1-h6, p, a, menu, ul, ol, dir, li, dl dt, dd

How stuff was displayed was left up to the browser

Was more concerned with “Semantic” markup of documents

The Browser War, Round 1

Mozilla vs. Microsoft.

Started adding features fast and furious

Lots of incompatabilities

XHTML

Reaction to “looseness” of HTML

A XHTML page is a valid XML document

In XHTML Strict, document won’t render if there’s a mistake in the HTML

Boring & Painful...Coming down from the W3C

HTML5 and The New Hope

Day 1
Pascal Rettig / CTO at Fundraise.com / @cykod
http://bitly.com/bss-frontend

What can you do
on the web?

If you can dream it,
you can build it
...and deliver it to Billions of people instantly

What is
"Front end"?

What is
"The Client"?

Last numbered version of HTML
Browser makers driving features
Feature coming fast and furious
Browser Wars Round #2

class name preﬁxed with a period (.)
<div class=‘my-class-name’>..</div>
= .my-class-name { ... }

element id preﬁxed with a pound sign (#)
<div id=‘my-id’>..</div>
= #my-id{ ... }