Slow kinda sucks

  • 2,347 views
Uploaded on

A look at OOCSS, HTML5 and Web performance

A look at OOCSS, HTML5 and Web performance

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,347
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
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/