Tuesday, November 12, 2013

JavaScript intresting links

Miscellaneous:

D3.js:

Datatables:

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:

Wednesday, October 23, 2013

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

Sunday, June 2, 2013

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

Wednesday, May 8, 2013

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/