Two different ways to use jinja2 template in Google App Engine

It is very convenient to use a template framework when developing a web app. For Google App Engine, many people choose to use jinja2.
There are two ways to use.
1 More Basica Way:

In app.yaml file, include library of jinja2.

- name: jinja2
version: latest

Note: If you are developing a real application, you should not use latest but a fixed version, e.g “2.6”.

Move your html file into a folder called templates.

In the handler file you want to use jinja2 template, set the jinja2 enviroment.

import os
import webapp2
import jinja2

jinja_environment = jinja2.Environment(autoescape=True,
loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__), ‘templates’)))

Then in the request handler you could render the template html.

template_values = {'hello':'world'}
template = jinja_environment.get_template('index.html')

2 Wrapped way
The first way is a more lower level way to use jinja2.
Here, the second one is more like a simpler way.

from webapp2_extras import jinja2

class BaseHandler(webapp2.RequestHandler):
def jinja2(self):
return jinja2.get_jinja2(
def render_template(self, filename, **template_args):
class IndexHandler(BaseHandler):
def get(self):
self.render_template(‘index.html’, {‘hello':’world’})

You may notice that in this way you are not setting the template folder. jinja2 has a default value for the template_path which is templates. So you have to have a folder called templates if you don’t specify where all template html are. If you want you may change the path.
You could find the official documentation right here.

There are some discussions about which way is better in StackOverFlow.
I am not sure yet which way is better.

Google App Engine: How to pass variable value from request handler to javascript js file?

Assumption: Using Python environment, but it might still work and be similar if you are using Java or Go to do so.

When developing with Google App Engine, there are times that you have a variable in your request handler, this is going to be used by the js file but how to pass this variable to the js?

Method 1:

The most straightforward way maybe passing the variable to the html first, then the js file can reference the variable by jquery.
Here is how it looks:

I am using jinja2 template, so in a request handler, I am doing as follows,
self.response.write(self.jinja2.render_template(filename, **{‘key':value}))

So in the html file you can reference this variable by saying,

Then in the js file, you can use following jquery to get the value,
var thevalue = $(‘#key’).text();

This is using a two step way.

To make it better, we can avoid using var thevalue = $(‘#key’).text();

Method 2:
In request handler, I am doing the same.
self.response.write(self.jinja2.render_template(filename, **{‘key':value}))
But in html, instead of putting the variable value into a hidden paragraph, just get the value in a inline js script.

var thevalue = ‘{{key}}’

Now in the thejstoload.js, you can reference the variable thevalue without doing anymore work.


If you have a better way to do so, please let me know.

Useful library for Twitter Bootstrap (Keep updating)

1 bootstrap-select  

This makes select element pretty.




Makes headers of a table stays.





This is a great library to show toast on a web site. Sending out short notification on the page.



4 Twitter Typeahead

Screen Shot 2014-06-30 at 2.00.17 PM



5 Animated Weather Icons


Screen Shot 2014-07-21 at 3.48.53 PM

6 Gesture in Web Page

Hammer js lib.

6 To be continued

Problem with div height when using float:left

I am having this problem for a long time and today I have found that the way to fix it.

<div id=”parent”>

<div style=”float:left”>


<div style=”float:left”>


<div style=”float:left”>



Say if each div is 50px in height. The parent div becomes 0px in height.

If you remove float:left for each children div, the parent div is smart enough to get 50px in height. However, when you bring in float:left. The parent height becomes 0px. So weird.

To fix:

Put another div at the end of float:left div.

<div id=”parent”>





<div style=”float:left”>


<div style=”clear: both;”></div>



Or you can have css for the parent div

.clearfix:after {
content: “.”;
visibility: hidden;
display: block;
height: 0;
clear: both;

and saying <div id=”parent” class=”clearfix”>



CSS margin padding problem

In css, when you set a element width to be 500px. It actually can increase the width by setting the margin.


width: 500px;






for the second class, it will actually takes 600px of the page in width.


Sometimes web developer will find this very annoying.

In order to control every thing inside of a fixed width, you can put these extra line inside of a class.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;






-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


will guarantee that largebox will never occupy width more than 500px.

jQuery Javascript function to capitalize the first letter of each word in a sentence

This function is going to turn “FRANK LAMPARD” into “Frank Lampard”.

Actually, I think this will also works in pure Javascript. Never tested that but I don’t think I am using any jQuery stuff.


function capitalizeFirstLetterEachWordSplitBySpace(string){
var words = string.split(” “);
var output = “”;
for (i = 0 ; i < words.length; i ++){
lowerWord = words[i].toLowerCase();
lowerWord = lowerWord.trim();
capitalizedWord = lowerWord.slice(0,1).toUpperCase() + lowerWord.slice(1);
output += capitalizedWord;
if (i != words.length-1){
output+=” “;
output[output.length-1] = ”;
return output;