Tag: handlebars.js

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 Valley – This 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