Lightning Talk

SMACSS "smacks"

CSS Performance

Pseudo Selectors

JQuery Performance

Brackets (the editor)

AWS Quick Breakdown

SMACSS

Categorizing CSS Rules

1.  Base
    - html, body, form { margin: 0; padding: 0; }
    - input[type=text] { border: 1px solid #999; }
    - a { color: #039; }
    - a:hover { color: #03C; }
    - reset.css
2.  Layout
    - #header, #footer, #top-nav, #side-nav
    - .l-inline, .l-stacked, .l-flipped, .l-fixed
3.  Module (dont prefix since most common)
    - .grid, .example, .field, 
4.  State (mostly for javascript interaction)
    - .is-collapsed, .is-visible, .is-error
5.  Theme
    - .mod { border-color: blue; }

Don't use context to name your classes
(.newsBox, .newsInner, .newsList)

Resources

http://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.sitepoint.com/top-ten-css-tricks/

http://www.mezzoblue.com/css/cribsheet/

https://github.com/necolas/normalize.css

Selector Performance

Follow three simple guidelines to help limit the number of elements that need to be evaluated:

Use child selectors

:first-child, :nth-child, .nav > li, input[type=radio]

Avoid tag selectors for common elements

div > div > div > p

Use class names as the right-most selector

Styles are evaluated from right -> left

The difference between the best case and the worst case was 50ms

You should only have 6 different font sizes. After that the user doesn't care and your wasting extra styles

CSS Pseudo Refresher

[a]:link, :visited, :active, :hover

[input]:focus, :required, :enabled, :disabled

Element Pseudo Selectors

:first-letter	p:first-letter	Selects the first letter of every <p> element
:first-line	p:first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:nth-child	p:nth-child(even) (2n+1) or (odd)	Selects every <p> elements that is the even child of its parent Selects every <p> elements that is the odd child of its parent
:before	p:before	Insert content before every <p> element
:after	p:after	Insert content after every <p> element

Jquery Performance Tips

Delegated Events

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

Chaining

$("#object").addClass("active");
$("#object").css("color","#f0f");
$("#object").height(300);

$("#object").addClass("active").css("color", "#f0f").height(300);

jquery cont.

Dom Manipulation

var arr = [reallyLongArrayOfImageURLs]; 
    $.each(arr, function(count, item) {
        var newImg = '<li><img src="'+item+'"></li>';
        $('#imgList').append(newImg);
    });

var arr = [reallyLongArrayOfImageURLs],
    tmp = ''; 

$.each(arr, function(count, item) {
    tmp += '<li><img src="'+item+'"></li>';
});

$('#imgList').append(tmp);

http://www.ikdoeict.be/leercentrum/slides/javascript/02_dom.html

Selector Performance

Debounce / Throttle

https://github.com/cowboy/jquery-throttle-debounce/

Listen for events to fire

Throttling - only fire off an event at a given interval

(great for mouse move events)

Debouncing - fire off event at after a period of inactivity

(good for listening for a user to stop typing/moving/etc.)

Brackets Editor

Built with HTML, CSS, JS
Open Source Project (on GitHub)
Built on Node.js and Chrome
Live Edit, JS Lint, Emmit, Inline CSS, Color Picker, etc.

Live Connect for HTML

 <html>
   <head>
     <title>Test</title>
   </head>
   <body>
     <h2>This is a Test</h2>
     <p>fooioikkkllklkkopkk</p>
   </body>
</html>

Adding New CSS Rules

Pops open inline for easy editing
Live edit page will highlight and change all items pertaining to selector

AWS Services

Services Breakdown

RDS (MySQL, MSSQL, MongoDB, etc.)

Small - Large Hardware (0.03 - 4.00)/hr

EC2 (Windows, Linux, Mac)

Small - Large Hardware (0.02 - 4.00)/hr

S3 (Standard or Reduced Redundancy)

Standard (0.03/Gb), Reduced (0.024/GB)

Glacier (Long Term Storage)

(0.01/Gb) - Restore in 3 to 5 hours.

Worth Mentioning

Route 53 (DNS Service) - Use case for serving static content
Workspaces - Cloud Desktop for computing anywhere