JavaScript intresting links

Miscellaneous:

• Comparing YUI, Dojo, ExtJS, and JQuery.

• Flotcharts.

• JEditable: edit in place plugin form JQuery.

• X-editable. 

• Input masks.

• AngularJS.

• JQuery fundamentals.

• Function declarations vs function expressions.

D3.js:

• D3.js map tutorial.

• D3 click to zoom examples.

• Making maps with D3.

Datatables:

• Datatables events.

• Datatables column visualization selection.

• Datatables fixed headers, fixed columns.

• Datatables table tools.

• Datatables column filter widgets.

Django interesting links

Initialization tutorials:

• TangoWithDjango. Fantastic tutorial that explains how to build a web site with Django 1.5.4 as a backend and Twitter Bootstrap as a frontend.

• Django tutorial in four steps six steps (wow! Now there is a part introducing tests and another about static files management). The manual of the official django webpage. As the whole framework, the tutorial is excellent.

Miscellaneous:

• Scaling Django to 8 Billion Page Views. The story of Disqus, how they improved the cache when dealing with high volumes of requests. They used Varnish, a software that works as a cache.

• How to serve static files in production. Don't forget to run collectstatic!

• Writing custom admin commands.

• Django-nvd3 package.

• Deploy Django on Apache with virtualenv and mod-wsgi.

• Another good tutorial.

• Django authentication with ActiveDirectory.

• Django resetting passwords.

• A simple Django with AJAX example.

Using git

Some useful commands when using git

Make a commit:
git add *
git commit -m "message"
git push origin master

Recover the state (be careful, overrides local changes!):
git reset --hard HEAD
git clean -f -d
git pull origin master

Delete on the repository the local deleted files:
(from http://stackoverflow.com/questions/1402776/how-do-i-commit-all-deleted-files-in-git)

Using the ndv3.js library

nvd3.js is an amazing d3 charts library.

However, it has few documentation in its website. In this post I put a summary of the useful things I've done when working with nvd3.

• Integrating nvd3 with Django

django-nvd3 is a Django package which integrates nvd3 charts in a Django-Pythonic way. It also lacks a bit of documentation.

In this site there is the source code  of the package, what allows us to see the possible parametrizations of the chart:

def load_chart(chart_type, series, container, x_is_date=False, x_axis_date_format="%d %b %Y", tag_script_js=True, color_category='category20'):

The variable color category is the way to specify the colors range of the chart. However, in my case I had to specify its values in the javascript code instead of doing it directly in Python.

...
(javascript)
var mycolors = ["#80B898","#007030","#E58A01"];
d3.scale.mycolors = function() {
    return d3.scale.ordinal().range(mycolors);
}
(end javascript)

{% load_chart grafico.charttype grafico.chartdata "grafico_container" True "%d %b %Y" color_category='mycolors' %}
...

• Customizing more nvd3.js charts

If you want further customization on nvd3.js charts then you have to move completely to the js environment. Some useful links I used:

Event trigger when  a serie is selected

Brush extent when working with a line with focus chart

Updating different d3 charts on the same page

How to add a Gmail account with double step verification to an Android phone

It is a bit tricky. When you are asked to write the password, it is not your account password. You must specify a password which is unique for the Android application. It is well explained here:

http://alleged.org.uk/pdc/2012/11/29.html

Ubuntu 12.04 things

• How to add to launcher Chrome in incognito mode:

http://askubuntu.com/questions/159630/how-do-i-make-google-chrome-open-incognito-by-default-in-12-04

• Configure Ubuntu inside Virtualbox. Install virtualbox-guest-additions

http://askubuntu.com/questions/155947/virtualbox-guest-additions-wont-install-on-ubuntu-server-12-04

CSS - Utilities

• How to make an horizontal list. Very well explained. Step by step: 

http://css.maxdesign.com.au/listutorial/horizontal_master.htm

• Resolution order in CSS

http://www.boogiejack.com/CSS_4.html
http://www.webteacher.ws/2010/08/26/resolving-conflicts-in-css/
http://www.webteacher.ws/2008/05/19/tip-calculate-the-specificity-of-css-selectors/

• id vs class

http://stackoverflow.com/questions/970730/css-id-vs-class
http://stackoverflow.com/questions/544010/css-div-id-vs-div-class

• 3 column liquid layout

http://alistapart.com/article/holygrail
http://matthewjamestaylor.com/blog/perfect-3-column.htm

• How to float divs

http://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css



Apart from these utilities, recently I found "the collection", the most popular set of utlities for the front end desig: Twitter Bootstrap. Twitter Bootstrap is a free collection of tools for creating websites and web applications (HTML, CSS, and JavaScript toolkit). It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions. It is the most popular project in GitHub and is used by NASA and MSNBC among others.

http://twitter.github.io/bootstrap/