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.

Image

 

StickyTableHeaders

Makes headers of a table stays.

 

Image

 

toastr

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

Image

 

4 Twitter Typeahead

Screen Shot 2014-06-30 at 2.00.17 PM

 

 

5 Animated Weather Icons

Skycons

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>

<div style=”float:left”>

</div>

<div style=”float:left”>

</div>

</div>

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>

</div>

<div>

</div>

<div style=”float:left”>

</div>

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

</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.

.smallbox{

width: 500px;

}

.largebox{

width:500px;

margin:50px;

}

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;

 

So

.largebox{

width:500px;

margin:50px;

-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;
}

Why in a Mac, command “exit” does not close the window of terminal?

Geek always have their own feeling of how things should be done.

Some Geeks like typing in a command a lot.

Many Geeks might start using command line with a Linux, maybe Ubuntu. Later they switch to a Mac.

One thing they may find strange is that in a terminal, type “exit” does not close the window of terminal.

This is because Mac has a default behavior for “exit” command that does not close the window.

If you really want to make “exit” close the window, you could go to Terminal Preferences -> Settings -> Shell, and set close the window if the shell exited cleanly.

Plus, you could also exit the current window of terminal by using Cmd + w or Ctrl + d