for the campaign because we were working on such a short timeline and already bringing in about $15 million a month. After this work was complete we had a very flexible donation API and now it was time to figure out what would consume it. We knew from the very beginning that our new donation platform needed to be as fast as we could reasonably make it. We were very familiar with all the stories from huge companies like Amazon and Google about how only 100 milliseconds of latency can affect conversions by as much as 1%. Needless to say, performance was was one of our very top priorities. After working closely with our Devops team to plan the architecture of the platform we decided to go static. We consumed the newly created donation API using JavaScript on static HTML pages which were served by our CDN (Akamai). We chose to do it this way in no small part because this is the fastest possible way to get the HTML document to the user since Akamai has over 50,000 edge servers and the
C M S - F R E E W E B S I T E S D E V E L O P M E N T S E E D , J U LY 2 7 , 2 0 1 2 After Development Seed pivoted away from building Drupal-based web applications, we started over completely. We began developing the majority of our projects for clients as simple, single page websites by manually coding the HTML, CSS, and JavaScript files. We pushed the boundaries of what we could do with these standards and avoided building server applications at all costs. As a result, we were able to build some of our best work. We used the money we would have spent on wrestling with Drupal’s codebase to focus on good design and strategy work, making sure we were actually solving our clients’ problems. By developing websites as “client-side” applications that only consist of the files directly usable by a web browser with no extra work done by backend servers, we are able to pass on substantial cost savings to our clients while virtually eliminating risk of the website going “down”. For additional functionality not available to client-side applications, we vet and integrate external services. We can deploy our projects on practically any web server and not worry about whether it has the right software to run our application or the technical resources to handle high traffic.
H E P O S T- C M S W O R L D B E N B A LT E R , O C T O B E R 1 , 2 0 1 2 Although powered by the open-source CMS WordPress, the old site (shared hosting provided by Bluehost) for performance sake, would actually just served flat HTML and Javascript files from disk (generated on a regular basis by an industry-standard plugin known as W3 Total Cache), but fired up WordPress on every request (on top of the already sluggish Apache). Don’t get me wrong. WordPress can be configured to fly given the right setup, and that’s exactly what I set out to do. I got the best of the best. I spun up a shiny new AWS box, got Nginx with microcache up and running, APC for opcode, page, and object cache, and even put everything behind Varnish. But as much as it pains the developer in me, just like fixies, PBR, and Javascript, static sites are back in style. Reduce the complexity, push it to the edge, and let the visitor’s browser call APIs directly to generate any dynamic content you may need. Same functionality, same experience, no headache. The pitch is straightforward. It leads to simple, flexible, and reliable websites that allow for a renewed focus on what actually matters: the content. Dave Cole over at Development Seed (also powered by Jekyll) put it best:
I C S I T E G E N E R AT O R S D O ? {"layout"=>"default", "title"=>"Atrocity Accountability in Syria: What Criminal Investigations Have Uncovered", "category"=>"News", "excerpt"=>"ABA holds experts closed-door Meeting on results of international atrocity crimes investigations in Syria and discus how these investigations may affect policy in Syria and the region.", "published"=>true, "url"=>"/news/2015/04/14/Syria-CIJA-Closed-Door-PR/", "dir"=>"/ news/2015/04/14", "date"=>2015-04-14 00:00:00 -0400, "id"=>"/news/2015/04/14/Syria- CIJA-Closed-Door-PR", "categories"=>["news"], "next"=>, "previous"=>, "tags"=>[], "path"=>"_posts/2015-04-14-Syria-CIJA-Closed-Door-PR.md", "content"=>"On April 14, 2015, the American Bar Association (ABA) Center for Human Rights and its International Criminal Court Project will host a closed door meeting of experts on Syria entitled “Atrocity Accountability in Syria: What Criminal Investigations Have Uncovered.” The event will discuss the legal implications of a non-governmental organization undertaking high-level criminal investigation of international atrocity crimes in Syria and whether Syria policymakers should utilize this information in addressing this 4 year old conflict. The experts in attendance will come from the US government, international diplomatic corps, policy think tanks, human rights and rule of law organizations, and other members of civil society.\n \nTo view the event recap, please visit the event recap [page](http://www.international-criminal-justice-today.org/ event/2015/04/16/Syria-CIJA-Closed-Door-Event-Recap/).\n\n---\n\nThe American Bar Association’s (ABA) International Criminal Court (ICC) Project is an independent initiative of the ABA Center for Human Rights that advances international criminal justice and US-ICC relations through advocacy, education and practical legal assistance. Please visit the ABA's ICC Project [website](http://www.aba-icc.org/) for more information. \n", "section"=>"post"} which template to use what’s the URL other things the template might need to know
assets and HTML files • Build folder gets moved to a server W H AT D O S TAT I C S I T E G E N E R AT O R S D O ? How? • Could be all done on a server with a script - with a deployment solution • Could be RSYNC or SFTP
When your audience accesses your web page there’s very little for the server to do, because it’s just the basics: HTML, JS, CSS, images. • There is no SQL database for the server to access • No complicated layers of caching needed* W H AT D O S TAT I C S I T E G E N E R AT O R S D O ?
pictures and nice fonts, apparently… PERFORMANCE IS A FEATURE serving static pages and assets from a CDN eliminates database calls and helps edge performance
0 50 100 150 200 10k 100k 1m 100m Fictional chart demonstrating the increase in cost and complexity for a static site versus dynamic as traffic increases. traffic
G O V: C O D E D E V E L O P E D B Y T H E P E O P L E A N D F O R T H E P E O P L E , R E L E A S E D B A C K T O T H E P E O P L E T H E AT L A N T I C , J U N E 2 8 , 2 0 1 3 That adds up to cost savings. Sites that are heavily trafficked -- as Healthcare.gov can reasonably expected to be - normally have to use a caching layer to serve static content and add more server capacity as demand increases. “When we worked with the World Bank, they chose a plan from Rackspace for 16 servers,” said Gundersen. “That added tens of thousands of dollars, with a huge hosting bill every month.” HHS had similar strategic plans for the new site, at least at first. “They were planning 32 servers, between staging, production and disaster recovery, with application servers for different environments”, said Cole. “You’re just talking about content. There just needs to be one server. We're going to have two, with one for backup. That's a deduction of 30 servers.” Why was Development Seed able to succeed in selling this approach to coding and collaboration with a federal agency and other contractors, in contrast to traditional systems integrators? Or to put it another way, what could a mapping
G O V: C O D E D E V E L O P E D B Y T H E P E O P L E A N D F O R T H E P E O P L E , R E L E A S E D B A C K T O T H E P E O P L E T H E AT L A N T I C , J U N E 2 8 , 2 0 1 3 • The part that worked. • I ran this on my desktop (took 7 minutes to generate though) • Genesis of prose.io
focus on shipping • freedom to create what I want without the limitations of my CMS or database • To be a hero Use only the systems you need , build what you want
N T S E E D “We used the money we would have spent on wrestling with Drupal’s codebase to focus on good design and strategy work, making sure we were actually solving our clients’ problems.”
problem of publishing easy-to-edit spreadsheet data. Metasmith.io created by a startup to publish a variety of different content (books, marketing site, docs) with one tool Harp created to publish from Dropbox folders Webhook CMS Webhook created to solve the problem of editing content in a static environment
P E S O M E E X A M P L E S Ruby: • Jekyll • Middleman PHP: • Sculpin Node: • Harp • Webhook • Metalsmith Go: • Hugo Templating Languages: Swig, Jade, Liquid, ERb, eco, and the list goes on
has progressed significantly in the past two years • Likely largest user base (4,000 forks) • Avid maintainers and community • Optionally, Deployment and Hosting Baked-in with Github, and free • Liquid not the most flexible, but easy to use. • Sass built in, so no need to layer in another build tool (though I use Gulp for Sass and JS).
files: CSV, YAML, JSON • Great for one-pagers, prototypes, blogs, low-volume updates, abandon-able sites • Incremental regeneration in 3.0, along with collections, make it okay for larger, more complex sites. • Can use the Github-based editor prose.io (but it’s not the greatest). Cloud Canyon editor? • Getting running the first time can be a pain (Ruby)
with an Ember SPA for the control panel • Firebase JSON data store • Swig template-language • Simple API capabilities baked in (lots of possibilities here) • Easy to pre-set your working environment
Setting up on server isn’t too hard, *wink* • quite a few dependencies: • Firebase: data store • elastic search: control panel search • emed.ly: for some fields • Mailgun: send new user emails • Google APP Engine (generation) • Google Cloud Storage (hosting)
1315455780, "_sort_last_updated": 1427502300, "_sort_publish_date": 1315455780, "article_related_person": [ "article -JatT2WACYTM7h7c12eK", "article -JatT2W5DyZz6CdEqU91", "article -JatT2W6gGokyXfq9xoP", "article -JatT2WrHqn-TdAasGEg", "article -JlDsZlftkoJyiFuSOhI" ], "banner_height": 600, "bio": "<p>\n\tLászló Krasznahorkai was born in Gyula, Hungary, in 1954. He worked for some years as an editor until 1984, when he became a freelance writer. He now lives in reclusiveness in the hills of Szentlászló. He has written five novels and won numerous prizes, including the 2013 Best Translated Book Award in Fiction for <a href=\"http://ndbooks.com/book/satantango \"><em>Satantango</em></a>. In 1993, he won the Best Book of the Year Award in Germany for <em><a href=\"http://ndbooks.com/book/the- melancholy-of-resistance\">The Melancholy of Resistance</a>.</em> For more about Krasznahorkai, visit his <a href=\"http:// www.krasznahorkai.hu/\">extensive website. </a></p>", "books_authors": [ "book -JatT2X9P5DzjdRkaq-W", "book -JatT2XJ1bls3Pg6AuUB", "book -JatT2Xaw4xCp37MqhzO", "book -JatT2Xkqs0zfJIEzd-E", "book -JatT2XGj4ytuQMlo5h0" ], "create_date": "2011-09-08T00:23:00-04:00", "featured": 1, "featured_image": { "resize_url": "http://lh5.ggpht.com/8QUjl-_dRIf20DMUetcPbBDe8DVHWF0rrz0dyqYs5-MVkQVKB8ajRe- TAYv_rbcRvggV21mT3vi0tiCN9giAjZVhD2uOfeIo", "size": 104159, "type": "image/jpeg", "url": "/webhook-uploads/1422671300161_c_Olivier_Roller01_cropped.jpg" }, "featured_image_position": "top", "full_name": { "first": "László", "last": "Krasznahorkai" },
in the chain. • Often creates an implicit dependency on having a developer. • Only basic HTML/CSS/JS+ skills needed, but people still caught up on the tool.
platform”, by Kyle Rush • “The Static Web Returns”, by Rob Muhlestein • “How We Build CMS-Free Websites”, by Dave Cole at Development Seed • Why? “The Great Web Slowdown [INFOGRAPHIC]”, by Tammy Everts • “Welcome to the Post-CMS World”, by Ben Balter • Not the app! “Healthcare.gov: Code Developed by the People and for the People, Released Back to the People” by Alex Howard at The Atlantic
budparr
mongolyy
line_developers
takaking22
shigeruoda
kateinoigakukun
machisuke
yuj1osm
98_justdoit
sagara
maroon1st
simo123
kazuhitotakahashi
ufuk
brianwarren
iamctodd
jmmastey
geeforr
jlugia
sonatard
rmw
smashingmag
michaelherold
eileencodes
jponch
