Slow Kinda Sucks.    A look at OOCSS, some HTML5 and Web Performance                                             Tim Wrigh...
A Brief Introduction  Boston University  CSSKarma  Smashing Magazine & SitePoint  Snappy dresser
The Goal.
What we’re going over     . Object Oriented CSS        - what        - how        - why     . Some HTML 5        - forms  ...
TheStory.
Web site
header                  16K      navigation                   sidebarmediacontent     footer
header               17K      navigation                   tipsmediacontent     footer
#sidebar
.tips{
 background:#f1f1f1;}#sidebar
.tips
h3{
 font:
1.3/16px
Serif;
 background:
url(../images/gradient_blue.pn...
header        navigation                     tipsmedia newscontent        footer
20K#content
.tips
{

}#sidebar
.tips
{

}#sidebar
.tips,#sidebar
.news
{

}
header        navigation                      tipsmedia                     social newscontent        footer
30K#content
.tips
{

}#sidebar
.tips
{

}#sidebar
.tips,#sidebar
.news,#sidebar
.social
{

}#sidebar
.social
.twitter{

}#...
header        navigation                        tipsmedia                       social news                      tweetscon...
3GB!
Elegant and lean CSS.
Fat sack of crap.
Object Oriented CSS
OOCSS What is it?
OOCSS<div class=”rounded bg-brown one-of-three”>     describing the area
OOCSS
OOCSSWhy it feels weird sometimes.
OOCSSHow it relates to progressive enhancement.         1. Structure         2. Presentation         3. Behavior
OOCSSHow it relates to progressive enhancement.         1. Structure         2. Presentation         3. Behavior         1...
The process
.dashboard
{

}
.dashboard
{

}.component
{

}
.dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}
.dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}.ellipsify
{

}
.dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}.ellipsify
{

}.component
h2{

}
Building   HTML based oncomponents
<div
class=”dashboard”>   <div
class=”component”>    <h2>Your
Tweets</h2>    <div
class=”container
ellipsify”>      <p>[
m...
Goal: Be predictable.   helping you, others and the future.
CSS Components      contour         +    background         +   content objects
HTML Components     headings      grids     buttons     modules       lists
Goal: Createcomponents & combine.
OOCSSYou’ve probably used it.
OOCSS .right { float:right; }   .left { float:left; }.clearfix { clear:both; }
Using it more.
Good uses.
Combining components<div
class=”section”>  <div
class=”module
media”></div>  <div
class=”module
size1of3”></div>  <div
cla...
Slimming your JavaScript                accessible code     elem.attr(‘class’,‘hide’);                vs.           elem.h...
Slimming your JavaScript                accessible code        .hide
{           position:
absolute;           top:
‐9999p...
Slimming your JavaScript                    accessible codevar
elem
=
$(‘.section’).first();if(elem.hasClass(“hide”)){    ...
Slimming your JavaScript                accessible code  elem.setAttribute("class",
"hide");                  or     elem....
CMS, working withothers & prototyping
Bad uses.
Taking it too far<div
class=”sidebar
rounded‐5px”>  <div
class=”content
gradient‐blue”>     <h2
class=”size‐20px”>News</h2...
Goal: ...    H1 - Headings    H2 - Should    H3 - Be    H4 - Headings
“If modules look toosimilar to includeon the same page,they are too similarto include in thesame site.@stubbornella
OOCSS Framework                           all.css             core.css



plugins.css   https://github.com/stubbornella/oo...
OOCSS Framework      @import
url("core/core.css");      @import
url("plugins/plugins.css");   https://github.com/stubborne...
OOCSS Framework            @import
url("libraries.css");            @import
url("template/template.css");            @impo...
OOCSS Framework            @import
url("breadcrumb/breadcrumb.css");            @import
url("tabs/tabs.css");            @...
Please don’t use it in production.
Don’t blindly use anything.        Back-end principlesMy convoluted opinion                              Can we peacefully...
Some things I like about OOCSS
Some things I like about OOCSS- performance benefits
Some things I like about OOCSS- performance benefits- people won’t screw up your code
Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature
Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature- r...
Some things I don’t like about OOCSS
Some things I don’t like about OOCSS- design information embedded in HTML
Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup
Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s
Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s...
Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s...
Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s...
You have a friend in HTML5
HTML & JavaScript
the markup?
<head> Markup          <!doctype
html>          <html
lang=”en”>          <head>          <meta
charset=”utf‐8”>          ...
<head> Markup<script
type=”text/javascript”
src=”js/script.js”></script>                             &              <style...
Form Elements<input
type=”email”
placeholder=”you@email.com”
required>                previously javascript               ...
<!doctype
html><html
lang=”en”><head>  <title>E‐mail
Form</title>  <meta
charset=”utf‐8”>  <link
rel=”stylesheet”
href=”cs...
the javascript?
Selectorsvar
section
=
document.getElementByClassName(“section”);var
section
=
document.getElementByClassName(“section
red...
getElementsByClassName              http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
Selectorsvar
lis
=
document.querySelectorAll("ul
li:nth‐child(odd)");var
tds
=
document.querySelectorAll("div.test
>
ul
>
...
Web Socketshttp://www.csskarma.com/lab/html5/websockets/
Web Workers                 top priority thread            worker thread (non-blocking)http://www.csskarma.com/lab/html5/w...
Web Workershttp://slides.html5rocks.com/#web-workers
Resources       csslint.netgithub.com/stubbornella/oocss     websocket.org         960.gs
What we went over   . Object Oriented CSS      - what      - how      - why   . Some HTML 5      - forms      - communicat...
Thanks!Questions?Comments?
Communication  E-mail: timwright12@gmail.com  Twitter: @csskarmaSlides n’ stuff:    www.csskarma.com/presentations/webspeed/
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Upcoming SlideShare
Loading in...5
×

Slow kinda sucks

2,460

Published on

A look at OOCSS, HTML5 and Web performance

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,460
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Slow kinda sucks

    1. 1. Slow Kinda Sucks. A look at OOCSS, some HTML5 and Web Performance Tim Wright Tim Wright, @csskarma
    2. 2. A Brief Introduction Boston University CSSKarma Smashing Magazine & SitePoint Snappy dresser
    3. 3. The Goal.
    4. 4. What we’re going over . Object Oriented CSS - what - how - why . Some HTML 5 - forms - communication . Speed
    5. 5. TheStory.
    6. 6. Web site
    7. 7. header 16K navigation sidebarmediacontent footer
    8. 8. header 17K navigation tipsmediacontent footer
    9. 9. #sidebar
.tips{
 background:#f1f1f1;}#sidebar
.tips
h3{
 font:
1.3/16px
Serif;
 background:
url(../images/gradient_blue.png)
repeat‐x
0
0;
 text‐shadow:
0
1px
0
rgba(255,255,255,.7);
 padding:
0
10px;}#sidebar
.tips
ul{
 margin:10px
10px
15px
30px;
 list‐style:disc;}
    10. 10. header navigation tipsmedia newscontent footer
    11. 11. 20K#content
.tips
{

}#sidebar
.tips
{

}#sidebar
.tips,#sidebar
.news
{

}
    12. 12. header navigation tipsmedia social newscontent footer
    13. 13. 30K#content
.tips
{

}#sidebar
.tips
{

}#sidebar
.tips,#sidebar
.news,#sidebar
.social
{

}#sidebar
.social
.twitter{

}#sidebar
.social
.facebook{

}
    14. 14. header navigation tipsmedia social news tweetscontent quicklinks footer
    15. 15. 3GB!
    16. 16. Elegant and lean CSS.
    17. 17. Fat sack of crap.
    18. 18. Object Oriented CSS
    19. 19. OOCSS What is it?
    20. 20. OOCSS<div class=”rounded bg-brown one-of-three”> describing the area
    21. 21. OOCSS
    22. 22. OOCSSWhy it feels weird sometimes.
    23. 23. OOCSSHow it relates to progressive enhancement. 1. Structure 2. Presentation 3. Behavior
    24. 24. OOCSSHow it relates to progressive enhancement. 1. Structure 2. Presentation 3. Behavior 1. HTML 2. CSS 3. JavaScript
    25. 25. The process
    26. 26. .dashboard
{

}
    27. 27. .dashboard
{

}.component
{

}
    28. 28. .dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}
    29. 29. .dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}.ellipsify
{

}
    30. 30. .dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}.ellipsify
{

}.component
h2{

}
    31. 31. Building HTML based oncomponents
    32. 32. <div
class=”dashboard”> <div
class=”component”> <h2>Your
Tweets</h2> <div
class=”container
ellipsify”> <p>[
my
boring
tweet
]</p> </div><!‐‐/.container
.ellipsify‐‐> </div><!‐‐/.component‐‐></div><!‐‐/.dashboard‐‐>
    33. 33. Goal: Be predictable. helping you, others and the future.
    34. 34. CSS Components contour + background + content objects
    35. 35. HTML Components headings grids buttons modules lists
    36. 36. Goal: Createcomponents & combine.
    37. 37. OOCSSYou’ve probably used it.
    38. 38. OOCSS .right { float:right; } .left { float:left; }.clearfix { clear:both; }
    39. 39. Using it more.
    40. 40. Good uses.
    41. 41. Combining components<div
class=”section”> <div
class=”module
media”></div> <div
class=”module
size1of3”></div> <div
class=”module
size2of3”></div></div> describing document structure & content.
    42. 42. Slimming your JavaScript accessible code elem.attr(‘class’,‘hide’); vs. elem.hide();
    43. 43. Slimming your JavaScript accessible code .hide
{ position:
absolute; top:
‐9999px; left:
‐9999px; }
    44. 44. Slimming your JavaScript accessible codevar
elem
=
$(‘.section’).first();if(elem.hasClass(“hide”)){ $(this).click(function(){ elem.hide().removeClass(‘hide’).fadeIn(500); });}
else
{ $(this).click(function(){ elem.fadeOut(500).addClass(‘hide’).show(); });}
    45. 45. Slimming your JavaScript accessible code elem.setAttribute("class",
"hide"); or elem.style.display
=
“none”;
    46. 46. CMS, working withothers & prototyping
    47. 47. Bad uses.
    48. 48. Taking it too far<div
class=”sidebar
rounded‐5px”> <div
class=”content
gradient‐blue”> <h2
class=”size‐20px”>News</h2> </div></div>
    49. 49. Goal: ... H1 - Headings H2 - Should H3 - Be H4 - Headings
    50. 50. “If modules look toosimilar to includeon the same page,they are too similarto include in thesame site.@stubbornella
    51. 51. OOCSS Framework all.css core.css



plugins.css https://github.com/stubbornella/oocss
    52. 52. OOCSS Framework @import
url("core/core.css"); @import
url("plugins/plugins.css"); https://github.com/stubbornella/oocss
    53. 53. OOCSS Framework @import
url("libraries.css"); @import
url("template/template.css"); @import
url("grid/grids.css"); @import
url("module/mod.css"); @import
url("module/mod_skins.css"); @import
url("media/media.css"); @import
url("content.css"); @import
url("heading/heading.css"); @import
url("spacing/space.css"); @import
url("table/table.css"); @import
url("table/table_skins.css"); https://github.com/stubbornella/oocss
    54. 54. OOCSS Framework @import
url("breadcrumb/breadcrumb.css"); @import
url("tabs/tabs.css"); @import
url("talk/talk.css"); @import
url("talk/talk_skins.css"); https://github.com/stubbornella/oocss
    55. 55. Please don’t use it in production.
    56. 56. Don’t blindly use anything. Back-end principlesMy convoluted opinion Can we peacefully co-exist?Should I use it? What’s with the comic book references?
    57. 57. Some things I like about OOCSS
    58. 58. Some things I like about OOCSS- performance benefits
    59. 59. Some things I like about OOCSS- performance benefits- people won’t screw up your code
    60. 60. Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature
    61. 61. Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature- rapid prototyping last one
    62. 62. Some things I don’t like about OOCSS
    63. 63. Some things I don’t like about OOCSS- design information embedded in HTML
    64. 64. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup
    65. 65. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s
    66. 66. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s- HTML 5 scalability
    67. 67. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s- HTML 5 scalability- applying back-end to the front-end
    68. 68. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s- HTML 5 scalability- applying back-end to the front-end- smug attitude last one
    69. 69. You have a friend in HTML5
    70. 70. HTML & JavaScript
    71. 71. the markup?
    72. 72. <head> Markup <!doctype
html> <html
lang=”en”> <head> <meta
charset=”utf‐8”> vs.<!DOCTYPE
html
PUBLIC
"‐//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd"><html
xmlns="http://www.w3.org/1999/xhtml"><meta
http‐equiv="Content‐type"
content="text/html;
charset=utf‐8"
/>
    73. 73. <head> Markup<script
type=”text/javascript”
src=”js/script.js”></script> & <style
type=”text/css”></style><link
rel=”stylesheet”
href=”css/style.css”
type=”text/css”> vs. <script
src=”js/script.js”></script> & <style></style> <link
rel=”stylesheet”
href=”css/style.css”>
    74. 74. Form Elements<input
type=”email”
placeholder=”you@email.com”
required> previously javascript <input
type=”date”>
    75. 75. <!doctype
html><html
lang=”en”><head> <title>E‐mail
Form</title> <meta
charset=”utf‐8”> <link
rel=”stylesheet”
href=”css/style.css”></head><body> <form
action=””
method=”post”> <label
for=”fn”>Name:</label> <input
type=”text”
id=”fn”
required> <label
for=”e”>E‐mail:</label> <input
type=”email”
id=”e”
name=”e”
placeholder=”you@email.com”
 required> <button
type=”submit”>Submit</button> </form> <script
src=”js/script.js”></script></body></html>
    76. 76. the javascript?
    77. 77. Selectorsvar
section
=
document.getElementByClassName(“section”);var
section
=
document.getElementByClassName(“section
red”);var
section
=
document.getElementByClassName(“section”)





















.getElementByClassName(“section‐inner”); http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
    78. 78. getElementsByClassName http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
    79. 79. Selectorsvar
lis
=
document.querySelectorAll("ul
li:nth‐child(odd)");var
tds
=
document.querySelectorAll("div.test
>
ul
>
li");var
el
=
document.querySelector("div.test
>
ul
>
li");
    80. 80. Web Socketshttp://www.csskarma.com/lab/html5/websockets/
    81. 81. Web Workers top priority thread worker thread (non-blocking)http://www.csskarma.com/lab/html5/webworker/worker- simple.html
    82. 82. Web Workershttp://slides.html5rocks.com/#web-workers
    83. 83. Resources csslint.netgithub.com/stubbornella/oocss websocket.org 960.gs
    84. 84. What we went over . Object Oriented CSS - what - how - why . Some HTML 5 - forms - communication
    85. 85. Thanks!Questions?Comments?
    86. 86. Communication E-mail: timwright12@gmail.com Twitter: @csskarmaSlides n’ stuff: www.csskarma.com/presentations/webspeed/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×