Installing Bower

Bower is written in Node.js and therefore require Node package manager npm to install it. So first you will need to install Node.js, by choosing an installer on the Node.js download page.

Once Node.js is installed, simply run the following command:

Finding packages

There’s two ways of looking for packages:

Either search for packages using the command line tool:

Or alternatively, browse them from the online repository

Installing packages

Once you have found your favourite packages, run the following command within your project folder:

It may take a minute or so…

Please note that Bower will cache your downloaded packages in ~/.bower/cache so next time you run the install, it will use the cache version for a quicker install.

Though, if the packages have been updated and you want to download the latest, you can clear the cache:

Or if you wish to update your packages:

Building your assets

Grunt is wonderful tool build in Node.js which basically allows you to write a set of functions that will process your assets as required. You can for example command to jshint (check JS syntax), concat (Concatenated multiple files in one) and uglify (minify files) a bundle of JS files as required.

The list of plugins is long so check the Grunt plugin page to see what it can do. For the purpose of this article, I will demonstrate how to use Grunt for scaffolding the assets installed by Bower, and building a deployment methodology to manage our assets.

First we need to install Grunt, in a similar fashion as we did for Bower, using NPM:

Then, we need to create a package.json file to indicate which Grunt dependencies we need to install:

And install:

Then, we must create a gruntfile.js to config which action we would like Grunt to execute:

In this config, we specify which files to copy files from downloaded packages (copy), check for syntax (jshint), which file to concatenate (concat), which file to uglify (uglify) and finally which file to watch (watch).

To execute this command:

By default, grunt will run the ‘default’ tasks. So it is also possible to run a specific task for example:

The build command will pull the assets from the packages downloaded by Bower and set up a default starting architecture for the new project. So technically, it should only be run once.

Watch file changes

You can also watch you files, so if you change any of those files, then grunt will automatically re-run the config, which great to test development work.

So if you use something like CodeKit, then you won’t need it anymore!

Further reading

You can read the NPM Bower package instructions for an overview of all the commands or simply look on the Twitter Bower home page.

For Grunt, you can refer to their online documentation.

In order to pass in the required CRSF token for Django POST requests, we can config our Angular module to add the X-CSRFToken POST header parameter on every call. To do so, set a config on the app module that way:

In this scenario, the csrfmiddlewaretoken is output by the Django template context as an hidden input field.

Download the gist: ANGULARJS – Django CSRF Token header setup

Route path changes (or URL redirect)

Obviously in AngularJS, we don’t actually redirect the user but we change the url path (the one followed by #/) in order to load a different controller. It is quite simple to do, simply by giving a url parameter to the path() method:

Do not forget to pass $location in your controller arguments!

More in depth documentation is available on the AngularJS $location reference page

Passing data to a POST call with $http

The $http POST call on AngularJS will not automatically convert your data array to a set of parameter for the AJAX call. So you must encode the data array as follow (i’m using jQuery to do so):

$.param(data))

Example:

Related links

I found even more tips and tricks on this blog: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED

The main issue with IE7 is its lack of support for HTML5 tags, so we have to tag our AngularJS HTML template accordingly to make sure it will load our app.

So here’s how it got it to work:

Now I have seen many sites suggesting adding those attributes on the <html> tag, but for me it doesn’t work! So stick with the body tag and you should be a much happier person!

Then, we need to tag our ng-view accordingly as well:

Using the class binder is safer than trying to support for <ng-view>

Adding support for JSON

You will need to load this JSON polyfill for IE7 and IE8

http://bestiejs.github.com/json3/

Supporting for special tags

AngularJS developer site provides a great starting guide on adding support for special tags on IE7, so here’s a good way to start:

http://docs.angularjs.org/guide/ie

This is what they suggest:

Though I am not using it, I’d rather stick to the old fashion class binding system!

The long waited Textmate 2 being converted to an open source project still at an alpha stage hasn’t made it a tool of choice for me.

Luckily, my fellow developer @kin_hung has been using Sublime Text 2 for quite a while and has showed me a list of useful packages that could seriously increase my productivity. So the choice was made.

I have listed some cool packages I have installed so far, but I probably will add more later on as I discover them so it’ll be worth keeping an eye on this article.

First, let’s get a package installer

This will allow us to install (almost) any package from the Sublime command line which is a big time saver.

Follow the instructions on this page:

http://wbond.net/sublime_packages/package_control/installation

Or simply type the following in your Sublime console (Menu > View > Show Console):

Django templates, model fields & form fields

https://github.com/squ1b3r/Djaneiro

It really eases up writing Django code, I’m so glad I don’t need to write {% %} ever again!

Template examples

Model field examples

Form field examples

HTML & CSS high speed coding

http://code.google.com/p/zen-coding/
This is the most intuitive way I have seen to shortcut HTML. You can write a string like this:

div#page>div.logo+ul#navigation>li*5>a

… and it will generate this:

That’s at least 30s saved!

Jquery

A long list of jQuery shortcut that will save you plenty of time again.

https://github.com/mrmartineau/jQuery

Tutorials

If you wish to dig deeper into Sublime Text 2, then I recommend reading this tutorial:

https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

Content quality is ensured on a registration process by approval, where each first fiction piece is reviewed by a moderator before according the ‘publisher’ account type to the registrant.

On the same lines a Dribbble.com, Burrst will maintain high quality content by selecting only the worthwhile. Looking back on the success on Dribbble, I’m sure this will have positive effects on the website.

Being a web developer and therefore very curious about what is powering this site, I have collected from Anthony a few things that I will share with you now.

So, what is Burrst.com built on?

Burrst is built on Tornado, a lightweight Python framework which has the unusual advantage of being an asynchronous web server as well (great for live notifications which we’ll discuss further down).

But why Tornado and not Django for example?

Well, Tornado is lightening fast (hence the name) and Ant like his applications to be fast (we all do really). So by being lightweight and well written, the result are staggering: under 300ms page load and under 500ms for a fully loaded home page, that’s just about the time to see the loading spin appearing in your browser window.

Speed is such as an important factor in application success, users tend to get frustrated after 1s an will probably leave at 4s, the whole user experience starts with speed, and more generally, responsiveness.

Template engine

Tornado is equipped with a lightweight template processor which works by inheritance (in the same way as django does) but don’t allow includes. You can run raw Python in the template but that may not be the best practice, keeping the logic away from the view lead to leaner code.

Form management

This is where things start to get tight. The built in form system is limited and is likely to be insufficient to build public apps, where a high level of validation, security and variety of fields are required. So Burrst has turned its eyes towards wtForms, a much more complete package that plugs in easily in Tornado, providing it with the necessary form tools, considerably diminishing the amount of development work.

Database handling

Tornado comes with a MySQL database handler but speed is not its forte. So it has been a wise decision to turn to Storm, a super fast database handler. Storm has the advantage to bundle up a series of queries before applying them, increasing processor efficiency, and also provide query result caching for accelerating those recurring query tasks.

One downside of Storm is that its developer haven’t completed the documentation, which that you will have to dig in the source to really get the best out of it.

Search

One thing that Tornado does not cover is a search engine. So Woosh have been implemented for its ease of use and fast search.

Just like creating a model in Django, Woosh allow the creation of search index objects where one can specify which attribute they want to feed in the index for later being queried against.

Index generation is not automatic so a recurring job must be in place to regularly update the index with new content. Alternatively, it could be updated when a user save new content but that may lead to an extra delay in page processing, unless you are using a Python queuing process so it won’t affect the immediate page load.

Overall it may also add on computer cycle which can be optimise by having a single global update during quiet times. I have recently integrated Mixpanel for application event tracking, and they strongly advise to use a python queuing processing to send tracking call without delaying the page load.

Cloud server

Burrst is running on the very famous Amazon EC2 platform, using a micro-instance (yes, micro!) to render an average of 35000 pages a month without a problem, thanks to the efficiency of the application. The instance offers 613MB of RAM and run on a 64bits core.
All media files are hosed on the S3 CDN, once again lightening the load on the micro-instance.

From idea to product

The process of delivering Burrst has been surprisingly fast, fitting is today’s modern laws of velocity where delivering small but fast and adapting along the way to the user needs is key to success.

The project has started on January 1st, 2012, from Anthony passion for writing fiction and not having an exclusive, content quality checked website to do so. It was time to offer a service that bring good prose to highlights rather being buried in a pile of mediocre work.

Only 6 months down the line, after a regular dedicated amount of hard work, Burrst was ready to hit the wild at the end of June 2012.

And it’s been an impressive start with already 131,283 words burrsted and nearly 200 members within the first 3 months.

The project has been a success so far, I believe first for its concept but undeniably propelled by the quality of the service delivered, in terms of content, usability and speed.

The project is about demonstrating the impact of football players performance (whether good or bad) on the pitch and how it affects their social media print off it.

Chris Jones & Gary Blowers have been doing a great job in writing consistently fresh content, pulling out and explaining some social facts we can see on the graph, along with interesting feedback on the players performances.

The design was created by Gavin Auty, and I have worked on a few refinement of the UI for optimal ease of use.

How does it work

The website is equiped with a cron job (a schedule task on the server), which fetches data every 30 mins for a list of players owning a Twitter and/or Facebook account. The data is then saved in a database (over 90,000 rows so far!) to be later processed by the charts.

In order to display a nice graph, we need to generate an array of values every 30 mins between a start date and end date. I had to program an extrapolation script which covers for missing data points. As good as Twitter’s API is, we do get the odd connection lost, which means we have holes in the data. Using the extrapolation, we just use the previous values if the current one is missing, avoiding holes in the graphs.

Datatainment

Once we had the data nicely processed, it was time to display it a beautiful charts. Lack of time forced me to use a third party chart code (amcharts.com) which in the end proved to be a great asset of the site.

We feed the data to the chart using a JSON data object that we get from an AJAX call. The data object is then processed in the chart into a beautiful line graph, which also allows you to refine the view by zooming and slicing.

Putting it all together

One of the biggest challenge has been to layout the home page of the site in a way that tell the visitor what is this all about in a single glance. Having using great imagery for the blog articles, we have featured a quick stat view on the right hand side which allow the visitor to quickly play around, but mainly give an incentive to use the great charts we produce.

Then comes the tournament results and fixtures for reference and how to connect with our social network.

We also decided to support The Great Ormond Street Hospital by giving a small donation for each unique visitors we get on the site.

Oh and also, it’s fully responsive.

Feel free to post any comment here about the site, any feedback is always welcome (good or bad).

Export Tumblr blog and import into WordPress

Here’s how to import your XML data file into wordpress

1. Log into that blog as an administrator.
2. Go to Manage: Import in the blog’s admin panels.
3. Choose “WordPress” from the list.
4. Upload this file using the form provided on that page.
5. You will first be asked to map the authors in this export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user
6. WordPress will then import each of the posts, comments, and categories contained in this file into your blog