_main.jsx

// Add BLOG default state
global.BLOG_STATE = {"articles":[{"year":2016,"month":9,"date":4,"published":1472940000000,"title":"The case for function tree","isDraft":true,"description":"In this article we are going to talk about writing good code and what challenges we face reaching for it. Readable, declarative, composable and testable are all terms related to writing good code. Often pure functions is referred to as the solution, but writing web applications is mostly about side effects and complex asynchronous flows, concepts that are inherently impure. We are going to look at a concept that allows us to inherit all these great attributes of pure functions and still embrace side effects and complex asynchronous flows.","file":"2016_09_04_The-case-for-function-tree.md","url":"/articles/2016_09_04_The-case-for-function-tree"},{"year":2016,"month":6,"date":10,"published":1465509600000,"title":"Why we dropped immutability","isDraft":true,"description":"In this article I will talk about the story of why Cerebral went from forcing immutability and then later decided to let the developer choose between two sets of features instead.","file":"2016_06_10_Why-we-dropped-immutability.md","url":"/articles/2016_06_10_Why-we-dropped-immutability"},{"year":2016,"month":4,"date":27,"published":1461708000000,"title":"Combining React with industrial design","isDraft":false,"description":"In the world of web applications it is not enough to just write code. We also need a well thought out interface for our users to interact with the application. The web has changed a lot the last few years as we have moved from building static websites to full fledged complex applications. The workflow of writing code, collaborating with designers and push great products out the door is still changing as we explore this brave new world. In this article I am going to tell you about a collaboration where the designer treats the developer as a manufacturer of components, and how this idea can make very happy developers and designers.","file":"2016_04_27_Combining-React-with-industrial-design.md","url":"/articles/2016_04_27_Combining-React-with-industrial-design"},{"year":2016,"month":4,"date":6,"published":1459893600000,"title":"CycleJS driven by state","isDraft":false,"description":"So [CycleJS](http://cycle.js.org/), created by André Staltz, is an interesting project. It runs on the philosophy that applications are just inputs (interaction, normally) and outputs (UI, normally). This analogy fits very well with [Observables](http://reactivex.io/documentation/observable.html), which CycleJS is all about.","file":"2016_04_06_CycleJS-driven-by-state.md","url":"/articles/2016_04_06_CycleJS-driven-by-state"},{"year":2016,"month":3,"date":31,"published":1459375200000,"title":"RxJs the smartest dumbest tool ever","isDraft":false,"description":"Let me just fire off a disclaimer here first. I am a JavaScript developer. I did not go to school to learn programming, I do not know .Net, Java or other languages. Maybe you think that makes me a bad programmer, and maybe it does, but I did not learn JavaScript to learn programming. I learned JavaScript to build things. And with JavaScript running in the browsers I have the right tool for the job.","file":"2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md","url":"/articles/2016_03_31_RxJs-the-smartest-dumbest-tool-ever"},{"year":2016,"month":3,"date":27,"published":1459033200000,"title":"Creating apps with observables","isDraft":false,"description":"Functional Reactive Programming concepts is really grabbing a hold in the community these days. Projects like [Elm](http://elm-lang.org/), [Cycle JS](http://cycle.js.org/), [Angular2](https://angular.io/) and soon to come [RxJs5](https://github.com/ReactiveX/rxjs) is all over twitter, at least on my account :) They are all about observables. If you have not heard of observables they can quickly be explained as a way to handle input over time. This input coming from a mouse click, messages over websocket or whatever really.","file":"2016_03_27_Creating-apps-with-observables.md","url":"/articles/2016_03_27_Creating-apps-with-observables"},{"year":2015,"month":12,"date":17,"published":1450306800000,"title":"Exploring Elm part2","isDraft":false,"description":"In the previous article we took a look at Elm and how we can structure Elm applications. It is important to divide logic into different files and allow views to share state and trigger any actions to change the state in the application. This is based on ideas from Flux, which allows us to structure and scale applications without causing a lot of pain.","file":"2015_12_17_Exploring-Elm-part2.md","url":"/articles/2015_12_17_Exploring-Elm-part2"},{"year":2015,"month":11,"date":30,"published":1448838000000,"title":"Exploring Elm part1","isDraft":false,"description":"So there is a new language that is catching interest these days. [Elm](http://elm-lang.org/), by Evan Czaplicki, is a language that is based on the theories and concepts of FRP (functional reactive programming). In the world of JavaScript we quickly think about tools like [rxjs](http://reactivex.io/), [baconjs](https://baconjs.github.io/) and frameworks like [cyclejs](http://cycle.js.org/). In JavaScript FRP is more of an approach, while in Elm it is just how it works.","file":"2015_11_30_Exploring-Elm-part1.md","url":"/articles/2015_11_30_Exploring-Elm-part1"},{"year":2015,"month":11,"date":16,"published":1447628400000,"title":"Flux vs Single State Tree","isDraft":false,"description":"I attended the Reactive Conference in Bratislava a couple of weeks ago. I even gave a talk on [Cerebral](https://youtu.be/BfzjuhX4wJ0?t=5h44m34s) if you want to check it out. One of the questions after the talk was \"How does Cerebral relate to Redux?\". This is a difficult question to answer because they really try to solve different problems, but I would like the opportunity to answer a redefined question: \"How does Flux differ from using a single state tree?\".","file":"2015_11_16_Flux-vs-Single-State-Tree.md","url":"/articles/2015_11_16_Flux-vs-Single-State-Tree"},{"year":2015,"month":10,"date":1,"published":1443650400000,"title":"Taking the next step with react and webpack","isDraft":false,"description":"It has been a year since I first got into React and Webpack. I have many times expressed that Webpack is amazing, but hard to configure. That being truthy I think there is a different reason why developers does not adopt it. So I want to go head first and say; \"Webpack is amazing, but it is hard to understand why\". In this article I will try to convey the core of what makes Webpack great. Then we are going to look at the very latest contributions to the Webpack/React ecosystem.","file":"2015_10_01_Taking-the-next-step-with-react-and-webpack.md","url":"/articles/2015_10_01_Taking-the-next-step-with-react-and-webpack"},{"year":2015,"month":9,"date":22,"published":1442872800000,"title":"Introducing Cerebral","isDraft":false,"description":"How we think about building web applications evolves quickly. It is not long ago Backbone was the mainstream choice for developing applications. It still is for a lot of developers. But a lot has happened since its release. We got Ember, Angular and the latest mainstream breaker was React with its Flux architecture.","file":"2015_09_22_Introducing-Cerebral.md","url":"/articles/2015_09_22_Introducing-Cerebral"},{"year":2015,"month":8,"date":20,"published":1440021600000,"title":"What if the adddressbar worked like an input","isDraft":false,"description":"Creating applications in the browser is still pretty new, but it is moving incredibly fast. Great innovations are being made and the community is growing. We are pushing the boundaries of the browsers and the rest of the web stack. We create things today that we did not know was possible just a year ago. A lot of it has to do with better browsers, and especially faster JavaScript engines, but maybe now more than ever the way we think about how to develop apps is an important factor. One thing is for sure… it is really fun and exciting to be a frontend developer these days :-)","file":"2015_08_20_What-if-the-adddressbar-worked-like-an-input.md","url":"/articles/2015_08_20_What-if-the-adddressbar-worked-like-an-input"},{"year":2015,"month":8,"date":2,"published":1438466400000,"title":"Why we are doing MVC and FLUX wrong","isDraft":false,"description":"The MVC (Model View Controller) architecture is referenced in almost all Frontend frameworks. Angular, Ember, Backbone etc, but is it really MVC they are implementing? And is Flux really a different architecture? In this article I am not going to go all academic on you, I am going to tell you about why I think Frontend frameworks are not implementing MVC correctly, and that Flux is actually a lot closer to traditional MVC than any of the other frameworks, but still does not quite \"get us there.\" This is a bold statement, but please read on and I will explain.","file":"2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md","url":"/articles/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong"},{"year":2015,"month":5,"date":31,"published":1433023200000,"title":"Being a developer in the cloud","isDraft":true,"description":"About a year ago I checked out the Chromebook and thought to myself, \"Would it not be great to do all my work in the browser?\". Google has done fantastic work on their Docs, Spreadsheets, Hangouts etc. services. Spotify has a web player, I can see movies on netflix and just about everything else I do is related to the web and the browser. But what about developing in the browser?","file":"2015_05_31_Being-a-developer-in-the-cloud.md","url":"/articles/2015_05_31_Being-a-developer-in-the-cloud"},{"year":2015,"month":5,"date":18,"published":1431900000000,"title":"Cerebral developer preview","isDraft":false,"description":"I have been writing about React, Webpack, Flux and Flux like architectures for quite some time now. All these ideas and thoughts have been churning around in my head and after watching [this video](https://youtu.be/2HK4ENBPcWA) on how [Elm](http://elm-lang.org/) is able to control the state flow of your application everything just came together. I wanted to take what I have learned so far and build something that tries to solve all the challenges I have been writing about and at the same time bring something new to the table.","file":"2015_05_18_Cerebral-developer-preview.md","url":"/articles/2015_05_18_Cerebral-developer-preview"},{"year":2015,"month":4,"date":26,"published":1429999200000,"title":"Handling complex state with Baobab","isDraft":false,"description":"So Baobab is here in version 1.0. Let us quickly recap why Baobab is such a great tool for your application and then we will see what version 1.0 addresses in regards of complex state handling. I encourage you to read the [initial article on Baobab](http://christianalfoni.com/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application) first as it introduces why you would consider Baobab at all.","file":"2015_04_26_Handling-complex-state-with-Baobab.md","url":"/articles/2015_04_26_Handling-complex-state-with-Baobab"},{"year":2015,"month":4,"date":19,"published":1429394400000,"title":"The ultimate webpack setup","isDraft":false,"description":"**Note!** The repo created for this article has quite a few updates. That said, it is within the same domain. So please read through for inspiration, but make sure you use the latest repo version to get the latest implementations.","file":"2015_04_19_The-ultimate-webpack-setup.md","url":"/articles/2015_04_19_The-ultimate-webpack-setup"},{"year":2015,"month":4,"date":1,"published":1427839200000,"title":"Functional Reactive Applications","isDraft":false,"description":"I want to take a step back from React JS, FLUX and cursors for a minute. There is a concept that has always intrigued me, but I have never quite understood it in the context of creating an application. The concept is **Functional Reactive Programming**. There are quite a few articles on the subject, but none of them really explains this concept in the context of building an application.","file":"2015_04_01_Functional-Reactive-Applications.md","url":"/articles/2015_04_01_Functional-Reactive-Applications"},{"year":2015,"month":3,"date":1,"published":1425164400000,"title":"True isomorphic apps with React and Baobab","isDraft":false,"description":"So this little library Baobab continues to surprise me. The [previous article](http://christianalfoni.github.io/javascript/2015/02/06/plant-a-baobab-tree-in-your-flux-application.html) I wrote on this used a strategy where you would lock up all your components, but have a dependency to the state tree of the application in each component that needed it. The individual components could point cursors into the state tree, allowing the component to extract state from the state tree and render itself whenever the cursor notified about a change. This optimized the rendering of React JS and gave a very good FLUX structure to your application.","file":"2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md","url":"/articles/2015_03_01_True-isomorphic-apps-with-React-and-Baobab"},{"year":2015,"month":2,"date":22,"published":1424559600000,"title":"The great Angular component experiment","isDraft":false,"description":"My last months has been heavily devoted to understanding React JS and FLUX patterns. In parallell with this I have been helping out on an Angular project. Angular was chosen because the guy who got me involved is a Java developer, and of course he likes Angular. In these months working together there has been a lot of discussion on, \"Why does Java developers love Angular?\". I have given my cents on React JS, using components, and the one way flow of FLUX. The discussions has not been in the form of \"one is better than the other\", but despite his open mind, it was very difficult to explain what makes React JS and FLUX so great.","file":"2015_02_22_The-great-Angular-component-experiment.md","url":"/articles/2015_02_22_The-great-Angular-component-experiment"},{"year":2015,"month":2,"date":6,"published":1423177200000,"title":"Plant a Baobab tree in your flux application","isDraft":false,"description":"All standards, libraries, practices, architectures and patterns needs some time to evolve before becoming widely accepted. The flux architecture is no different. After Facebook released their React JS project the suggested flux architecture has evolved into many different shapes and colors. Some of them more accepted than others. In this article we are going to look at what challenges exists today with the flux architecture. We are also going to look at a solution that I think is a great contribution to the evolution of flux.","file":"2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md","url":"/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application"},{"year":2015,"month":1,"date":1,"published":1420066800000,"title":"Think twice about ES6 classes","isDraft":false,"description":"I got into JavaScript about 5 years ago and I have no to very little experience with other languages. That can sometimes be a bad thing, but it can also be a very good thing. In this article I am going to talk about classes, which is coming to the next version of JavaScript. I am going to talk about why I do not understand developers simulating classes and class inheritance in JavaScript and why I think it is not a very good idea to bring the concept into JavaScript at all.","file":"2015_01_01_Think-twice-about-ES6-classes.md","url":"/articles/2015_01_01_Think-twice-about-ES6-classes"},{"year":2014,"month":12,"date":13,"published":1418425200000,"title":"Webpack and react is awesome","isDraft":false,"description":"**Note!** This article has aged quite a bit. Though it still has valid points, I would suggest reading some of my laster articles on Webpack to get up to speed.","file":"2014_12_13_Webpack-and-react-is-awesome.md","url":"/articles/2014_12_13_Webpack-and-react-is-awesome"},{"year":2014,"month":10,"date":30,"published":1414623600000,"title":"A browserify workflow part 2","isDraft":false,"description":"I wrote an article on working with React JS in a browserify workflow. Well, I got some more experience with it and here is PART2. You can grab this boilerplate at [react-app-boilerplate](https://github.com/christianalfoni/react-app-boilerplate).","file":"2014_10_30_A-browserify-workflow-part-2.md","url":"/articles/2014_10_30_A-browserify-workflow-part-2"},{"year":2014,"month":10,"date":22,"published":1413928800000,"title":"Nailing that validation with React JS","isDraft":false,"description":"**Note!** This article is over a year old now. Though it still has valid points the implementation has changed quite a bit. Look at the repo of [Formsy-React](http://github.com/christianalfoni/formsy-react) for more information.","file":"2014_10_22_Nailing-that-validation-with-React-JS.md","url":"/articles/2014_10_22_Nailing-that-validation-with-React-JS"},{"year":2014,"month":8,"date":29,"published":1409263200000,"title":"Choosing the correct packaging tool for React js","isDraft":false,"description":"**Note!** This article is over a year old now. Though it still has valid points, I would suggest reading some of my laster articles to get up to speed.","file":"2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md","url":"/articles/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js"},{"year":2014,"month":8,"date":20,"published":1408485600000,"title":"React js and flux","isDraft":false,"description":"I am not going to take up your time explaining FLUX in details, that is already very well done on the [Facebook flux site](http://facebook.github.io/flux/). What I want to tell you about is why you would want to consider the flux architecture with React JS","file":"2014_08_20_React-js-and-flux.md","url":"/articles/2014_08_20_React-js-and-flux"}]};

Object.keys(global.SESSION_BLOG_STATE).forEach(function (key) {
  global.BLOG_STATE[key] = global.SESSION_BLOG_STATE[key];
});

require('./../styles/base.css')
require('./../styles/base-layout.css')
require('./../styles/base-components.css')

var React = require('react');
var Page = require('page');
var store = require('./../common/store.js');
var parseArticle = require('./../common/parseArticle');
var Blog = require('./../blog/Blog.jsx');

var render = function () {
  React.render(<Blog/>, document.body);
};

Page('/', function () {
    store.set('currentArticle', null);
    store.set('currentRoute', '/');
    render();
});

Page('/articles/2016_09_04_The-case-for-function-tree', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2016_09_04_The-case-for-function-tree');
  store.commit();
  require.ensure(['./../drafts/2016_09_04_The-case-for-function-tree.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../drafts/2016_09_04_The-case-for-function-tree.md');
    store.select('articles', {file: '2016_09_04_The-case-for-function-tree.md'}).edit(parseArticle('2016_09_04_The-case-for-function-tree.md', content));
    if (store.select('currentArticle').get() !== '2016_09_04_The-case-for-function-tree.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2016_09_04_The-case-for-function-tree.md');
    store.set('currentRoute', '/articles/2016_09_04_The-case-for-function-tree');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2016_06_10_Why-we-dropped-immutability', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2016_06_10_Why-we-dropped-immutability');
  store.commit();
  require.ensure(['./../drafts/2016_06_10_Why-we-dropped-immutability.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../drafts/2016_06_10_Why-we-dropped-immutability.md');
    store.select('articles', {file: '2016_06_10_Why-we-dropped-immutability.md'}).edit(parseArticle('2016_06_10_Why-we-dropped-immutability.md', content));
    if (store.select('currentArticle').get() !== '2016_06_10_Why-we-dropped-immutability.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2016_06_10_Why-we-dropped-immutability.md');
    store.set('currentRoute', '/articles/2016_06_10_Why-we-dropped-immutability');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2016_04_27_Combining-React-with-industrial-design', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2016_04_27_Combining-React-with-industrial-design');
  store.commit();
  require.ensure(['./../posts/2016_04_27_Combining-React-with-industrial-design.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2016_04_27_Combining-React-with-industrial-design.md');
    store.select('articles', {file: '2016_04_27_Combining-React-with-industrial-design.md'}).edit(parseArticle('2016_04_27_Combining-React-with-industrial-design.md', content));
    if (store.select('currentArticle').get() !== '2016_04_27_Combining-React-with-industrial-design.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2016_04_27_Combining-React-with-industrial-design.md');
    store.set('currentRoute', '/articles/2016_04_27_Combining-React-with-industrial-design');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2016_04_06_CycleJS-driven-by-state', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2016_04_06_CycleJS-driven-by-state');
  store.commit();
  require.ensure(['./../posts/2016_04_06_CycleJS-driven-by-state.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2016_04_06_CycleJS-driven-by-state.md');
    store.select('articles', {file: '2016_04_06_CycleJS-driven-by-state.md'}).edit(parseArticle('2016_04_06_CycleJS-driven-by-state.md', content));
    if (store.select('currentArticle').get() !== '2016_04_06_CycleJS-driven-by-state.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2016_04_06_CycleJS-driven-by-state.md');
    store.set('currentRoute', '/articles/2016_04_06_CycleJS-driven-by-state');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2016_03_31_RxJs-the-smartest-dumbest-tool-ever', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2016_03_31_RxJs-the-smartest-dumbest-tool-ever');
  store.commit();
  require.ensure(['./../posts/2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md');
    store.select('articles', {file: '2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md'}).edit(parseArticle('2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md', content));
    if (store.select('currentArticle').get() !== '2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md');
    store.set('currentRoute', '/articles/2016_03_31_RxJs-the-smartest-dumbest-tool-ever');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2016_03_27_Creating-apps-with-observables', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2016_03_27_Creating-apps-with-observables');
  store.commit();
  require.ensure(['./../posts/2016_03_27_Creating-apps-with-observables.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2016_03_27_Creating-apps-with-observables.md');
    store.select('articles', {file: '2016_03_27_Creating-apps-with-observables.md'}).edit(parseArticle('2016_03_27_Creating-apps-with-observables.md', content));
    if (store.select('currentArticle').get() !== '2016_03_27_Creating-apps-with-observables.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2016_03_27_Creating-apps-with-observables.md');
    store.set('currentRoute', '/articles/2016_03_27_Creating-apps-with-observables');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_12_17_Exploring-Elm-part2', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_12_17_Exploring-Elm-part2');
  store.commit();
  require.ensure(['./../posts/2015_12_17_Exploring-Elm-part2.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_12_17_Exploring-Elm-part2.md');
    store.select('articles', {file: '2015_12_17_Exploring-Elm-part2.md'}).edit(parseArticle('2015_12_17_Exploring-Elm-part2.md', content));
    if (store.select('currentArticle').get() !== '2015_12_17_Exploring-Elm-part2.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_12_17_Exploring-Elm-part2.md');
    store.set('currentRoute', '/articles/2015_12_17_Exploring-Elm-part2');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_11_30_Exploring-Elm-part1', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_11_30_Exploring-Elm-part1');
  store.commit();
  require.ensure(['./../posts/2015_11_30_Exploring-Elm-part1.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_11_30_Exploring-Elm-part1.md');
    store.select('articles', {file: '2015_11_30_Exploring-Elm-part1.md'}).edit(parseArticle('2015_11_30_Exploring-Elm-part1.md', content));
    if (store.select('currentArticle').get() !== '2015_11_30_Exploring-Elm-part1.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_11_30_Exploring-Elm-part1.md');
    store.set('currentRoute', '/articles/2015_11_30_Exploring-Elm-part1');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_11_16_Flux-vs-Single-State-Tree', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_11_16_Flux-vs-Single-State-Tree');
  store.commit();
  require.ensure(['./../posts/2015_11_16_Flux-vs-Single-State-Tree.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_11_16_Flux-vs-Single-State-Tree.md');
    store.select('articles', {file: '2015_11_16_Flux-vs-Single-State-Tree.md'}).edit(parseArticle('2015_11_16_Flux-vs-Single-State-Tree.md', content));
    if (store.select('currentArticle').get() !== '2015_11_16_Flux-vs-Single-State-Tree.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_11_16_Flux-vs-Single-State-Tree.md');
    store.set('currentRoute', '/articles/2015_11_16_Flux-vs-Single-State-Tree');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_10_01_Taking-the-next-step-with-react-and-webpack', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_10_01_Taking-the-next-step-with-react-and-webpack');
  store.commit();
  require.ensure(['./../posts/2015_10_01_Taking-the-next-step-with-react-and-webpack.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_10_01_Taking-the-next-step-with-react-and-webpack.md');
    store.select('articles', {file: '2015_10_01_Taking-the-next-step-with-react-and-webpack.md'}).edit(parseArticle('2015_10_01_Taking-the-next-step-with-react-and-webpack.md', content));
    if (store.select('currentArticle').get() !== '2015_10_01_Taking-the-next-step-with-react-and-webpack.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_10_01_Taking-the-next-step-with-react-and-webpack.md');
    store.set('currentRoute', '/articles/2015_10_01_Taking-the-next-step-with-react-and-webpack');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_09_22_Introducing-Cerebral', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_09_22_Introducing-Cerebral');
  store.commit();
  require.ensure(['./../posts/2015_09_22_Introducing-Cerebral.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_09_22_Introducing-Cerebral.md');
    store.select('articles', {file: '2015_09_22_Introducing-Cerebral.md'}).edit(parseArticle('2015_09_22_Introducing-Cerebral.md', content));
    if (store.select('currentArticle').get() !== '2015_09_22_Introducing-Cerebral.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_09_22_Introducing-Cerebral.md');
    store.set('currentRoute', '/articles/2015_09_22_Introducing-Cerebral');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_08_20_What-if-the-adddressbar-worked-like-an-input', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_08_20_What-if-the-adddressbar-worked-like-an-input');
  store.commit();
  require.ensure(['./../posts/2015_08_20_What-if-the-adddressbar-worked-like-an-input.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_08_20_What-if-the-adddressbar-worked-like-an-input.md');
    store.select('articles', {file: '2015_08_20_What-if-the-adddressbar-worked-like-an-input.md'}).edit(parseArticle('2015_08_20_What-if-the-adddressbar-worked-like-an-input.md', content));
    if (store.select('currentArticle').get() !== '2015_08_20_What-if-the-adddressbar-worked-like-an-input.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_08_20_What-if-the-adddressbar-worked-like-an-input.md');
    store.set('currentRoute', '/articles/2015_08_20_What-if-the-adddressbar-worked-like-an-input');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong');
  store.commit();
  require.ensure(['./../posts/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md');
    store.select('articles', {file: '2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md'}).edit(parseArticle('2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md', content));
    if (store.select('currentArticle').get() !== '2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md');
    store.set('currentRoute', '/articles/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_05_31_Being-a-developer-in-the-cloud', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_05_31_Being-a-developer-in-the-cloud');
  store.commit();
  require.ensure(['./../drafts/2015_05_31_Being-a-developer-in-the-cloud.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../drafts/2015_05_31_Being-a-developer-in-the-cloud.md');
    store.select('articles', {file: '2015_05_31_Being-a-developer-in-the-cloud.md'}).edit(parseArticle('2015_05_31_Being-a-developer-in-the-cloud.md', content));
    if (store.select('currentArticle').get() !== '2015_05_31_Being-a-developer-in-the-cloud.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_05_31_Being-a-developer-in-the-cloud.md');
    store.set('currentRoute', '/articles/2015_05_31_Being-a-developer-in-the-cloud');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_05_18_Cerebral-developer-preview', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_05_18_Cerebral-developer-preview');
  store.commit();
  require.ensure(['./../posts/2015_05_18_Cerebral-developer-preview.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_05_18_Cerebral-developer-preview.md');
    store.select('articles', {file: '2015_05_18_Cerebral-developer-preview.md'}).edit(parseArticle('2015_05_18_Cerebral-developer-preview.md', content));
    if (store.select('currentArticle').get() !== '2015_05_18_Cerebral-developer-preview.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_05_18_Cerebral-developer-preview.md');
    store.set('currentRoute', '/articles/2015_05_18_Cerebral-developer-preview');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_04_26_Handling-complex-state-with-Baobab', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_04_26_Handling-complex-state-with-Baobab');
  store.commit();
  require.ensure(['./../posts/2015_04_26_Handling-complex-state-with-Baobab.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_04_26_Handling-complex-state-with-Baobab.md');
    store.select('articles', {file: '2015_04_26_Handling-complex-state-with-Baobab.md'}).edit(parseArticle('2015_04_26_Handling-complex-state-with-Baobab.md', content));
    if (store.select('currentArticle').get() !== '2015_04_26_Handling-complex-state-with-Baobab.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_04_26_Handling-complex-state-with-Baobab.md');
    store.set('currentRoute', '/articles/2015_04_26_Handling-complex-state-with-Baobab');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_04_19_The-ultimate-webpack-setup', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_04_19_The-ultimate-webpack-setup');
  store.commit();
  require.ensure(['./../posts/2015_04_19_The-ultimate-webpack-setup.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_04_19_The-ultimate-webpack-setup.md');
    store.select('articles', {file: '2015_04_19_The-ultimate-webpack-setup.md'}).edit(parseArticle('2015_04_19_The-ultimate-webpack-setup.md', content));
    if (store.select('currentArticle').get() !== '2015_04_19_The-ultimate-webpack-setup.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_04_19_The-ultimate-webpack-setup.md');
    store.set('currentRoute', '/articles/2015_04_19_The-ultimate-webpack-setup');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_04_01_Functional-Reactive-Applications', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_04_01_Functional-Reactive-Applications');
  store.commit();
  require.ensure(['./../posts/2015_04_01_Functional-Reactive-Applications.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_04_01_Functional-Reactive-Applications.md');
    store.select('articles', {file: '2015_04_01_Functional-Reactive-Applications.md'}).edit(parseArticle('2015_04_01_Functional-Reactive-Applications.md', content));
    if (store.select('currentArticle').get() !== '2015_04_01_Functional-Reactive-Applications.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_04_01_Functional-Reactive-Applications.md');
    store.set('currentRoute', '/articles/2015_04_01_Functional-Reactive-Applications');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_03_01_True-isomorphic-apps-with-React-and-Baobab', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_03_01_True-isomorphic-apps-with-React-and-Baobab');
  store.commit();
  require.ensure(['./../posts/2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md');
    store.select('articles', {file: '2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md'}).edit(parseArticle('2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md', content));
    if (store.select('currentArticle').get() !== '2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md');
    store.set('currentRoute', '/articles/2015_03_01_True-isomorphic-apps-with-React-and-Baobab');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_02_22_The-great-Angular-component-experiment', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_02_22_The-great-Angular-component-experiment');
  store.commit();
  require.ensure(['./../posts/2015_02_22_The-great-Angular-component-experiment.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_02_22_The-great-Angular-component-experiment.md');
    store.select('articles', {file: '2015_02_22_The-great-Angular-component-experiment.md'}).edit(parseArticle('2015_02_22_The-great-Angular-component-experiment.md', content));
    if (store.select('currentArticle').get() !== '2015_02_22_The-great-Angular-component-experiment.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_02_22_The-great-Angular-component-experiment.md');
    store.set('currentRoute', '/articles/2015_02_22_The-great-Angular-component-experiment');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application');
  store.commit();
  require.ensure(['./../posts/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md');
    store.select('articles', {file: '2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md'}).edit(parseArticle('2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md', content));
    if (store.select('currentArticle').get() !== '2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md');
    store.set('currentRoute', '/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2015_01_01_Think-twice-about-ES6-classes', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2015_01_01_Think-twice-about-ES6-classes');
  store.commit();
  require.ensure(['./../posts/2015_01_01_Think-twice-about-ES6-classes.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2015_01_01_Think-twice-about-ES6-classes.md');
    store.select('articles', {file: '2015_01_01_Think-twice-about-ES6-classes.md'}).edit(parseArticle('2015_01_01_Think-twice-about-ES6-classes.md', content));
    if (store.select('currentArticle').get() !== '2015_01_01_Think-twice-about-ES6-classes.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2015_01_01_Think-twice-about-ES6-classes.md');
    store.set('currentRoute', '/articles/2015_01_01_Think-twice-about-ES6-classes');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2014_12_13_Webpack-and-react-is-awesome', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2014_12_13_Webpack-and-react-is-awesome');
  store.commit();
  require.ensure(['./../posts/2014_12_13_Webpack-and-react-is-awesome.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2014_12_13_Webpack-and-react-is-awesome.md');
    store.select('articles', {file: '2014_12_13_Webpack-and-react-is-awesome.md'}).edit(parseArticle('2014_12_13_Webpack-and-react-is-awesome.md', content));
    if (store.select('currentArticle').get() !== '2014_12_13_Webpack-and-react-is-awesome.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2014_12_13_Webpack-and-react-is-awesome.md');
    store.set('currentRoute', '/articles/2014_12_13_Webpack-and-react-is-awesome');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2014_10_30_A-browserify-workflow-part-2', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2014_10_30_A-browserify-workflow-part-2');
  store.commit();
  require.ensure(['./../posts/2014_10_30_A-browserify-workflow-part-2.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2014_10_30_A-browserify-workflow-part-2.md');
    store.select('articles', {file: '2014_10_30_A-browserify-workflow-part-2.md'}).edit(parseArticle('2014_10_30_A-browserify-workflow-part-2.md', content));
    if (store.select('currentArticle').get() !== '2014_10_30_A-browserify-workflow-part-2.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2014_10_30_A-browserify-workflow-part-2.md');
    store.set('currentRoute', '/articles/2014_10_30_A-browserify-workflow-part-2');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2014_10_22_Nailing-that-validation-with-React-JS', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2014_10_22_Nailing-that-validation-with-React-JS');
  store.commit();
  require.ensure(['./../posts/2014_10_22_Nailing-that-validation-with-React-JS.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2014_10_22_Nailing-that-validation-with-React-JS.md');
    store.select('articles', {file: '2014_10_22_Nailing-that-validation-with-React-JS.md'}).edit(parseArticle('2014_10_22_Nailing-that-validation-with-React-JS.md', content));
    if (store.select('currentArticle').get() !== '2014_10_22_Nailing-that-validation-with-React-JS.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2014_10_22_Nailing-that-validation-with-React-JS.md');
    store.set('currentRoute', '/articles/2014_10_22_Nailing-that-validation-with-React-JS');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js');
  store.commit();
  require.ensure(['./../posts/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md');
    store.select('articles', {file: '2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md'}).edit(parseArticle('2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md', content));
    if (store.select('currentArticle').get() !== '2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md');
    store.set('currentRoute', '/articles/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});
Page('/articles/2014_08_20_React-js-and-flux', function (req) {
  document.body.classList.add('article-loading');
  store.set('loadingArticle', '/articles/2014_08_20_React-js-and-flux');
  store.commit();
  require.ensure(['./../posts/2014_08_20_React-js-and-flux.md'], function () {
    document.body.classList.remove('article-loading');
    var content = require('./../posts/2014_08_20_React-js-and-flux.md');
    store.select('articles', {file: '2014_08_20_React-js-and-flux.md'}).edit(parseArticle('2014_08_20_React-js-and-flux.md', content));
    if (store.select('currentArticle').get() !== '2014_08_20_React-js-and-flux.md') { document.body.scrollTop = 0; }
    store.set('currentArticle', '2014_08_20_React-js-and-flux.md');
    store.set('currentRoute', '/articles/2014_08_20_React-js-and-flux');
    store.set('loadingArticle', null);
    store.commit();
    render();
  });
});


Page.start();

if (module.hot) {
    module.hot.accept(["./../drafts/2016_09_04_The-case-for-function-tree.md","./../drafts/2016_06_10_Why-we-dropped-immutability.md","./../posts/2016_04_27_Combining-React-with-industrial-design.md","./../posts/2016_04_06_CycleJS-driven-by-state.md","./../posts/2016_03_31_RxJs-the-smartest-dumbest-tool-ever.md","./../posts/2016_03_27_Creating-apps-with-observables.md","./../posts/2015_12_17_Exploring-Elm-part2.md","./../posts/2015_11_30_Exploring-Elm-part1.md","./../posts/2015_11_16_Flux-vs-Single-State-Tree.md","./../posts/2015_10_01_Taking-the-next-step-with-react-and-webpack.md","./../posts/2015_09_22_Introducing-Cerebral.md","./../posts/2015_08_20_What-if-the-adddressbar-worked-like-an-input.md","./../posts/2015_08_02_Why-we-are-doing-MVC-and-FLUX-wrong.md","./../drafts/2015_05_31_Being-a-developer-in-the-cloud.md","./../posts/2015_05_18_Cerebral-developer-preview.md","./../posts/2015_04_26_Handling-complex-state-with-Baobab.md","./../posts/2015_04_19_The-ultimate-webpack-setup.md","./../posts/2015_04_01_Functional-Reactive-Applications.md","./../posts/2015_03_01_True-isomorphic-apps-with-React-and-Baobab.md","./../posts/2015_02_22_The-great-Angular-component-experiment.md","./../posts/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application.md","./../posts/2015_01_01_Think-twice-about-ES6-classes.md","./../posts/2014_12_13_Webpack-and-react-is-awesome.md","./../posts/2014_10_30_A-browserify-workflow-part-2.md","./../posts/2014_10_22_Nailing-that-validation-with-React-JS.md","./../posts/2014_08_29_Choosing-the-correct-packaging-tool-for-React-js.md","./../posts/2014_08_20_React-js-and-flux.md"], function () {
      Page(location.pathname);
    });
}