Slow kinda sucks

Tim Wright
Tim WrightProfessional Human
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
The
Story.
Web site
header                  16K
      navigation


                   sidebar
media




content



     footer
header               17K
      navigation



                   tips
media




content



     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



                     tips
media



 news


content



        footer
20K

#content
.tips
{

}

#sidebar
.tips
{

}


#sidebar
.tips,
#sidebar
.news
{

}
header
        navigation



                      tips
media

                     social

 news


content



        footer
30K


#content
.tips
{

}

#sidebar
.tips
{

}


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

}

#sidebar
.social
.twitter{

}
#sidebar
.social
.facebook{

}
header
        navigation



                        tips
media

                       social

 news
                      tweets

content
                     quicklinks



        footer
3GB!
Slow kinda sucks
Elegant and lean CSS.
Fat sack of crap.
Slow kinda sucks
Object Oriented CSS
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
OOCSS
 What is it?
OOCSS
<div class=”rounded bg-brown one-of-three”>




     describing the area
OOCSS
OOCSS
Why it feels weird sometimes.
OOCSS
How it relates to progressive enhancement.

         1. Structure
         2. Presentation
         3. Behavior
OOCSS
How it relates to progressive enhancement.

         1. Structure
         2. Presentation
         3. Behavior


         1. HTML
         2. CSS
         3. JavaScript
The process
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
Slow kinda sucks
.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 on
components
<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: Create
components & combine.
Slow kinda sucks
OOCSS
You’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 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();
    });

}
Slimming your JavaScript
                accessible code




  elem.setAttribute("class",
"hide");

                  or

     elem.style.display
=
“none”;
CMS, working with
others & 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>
Slow kinda sucks
Goal: ...
    H1 - Headings
    H2 - Should
    H3 - Be
    H4 - Headings
“
If modules look too
similar to include
on the same page,
they are too similar
to include in the
same 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 principles


My 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?
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/
getElementsByClassName




              http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
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");
Web Sockets




http://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 Workers


http://slides.html5rocks.com/#web-workers
Resources
       csslint.net

github.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: @csskarma



Slides n’ stuff:
    www.csskarma.com/presentations/webspeed/
1 of 97

More Related Content

What's hot(20)

Prototyping w/HTML5 and CSS3Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel5.1K views
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
Inventis Web Architects457 views
Html5 ux londonHtml5 ux london
Html5 ux london
Todd Zaki Warfel3.5K views
Modular HTML & CSSModular HTML & CSS
Modular HTML & CSS
Shay Howe1K views
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
Christopher Schmitt1.5K views
What's Object-Oriented CSS (japanese)What's Object-Oriented CSS (japanese)
What's Object-Oriented CSS (japanese)
shinobu tsutsui3.4K views
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
Tahir Shahzad1.4K views
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski16.7K views
Modular HTML & CSS WorkshopModular HTML & CSS Workshop
Modular HTML & CSS Workshop
Shay Howe765 views
Layout with CSSLayout with CSS
Layout with CSS
Mike Crabb1.5K views
[Access U 2010] HTML5 & Accessibility[Access U 2010] HTML5 & Accessibility
[Access U 2010] HTML5 & Accessibility
Christopher Schmitt3.9K views
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs37.2K views

Viewers also liked(13)

Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
Tim Wright2K views
Mobile, Media & TouchMobile, Media & Touch
Mobile, Media & Touch
Tim Wright1.7K views
Design processDesign process
Design process
Tim Wright1.6K views
Color & TypographyColor & Typography
Color & Typography
Tim Wright4.1K views
Form designForm design
Form design
Tim Wright9.1K views
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
Tim Wright10K views
HTML 5: The Future of the WebHTML 5: The Future of the Web
HTML 5: The Future of the Web
Tim Wright3.8K views

Similar to Slow kinda sucks

css.pptcss.ppt
css.pptDakshPratapSingh1
4 views66 slides
css.pptcss.ppt
css.pptSana903754
32 views66 slides
Html5Html5
Html5Satoshi Kikuchi
1.6K views87 slides
HTML5HTML5
HTML5Brandon Byars
464 views35 slides

Similar to Slow kinda sucks(20)

css.pptcss.ppt
css.ppt
DakshPratapSingh14 views
css.pptcss.ppt
css.ppt
Sana90375432 views
Html5Html5
Html5
Satoshi Kikuchi1.6K views
HTML5HTML5
HTML5
Brandon Byars464 views
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
Colin Loretz237 views
Be nice to your designersBe nice to your designers
Be nice to your designers
Pai-Cheng Tao562 views
Responsive contentResponsive content
Responsive content
honzie769 views
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
Future Insights941 views
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero1.6K views
Css for DevelopmentCss for Development
Css for Development
tsengsite2.1K views
Seo Cheat SheetSeo Cheat Sheet
Seo Cheat Sheet
Anchal Thakur213 views
Seo cheat-sheetSeo cheat-sheet
Seo cheat-sheet
Elena Michelle301 views
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
Aslam Najeebdeen458 views

Recently uploaded(20)

[2023] Putting the R! in R&D.pdf[2023] Putting the R! in R&D.pdf
[2023] Putting the R! in R&D.pdf
Eleanor McHugh36 views
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)
CSUC - Consorci de Serveis Universitaris de Catalunya59 views
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
Maximiliano Firtman161 views
ThroughputThroughput
Throughput
Moisés Armani Ramírez31 views
Liqid: Composable CXL PreviewLiqid: Composable CXL Preview
Liqid: Composable CXL Preview
CXL Forum120 views
METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...
METHOD AND SYSTEM FOR PREDICTING OPTIMAL LOAD FOR WHICH THE YIELD IS MAXIMUM ...
Prity Khastgir IPR Strategic India Patent Attorney Amplify Innovation24 views

Slow kinda sucks

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n