• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Slow kinda sucks
 

Slow kinda sucks

on

  • 2,513 views

A look at OOCSS, HTML5 and Web performance

A look at OOCSS, HTML5 and Web performance

Statistics

Views

Total Views
2,513
Views on SlideShare
2,510
Embed Views
3

Actions

Likes
1
Downloads
21
Comments
0

2 Embeds 3

http://www.coderwall.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \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 Slow kinda sucks Presentation Transcript

  • Slow Kinda Sucks. A look at OOCSS, some HTML5 and Web Performance Tim Wright Tim Wright, @csskarma
  • 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 - communication . Speed
  • 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.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;}
  • 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{

}#sidebar
.social
.facebook{

}
  • header navigation tipsmedia social news tweetscontent quicklinks footer
  • 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. HTML 2. CSS 3. JavaScript
  • 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>[
my
boring
tweet
]</p> </div><!‐‐/.container
.ellipsify‐‐> </div><!‐‐/.component‐‐></div><!‐‐/.dashboard‐‐>
  • 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
class=”module
size2of3”></div></div> describing document structure & content.
  • Slimming your JavaScript accessible code elem.attr(‘class’,‘hide’); vs. elem.hide();
  • Slimming your JavaScript accessible code .hide
{ position:
absolute; top:
‐9999px; left:
‐9999px; }
  • 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(); });}
  • Slimming your JavaScript accessible code elem.setAttribute("class",
"hide"); or elem.style.display
=
“none”;
  • 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> </div></div>
  • 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/oocss
  • OOCSS Framework @import
url("core/core.css"); @import
url("plugins/plugins.css"); https://github.com/stubbornella/oocss
  • 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
  • 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
  • Please don’t use it in production.
  • 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?
  • 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- rapid prototyping last one
  • 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- HTML 5 scalability
  • 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
  • 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
  • You have a friend in HTML5
  • HTML & JavaScript
  • the markup?
  • <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"
/>
  • <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”>
  • Form Elements<input
type=”email”
placeholder=”you@email.com”
required> previously javascript <input
type=”date”>
  • <!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>
  • the javascript?
  • 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/
  • getElementsByClassName http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
  • 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");
  • Web Socketshttp://www.csskarma.com/lab/html5/websockets/
  • Web Workers top priority thread worker thread (non-blocking)http://www.csskarma.com/lab/html5/webworker/worker- simple.html
  • 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 - communication
  • Thanks!Questions?Comments?
  • Communication E-mail: timwright12@gmail.com Twitter: @csskarmaSlides n’ stuff: www.csskarma.com/presentations/webspeed/