Successfully reported this slideshow.

Slow kinda sucks

1

Share

Loading in …3
×
1 of 97
1 of 97

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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. The Story.
  6. 6. Web site
  7. 7. header 16K navigation sidebar media content footer
  8. 8. header 17K navigation tips media content 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 tips media news content footer
  11. 11. 20K #content
.tips
{

} #sidebar
.tips
{

} #sidebar
.tips, #sidebar
.news
{

}
  12. 12. header navigation tips media social news content footer
  13. 13. 30K #content
.tips
{

} #sidebar
.tips
{

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

} #sidebar
.social
.twitter{

} #sidebar
.social
.facebook{

}
  14. 14. header navigation tips media social news tweets content 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. OOCSS Why it feels weird sometimes.
  23. 23. OOCSS How it relates to progressive enhancement. 1. Structure 2. Presentation 3. Behavior
  24. 24. OOCSS How 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 on components
  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: Create components & combine.
  37. 37. OOCSS You’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 code var
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 with others & 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 too similar to include on the same page, they are too similar to include in the same 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 principles My 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. Selectors var
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. Selectors var
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 Sockets http://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 Workers http://slides.html5rocks.com/#web-workers
  83. 83. Resources csslint.net github.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: @csskarma Slides n’ stuff: www.csskarma.com/presentations/webspeed/

Editor's Notes

  • \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
  • ×