Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Slow kinda sucks

2,411

Published on

A look at OOCSS, HTML5 and Web performance

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,411
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Slow Kinda Sucks. A look at OOCSS, some HTML5 and Web Performance Tim Wright Tim Wright, @csskarma
    • 2. A Brief Introduction Boston University CSSKarma Smashing Magazine & SitePoint Snappy dresser
    • 3. The Goal.
    • 4. What we’re going over . Object Oriented CSS - what - how - why . Some HTML 5 - forms - communication . Speed
    • 5. TheStory.
    • 6. Web site
    • 7. header 16K navigation sidebarmediacontent footer
    • 8. header 17K navigation tipsmediacontent footer
    • 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. header navigation tipsmedia newscontent footer
    • 11. 20K#content
.tips
{

}#sidebar
.tips
{

}#sidebar
.tips,#sidebar
.news
{

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

}#sidebar
.tips
{

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

}#sidebar
.social
.twitter{

}#sidebar
.social
.facebook{

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

}
    • 27. .dashboard
{

}.component
{

}
    • 28. .dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}
    • 29. .dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}.ellipsify
{

}
    • 30. .dashboard
{

}.component
{

}.list‐inline
{

}.list‐bulk
{

}.list‐block
{

}.ellipsify
{

}.component
h2{

}
    • 31. Building HTML based oncomponents
    • 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. Goal: Be predictable. helping you, others and the future.
    • 34. CSS Components contour + background + content objects
    • 35. HTML Components headings grids buttons modules lists
    • 36. Goal: Createcomponents & combine.
    • 37. OOCSSYou’ve probably used it.
    • 38. OOCSS .right { float:right; } .left { float:left; }.clearfix { clear:both; }
    • 39. Using it more.
    • 40. Good uses.
    • 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. Slimming your JavaScript accessible code elem.attr(‘class’,‘hide’); vs. elem.hide();
    • 43. Slimming your JavaScript accessible code .hide
{ position:
absolute; top:
‐9999px; left:
‐9999px; }
    • 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. Slimming your JavaScript accessible code elem.setAttribute("class",
"hide"); or elem.style.display
=
“none”;
    • 46. CMS, working withothers & prototyping
    • 47. Bad uses.
    • 48. Taking it too far<div
class=”sidebar
rounded‐5px”> <div
class=”content
gradient‐blue”> <h2
class=”size‐20px”>News</h2> </div></div>
    • 49. Goal: ... H1 - Headings H2 - Should H3 - Be H4 - Headings
    • 50. “If modules look toosimilar to includeon the same page,they are too similarto include in thesame site.@stubbornella
    • 51. OOCSS Framework all.css core.css



plugins.css https://github.com/stubbornella/oocss
    • 52. OOCSS Framework @import
url("core/core.css"); @import
url("plugins/plugins.css"); https://github.com/stubbornella/oocss
    • 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. 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. Please don’t use it in production.
    • 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. Some things I like about OOCSS
    • 58. Some things I like about OOCSS- performance benefits
    • 59. Some things I like about OOCSS- performance benefits- people won’t screw up your code
    • 60. Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature
    • 61. Some things I like about OOCSS- performance benefits- people won’t screw up your code- constructive & predictive nature- rapid prototyping last one
    • 62. Some things I don’t like about OOCSS
    • 63. Some things I don’t like about OOCSS- design information embedded in HTML
    • 64. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup
    • 65. Some things I don’t like about OOCSS- design information embedded in HTML- a little more markup- Too many frickin’ <div>’s
    • 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. 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. 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. You have a friend in HTML5
    • 70. HTML & JavaScript
    • 71. the markup?
    • 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. <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. Form Elements<input
type=”email”
placeholder=”you@email.com”
required> previously javascript <input
type=”date”>
    • 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. the javascript?
    • 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. getElementsByClassName http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
    • 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. Web Socketshttp://www.csskarma.com/lab/html5/websockets/
    • 81. Web Workers top priority thread worker thread (non-blocking)http://www.csskarma.com/lab/html5/webworker/worker- simple.html
    • 82. Web Workershttp://slides.html5rocks.com/#web-workers
    • 83. Resources csslint.netgithub.com/stubbornella/oocss websocket.org 960.gs
    • 84. What we went over . Object Oriented CSS - what - how - why . Some HTML 5 - forms - communication
    • 85. Thanks!Questions?Comments?
    • 86. Communication E-mail: timwright12@gmail.com Twitter: @csskarmaSlides n’ stuff: www.csskarma.com/presentations/webspeed/

    ×