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:

  1. 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

    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

    Lightning Talk

    By uniquetrio2000

    Made with Slides.com

    Lightning Talk

    • 975

    More from uniquetrio2000