Embracing the Static Web

laktek.com

Twitter: @laktek

http://www.flickr.com/photos/james_gordon_losangeles/7165224931/

http://www.flickr.com/photos/dariawadsworth/4711228496

http://www.flickr.com/photos/whltravel/4382569524/

Constraints create Innovation!

Created my first web site in 1999

Fast Forward to 2012...

http://www.flickr.com/photos/courosa/5536535796

How we create professional web sites?

Wordpress

Setup Apache
Setup MySQL
Templating in PHP
Crappy WYSIWYG editor
Miss a security update you're doomed!

Content is not just
Title and Text

www.theverge.com/2012/11/2/3589280/google-nexus-4-review

External Content

"A content model helps clarify requirements and encourages collaboration between the designers, the developers creating the CMS, and the content creators."

-- Rachel Lovinger

User-generated Content

Facebook, Twitter, GitHub

Editorial Content

Your Blog, Your Company Site,
Digital Magazines

Let's focus on
Editorial Content

You control the publishing

Optimized for consumption

Permalinks, Responsive

Content doesn't change between each request.

But managing such sites is a PITA!

"Our Age of Anxiety is, in great part, the result of trying to do today's job with yesterday's tools and yesterday's concepts."

-- Marshall McLuhan

Modern Web Development Workflow

Powerful Editors

Vim, Sublime

Sexier Templates

Mustache, Handlebars, Jade, AngularJS

Markdown

_It's pretty awesome_

Version Controlling (Git)

How it nails the problem?

http://www.flickr.com/photos/gideon/5418734

Content

structured in JSON

{
    "site-title": "Hello JSCamp!",

    "tagline": "Semicolons FTW!",

    "host": "www.myblog.com",

    "navbar": [
       { "label": "Home", "href": "/" },
       { "label": "About", "href": "/about" }
    ]
}

Templates

Consists of Layouts and Assets

Layouts

Page, Section & Partial

Assets

Static, Pre-compiled (LESS, CoffeeScript, etc)

npm install -g punch

punch setup my_site

punch s

Starts the local server

punch p

Publish the changes

Helpers

String Helpers, Current Page, Thirdparty Snippets

<h1>{{#capitalize}}{{title}}{{/capitalize}}</h1>


<div id='disqus_block'>
    {{{disqus_snippet}}}
</div>

Asset Bundling

Minifies and concatenates CSS and JS resources

Fingerprinting Bundles

{{#javascript_bundle}}/js/all.js{{/javascript_bundle}}

outputs:

<script src='/js/all-1353949310000.js'></script>

Generator Hooks

Runs after generating each page (eg. sitemap.xml plugin)

Opinionated, but
Fully Flexible

http://www.flickr.com/photos/ntr23/2338001125

Punch-Blog

github.com/laktek/punch-blog

Customizations

Blog Content Handler
Index Helper
Archive Helper
Feed Helper

Favtweets

github.com/laktek/favtweets

Customizations

Custom Content Handler (Twitter API)
Handlebars for Templating