Semerda.com Bootstrap launches on GitHub: Free for everyone!

Go and grab it!

https://github.com/semerda/semerda-com-bootstrap

Get Semerda.com Bootstrap on GitHub

About GitHub

GitHub is a distributed version control system similar to Mercurial with a free Mac client. GitHub makes it easier to collabortate with others and share projects with the universe. GitHub has grown into an application used by over a million people to store over two million code repositories, making GitHub the largest code host in the world.

Goal for Semerda.com Bootstrap: “To help ease with starting up new projects in Python on Django with jQuery, Twitter’s Bootstrap, Modernizr & Handlebars.js.”

If you have any suggestions how to make this solution better please Leave me feedback.

Cool things you will find inside

  • Plenty of internal documentation to why something is being done. Also utilize the “Ref:” URLs. They are there as a reference for the source of the content. Great for digging deeper into those specifics.
  • Settings.py split into Development & Production modes based on platform node. The base template contains the platform node wrapped in comment declaration so you can view source and see if you are running in development or production mode.
  • HTTP error 404, 500 & 403 handlers with associate Templates – these are bare atm so feel free to expand and contribute better versions. See Quora for funniest 404 pages.
  • If you add {% include ‘django_debug.html’ %} to your base.html Django Template footer you will see Debugging information in the footer of all your pages. Not recommended in Production mode.
  • Handlebars & Django Template consistencies to help use.
  • Custom Handlerbars Helpers to help with index counting in a grid table and generating Twitter Bootstrap buttons.
  • All JavaScript files are loaded using Modernizr’s yepnope, a asynchronous conditional resource loader.
  • Few custom Semerda.com JavaScript modules using the Modular Pattern. I’m a big fan of the Modular Pattern due to its encapsulation, namespacing and seperation of concern possibilities.
  • What custom Modular JavaScript you will find under /media/js/
    • semerda.com.common.js – highlight the correct primary navigation tab based on page visited.
    • semerda.com.analytics.js – wrapper for Google Analytics (GA) to automatically tag all links on page by parsing the DOM for href. Also uses “data-ga” attribute (where present) to push custom labels for GA event tracking.
    • semerda.com.browserstorage.js – for HTML5 supported browsers the JSON load uses either the browser local or session store to work with the JSON data. Default is always local store. Great for use with JSON/API call data you want to cache locally vs constantly making calls to the API – see /about/ page for this example in use.

Frameworks used

  • Django: Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design.
  • jQuery: The Write Less, Do More, JavaScript Library: A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.
  • Bootstrap, from Twitter: Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.
  • Modernizr w/ yepnope.js: Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need.
  • Handlebars.js: Minimal Templating on Steroids: Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.

Thanks to

makinacorpus (Makina Corpus) for custom template tag code to get around handlebars mustache tags which are natively parsed by Django templating engine. Ref: https://github.com/makinacorpus/django-templatetag-handlebars

References

The following are blog posts I have written in the past which will help you when working with the code in Bootstrap Semerda.com.

A bit about the author Ernest Semerda

Bsc. Comp Sci & AGSM MBA. I Lead & Code for Coupons.com. Prior software architect at AMP Ltd, later CTO of Couponstar Ltd followed by an acquisition by Coupons.com, a $1B company. I am an Aussie entrepreneur & software engineer working on refreshing & innovative products in Silicon Valley like GTDfaster, Facebook ReadingList app et al.

This is my personal website: http://ernestsemerda.com/

I am responsible for the following properties

  • The Road to Silicon ValleyThis blog. A Blog which provides tools and resources to anyone wanting to come and work in Silicon Valley’s high tech industry. Experience is based on my own personal journey arriving in Silicon Valley on March 2009.
  • GTDfaster iPhone app – GTDfaster rests on David Allen’s principle of Getting Things Done (GTD). That a person needs to move stuff out of the mind by recording them externally into a trusted source. GTDfaster is this trusted GTD source. Also has a seperate posterous blog on GTDfaster.
  • Facebook Readinglist app – A popular free Facebook app to help you share, inspire & create a collection of books you have read, want to read or are reading. Start influencing your friends on Facebook today.

To-do list for Semerda.com Bootstrap

There is always a never ending to-do list. If you want to dd anything to it please feel free to.

  • Separate Handlebars Helpers into Standard & Twitter specifics.
  • Give SEMERDA prototype object a unique handle like jQuery does with $. Maybe use “$S”. This should shorten the calls a bit.
  • Throw in more Modernizr examples for Browser detection versus feature detection. Always aim for browser detection hence why we are using Modernizr here. We do not want to block users but gracefully degrade the experience where required.
  • Provide a set of minified semerda.com.xyz custom JavaScript modules. For now just use [Google Closure Tools](https://developers.google.com/closure/) to do the minification.
  • Add a real API vs calling /json/my_data.json dummy data.
  • Add some funny custom 404 pages. Inspired by Quora for funniest 404 pages.
  • Add Django Debug Toolbar – A configurable set of panels that display various debug information about the current request/response.
  • Add Python Modules examples and associated Unit Tests.
  • Add Django Middleware example and associated Unit Tests.
  • Cleanup/feedback from users – that’s you 🙂

Go and grab Semerda.com Bootstrap and enjoy the ease of building powerful Python based apps. Semerda.com Bootstrap primetime: https://github.com/semerda/semerda-com-bootstrap

Enjoy!
~ Ernest

Gentle Introduction to Python

Right, let’s dig into my favorite language. Python. It’s super easy to read & learn, it’s concise and one of the hot languages in Silicon Valley. In fact, Python is also one of the easiest languages to grasp if you want to learn to code on mobile.

The following assumes you understand basic software engineering concepts.

A bit about Python

  • Design philosophy emphasizes on code readability. Important because software engineers spend most of their time trying to understand code. (Ref Coding Horror)
  • Has a nice MVT open-source web framework called Django. Django emphasizes reusability and pluggability of components, rapid development, and the principle of DRY (Don’t Repeat Yourself).
  • It features a fully dynamic type system with late binding (duck typing) and automatic memory management, similar to that of Scheme, Ruby, Perl, and Tcl. More here.
  • Runs on LAMP, where the P = Python. Here’s how to set it up.
  • Currently one of the hottes languages (alongside Ruby/Ruby on Rails) in Silicon Valley especially among startups.

Sample of popular sites build in Python

Google, Dropbox, Reddit, Disqus, FriendFeed (Sold to Facebook to drive their News Feeds), YouTube, Quora (rising star), Douban. Comprehensive list here.

Python

  • Uses whitespace indentation, rather than curly braces or keywords, to show & delimit block structure. I prefer 4 spaces.
  • Everything is an object (first class) and everything has a namespace accessed by dot-notation.
  • Naming convention UpperCamelCase for class names, CAPITALIZED_WITH_UNDERSCORES for constants, and lowercase_separated_by_underscores for other names. See Python style guide and The Zen of Python for guiding principles for Python’s design into 20 aphorisms. Basically write self-documenting code by chosing explicit naming convention.
  • A comment starts with a hash character (#). For longer then a line (and as Doc strings) use triple quotes: ”’ xyz ”’.
  • Variable names have to start with a letter or underscore, and can contain numbers but no spaces or other symbols.
  • File extension is always .py. If you see .pyc this is source code compiled into bytecode for execution by a Python VM (virtual machine).
  • Use command line python shell to test assumptions by getting immediate results.
  • No case/switch statements. Switch is better solved with polymorphism (object that has more than one form) instead. Good example here.
  • Data types
    • Immutable (can’t be updated or changed): strings, tuple, int, float, complex, bool
    • Mutable (can be updated or changed): list, dictionary (dict) & mutable except for it’s keys
  • Editors I use: IDLE (for basic shell work & comes with Python.org install), PyCharm (with Django support) and Sublime Text 2 (lightweight TextMate replacement).

Basics

Arithmetic Boolean
2 > 3 → False
2 == 3 → False
2 The opposite of == is != (“not equals”):
2 != 3 → True
You can chain together comparison operators:
2 < 3 < 4 → True
Equality works on things besides numbers:
“moose” == “squirrel” → False
True and True → True
True and False → False
True or False → True
not False → True
(2 < 3) and (6 > 2) → True
Under the hood,
True is equal to 1,
and False is equal to 0.
Booleans are a subtype of integers.

Operators

== Equal to
!= Not Equal to
is Identical
and Boolean and
or Boolean or
& Bitwise and
| Bitwise or
not Boolean not (not the !)

Built in functions that are always available

len(s) Return the length of an object. Can also be a sequence (string, tuple or list) or a mapping (dictionary).
print(obj) Print object(s) to the stream file.
help(list) See basic help on any object.
dir(list) Return a list of valid attributes for that object.
type(list) Return the type of an object

More built in functions here: http://docs.python.org/library/functions.html

Functions

Always starts with a “def” and ends with “:”.

# define a new function with 1 default argument. Can also have no arguments.
def function_purpose(arg1=1):
     ''' This is a doc string '''
     print 'Python code'
     return (arg1, arg1+7,) # returns 2 values as a tuple (note the comma), else None
# call the function, returns a tuple that we assign to 2 variables
item1, item2 = function_purpose(1)

If you want to assign a value to a variable outside the function within a function you must prepend the variable with “global”.

Calling methods on objects

Just like calling functions, but put the name of the object first, with a dot

words = 'some monkeys here'
e = words.count('e')
# returns 4

Strings

Are a sequence of characters.

# creation
name = 'Ernest Semerda'

# accessing, returns 's'
name[4]

# splitting, returns a list ['Ernest', 'Semerda']
the_string.split(' ')

Strings can be subscripted/sliced like the list (see lists in Data Structures below).

# selected range returns 'nest '
name[2:5]

# get first two characters returns 'Er'
name[:2]

# get everything except the first two characters returns 'nest Semerda'
name[2:]

Sample of  some string methods. They come with 8-bit & Unicode support.

name.capitalize() # changes to 'ERNEST SEMERDA'
name.find(sub[, start[, end]])
name.lower()
name.split([sep[, maxsplit]]) and new_name.join(list)

More string methods: http://docs.python.org/library/stdtypes.html#string-methods

Data Typing

Python is strongly typed which won’t allow you to automatically converted from one type to another.

Python also has a strong tradition of duck-typing (dynamic typing) in which an object’s current set of methods and properties determines the valid semantics. Trusting that those methods will be there and raising an exception if they aren’t. Be judicious in checking for ABCs and only do it where it’s absolutely necessary.

An important feature of Python is dynamic name resolution (late binding), which binds method and variable names during program execution.

# fails because (str + int + str) != str
'There are ' + 8 + ' aliens.'
# perfect, str() = type conversion
'There are ' + str(8) + ' aliens.'

To achieve Reflection, a process by which a computer program can observe and modify its own structure and behavior, use the built-in functions. I.e. getattr

Over a “sys” module’s method “path”:

path = getattr(sys, "path")

Over a function1 with sample input:

result = getattr(sys.modules[__name__], "function1")("abc")

And/or use the Reflection Utilities API for deeper execution frame, execution model, class/obj inspection for methods & attributes etc… See: http://docs.python.org/c-api/reflection.html

Data Structures

Dictionary

Set of key:value pairs. Keys in a dictionary must be unique. Values Mutable.

# creation, empty dictionary
peopleDict = {}

# creation, with defaults
aliensDict = {'a':'ET', 'b':'Paul', 'c':42}

# accessing, returns 'ET'
aliensDict['a']

# deleting, 'Paul' is removed from dictionary
del alientsDict['b']

# finding, returns False (note capital F)
aliensDict.has_key('e')

# finding, returns ['a', 'c']
aliensDict.keys()

# finding, returns [('a', 'ET'), ('c', 42)]
aliensDict.items()

# finding, returns True
'c' in aliensDict

Lists

Lists can carry any items ordered by an index. Lists are Mutable.

# creation, empty list
peopleList = []

# creation, with defaults of any type
codesList = [5, 3, 'p', 9, 'e']

# accessing, returns 5
codesList[0]

# slicing, returns [3, 'p']
codesList[1:3]

# finding, returns ['p', 9, 'e']
codesList[2:]

# finding, returns [5, 3]
codesList[:2]

# returns ['p', 9]
codesList[2:-1]

# length, returns 5
len(codesList)

# sort, no return value
codesList.sort()

# add
codesList.append(37)

# return, returns 37
codesList.pop()

# remove, returns 5
codesList.pop(1)

# insert
codesList.insert(2, 'z')

# remove
codesList.remove(‘e’)

# delete
del codesList[0]

# concatenation, returns ['z', 9, 'p', 0]
codesList + [0]

# finding, returns True
9 in codesList

Apply set(list) and it becomes a set – an unordered collection with no duplicate elements. Also support mathematical operations like union, intersection, difference, and symmetric difference.

Tuples

Tuples are similar to lists: they can carry items of any type & useful for ordered pairs and returning several values from a function. Tuples are Immutable.

# creation, empty tuple
emptyTuple = ()

# note the comma! = tuple identifier
singleItemTuple = ('spam',)

# creation, with defaults of any type
codesTuple = 12, 89, 'a'
codestuple = (12, 89, ‘a’)

# accessing, returns 1
codesTuple[0]

More on data structures here: http://docs.python.org/tutorial/datastructures.html

Control & Flow

For loop

# Collection iterator over dictionary w/ tuple string formatting
people = {"Ernest Semerda":21, "Urszula Semerda":20}
for name, age in people:
    print "%s is %d years young" % (name, age)

To loop over two or more sequences at the same time, the entries can be paired with the zip() function.

More on string formatting operations here: http://docs.python.org/library/stdtypes.html#string-formatting-operations

For loop with if else

# Iterate over a sequence (list) of numbers (1 to 10) with if/else Conditionals. The range function makes lists of integers.
 for x in range(1, 10):
     if x == 8:
         print "Bingo!"
     elif x == 10:
         print "The End"
     else:
         print x

While loop

# using request to ask user for input from interactive mode
request = "Gimme cookie please: "
while raw_input(request) != "cookie":
    print "But me want cookie!"

Switch-statements do not exist. In OO they are irrelevant & better solved with polymorphism instead. Examples here.

More control flow tools here: http://docs.python.org/tutorial/controlflow.html

Golfing!

Chaining into few lines.

[x * x for x in [1, 2, 3, 4, 5]]
# returns [1, 4, 9, 16, 25]

Can get messy & complicated to read.

print [x * x for x in range(50) if (x % 2 ==0)]
def is_palindrome(word):
    word = re.compile(r'[!? ]').sub("", word.lower())
    return True if word == word[::-1] else False

Files

# open, defaults to read-only + note single forward slash
contents = open('data/file.txt')

# accessing, reads entire file into one string
contents.read()

# accessing, reads one line of a file
contents.readline()

# accessing, reads entire file into a list of strings, one per line
contents.readlines()

# accessing, steps through lines in a file
for line in contents:
    print line

More on IO: http://docs.python.org/tutorial/inputoutput.html

Classes

All methods (but not functions) are closures – see “self” below. A closure is data attached to code. All variables are public, private variables are established by convention only.

# SuperHero inherits from Person class - also supports multiple inheritance using comma
class SuperHero(Person):
    # constructor
    def __init__(self, name):
        self._name = name

    # method
    def shout(self):
        print "I'm %s!" % self._name

The __name__ below allows Python files to act as either reusable modules, or as standalone programs. Also think Unit Tests benefits!

if __name__ == '__main__':
    # instantiate the class
    batman = SuperHero('Batman')

    # call to method in class, returns "I'm Batman!"
    batman.shout()

    # returns "I'm Batman!"
    SuperHero.shout(batman)

More on Classes in Python here: http://docs.python.org/tutorial/classes.html

Modules

Modules are Libraries that hold common definitions and statements. They can be combined into an importable module.
More on modules here: http://docs.python.org/tutorial/modules.html

To use a module, use the import statement:

import math

# returns 1.0
math.sin(math.pi / 2)

Some commonly used modules

  • math – trigonometry, the constants e and pi, logarithms, powers, and the like.
  • random – random number generation and probability distribution functions.
  • os – tools for talking to your OS, including filesystem tools in os.path.
  • sys – various system information, as well as the handy sys.exit() for exiting the program.
  • urllib2 – tools for accessing Web resources.

Useful modules: http://wiki.python.org/moin/UsefulModules

Error & exception handling

import sys
try:
    f = open('myfile.txt')
    s = f.readline()
    i = int(s.strip())
except IOError as (errno, strerror):
    print "I/O error({0}): {1}".format(errno, strerror)
except ValueError:
    print "Could not convert data to an integer."
except:
    print "Unexpected error:", sys.exc_info()[0]
    raise

More: http://docs.python.org/tutorial/errors.html

Fun – easter egg; The antigravity module

Released in Google App Engine on April 7, 2008. The antigravity module (http://xkcd.com/353/) can be enabled like this:

import antigravity

def main():
    antigravity.fly()

if __name__ == '__main__':
    main()

Speed – always a common topic

Classic computer programs had two modes of runtime operation = interpreted (as code runs) or static (ahead-of-time) compilation.

Just-In-Time compilation (JIT), also known as dynamic translation is a new hybrid approach. It caches translated code (bytecode into native machine code) to minimize performance degradation. Used in .NET, Java & Python via PyPy.

PyPy is a fast, compliant alternative implementation of the Python language. It has several advantages and distinct features like Speed (Just-in-Time JIT compiler), Memory usage (better then CPython), Compatibility (works with twisted & django frameworks), Sandboxing (run untrusted code), Stackless (providing micro-threads for massive concurrency). Check it out: http://pypy.org/

Recommended

Books

Websites/following

Finally, it is important that you have a network of like minded people around you whom you can regularly work on Python with, bounce ideas & question and support (help) each other out.

Happy Learning and if you have any questions please contact me. Always happy to help.

~ Ernest

How to setup Django + mod_wsgi on Apache & Ubuntu

Django is a great Web Framework which complements the Python programming language. Having switched to Python development few months ago I was on the lookout for a MVC like Web Framework that emphasizes Convention over Configuration (CoC), Rapid Development Principle of Don’t Repeat Yourself (DRY), Separation of concerns has Python as the underlying core language. And lo and behold Django proved to be that beast.

What is Django

Django is a MVT (model-view-template) framework build on the Python language. The MVT is identical to MVC (model-view-controller) but where in the common MVC pattern the view here is the template and controller the view. They both perform the same function separating the business logic from the presentation from the data layer (model). However Django does goes one step further and provides a view/template without native core language polluting the HTML.

Django emphasizes Reusability and “Pluggability” of components, Rapid Development, and the Principle of DRY (Don’t Repeat Yourself). Stuff you hear a lot with Ruby on Rails – another great web framework built on a solid language, Ruby.

Ok, enough of my rambling about how great this framework is. If you want to read more about it I recommend the following 2 links:

The LAMP stack

Ok so everyone is talking about a LAMP stack and everyone wants to run their site on a LAMP stack. Why not when you can tap into great open source tools for free. The word LAMP is a bit over emphasised since most sites today run on a custom configured implementation using best of breed open source software.

“LAMP is an acronym for a solution stack of free, open source software, referring to the first letters of Linux (operating system), Apache HTTP Server, MySQL (database software) and PHP (or sometimes Perl or Python), principal components to build a viable general purpose web server” ~ Wikipedia

Few years ago when open source software was limited, LAMP had typically meant Linux, Apache, MySQL and PHP. Today Linux can take many flavours from CentOS, Red Hat or the popular Debian-derived Linux distribution Ubuntu. The web server Apache can be replaced with a super fast & lighter HTTP and reverse proxy server called nginx. MySQL, post Oracle acquisition is often replaced with PostgreSQL or a NoSQL version called MongoDB. And PHP by cleaner & concise languages like Python or Ruby.

In this post I will cover how to setup a LAMP stack where:

  • Linux = Ubuntu 11.10. This can also work with 10.xx version of Ubuntu.
  • Apache = we will leave it as is since it is still a great web server but hook in mod_wsgi – a Python WSGI adapter module for Apache. WSGI is nothing more than an interface specification by which server and application communicate. In this case with Python.
  • MySQL = will stay with MySQL but you can also install MongoDB.
  • PHP = will be replaced with Python and drop in the Django MVT framework.

Ok let’s get started.

How to Setup Django on Ubuntu

The following assumes you have already installed Ubuntu and LAMP. If not head over to my prior posts on how to:

  1. Install Ubuntu on EC2 and
  2. Install LAMP.

Installing pre-req components

1. Standard procedure is to always run update on your Ubuntu installation.

sudo apt-get update

2. Install mod_wsgi on Apache

sudo apt-get install libapache2-mod-wsgi

3. Install Python setup tools with pip. pip installs packages. Python packages. An easy_install replacement.

sudo apt-get install python-setuptools
sudo apt-get install python-pip

4. Install Django MVT framework using pip.

sudo pip install Django

Now that’s done. Easy hey. Now let’s configure your 1st Django site.
Assuming your site will be called “purpleblue.com

Configuring your 1st Django site

5. Recall from the LAMP setup that we were storing all web sites in /var/www/ folder. For example purposes, I will use purpleblue_com as my Django project. Notice the use of django-admin.py to create the Django site and the use of underscores vs decimal point. Only numbers, letters and underscores are allowed in the Django project name.

cd /var/www/
sudo django-admin.py startproject purpleblue_com

5.1 Verify new project by typing this in and hitting enter. ls lists the contents of a directory showing all files inc hidden ones, hence the -all option.

ls –all

If you see purpleblue_com listed, then change directory to it.

cd purpleblue_com

and verify you can see 4 .py files – init, manage, settings & urls. Those are Django new project default install files.

6. Now we create a wsgi file for the site so apache knows how to run this site.

sudo mkdir /var/www/purpleblue_com/apache
sudo nano /var/www/purpleblue_com/apache/django.wsgi

… and add this into django.wsgi

import os
import sys

path = '/var/www/purpleblue_com'
if path not in sys.path:
    sys.path.insert(0, '/var/www/purpleblue_com')

os.environ['DJANGO_SETTINGS_MODULE'] = 'purpleblue_com.settings'

import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

TIP: It’s always a good idea to specify the actual application module.

6. Using webmin (ref our LAMP install) setup new apache site for this project.

6.1 Go to: https://YOUR_DEV_VM_IP:10000/
6.2 Servers > Apache Webserver > Create virtual host
6.3 Configure your new host
Document Root = /var/www/purpleblue_com/
Server Name = purpleblue.com
6.4 Click on “Create Now” button. And go back into the settings by clicking on “Virtual Server” button next to your new host.
6.4 Click on “Edit Directives” and paste the following in:

ServerName purpleblue.com
DocumentRoot /var/www/purpleblue_com

<Directory /var/www/purpleblue_com>
    Order allow,deny
    Allow from all
</Directory>

WSGIDaemonProcess purpleblue_com processes=2 threads=15 display-name=%{GROUP}
WSGIProcessGroup purpleblue_com

WSGIScriptAlias / /var/www/purpleblue_com/apache/django.wsgi

The last 3 lines above allow this Django site to run in daemon mode.

TIP: When you make any .py changes in your Django site, rather then restarting/refreshing apache you can touch this wsgi and the changes will be picked up.

sudo touch /var/www/purpleblue_com/apache/django.wsgi

7. Restart apache to take new site & settings into effect.

sudo /etc/init.d/apache2 restart

8. Add the new domain purpleblue.com to your primary OS host file pointing to your VM where the Django project purpleblue_com resides.

9. Test your new project by going to the Server Name (http://purpleblue.com) you just setup. You should see a similar default Django installation page:

It worked! Congratulations on your first Django-powered page.

If you get an error or cannot see the default Django installation page make sure you check out apache log file. Common approach is to grab the tail end of the apache error log file to see what just happened.

tail /var/log/apache2/error.log

Bonus – Django CMS

If you have the time also check out Django CMS that is built on top of the Django Web Framework.

Django CMS site: https://www.django-cms.org/

Happy Django exploring & Python coding!

References