why I develop this tool? I want to speed up the progress of producing fill in the blank exercise to students.
Traditionally,how many step for creating fill in the blank exercise?
May be too many step.First, the teacher need to find or type essay.Then, they need to think which word should pick up.Finally, they need to replace picked word with underline and question no......
Above progress is quit slow and boring.Can teacher find some tool to speed up this progress.
Therefore, I develop "Fill in the blank Generator" to teacher.
Want website look like faster?provide visual feedback faster?
load DOM first! put javascript and css file at the bottom
we can make website loading faster by changing a lot thing.Such as
Minimize HTTP Requests,Use a Content Delivery Network.......(want more? go to Best Practices for Speeding Up Your Web Site) But today,we just do some little trick, let user feel faster. So how to do that? we just put our external link(like css or javascript) at the bottom of file.After that, the browser will load the DOM fist, then it load external file.When we do that,user can get response as soon as possible. Otherwise,browser load javascript file,css first, it require a lot of time(as CDN network may be down, file is too big). the philosophy behind that ,when user browse website, what they can see? just html page, CSS? javascript? they can can't "see".
HTML page is the progress indicator! When the browser loads the page progressively the header, the navigation bar, the logo at the top, etc. all serve as visual feedback for the user who is waiting for the page. This improves the overall user experience.
by Best Practices for Speeding Up Your Web Site
DrawBack
if you put CSS file at the bottom,user may see the page without any style,layout. If you produce some javascript or jquery function to hide some image or paragraph, and you put javascript file at the bottom, the page will show all thing that you want to hide, then hide it.
Conclusion
Before you put external link at the bottom, you should decide put what file carefully. the file about visual effect, you should put it at the top
Install location : after download file,please put it at your server folder.like htdocs(MAMP and WAMP).
What I want to Do ?
this app is simple web app to retrieve recent tweets from someone.
User need to type user ID (default : Obama)
click "get Your tweet" button"
retrieve recent tweet
What I ignore ?
Page function
Auto Update
Code focus
//BarackObama is user id you enter
//callback=updateTweets is function we call to handle json data
"http://twitter.com/statuses/user_timeline/BarackObama.json?callback=updateTweets";
Data we Retrieve(json) fragment
"in_reply_to_status_id":null,
"in_reply_to_user_id_str":null,
"id_str":"244873182916526080",
"retweet_count":373,
"favorited":false,
"truncated":false,
"source":"\u003Ca href=\"http:\/\/www.barackobama.com\/\" rel=\"nofollow\"\u003EObama for America\u003C\/a\u003E",
"created_at":"Sun Sep 09 19:01:30 +0000 2012",
"possibly_sensitive_editable":true,
"id":244873182916526080,
"in_reply_to_screen_name":null,
"text":"Easy: Pick out your favorite bumper sticker and we\u2019ll get it in the mail. http:\/\/t.co\/H4h9qc6e"
Hot to handle data
//tweet. + data you want to
//tweet.id_str = 244873182916526080
var data = tweet.text.replace("\"", "'");
var date = tweet.created_at ;
Back to Our code
$(function(){
$("#tweet").toggle();
function getInput(){
$("#get").click(function(){
//retreive data from $("input:text")
var id = $("input:text").val();
//apply id to src => create complete address for sending request
var src = "http://twitter.com/statuses/user_timeline/"+id+".json?callback=updateTweets";
// create new script element and apply to <
<body>
var script = '<
<script src='+src+'><
</script>';
$(script).appendTo('body');
// append user id to paragraph
var name = "<
<h2>"+id+"<
</h2>";
$(name).appendTo("#name");
$("#tweet").toggle();
$("#input").toggle();
});
}
getInput();
});// end ready
function updateTweets(tweets) {
var tweetsSelection = $("#tweet");
for (var i = 0; i <
< tweets.length; i++) {
var tweet = tweets[i];
var data = tweet.text.replace("\"", "'");
var date = tweet.created_at ;
var row = "<tr><td>"+date+"</td><td>"+data+"</td></tr>";
tweetsSelection.append(row);
}
}
The HTML5 Geolocation API is used to get the geographical position of a user.
Since this can compromise user privacy, the position is not available unless the user approves it.
chapter 5 Making your HTML location aware: Geolocation
