$30 off During Our Annual Pro Sale. View Details »

Dynamic Static Site Strategies - Coldfront Conf...

Dynamic Static Site Strategies - Coldfront Conference

Are we over-engineering? What is the real effort in developing, hosting and maintaining sites which have many moving parts? The cost of serving static sites has never been lower. And front-end development practices have never been richer. Couldn't we harness this better and make life simpler without dumbing down?

In this talk we'll explore some unexpected capabilities and characteristics of "static" sites. We'll look at ways to use emerging tools and services to create robust, high performance websites which can be more dynamic than some of their heavier and more costly brothers and sisters.

This version was given at Coldfront (http://coldfrontconf.com) in September 2014

#coldfront14

Phil Hawksworth

September 06, 2014
Tweet

More Decks by Phil Hawksworth

Other Decks in Programming

Transcript

  1. >< {}\ stu @PHILHAWKSWORTH THE {CLIENT} NEEDS A BEAUTIFUL SITE

    CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
  2. >< {}\ stu @PHILHAWKSWORTH THE {CLIENT} NEEDS A BEAUTIFUL SITE

    CLEAR CONTENT GOOD BROWSER SUPPORT SPEEDY LOADING EASY TO UPDATE PROBABLY A CMS DYNAMIC CONTENT SENSIBLE URLS
  3. >< {}\ stu @PHILHAWKSWORTH I CARE ABOUT NOT HAVING TO

    MAINTAIN CRANKY AOLSERVER, POSTGRES, AND ORACLE INSTALLS AARON SWARTZ, 2002
  4. >< {}\ stu @PHILHAWKSWORTH JEKYLL RUBY HYDE PYTHON MIDDLEMAN RUBY

    DOCPAD JAVASCRIPT ASSEMBLE JAVASCRIPT HARP JAVASCRIPT
  5. >< {}\ stu @PHILHAWKSWORTH The one problem with the “bake”

    philosophy is dependencies. It’s difficult to keep track of which pages depend on which others and regenerate them correctly when they change.
  6. >< {}\ stu @PHILHAWKSWORTH The one problem with the “bake”

    philosophy is dependencies. It’s difficult to keep track of which pages depend on which others and regenerate them correctly when they change. SOLVED
  7. >< {}\ stu @PHILHAWKSWORTH ANY APPLICATION THAT CAN BE WRITTEN

    IN JAVASCRIPT, JEFF ATWOOD, 2007 WILL EVENTUALLY BE WRITTEN IN JAVASCRIPT
  8. >< {}\ stu @PHILHAWKSWORTH DEPLOYING MY SITE WITH GULPJS BUILD

    WITH JEKYLL OPTIMISE JS & CSS OPTIMISE IMAGES PUSH OUTPUT TO GH-PAGES
  9. > {} st HOSTING & OPTIMISATION AS A SERVICE AUTOMATIC

    CDN MANAGEMENT AUTOMATED DEPLOYMENTS OTHER FUNKY SHIZZLE BITBALLOON
  10. ><\ {} st @PHILHAWKSWORTH < { "posts" : [ {%

    for item in site.posts %} { "title" : "{{ item.title }}", "url" : "{{ item.url }}", "date" : "{{ item.date | date_to_long_string }}", "words" : "{{ item.content | strip_html | wordmap }}" } {% if forloop.last != true %},{% endif %} {% endfor %} ]} SRC/SEARCH.JSON
  11. ><\ {} st @PHILHAWKSWORTH < { ! "posts" : [

    ! { ! ! "title" : "TF;DR - Too funky; Didn't read.", ! ! "url" : "/blog/too-funky-didnt-read", ! ! "date" : "06 January 2014", !"words" : "observations web excess trend for 'parallax' 'scrolljacking' sites has long had me grumbling about the reminds one reasons wanted join big agency like r/ga firs choice conveying perhaps when people encounter all kinds ! }, ... SITE/SEARCH.JSON
  12. ><\ {} st @PHILHAWKSWORTH < SRC/SEARCH/INDEX.HTML <form action="https://www.google.co.uk/search” method="get" class="search">

    <input type="hidden" name="q" value="site:http://hawksworx.com/blog"> <input type="text" name="q"> <input type="submit" class="submit" value="Search with Google"> </form>
  13. >< {}\ stu @PHILHAWKSWORTH WHAT ABOUT COMMENTS? FIRST! DAMMIT I

    THOUGHT I WAS FIRST BUT U BEAT ME LOL ROFL OMG WTF HA HA!!!!!!!!!
  14. ><\ {} st @PHILHAWKSWORTH < ANY HTML, ANYWHERE <form action="http://pooleapp.com/stash/{API-KEY}/”

    method="post"> <input type="text" name="{YOUR-DATA-FIELD}"> <input type="text" name="{YOUR-DATA-FIELD}"> ... <input type="hidden" name="redirect_to" value="{YOUR-THANKS-PAGE}"> <input type="submit" class="submit"> </form>
  15. < }\ stu {}\ THANKS FONTS LINKS BATTLESHIP - http://www.flickr.com/photos/swfphotos/8075999488

    COMPLIANCE - http://www.flickr.com/photos/aorr/1229272894 SALTNPEPPER - http://www.flickr.com/photos/camknows/4595655917 FRESH PRINCE - http://flic.kr/p/fJcbnC AMBITIOUS - http://flic.kr/p/6Uvc2S CAKES - http://flic.kr/p/63had7 MINI ELVIS - http://flic.kr/p/ew7P3 SWARTZ - http://en.wikipedia.org/wiki/Aaron_Swartz JEKYLL - http://jekyllrb.com HARP - http://harpjs.com, harp.io SSGS - http://staticsitegenerators.net HEXO - http://zespia.tw/hexo BAKE, DON’T FRY - http://www.aaronsw.com/weblog/000404 BITBALLOON - http://www.bitballoon.com BITBALLOON API - http://github.com/BitBalloon/bitballoon-api GOOGLE WEB FUNDAMENTALS - http://developers.google.com/web/fundamentals POOLE - http://pooleapp.com PLACARD CONDENSED VENEER EXTRAS WC RHESUS BETA MAC ICON STANDARD