Using Twitter API and jQuery to display recent tweets

In this article I will show you how you can display your (or any other user’s) recent tweets with some jQuery magic. We will create a widget (sort of) that will fetch n number of latest tweets from public timeline of a user using Twitter API and then we will display them in a nice list.

End result will look like the following.

tweets

Have a look at a live example.

View Demo

Let us start creating it now. First write some HTML. Define some css styles in the head section which will control the display of list. In the body section, there is a select box with id layout which will be used to select either a wide or a narrow layout for displaying the tweets. Then create a div with id tweets. We will create a ul inside this div which will have tweets as list items.

Continue reading Using Twitter API and jQuery to display recent tweets

Collection of 10 top 10 lists about web development

I am a regular reader of web development articles and in this process bookmark a lot of them. Out of that collection I present to you a list of 10 articles which themselves are lists of 10(tips, functions etc). Not all of them are top 10 😉 but equally good. All these articles are related to php, javascript, html, mysql and web development in general.

1- 10 code snippets for PHP developers

Simple and handy functions for common tasks like validating email address and XSL transformation.

 

2- 10 Advanced PHP Tips Revisited

Detailed and excellent tips from famous PHP gurus Chris Shiflett and Sean Coates.

 

3- Top 10 PHP frameworks

PHP frameworks are quite popular among developers these days. This site is dedicated to php frameworks alone. In this article all frameworks have been compared for features. Very useful to help you in decision making if you are planning to use a framework for your next project.

 

4- Top 10 custom JavaScript functions of all time

This is my favorite one. These 10 functions are a must in every web developer’s toolbox. Functions like getElementsByClass, toggle and cookie functions are included.

 

5- 10 JavaScript Quick Tips and Best Practices

Another good article on javascript best practices.

 

6- Top 10 Firefox Addons For Web Developers

Who hasn’t heard of Firebug or GreaseMonkey. This article lists similar addons for firefox that are a great help in web development.

 

Continue reading Collection of 10 top 10 lists about web development

5 JSON resources for web developers

JSON(Javascript Object Notation) is defined as a lightweight data interchange format and fat-free lightweight alternative to xml. Since json is the native data form of Javascript, it can be used on the browser more easily then XML.

If you are a web developer who works with javascript/ajax a lot and still wondering what this json thing is, here is the first step to start with. Read this post about json and its uses.

Below is a list of 5 resources from where you can learn about json in detail.

1- json.org

First place to go to find definitive information. Douglas crockford is the man who invented json. json.org is a one stop place for everything json.

2- Mastering JSON

Detailed examples as well as retrieving and sending json data between browser and server. You cam also find tips on security and best practices.

3- JSON vs XML debate

Arguments are going on between which is better to use as a data format. Go read and judge yourself.

4- JSON with Ajax and PHP

5- Slide on JSON

Creating a countdown timer in javascript

On one of the projects I am working upon currently, we needed a countdown timer in JavaScript. User had to fill in a form and we wanted to restrict that time to 5 minutes and simultaneously show him how many minutes/seconds are left now. After the set time limit is crossed user is informed that a timeout has occurred.

Here is the code for timer(call it timer.js):

To start the timer put these lines after you have included the timer.js

On the markup side create an element with id=container

init function accepts 3 parameters : minutes, seconds and the id of html element where the countdown will be displayed.
You will also need a function which will run after the timer’s execution has completed. For this purpose there is the function timerComplete included in the timer.js file. Write any code here that you would like to execute after timer has terminated (like redirect the user).
Also make sure that you have an html element with id set to container on your html page.
Above timer will do a countdown for 55 seconds. After 55 seconds, function timerComplete will be executed.
You can see a demo here and if you wish you can also view page source code for javascript code.

Download timer.js from this link

Give this  article a Thumbs-up on Stumbleupon if you liked it.

Automatic session timeout/logout using php and AJAX : Part II

This article is final part of 2 part series in which you will learn how to logout a user after a specific amount of inactivity. In part 1, we used only php. In this part, we will extend this functionality and will use AJAX to automatically logout the user if the inactivity time is exceeded. Logout will be irrespective of whether the user requests any page from server or not.

Understanding part 1 is necessary to complete part 2. You can read it here.

Hope you enjoyed the last post. In last post you saw that we logged out the user if she requests a page from the server after certain inactivity period.

Would it not be better that if the application ended the session as soon as the timeout period expires without having to wait for the user to request the page again. Sure it would be and this is what you will learn in this article.

View Demo download

So get ready now.

We will poll the server with AJAX to check if the timeout period has passed or not. The response of AJAX call will have a boolean value by which we will redirect the user. I will assume that you have working knowledge of AJAX and therefore will not explain the AJAX code in detail.

Here are the steps that we will follow:

1- Set a poller in javascript that will contact a php script in our example.

2- The php script will check the timeout status of user.

3- php script will return either true or false as AJAX response depending upon if the session is timed out or not.

4- Response true means timeout has expired, hence user will be redirected to home page whereas false means user is still logged in.

Let’s do it in code now.

First the javascript part.Create a file named ajax.js in the same directory where other files are placed with this code:

Line 1 says, execute the init function after the DOM is loaded. Then we declare a variable interval. Continue reading Automatic session timeout/logout using php and AJAX : Part II