SlideShare a Scribd company logo
1 of 81
Download to read offline
jQuery,
eCSStender
& you
Aaron Gustafson
Easy Designs, LLC
slideshare.net/AaronGustafson
?
?
jQuery, eCSStender & you




Download...




                                eCSStender.org
jQuery Summit - November 2010                    12
jQuery, eCSStender & you




Download...




                                eCSStender.org
jQuery Summit - November 2010                    13
jQuery, eCSStender & you




Download...




                                github.com/easy-designs/eCSStender.js
jQuery Summit - November 2010                                           14
jQuery, eCSStender & you




...collect extensions...




jQuery Summit - November 2010   15
jQuery, eCSStender & you




...collect extensions...




jQuery Summit - November 2010   16
jQuery, eCSStender & you




...include...
   <script      type="text/javascript"   src="eCSStender.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-backgrounds-and-borders.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-transforms.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-color.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-transitions.js"></script>




jQuery Summit - November 2010                                                                         17
jQuery, eCSStender & you




...and write your CSS
   section,
   article,
   blockquote {
     border-radius: 10px;
     box-shadow: 0 0 15px 1px #000;
     color: rgb(255, 255, 255);
     transform-origin: 50% 50%;
     transition: all 0.5s linear;
   }
   section:hover,
   body:focus section,
   section:hover blockquote,
   body:focus blockquote {
     transform: rotate(-15deg);
   }
   section:hover article,
   body:focus article {
     transform: rotate(30deg);
   }




jQuery Summit - November 2010         18
jQuery, eCSStender & you




Need selectors?
   <script type="text/javascript" src="eCSStender.js"></script>
   <script type="text/javascript" src="sizzle.js"></script>
   <script type="text/javascript">
     // <![CDATA[
     eCSStender.addMethod('findBySelector',Sizzle);
     // ]]>
   </script>
   <script type="text/javascript" src="eCSStender.CSS3-selectors.js"></script>




jQuery Summit - November 2010                                                    20
jQuery, eCSStender & you




Compound classes in IE6?
   p.test {
     color: green;
   }
   p.alt.test {
     color: red;
   }




jQuery Summit - November 2010   21
jQuery, eCSStender & you




Adjacent siblings?
   p + p {
     color: green;
   }




jQuery Summit - November 2010   22
jQuery, eCSStender & you




General siblings?
   p ~ p {
     color: green;
   }




jQuery Summit - November 2010   23
jQuery, eCSStender & you




Advanced pseudo-classes?
   tr {
     background: white;
   }
   td:empty {
     background: green;
   }




jQuery Summit - November 2010   24
jQuery, eCSStender & you




Consider border-radius
   #foo {
     border-radius: 3px;
   }




jQuery Summit - November 2010   26
jQuery, eCSStender & you




Consider border-radius
   #foo {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     -o-border-radius: 3px;
     -khtml-border-radius: 3px;
     border-radius: 3px;
   }




jQuery Summit - November 2010      27
jQuery, eCSStender & you




Consider border-radius
   #foo {
     border-radius: 10px 5px;
   }




jQuery Summit - November 2010   28
jQuery, eCSStender & you




Consider border-radius
   #foo {
     -moz-border-radius: 10px 5px;
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 5px;
     -webkit-border-bottom-right-radius: 10px;
     -webkit-border-bottom-left-radius: 10px;
     -o-border-radius: 10px 5px;
     -khtml-border-top-left-radius: 10px;
     -khtml-border-top-right-radius: 5px;
     -khtml-border-bottom-right-radius: 10px;
     -khtml-border-bottom-left-radius: 10px;
     border-radius: 10px 5px;
   }




jQuery Summit - November 2010                    29
jQuery, eCSStender & you




Ah, memories...
   #foo {
     padding: 10px;
     width: 200px;
     width: 180px;
     height: 200px;
     height: 180px;
   }

   /* or */

   #foo {
     padding: 10px;
     width: 200px;
     height: 200px;
   }
   * html #foo {
     width: 180px;
     height: 180px;
   }




jQuery Summit - November 2010   30
jQuery, eCSStender & you




Simplified CSS3?
   <script      type="text/javascript"   src="eCSStender.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-backgrounds-and-borders.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-transforms.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-color.js"></script>
   <script      type="text/javascript"   src="eCSStender.CSS3-transitions.js"></script>




jQuery Summit - November 2010                                                                         31
jQuery, eCSStender & you




Yup!
  section,
  article,
  blockquote {
    border-radius: 10px;
    box-shadow: 0 0 15px 1px #000;
    color: rgb(255, 255, 255);
    transform-origin: 50% 50%;
    transition: all 0.5s linear;
  }
  section:hover,
  body:focus section,
  section:hover blockquote,
  body:focus blockquote {
    transform: rotate(-15deg);
  }
  section:hover article,
  body:focus article {
    transform: rotate(30deg);
  }




jQuery Summit - November 2010        32
jQuery, eCSStender & you




Valid extension of CSS



                                -prefix-


jQuery Summit - November 2010              34
jQuery, eCSStender & you




Browser vendors do it




         -moz-                  -webkit-   -ms-   -o-




jQuery Summit - November 2010                           35
THE FUTURE OF CSS
jQuery, eCSStender & you




Pointless, but possible
   .bowling-alley img {
     -easy-physics-fill: lead;
   }
   .beach img {
     -easy-physics-fill: rubber;
   }
   .disney img {
     -easy-physics-fill: helium;
   }




jQuery Summit - November 2010      38
Trivia Question:
   Who were the
co-creators of CSS?




    (First person to answer correctly, gets a book)
jQuery, eCSStender & you




Step 1: Register extensions



                                Register




jQuery Summit - November 2010              41
jQuery, eCSStender & you




Step 2: Find stylesheets


                                <html>

                                  CSS    Inspect




jQuery Summit - November 2010                      42
jQuery, eCSStender & you




Step 3: Collect the rules



                                Collect




jQuery Summit - November 2010             43
jQuery, eCSStender & you




Step 4: parse & process



                                Process




jQuery Summit - November 2010             44
jQuery, eCSStender & you




Step 5: Trigger extensions




jQuery Summit - November 2010   45
jQuery, eCSStender & you




    Helping hands
๏   Dean Edward’s IE scripts
๏   Selectivizr
๏   css3-mediaqueries.js

                                    Browser
                                    Patchers




    jQuery Summit - November 2010              47
jQuery, eCSStender & you




    Alternative syntax
๏   SASS (Syntactically Awesome Stylesheets)
๏   LESS (Leaner CSS)
๏   OO CSS (purely conceptual)

                                         Browser    Shorthand
                                         Patchers    Parsers




    jQuery Summit - November 2010                               48
jQuery, eCSStender & you




    Capability checking
๏   Modernizr
                                               Testing
                                               Scripts



                                    Browser         Shorthand
                                    Patchers         Parsers




    jQuery Summit - November 2010                               49
jQuery, eCSStender & you




    Something new
๏   More CSS
                                               Testing
                                               Scripts



                                    Browser         Shorthand
                                    Patchers         Parsers

                                               Custom
                                                CSS
                                               Parsers




    jQuery Summit - November 2010                               50
jQuery, eCSStender & you




    Ecosystem
๏   jQuery plug-ins
๏   CSS Sandpaper                     One-off CSS
๏   CVI scripts                     scripts& libraries

                                                   Testing
                                                   Scripts


                                        Browser          Shorthand
                                        Patchers          Parsers

                                                   Custom
                                                    CSS
                                                   Parsers




    jQuery Summit - November 2010                                    51
jQuery, eCSStender & you




Unity!
                                  One-off CSS
                                scripts& libraries

                                               Testing
                                               Scripts


                                    Browser          Shorthand
                                    Patchers          Parsers

                                               Custom
                                                CSS
                                               Parsers




jQuery Summit - November 2010                                    52
Let’s make
something awesome!

       I thought you’d never ask.
jQuery, eCSStender & you




Pointless, but possible




jQuery Summit - November 2010   54
jQuery, eCSStender & you




Step 1: Dependencies
   <script type="text/javascript" src="eCSStender.js"></script>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.EasyPhysics.js"></script>




jQuery Summit - November 2010                                             55
jQuery, eCSStender & you




Step 1: Dependencies
   // jquery.EasyPhysics.js
   EasyPhysics.Balloon      = function( el   ) {
      new PhysicalObject(
         el,   // element
         0,    // velocity
         -0.5, // kinetic energy
         -0.1  // gravitational effect
      );
   };
   EasyPhysics.RubberBall = function( el     ) {
      new PhysicalObject( el, 0, -0.8, 0.5   );
   };
   EasyPhysics.BowlingBall = function( el    ) {
      new PhysicalObject( el, 1, -0.4, 0.9   );
   };




jQuery Summit - November 2010                      56
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(




        );




jQuery Summit - November 2010   57
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(
     { property: '-easy-physics-fill',
        fingerprint: 'net.easy-designs.-easy-physics'
     },




        );




jQuery Summit - November 2010                           58
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(
     { property: '-easy-physics-fill',
        fingerprint: 'net.easy-designs.-easy-physics'
     },
     false,




        );




jQuery Summit - November 2010                           59
jQuery, eCSStender & you




Step 2: Registration
   eCSStender.register(
     { property: '-easy-physics-fill',
        fingerprint: 'net.easy-designs.-easy-physics'
     },
     false,
     function( selector, properties ){
        var $el = $(selector);
        switch ( properties['-easy-physics-fill'] )
        {
          case 'helium':
            new EasyPhysics.Balloon( $el );
            break;
          case 'rubber':
            new EasyPhysics.RubberBall( $el );
            break;
          case 'lead':
            new EasyPhysics.BowlingBall( $el );
            break;
        }
     });




jQuery Summit - November 2010                           60
jQuery, eCSStender & you




Pointless, but possible
   .bowling-alley img {
     -easy-physics-fill: lead;
   }
   .beach img {
     -easy-physics-fill: rubber;
   }
   .disney img {
     -easy-physics-fill: helium;
   }




jQuery Summit - November 2010      61
I love you you know.

 I know.
Does the browser
support border-radius?

              Nope.




isSupported()
jQuery, eCSStender & you




isSupported()
   eCSStender.isSupported(
      'property',
      'visibility: hidden'
   );
   // true

   eCSStender.isSupported(
      'property',
      'foo: bar'
   );
   // false




jQuery Summit - November 2010   64
jQuery, eCSStender & you




isSupported()
   eCSStender.isSupported(
      'property',
      'visibility',
      'hidden'
   );
   // true

   eCSStender.isSupported(
      'property',
      'color',
      ['#000000','black','rgb(0,0,0)']
   );
   // true




jQuery Summit - November 2010            65
jQuery, eCSStender & you




isSupported()
   var
   el = document.createElement('b'),
   html = document.createElement('p');
   html.appendChild(el);

   eCSStender.isSupported(
      'selector',
      'p b',
      html,
      el
   );
   // true

   eCSStender.isSupported(
      'selector',
      'p ?? b',
      html,
      el
   );
   // false




jQuery Summit - November 2010            66
Can you make my
  CSS smarter?

         Of course.
jQuery, eCSStender & you




Inline style sucks...
   <div style="display: none;">
     <p>Some content</p>
   </div>




jQuery Summit - November 2010     68
jQuery, eCSStender & you




...don’t do it!
   <div style="display: none;">
     <p>Some content</p>
   </div>




jQuery Summit - November 2010     69
jQuery, eCSStender & you




makeUniqueClass()
   (function(){
     var
     e          = eCSStender,
     the_class = e.makeUniqueClass(),
     the_regex = /:checked/,
     classify = function() {
        var
        inputs = document.getElementsByTagName('input'),
        i      = inputs.length;
        while ( i-- ) {
          if ( inputs[i].checked ) {
            e.addClass( inputs[i], the_class );
          } else {
            e.removeClass( inputs[i], the_class );
          }
        }
     };

     // ...
   })();



                           excerpt from :checked CSS3 Selectors extension
            github.com/easy-designs/eCSStender.CSS3-selectors.js

jQuery Summit - November 2010                                               70
jQuery, eCSStender & you




embedCSS()
   eCSStender.embedCSS(
      'p { color: red; }',
      'screen',
      false
   );
   // embeds the declaration block in
   // a screen-specific stylesheet immediately




jQuery Summit - November 2010                    71
jQuery, eCSStender & you




applyWeightedStyle()
   eCSStender.applyWeightedStyle(
     el, { 'visibility': 'hidden' }, 10 );
   // el now has visibility: hidden set
   // with a specificity of 10

   eCSStender.applyWeightedStyle(
     el, { 'visibility': 'visible' }, 1 );
   // el is not set to visible because
   // the specificity is not high enough

   eCSStender.applyWeightedStyle(
     el, { 'visibility': 'visible' }, 10 );
   // el is now “visible” because the specificity
   // is equal to the prior specificity

   eCSStender.applyWeightedStyle(
     el, { 'visibility': 'hidden' }, 100 );
   // el is now “hidden” again because the
   // specificity is greater than the prior one




jQuery Summit - November 2010                       72
jQuery, eCSStender & you




As flexible as possible
   function embed( selector, properties, medium )
   {
     var style_block = '', prop;
     for ( prop in properties )
     {
       if ( eCSStender.isInheritedProperty( properties, prop ) ) {
          continue;
       };
       style_block += prop + ':' + properties[prop] + ';';
     }
     if ( style_block != EMPTY )
     {
       eCSStender.embedCSS(
          selector + '{' + style_block + '}', medium
       );
     }
   }




                                excerpt from CSS3 Selectors extension
            github.com/easy-designs/eCSStender.CSS3-selectors.js

jQuery Summit - November 2010                                           73
jQuery, eCSStender & you




As flexible as possible
   function inline( selector, properties, medium, specificity ) {
     if ( medium != 'screen' ){ return; }
     try {
       var
       $els = $( selector ),
       i    = $els.length;
       while ( i-- ) {
         eCSStender.applyWeightedStyle( $els[i], properties, specificity );
       }
       $els = null;
     } catch(e) {
       // throw new Error( LIB_ERROR + selector );
     }
   }




                                excerpt from CSS3 Selectors extension
            github.com/easy-designs/eCSStender.CSS3-selectors.js

jQuery Summit - November 2010                                                 74
jQuery, eCSStender & you




As flexible as possible
   eCSStender.register(
    // ...
    function( selector, properties, medium, specificity ) {
      var
      calc = 'p:nth-child(2n+1)',
      d = div.cloneNode(true),
      p = para.cloneNode(true),
      func = inline;
      d.appendChild( p );
      // embedding is the way to go
      if ( ( eCSStender.isSupported( 'selector', 'p:nth-child(odd)', d, p ) &&
             ! eCSStender.isSupported( 'selector', calc, d, p ) &&
             selector.match( /:nth-child(s*(?:even|odd)s*)/ ) != null ) ||
           eCSStender.isSupported( 'selector', calc, d, p ) ) {
        func = embed;
      }
      func( selector, properties, medium, specificity );
      return func;
    });




                           excerpt from :checked CSS3 Selectors extension
            github.com/easy-designs/eCSStender.CSS3-selectors.js

jQuery Summit - November 2010                                                    75
jQuery, eCSStender & you




addRules()
   var style = eCSStender.embedCSS(
      'p { color: red; }',
      'screen',
      false
   );

   // ...

   eCSStender.addRules(
      style,
      'p { color: blue; }'
   );




jQuery Summit - November 2010         76
Can you look
something up for me?

             No problemo.
jQuery, eCSStender & you




lookup()
   var matches = eCSStender.lookup(
      {
         selector:    'h1',
         specificity: { min: 0, max: 2 }
      },
      '*'
   );
   // looks for rules where the
   // selector includes an h1 and the
   // specificity is between 0 and 2
   // e.g.
   // [ { medium:        'all'
   //       selector:    'h1',
   //       specificity: 1
   //       properties: { color: 'red' }
   //     }, ... ]




jQuery Summit - November 2010              78
Help make me better!




              MIT Licensed

Fork: github.com/easy-designs/eCSStender.js
Discuss: groups.google.com/group/ecsstender
jQuery, eCSStender & you
                     by Aaron Gustafson
                     Slides available at
          http://slideshare.net/AaronGustafson
           This presentation is licensed under
                   Creative Commons
      Attribution-Noncommercial-Share Alike 3.0
                   More on eCSStender:
                   http://eCSStender.org
                       @eCSStender

                    flickr Photo Credits
             “Everyone loves books but I thought this was the
          dullest photo i had ever taken. I guess not.“ by boltron-
                            “Sharing” by bengrey
               “Three wise monkeys” by Anderson Mancini
                   “Chemcraft manual” by underwhelmer
                 “crawfordmarketcarrotman” by Rigmarole
                       “Röck!! on the right” by Adactio
                          “Internals” by alexsnaps
                     “Wood” by Joost J. Bakker IJmuiden
      “Tribute to Willy Puchner's ‘The Penguins Longing’” by Curnen
http://flickr.com/photos/aarongustafson/galleries/72157625226185257/

More Related Content

What's hot (11)

jQuery and Ruby Web Frameworks
jQuery and Ruby Web FrameworksjQuery and Ruby Web Frameworks
jQuery and Ruby Web Frameworks
 
dojo.Patterns
dojo.Patternsdojo.Patterns
dojo.Patterns
 
Pocket Knife JS
Pocket Knife JSPocket Knife JS
Pocket Knife JS
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Html5
Html5Html5
Html5
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
 
How dojo works
How dojo worksHow dojo works
How dojo works
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentialsSharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
 
Styling components with JavaScript
Styling components with JavaScriptStyling components with JavaScript
Styling components with JavaScript
 
In the DOM, no one will hear you scream
In the DOM, no one will hear you screamIn the DOM, no one will hear you scream
In the DOM, no one will hear you scream
 

Similar to jQuery, eCSStender & you [jQuery Summit 2010]

jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
Arush Sehgal
 

Similar to jQuery, eCSStender & you [jQuery Summit 2010] (20)

jQuery, eCSStender & You [DevChatt 2011]
jQuery, eCSStender & You [DevChatt 2011]jQuery, eCSStender & You [DevChatt 2011]
jQuery, eCSStender & You [DevChatt 2011]
 
Declarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDKDeclarative and standards-based web application development with the Ample SDK
Declarative and standards-based web application development with the Ample SDK
 
Jquery
JqueryJquery
Jquery
 
SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Coding the UI
Coding the UICoding the UI
Coding the UI
 
Coding Ui
Coding UiCoding Ui
Coding Ui
 
JavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass
JavaScripters Event on Sep 10, 2016 · 10:30 AM: SassJavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass
JavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass
 
Brunch With Coffee
Brunch With CoffeeBrunch With Coffee
Brunch With Coffee
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
 
How to make Ajax Libraries work for you
How to make Ajax Libraries work for youHow to make Ajax Libraries work for you
How to make Ajax Libraries work for you
 
jQuery Tips Tricks Trivia
jQuery Tips Tricks TriviajQuery Tips Tricks Trivia
jQuery Tips Tricks Trivia
 
20111129 modernizr
20111129 modernizr20111129 modernizr
20111129 modernizr
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
 
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.comA brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
 
Dmytro Kochergin Angular 2 and New Java Script Technologies
Dmytro Kochergin Angular 2 and New Java Script TechnologiesDmytro Kochergin Angular 2 and New Java Script Technologies
Dmytro Kochergin Angular 2 and New Java Script Technologies
 
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
 
BrazilJS Perf Doctor Talk
BrazilJS Perf Doctor TalkBrazilJS Perf Doctor Talk
BrazilJS Perf Doctor Talk
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 

More from Aaron Gustafson

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Recently uploaded (20)

Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 

jQuery, eCSStender & you [jQuery Summit 2010]

  • 1. jQuery, eCSStender & you Aaron Gustafson Easy Designs, LLC slideshare.net/AaronGustafson
  • 2. ?
  • 3. ?
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. jQuery, eCSStender & you Download... eCSStender.org jQuery Summit - November 2010 12
  • 13. jQuery, eCSStender & you Download... eCSStender.org jQuery Summit - November 2010 13
  • 14. jQuery, eCSStender & you Download... github.com/easy-designs/eCSStender.js jQuery Summit - November 2010 14
  • 15. jQuery, eCSStender & you ...collect extensions... jQuery Summit - November 2010 15
  • 16. jQuery, eCSStender & you ...collect extensions... jQuery Summit - November 2010 16
  • 17. jQuery, eCSStender & you ...include... <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="eCSStender.CSS3-backgrounds-and-borders.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transforms.js"></script> <script type="text/javascript" src="eCSStender.CSS3-color.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transitions.js"></script> jQuery Summit - November 2010 17
  • 18. jQuery, eCSStender & you ...and write your CSS section, article, blockquote { border-radius: 10px; box-shadow: 0 0 15px 1px #000; color: rgb(255, 255, 255); transform-origin: 50% 50%; transition: all 0.5s linear; } section:hover, body:focus section, section:hover blockquote, body:focus blockquote { transform: rotate(-15deg); } section:hover article, body:focus article { transform: rotate(30deg); } jQuery Summit - November 2010 18
  • 19.
  • 20. jQuery, eCSStender & you Need selectors? <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="sizzle.js"></script> <script type="text/javascript"> // <![CDATA[ eCSStender.addMethod('findBySelector',Sizzle); // ]]> </script> <script type="text/javascript" src="eCSStender.CSS3-selectors.js"></script> jQuery Summit - November 2010 20
  • 21. jQuery, eCSStender & you Compound classes in IE6? p.test { color: green; } p.alt.test { color: red; } jQuery Summit - November 2010 21
  • 22. jQuery, eCSStender & you Adjacent siblings? p + p { color: green; } jQuery Summit - November 2010 22
  • 23. jQuery, eCSStender & you General siblings? p ~ p { color: green; } jQuery Summit - November 2010 23
  • 24. jQuery, eCSStender & you Advanced pseudo-classes? tr { background: white; } td:empty { background: green; } jQuery Summit - November 2010 24
  • 25.
  • 26. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 3px; } jQuery Summit - November 2010 26
  • 27. jQuery, eCSStender & you Consider border-radius #foo { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } jQuery Summit - November 2010 27
  • 28. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 10px 5px; } jQuery Summit - November 2010 28
  • 29. jQuery, eCSStender & you Consider border-radius #foo { -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -o-border-radius: 10px 5px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 5px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-radius: 10px 5px; } jQuery Summit - November 2010 29
  • 30. jQuery, eCSStender & you Ah, memories... #foo { padding: 10px; width: 200px; width: 180px; height: 200px; height: 180px; } /* or */ #foo { padding: 10px; width: 200px; height: 200px; } * html #foo { width: 180px; height: 180px; } jQuery Summit - November 2010 30
  • 31. jQuery, eCSStender & you Simplified CSS3? <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="eCSStender.CSS3-backgrounds-and-borders.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transforms.js"></script> <script type="text/javascript" src="eCSStender.CSS3-color.js"></script> <script type="text/javascript" src="eCSStender.CSS3-transitions.js"></script> jQuery Summit - November 2010 31
  • 32. jQuery, eCSStender & you Yup! section, article, blockquote { border-radius: 10px; box-shadow: 0 0 15px 1px #000; color: rgb(255, 255, 255); transform-origin: 50% 50%; transition: all 0.5s linear; } section:hover, body:focus section, section:hover blockquote, body:focus blockquote { transform: rotate(-15deg); } section:hover article, body:focus article { transform: rotate(30deg); } jQuery Summit - November 2010 32
  • 33.
  • 34. jQuery, eCSStender & you Valid extension of CSS -prefix- jQuery Summit - November 2010 34
  • 35. jQuery, eCSStender & you Browser vendors do it -moz- -webkit- -ms- -o- jQuery Summit - November 2010 35
  • 36.
  • 38. jQuery, eCSStender & you Pointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } jQuery Summit - November 2010 38
  • 39. Trivia Question: Who were the co-creators of CSS? (First person to answer correctly, gets a book)
  • 40.
  • 41. jQuery, eCSStender & you Step 1: Register extensions Register jQuery Summit - November 2010 41
  • 42. jQuery, eCSStender & you Step 2: Find stylesheets <html> CSS Inspect jQuery Summit - November 2010 42
  • 43. jQuery, eCSStender & you Step 3: Collect the rules Collect jQuery Summit - November 2010 43
  • 44. jQuery, eCSStender & you Step 4: parse & process Process jQuery Summit - November 2010 44
  • 45. jQuery, eCSStender & you Step 5: Trigger extensions jQuery Summit - November 2010 45
  • 46.
  • 47. jQuery, eCSStender & you Helping hands ๏ Dean Edward’s IE scripts ๏ Selectivizr ๏ css3-mediaqueries.js Browser Patchers jQuery Summit - November 2010 47
  • 48. jQuery, eCSStender & you Alternative syntax ๏ SASS (Syntactically Awesome Stylesheets) ๏ LESS (Leaner CSS) ๏ OO CSS (purely conceptual) Browser Shorthand Patchers Parsers jQuery Summit - November 2010 48
  • 49. jQuery, eCSStender & you Capability checking ๏ Modernizr Testing Scripts Browser Shorthand Patchers Parsers jQuery Summit - November 2010 49
  • 50. jQuery, eCSStender & you Something new ๏ More CSS Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers jQuery Summit - November 2010 50
  • 51. jQuery, eCSStender & you Ecosystem ๏ jQuery plug-ins ๏ CSS Sandpaper One-off CSS ๏ CVI scripts scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers jQuery Summit - November 2010 51
  • 52. jQuery, eCSStender & you Unity! One-off CSS scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers jQuery Summit - November 2010 52
  • 53. Let’s make something awesome! I thought you’d never ask.
  • 54. jQuery, eCSStender & you Pointless, but possible jQuery Summit - November 2010 54
  • 55. jQuery, eCSStender & you Step 1: Dependencies <script type="text/javascript" src="eCSStender.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.EasyPhysics.js"></script> jQuery Summit - November 2010 55
  • 56. jQuery, eCSStender & you Step 1: Dependencies // jquery.EasyPhysics.js EasyPhysics.Balloon = function( el ) { new PhysicalObject( el, // element 0, // velocity -0.5, // kinetic energy -0.1 // gravitational effect ); }; EasyPhysics.RubberBall = function( el ) { new PhysicalObject( el, 0, -0.8, 0.5 ); }; EasyPhysics.BowlingBall = function( el ) { new PhysicalObject( el, 1, -0.4, 0.9 ); }; jQuery Summit - November 2010 56
  • 57. jQuery, eCSStender & you Step 2: Registration eCSStender.register( ); jQuery Summit - November 2010 57
  • 58. jQuery, eCSStender & you Step 2: Registration eCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, ); jQuery Summit - November 2010 58
  • 59. jQuery, eCSStender & you Step 2: Registration eCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, false, ); jQuery Summit - November 2010 59
  • 60. jQuery, eCSStender & you Step 2: Registration eCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, false, function( selector, properties ){ var $el = $(selector); switch ( properties['-easy-physics-fill'] ) { case 'helium': new EasyPhysics.Balloon( $el ); break; case 'rubber': new EasyPhysics.RubberBall( $el ); break; case 'lead': new EasyPhysics.BowlingBall( $el ); break; } }); jQuery Summit - November 2010 60
  • 61. jQuery, eCSStender & you Pointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } jQuery Summit - November 2010 61
  • 62. I love you you know. I know.
  • 63. Does the browser support border-radius? Nope. isSupported()
  • 64. jQuery, eCSStender & you isSupported() eCSStender.isSupported( 'property', 'visibility: hidden' ); // true eCSStender.isSupported( 'property', 'foo: bar' ); // false jQuery Summit - November 2010 64
  • 65. jQuery, eCSStender & you isSupported() eCSStender.isSupported( 'property', 'visibility', 'hidden' ); // true eCSStender.isSupported( 'property', 'color', ['#000000','black','rgb(0,0,0)'] ); // true jQuery Summit - November 2010 65
  • 66. jQuery, eCSStender & you isSupported() var el = document.createElement('b'), html = document.createElement('p'); html.appendChild(el); eCSStender.isSupported( 'selector', 'p b', html, el ); // true eCSStender.isSupported( 'selector', 'p ?? b', html, el ); // false jQuery Summit - November 2010 66
  • 67. Can you make my CSS smarter? Of course.
  • 68. jQuery, eCSStender & you Inline style sucks... <div style="display: none;"> <p>Some content</p> </div> jQuery Summit - November 2010 68
  • 69. jQuery, eCSStender & you ...don’t do it! <div style="display: none;"> <p>Some content</p> </div> jQuery Summit - November 2010 69
  • 70. jQuery, eCSStender & you makeUniqueClass() (function(){ var e = eCSStender, the_class = e.makeUniqueClass(), the_regex = /:checked/, classify = function() { var inputs = document.getElementsByTagName('input'), i = inputs.length; while ( i-- ) { if ( inputs[i].checked ) { e.addClass( inputs[i], the_class ); } else { e.removeClass( inputs[i], the_class ); } } }; // ... })(); excerpt from :checked CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 70
  • 71. jQuery, eCSStender & you embedCSS() eCSStender.embedCSS( 'p { color: red; }', 'screen', false ); // embeds the declaration block in // a screen-specific stylesheet immediately jQuery Summit - November 2010 71
  • 72. jQuery, eCSStender & you applyWeightedStyle() eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 10 ); // el now has visibility: hidden set // with a specificity of 10 eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 1 ); // el is not set to visible because // the specificity is not high enough eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 10 ); // el is now “visible” because the specificity // is equal to the prior specificity eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 100 ); // el is now “hidden” again because the // specificity is greater than the prior one jQuery Summit - November 2010 72
  • 73. jQuery, eCSStender & you As flexible as possible function embed( selector, properties, medium ) { var style_block = '', prop; for ( prop in properties ) { if ( eCSStender.isInheritedProperty( properties, prop ) ) { continue; }; style_block += prop + ':' + properties[prop] + ';'; } if ( style_block != EMPTY ) { eCSStender.embedCSS( selector + '{' + style_block + '}', medium ); } } excerpt from CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 73
  • 74. jQuery, eCSStender & you As flexible as possible function inline( selector, properties, medium, specificity ) { if ( medium != 'screen' ){ return; } try { var $els = $( selector ), i = $els.length; while ( i-- ) { eCSStender.applyWeightedStyle( $els[i], properties, specificity ); } $els = null; } catch(e) { // throw new Error( LIB_ERROR + selector ); } } excerpt from CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 74
  • 75. jQuery, eCSStender & you As flexible as possible eCSStender.register( // ... function( selector, properties, medium, specificity ) { var calc = 'p:nth-child(2n+1)', d = div.cloneNode(true), p = para.cloneNode(true), func = inline; d.appendChild( p ); // embedding is the way to go if ( ( eCSStender.isSupported( 'selector', 'p:nth-child(odd)', d, p ) && ! eCSStender.isSupported( 'selector', calc, d, p ) && selector.match( /:nth-child(s*(?:even|odd)s*)/ ) != null ) || eCSStender.isSupported( 'selector', calc, d, p ) ) { func = embed; } func( selector, properties, medium, specificity ); return func; }); excerpt from :checked CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.js jQuery Summit - November 2010 75
  • 76. jQuery, eCSStender & you addRules() var style = eCSStender.embedCSS( 'p { color: red; }', 'screen', false ); // ... eCSStender.addRules( style, 'p { color: blue; }' ); jQuery Summit - November 2010 76
  • 77. Can you look something up for me? No problemo.
  • 78. jQuery, eCSStender & you lookup() var matches = eCSStender.lookup( { selector: 'h1', specificity: { min: 0, max: 2 } }, '*' ); // looks for rules where the // selector includes an h1 and the // specificity is between 0 and 2 // e.g. // [ { medium: 'all' // selector: 'h1', // specificity: 1 // properties: { color: 'red' } // }, ... ] jQuery Summit - November 2010 78
  • 79.
  • 80. Help make me better! MIT Licensed Fork: github.com/easy-designs/eCSStender.js Discuss: groups.google.com/group/ecsstender
  • 81. jQuery, eCSStender & you by Aaron Gustafson Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 More on eCSStender: http://eCSStender.org @eCSStender flickr Photo Credits “Everyone loves books but I thought this was the dullest photo i had ever taken. I guess not.“ by boltron- “Sharing” by bengrey “Three wise monkeys” by Anderson Mancini “Chemcraft manual” by underwhelmer “crawfordmarketcarrotman” by Rigmarole “Röck!! on the right” by Adactio “Internals” by alexsnaps “Wood” by Joost J. Bakker IJmuiden “Tribute to Willy Puchner's ‘The Penguins Longing’” by Curnen http://flickr.com/photos/aarongustafson/galleries/72157625226185257/