Some Useful Web Development Tools

In course of working and learning, we all discover some useful tools that just make life easier. But the net is a big place. And usual venues of information sharing - meeting at conferences and swapping tidbits doesn't happen all the time. So am trying to write down a list of webdev tools, and other general tools that I found useful.

There is a lot of choice out there for most tools. So I have included the one we use, and a few others that we evaluated. To begin with,

General Resources

• ThemeForest: HTML CSS Templates. We use Metronic. But they have many more to suit your style and needs.
• Font Awesome: Nifty icons that work just like fonts
• StackOverflow: Ask and answer your programming questions
• JSFiddle: Scratchpad to test drive your HTML, Javascript, CSS.
• Asana: Work management tools. We eventually didn't use this much
• GitHub: Code repositories
• BitBucket: Another code repo. Take your pick.
• TinyPNG: Compress images
• Qualy SSL Server Test
• Mailtrap: SMTP server testing
• CoffeeScript: Write pythonic javascript

Web Frameworks

• Django: This is probably redundant here, given that we have been talking of Django all the time. Basically, Python based web framework.
• Ruby on Rails, 
• ASP.NET

CSS Frameworks

• Bootstrap: Makes building responsive frontend UI a charm. Well designed and defined css snippets for frequently used web elements.
• Foundation
• HTML5 Boilerplate

JavaScript Libraries

• jQuery: Nifty JavaScript library that makes html document traversing, event handling and ajax simpler
• YUI

JavaScript Frameworks

• Backbone with Marionette: Backbone is awesome when you have a fairly interactive application. Helps you manage the client data display and event handling in a MVC fashion. Marionette is another library that makes backbone easier. Now, just to note, there are many more JavaScript Frameworks coming along. Back when we were evaluating, it was Backbone, Angular and Ember. But by the time I publish this post, this list will probably be outdated. :-)
• AngularJS
• Ember
• Meteor
• NodeJS
• ReactJS

Code Editors

Okaym. We are a Vi shop. But for what its worth, there are these awesome 

• PyCharm
• Sublime Text
• Atom
• WebStorm

Module Loaders
Won't make a recommendation here since we are not yet convinced that out choice is working for us yet :) But you have Module Loader Comparison + Pros / Cons to help out

• Webpack
• Browserify
• Require.js

Build Tools

• Gulp
• Grunt

Know of an awesome tool? Leave a comment!

Writing Custom Template Tags in Django

Django templates are the view part of the Django MVC. So, the templates should just handle the display part and any login in templates should be kept to a minimum. However, there are times when we just have to include logic in the templates, and using template tags is the most elegant way to handle this. Creating your own custom template tags is fairly simple.

One template tag needed often is to get the value from a dictionary.

We like passing dictionaries to templates because dictionaries keep everything readable, especially when I have a long list of parameters to pass to the template. Django templates have no in-built mechanism to retrieve a specific key from the dictionary. So we will write our custom template tag to do that.

Create a directory tempatetags/ under your apps directory. In this directory create a file custom_filters.py.

from django import template

register = template.Library()

@register.filter('key')
def key(d, key_name):
    try:
       value = d[key_name]
    except KeyError:
       # handle the error
       raise Http404  
    return value

Now, from views.py, we pass a dictionary to the template. Say
valdict = {'parent':'Mr John Doer', 'child1':'Emily Doer', 'child2':'Mark Doer'}

To access the dictionary keys in the template we do,

template.html.

{% load custom_filters %}

{% block main_content%}
Parent: {{ valdict|key:parent }}
Child1: {{ valdict|key:child1 }}
Child2: {{ valdict|key:child2 }}
{% endblock %}

Adding placeholders, autofocus and other attributes to Django forms

Placeholder is a short hint (a word or short phrase) intended to aid the user with data entry in forms. With HTML5, adding placeholders to forms is as simple as including a keyword:

<label>Name: <input name="name" placeholder="John Doe" type="text" /></label>

This would appear in the form as:

  Name:

To add placeholders to Django forms, simply specify placeholder as an attribute to the form widget.

  name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'John Doe'})

This is actually a pretty general and useful way of passing attributes to Django forms. We can pass other attributes like 'autofocus':'autofocus'. Autofocus is when we want the form field to be in focus automatically when the page loads.

This is for forms created in our app's own forms.py. If we want to pass attributes to forms created by a Django package, we have to pass those attributes at the form's init.

Say, to add attributes to a form called RegistrationForm from some Django package with fields username and password, first create a form in project's forms.py that inherits RegistrationForm. In the __init__ function of the inherited form, pass all the attributes to the form widgets.

class MyRegistrationForm(RegistrationForm):
    def __init__(self, *args, **kwargs):          
        super(MyRegistrationForm, self).__init__(*args, **kwargs)
        self.fields['username'].widget.attrs['placeholder'] = u'Username'
        self.fields['password'].widget.attrs['placeholder'] = u'Password'

Now while using the form, use it as

form = MyRegistrationForm()

This will display base form with the attributes passed to to it at init.

Changing Django Password

Go to the directory where your settings.py resides:

$ python manage.py shell
>>from django.contrib.auth.models import User
>> users = User.objects.all()
>> users
(output) [<User: foo>, <User: adminlogin>, <User: bar>]
>> user = User.objects.filter(name='adminlogin')
>> user.set_password('newpassword')
>> user.save()

This can be used to do most user object management.