cssMaker

A quick presentation I gave at Code4Lib MIdwest 2014 about cssMaker, a simple script for updating and concatenating CSS files that don't belong to you (and those that do).

Transcript

1. OR, WHEN DUMB
   IDEAS YOU GET AT
   LUNCH WORK OUT
   CSSMAKER:
   MATTHEW REIDSMA
   GRAND VALLEY STATE UNIVERSITY
   

   View Slide

2. WEBPAGE SIZE
   http://httparchive.org/interesting.php
   312K
   2008
   

   View Slide

3. WEBPAGE SIZE
   http://httparchive.org/interesting.php
   2011
   29K
   2012
   1269K 1700K
   2013
   1850K
   2014
   

   View Slide

4. WEBPAGE REQUESTS
   http://www.websiteoptimization.com/speed/tweak/average-web-page/
   http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2013#bytesTotal&reqTotal
   50
   2008
   

   View Slide

5. WEBPAGE REQUESTS
   http://www.websiteoptimization.com/speed/tweak/average-web-page/
   http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2013#bytesTotal&reqTotal
   50
   2008 2011
   86
   2010
   74
   2012
   88
   2014
   96
   

   View Slide

6. GOOGLE
   .9
   30 RESULTS
   10 RESULTS
   PAGE LOAD TIME IN SECONDS
   .4
   2006
   http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
   

   View Slide

7. Half a second delay caused a
   20% drop in traffic. Half a
   second delay killed user
   satisfaction.
   http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html
   “
   Marissa Mayer
   

   View Slide

8. 
   

   View Slide

9. 
   
   
   
   
   
   

   View Slide

10. one.css
    two.css
    http://phette.net/prez/speed-feature-performance-mobile-web/files/index.html#/7
    

    View Slide

11. one.css
    two.css
    both.css
    http://phette.net/prez/speed-feature-performance-mobile-web/files/index.html#/7
    

    View Slide

12. 
    
    
    

    View Slide

13. PRODUCTION
    SERVER
    

    View Slide

14. PRODUCTION
    SERVER
    DEV SERVER
    

    View Slide

15. PRODUCTION
    SERVER
    SIERRA
    DEV SERVER
    

    View Slide

16. PRODUCTION
    SERVER
    ILLIAD
    SIERRA
    DEV SERVER
    

    View Slide

17. PRODUCTION
    SERVER
    ILLIAD
    SIERRA
    DEV SERVER
    ARES
    

    View Slide

18. GVSU.EDU
    PRODUCTION
    SERVER
    ILLIAD
    SIERRA
    DEV SERVER
    ARES
    

    View Slide

19. GVSU.EDU
    PRODUCTION
    SERVER
    ILLIAD
    SIERRA
    DEV SERVER
    VENDOR
    ARES
    

    View Slide

20. GVSU.EDU
    PRODUCTION
    SERVER
    ILLIAD
    SIERRA
    DEV SERVER
    VENDOR
    VENDOR
    VENDOR
    VENDOR
    ARES
    

    View Slide

21. View Slide

22. View Slide

23. CSS FILES CAN LIVE ON ANY SERVER
    1
    

    View Slide

24. CSS FILES CAN LIVE ON ANY SERVER
    1
    NO RUNTIME BUILDS; MANUAL OR CRON
    2
    

    View Slide

25. CSS FILES CAN LIVE ON ANY SERVER
    1
    UPDATE THROUGH HTTP REQUEST
    3
    NO RUNTIME BUILDS; MANUAL OR CRON
    2
    

    View Slide

26. CSSMAKER
    

    View Slide

27. CSSMAKER CSS.JSON
    PROJECT PATH
    

    View Slide

28. CSSMAKER CSS.JSON
    PROJECT PATH
    STYLES.CSS
    

    View Slide

29. View Slide

30. github.com/gvsulib/cssMaker
    

    View Slide

31. THANKYOU
    

    View Slide