Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Slow kinda sucks

3,054 views

Published on

A look at OOCSS, HTML5 and Web performance

Published in: Technology
  • Be the first to comment

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/

×