The Gathering Technical blog

Hello World 2.0

05 Apr 2015, by Tri Nguyen

Welcome to the whole new Technical Blog by the crews behind The Gathering.

This is an unofficial rambling place and playground for the Info:Systems, Tech:Net and Tech:Server crews from The Gathering. The teams will share their thoughts, ideas and frustration from their work behind the scenes.

Read more about the new gathering.org

The Drawing Board

Well, it is not all that new. Tech:Net was already running a blog over at technet.gathering.org posting their findings and thoughts on network design for The Gathering, and in general everything network.

We were midway in TG15 when the idea of having a joint collaboration between the three technical crews, for us to dribble down our thoughts, frustration and knowledge, got serious. Our chiefs were talking, and we were whispering. Suddenly it became true.

It all started out from scratch not using any old work. The drawing board was empty, and the backend was non-existing. The first lines were drawn and the first Python/Django code was written, nearly at the same pace. The design was converted into beautiful markup and stylesheets, connected to the backed and, here it is. A whole new blog!

Data Migration

The process on migrating from the former Wordpress blog to our new solutions started out as a headache. While wishing for one well structured document containing only the posts, we got a huge XML containing, well, every related element on the site.

The idea of only migrating the latest post was scrapped. If we were going to spend time on understanding the exported data format, we might as well transfer all of it.. A script was thrown together to withdraw all 130 posts and its related information, and structured to reflect the new data model. The content was converted to markdown, the images from each post was fetched by their inline url, and every image reference inside any post was updated to reflect the new paths. Old authors is kept from the Tech:Net blog.

A littled snippet from the data dump:

<link>http://technet.gathering.org</link>
</image>
<item>
  <title>We are getting close.</title>
  <link>
    http://technet.gathering.org/2009/03/16/vi-narmar-oss/
  </link>
  <pubDate>Mon, 16 Mar 2009 21:41:11 +0000</pubDate>
  <dc:creator>ior1</dc:creator>
  <guid isPermaLink="false">http://technet.gathering.org/?p=6</guid>
  <description/>
  <content:encoded>
  <![CDATA[
    ....
   <img class="alignnone size-medium wp-image-5" title="ciscos" src="http://tgtechnet.files.wordpress.com/2013/03/16032009059-300x225.jpg" alt="ciscos" width="300" height="225" />
  ]]>
  </content:encoded>
  <excerpt:encoded>
    <![CDATA[ ]]>
  </excerpt:encoded>
  <wp:post_id>20</wp:post_id>
  <wp:post_date>2009-03-16 22:41:11</wp:post_date>
  <wp:post_date_gmt>2009-03-16 21:41:11</wp:post_date_gmt>
  <wp:comment_status>open</wp:comment_status>
  <wp:ping_status>open</wp:ping_status>
  <wp:post_name>vi-narmar-oss</wp:post_name>
  <wp:status>publish</wp:status>
  <wp:post_parent>0</wp:post_parent>
  <wp:menu_order>0</wp:menu_order>
  <wp:post_type>post</wp:post_type>
  <wp:post_password/>
  <wp:is_sticky>0</wp:is_sticky>
  <category domain="category" nicename="status-updates">
    <![CDATA[ status updates ]]>

Was turned into:

[
  {
    "fields": {
      "title": "TG15 wireless design - with Meru networks :)",
      "author": 1,
      "tags": [
        1
      ],
      "created": "2015-03-28 09:09:09",
      "published": true,
      "text": "# **Simplifying and making WiFi less complex and ready to adopt the user needs ...
  }
]

By using this little bash one-liner. The content was up running on the new page in seconds.

  find oldposts/ -name "*.json" -type f -print | awk '{ print $1"\ "$2 }' | xargs python manage.py loaddata
Labels: Blog, Info:Systems

The new gathering.org

Apart from the new graphical design, have you noticed any other changes to the website this year? Well, you are right. For The Gathering 2015, we decided to rewrite the entire site from scratch. The result is what you see on gathering.org today.

The old gathering.org website was based on CMSMS, a PHP-based content management system that for several years have shown its limitations in what we can do with the site. Last year, the decision was thus made to create a new site from scratch. The concept for the new site was finalized in late 2014 by Info:Content, Info:Graphics and Info:Systems. It was implemented during January and February this year, and launched on March 1st. The front-end, back-end and CMS functionality is built with much help from our beloved Django Web Framework. This allows us to customize the site to our hearts' desire for the content-producing crews, enabling them to do their job as smoothly as possible.

The site is built with Django 1.7.7 as the back-end, with a fine soup of HTML5 and some nifty Javascript and LESS libraries on the front-end side. Although we use a MySQL database as our data store, we don't see much of it —Django abstracts away the database as much as possible by giving us data access through an ORM. This means that instead of writing complicated queries in SQL, we can use code like this in our back-end logic to e.g. get all our articles:

Article.objects.filter(published=True)

How the stack works

So, let us move on the technical bits. At the bottom of the stack in the production environment is our Django application with all its Python code, such as models, views and templates. This is served locally on the server through a Gunicorn WSGI server. We then use Apache to ProxyPass to the Gunicorn app. On top of this we have a Varnish cache that caches almost every page on the website so that the end users experience fast loading times—even when the server has a lot of concurrent requests.

Caching

Using the Varnish cache means that when a user hits a warm cache when viewing e.g. an article, no database queries, Gunicorn or Apache requests will take up any resources; the response comes directly from Varnish without going through the underlying layers of the stack. When something on the site gets updated, we invalidate the cache. This means that the first user to request the page will hit a cold cache. Varnish then forwards the request to Apache which in turn forwards it to Gunicorn. The response is then again stored in Varnish, and the cache is warm again for users to browse the content swiftly. :)

We hope you are as happy as we are with the new solution! It is a joy for us to code with a framework as fully-featured as Django.

This was Info:Systems' first post on the brand-new The Gathering: Technical Blog. In Info:Systems we have a ton of other cool and/or quirky systems that we would like to tell you about, so stick around to hear more about the technology that makes TG tick!

more

About

TG - Technical Blog is the unofficial rambling place of the Info:Systems, Tech:Net and Tech:Server crews from The Gathering.

Related sites

Collaborators