Tag Archives: javascript

twitter user timeline api v1 without authentication

my first post from my mac, just getting a hang around shortcuts and settings. I know diving into javascript will confuse my syntax with my current favourite python. so i decided to leave behind python and django and start javascript. This twitter api venture is to do some natural language processing on user tweets to obtain some knowledge cloud/graph. details not known at the moment!

twitter api v1 statuses/user_timeline
options and brief tutorial

user tweets:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function searchTwitter(query) {
    $.ajax({
        url: 'https://api.twitter.com/1/statuses/user_timeline.json?'+jQuery.param(query),
        dataType: 'jsonp',
        success: function(data) {
            var tweets = $('#tweets');
            tweets.html('');
            for (res in data) {
                tweets.append('<div>' + data[res]['created_at'] + ' wrote: <p>' + data[res]['text'] + '</p></div><br />');
        }
        }
    });
}

$(document).ready(function() {
    $('#submit').click(function() {
        var params = {
            screen_name: $('#query').val(),
            count: $('#count').val()
        };
        searchTwitter(params);
    });
});
</script>
</head>
<body>
   <div style="padding: 20px;">
        <input id="query" type="text" value="pmontu2" />
        <input id="count" type="text" value="5" />
        <input id="submit" type="button" value="Search" />
    </div>
    <div id="tweets" style="padding: 20px;">
        Tweets will go here.
    </div>
</body>
</html>

search:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
function searchTwitter(query) {
    $.ajax({
        url: 'http://search.twitter.com/search.json?' + jQuery.param(query),
        dataType: 'jsonp',
        success: function(data) {
            var tweets = $('#tweets');
            tweets.html('');
            for (res in data['results']) {
                tweets.append('<div>' + data['results'][res]['from_user'] + ' wrote: <p>' + data['results'][res]['text'] + '</p></div><br />');
        }
        }
    });
}

$(document).ready(function() {
    $('#submit').click(function() {
        var params = {
            q: $('#query').val(),
            rpp: 5
        };
        // alert(jQuery.param(params));
        searchTwitter(params);
    });
});
</script>
</head>
<body>
   <div style="padding: 20px;">
        <input id="query" type="text" value="blue angels" />
        <input id="submit" type="button" value="Search" />
    </div>
    <div id="tweets" style="padding: 20px;">
        Tweets will go here.
    </div>
</body>
</html>

ui design paper prototype

business opportunities – seems good, promising money in the market, if u have a product by now, need to speak to clients with a prototype…

day 2 – PR – html javascript prototype before business meets

how to make a ui design paper prototype

  1. write stories because its the easiest thing to do and cover the areas
  2. given user when sequence then module/content. write the system behavior and identify user, sequence, content
  3. identify content worth a full page – kinda un conventional be careful
  4. write your modules in sequence from home page example
    home -> register, search
    search -> patient list
    patient list -> patient
    patient -> history, new visit, notes
    new visit -> add condition diagnosis treatment, add video, add audio, add prescription
  5. allot your screen space to modules based on importance
  6. show pages where space is available rather than links to pages when necessary or number of modules higher to showcase
  7. usable, few features, fast, innovation particular to application
  8. usability testing

product launch – sports log

apr 27

eureka. another breakthrough. helpful screenshots, descriptive texts, hints, info, tips, guidelines, goals, interaction, streamlining, gamification!!

my product launch – http://sportslog.yizotech.com

apr 28

day 1 patient records

change of ui
from the last experience, no more showing edit options as a new list among list of editable links rather slide the whole window and show a new window ‘edit x’, cool huh…

change in business plans
well, android market changes everything, i saw a competing application sell only 50 copies and its free versions go 5000. i never want to sell more than 500 for a software, its unethical if u ask me. so i might need to be a application developer full time in future untill an application clicks such that we get many users. moto is ‘make the world better’ so my product solutions are going to be at solvign the worlds problems in various sectors and not making fancy games. also i will give both web applications along with android which can sync such that people can use it from desktops, i hope the web applications will be no different from the android ones, focused screens, sliding windows, etc… maybe the internet can have two to three windows at a time on one screen each being reasonably big. anyways now on, its web and andorid development to solve worlds problems and make the world a better place. heath sector, education, so on.. every single application i have always dreamt of doing, i am going do it, no corporate going to stop me from it, hehaw!

who wants to see what when
actor -> data/module -> sequence

dynamic programming…

April 26

my god, the behavior i discovered has lent to many bugs, especially the functions making use of parent function variables which get changed on further events, so loosing the value of where change has to be made!!!

andorid
i finally got into the grove of user intefaces and development, a big mistake i did was to forget my design pricialals of inputing data and gonig forword with using ‘a’ text field for ‘a’ input type and not occuping the screen

android seems to be very promising, the application can be local, saving data without connecting to online servers for every action but synchronise when needed.

so do android development come with database support, given googles web app and their easy database quering, i am sure it does, hopefully :D

dynamic programing
its an awesome thing, the dynamic programing i am speaking of here is the ablity of functions to insert user interface elements and bind them to new functions in run time and thus even writing new functions which handle the user interfaces dynamically..

the big problem here is a standard or framework, huge amount of code, very un modular, take for example inserting html as text instead of objects and accesing them by id’s and making objects sounds very lengthy

so be it web apps or andorid apps or desktop apps, dynamic programing would be similar when it comes to inserting say rows and rows or new data

my code review from dheeraj kumar aka dk:
“‎Manoj Kumar P has some seriously fucked up code. The steps to fix this are:
1. Replace every single instance of concatenated magic strings with templates. I recommend Mustache. Use ICanHaz.js if you like.
2. You’re doing event handling wrong. A separate function for binding + definition = wrong. Also, binding + definition inside another callback(save) is wrong. That code smells.
3. Nobody likes a show(‘slow’)
4. WTF? Client is not supposed to bust cache. That’s the server’s job.
5. In any event handler, handle the original event AFTER you’ve done your custom processing. No event.preventDefault and then your code.
6. Your selectors are highly detailed, and hence highly inefficient.
7. Stop using random HTML attributes which are not part of the HTML5 specification. For storing data in HTML elements, use the data-* attributes instead.

As far as your space filling question is concerned, figure out how to use Zurb Foundation or Twitter Bootstrap properly. Those are very powerful.

Plenty more that can be done, but let’s deal this one step at a time.”
“‎2. that too.. since you have a large handler and it looks bad in the bind call. My point was stop binding within callbacks, which is an antipattern in your case.
4. ?action=getRoots&bustcache=” + new Date().getTime(),
5. That’s a good pattern in any framework. Teaches you not to mess with the event object. Also, sometimes you’d rather stop it bubbling up the event chain by a return false or something depending on your language, so it’s always better to handle the original event at the end.
6. Write better HTML.”

funny javascript…

Apr 24

$(‘#divdays’ + rootid + ‘ > ul > li:last’).before();
i never thought i would be using code like this, total score :D awesome :D

always work on db, webservice then your javascript/html because when the last bit is done the total functionality is going to work ;)

programing is like a house building, brick over brick…

Apr 25

binding a click function to an element – not too early and not twise
u dont want to bind before the code is inserted into the html because it wont get binded then, it gets binded to only those applicable elements and u dont want to do it twise on the same element especially if the behavior is like a switch, it starts to get funny!!!

you download data and you bind, not just that, you insert data and you have to bind those single items too!!

javascript is a lot of dom which is input as text and accedd through objects, so maybe if the html hirecry is created by objects rather than text…

funny scope of variables in javascript -

<a href=”#”>abc</a>
<script src=”javascripts/jquery.min.js”></script>
<script>
$(document).ready(function(){
x = 10;
c();
});
function c(){
$(‘a’).click(b);
}
function b(event){
event.preventDefault();
alert(x);
}
</script>

believe me or not, value of x is alerted on click of link;)

big design issue – repetetive functinality of say adding which involes extra divisions and binding divisons and binding buttons to post and all this needs to be copy pasted twise if it has two trigger points, so one after downloading data and two after inserting fresh record… how do i design it…

speed, friendlyness, sticking to design specifications rathen than being generalised, i guess are the three main issues to ui design…

hierarchical jquery selection and manipulation

level 2 and 3 in hierarchy “recursive nested {{tmpl}} tags” maybe just what I want, simple yet tough design element!

dynamic hirechial – score

<script src=”javascripts/jquery.min.js”></script>
<ul>
    <li>
        <a href=”#”>root1</a>
    </li>
</ul>
<script>
    $(document).ready(function () {
        $(“.root”).click(function (event) {
            event.preventDefault();
            $(this).attr(“x”, 1);
            $(this).parent().after(“<li><div id=’divdays1′><ul></ul></div></li>”);
            $(‘#divdays1 > ul’).append(“<li>1</li>”);
            $(‘#divdays1 > ul’).append(“<li>2</li>”);
        });
    });
</script>

day 4 – sports log

migrating from mysql to mysqli, writing mysql was a big mistake

no multiple queries and my hosting provider gives me no permissions to write procedures on the db, so im going with multiple queries instead of stored procedures!!

it was a mistake i dint have a data access layer, but with mysql it was not so necessary either, now with mysqli it has totally come into place…

zend php sucks, no proper intellsence nor error finder, i don have a debugger either.. moved to notepad++ might need to check out komodo sometime…

migrated from mysql api to mysqli api

man this $this-> thing is getting over my neverve

implemented multi query instead of stored procedure thanks to bluehost.com

to debug one bug it takes me hell lot of time, especially when testing on my remote environment, i dont get the presise error unless i test it locally, i test on database to get the error that i had my database wrong in the query!! :(

all i have done till now is users, loging, signup, logout, checkloginonpageload, redirecttopageloadonlogin, loadrootelementsonpageload, addandsavenewroot

now i need to get serious, i need to add day nodes to an root node, for that i need to add ids of root nodes into each root node and add a class to each node and add a common on click for those class and write a function which takes the id and obtains text and adds data node for that id as parent

this part looks easy “$(this).attr(“x”, 1);” , “$(“.root”).click(function (event) {…” etc, what might actually be tough for me is prepare the html and html in javascript or hide/show div for this action

just one thing – i added some links with some javascript and was wondering why their click events dint bind, i had to bind them after they were inserted into html, hehe!!

first step in my code is ‘$(this).parent().after(…’

next step is to figure what goes inside that!!

making a web application

making a web app

1.1.get ur requirement, problem statement, make a design, go back to your client with that and ask for raw datas…
1.2.better get how it is written on paper, u almost have a design there
1.3.complete your design, all the buttons u need etc…
1.3.use foundation and translate it to html design – tough part, u might have to use lists, tables, embed tags etc…

2.1.low level design, write down the events, which are probably ur webservices, and your database procedures
2.2.create database tables abstract or expanded, how ever u want, depending on future expansions…
2.3.write your webservices-its a whole new chapter now…

3.1.write client side code-similar to writing a webservice, slightly different…

tada, your application is ready!!