Veera Sundar » Web

Slidr – HTML5 app for making online presentations

Veera — Wed, 11 Aug 2010 20:54:15 +0000

An Event Apart + MIX is organizing a contest for implementing a cool web app, using HTML5+CSS3+JavaScript combo, with a rule that the final app size should be less than 10K. That’s the challenge.

From my side, I tweaked my earlier code and redid that as Slidr, a web app for creating online presentations. The idea is simple (or that’s what I think!) – to provide anyone the ability to easily create online presentations without the need to edit HTML/CSS code. With Slidr, the user can directly edit the content right from browser (yeah! contenteditable=true does the magic) and save their work. Slidr has a basic animated slide transition too.

Please try my app with link given below and rate it if you like the app. Because it helps the app to get more visibility.

(please use a browser which can understand HTML5, CSS3. For example, IE9 or FF 3.6+ or Chrome 5+ )

Test drive – Slidr| Rate it(thanks!)

CSS Summit – 2010

Veera — Thu, 29 Jul 2010 16:14:47 +0000

Got a chance to attend the second edition of CSS Summit, organized by Environment For Humans. There were several CSS experts (8, to be exact), sharing their experiences and tips to improve the CSS development. Overall, the session was so informative and worth the money. Here’s some tit-bits from the summit.

Summit started at 7:30 PM (IST) evening and lasted till 3:30 AM (IST) the next day early morning. People in my conference room were all awake and listening to the presentation till the end, which was wonderful.
Topics discussed in the summit includes: CSS3 Progressive enhancement, CSS3 transitions and transforms, CSS and iPhone development, Sass and Compass, detecting CSS bugs and How Facebook improved its CSS files.
Along with the video conferencing, there was a public chat window open for the attendees to ask questions and discuss. At time, the chat window turned to be so much fun and interesting than the presentations itself. Few samples, taken from the chat window:
- “Anything other than IE is a modern browser” ~ someone.
- One lady gave a suggestion to know more about people profiles who were chatting (she meant the profession, technical background, etc). Immediately she got a reply asking A/S/L!
- “never use CSS transformations on * selector unless you want to go ROTFL” ~ someone.
There was a lot of discussion on using @font-face. Presenters gave several tools and tricks to use the web fonts effectively. And I’m sure @font-face is going to be used widely and it’ll replace the way we use fonts now in web pages.
Some of the tools: Font Squirrel, Google Font API , CSS3Please, Gradients Generator, CSS3 Generator, CSS3 tools.
And, here are the presenters (follow them for some good content):
1. Estelle Weyl – @estellevw
2. Zoe M. Gillenwater – @zomigi
3. Jason CranfordTeague – @JasonSpeaking
4. Denise R. Jacobs – @denisejacobs
5. Chris Eppstein – @chriseppstein
6. Nicole Sullivan – @stubbornella
7. Stephanie Sullivan – @stefsull
8. Dave McFarland – @davemcfarland

Google is good, but…

Veera — Mon, 26 Jul 2010 16:34:20 +0000

This happened to me few weeks back. I was googling for the 2010 MAT exam results and I was expecting an authentic website link, something from the institution which conducted the exam. Instead, all that I got was spam sites, posting the link to the actual results site, and trying to monetize using Adsense. So, my situation was like instead taking the route of Google —> Exam results site, I was forced to take Google —-> SPAM site 1 —> SPAM site 2 —> Exam results site.

By saying SPAM, I mean that the websites does not contain any useful information, instead they just cross-post whatever content found on the authentic websites and trying get the Google’s attentions (keywords!) and get a good PR, which implies some Adsense money.

I’m not against monetizing the blog content. In fact, I, myself, have adsense placed in this blog. All I am worried about the browsing time wasted by these SPAM sites and the frustration caused by them. And this was the reason why I created a custom search engine CODERED, for searching (java/web) programming related queries.

Having said that, I feel that there should be a better way to search and rank websites instead of just keywords and backlinks. Because the SPAM websites can anyway get content for free and backlinks for some bucks. This lets the Google to think SPAM results are good, which is wrong. I’m sure that Google takes several measures than I can imagine to reduce the SPAM. But still there are some exceptional cases like mine.

Have you experienced a similar problem before?

Codered – Less SPAM, More Code!

Veera — Thu, 22 Jul 2010 12:24:46 +0000

I hardly got ay response for my question about custom search engine to search only in programming related websites. I asked this because, at times I felt that I have been spending more time in Google search result pages than in the actual pages itself.

As you must be knowing, Google relies on PageRank and people know how to play around with PageRank. So, I usually get less relevant results on top of the ones which has more authentic data. Apart from this, I also wanted to reduce the noise in Google SERPs for my programming related queries. That was the reason why I needed a custom search engine.

Since no one replied (or there was no search engines like that) to my question, I created one for myself – CODERED. It’s a Google custom search engine which will only search in programming related websites. Not anything innovative – Just added my favorite websites to Google’s list (which you can achieve it using site:yoursitename filter too, manually!).

But which websites the CODERED searches? Well, currently there are few good websites that I have added to CODERED. If you would like to add to this list (you can recommend your blog too!), please give your suggestion here. Thanks!

Of course, please let me know your thoughts about this.

Infinite scroll : Loading content while scrolling, using Java and JQuery

Veera — Tue, 13 Jul 2010 18:09:16 +0000

Have you seen the infinite scrolling of content in some web pages? For example, in DZone.com when you scroll the page to the bottom, new links will be loaded automatically and it’ll give you the illusion that the page scrolls infinitely. Another good example is that Bing’s Image Search.

The technique is not hard to implement. With the use of a single servlet and JSP, we can implement a basic functionality with infinite scroll. Before dive into code details, have a look at this demo to get a feel of it: Infinite Scroll Demo

To implement this, we need a servlet which will serve the dynamic content and a JSP file which will have the UI and act as a client to receive the content. Below are the code for these two files. I’m leaving other common stuffs (like web.xml entry etc) to you.

Code for Servlet:

package com.vraa.demo;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class InfinitContentServlet extends HttpServlet {
    private static Integer counter = 1;

    protected void processRequest(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        try {
            String resp = "";
            for (int i = 1; i <= 10; i++) {
                resp += ""
                        + counter++
                        + " This is the dynamic content served freshly from server";
            }
            out.write(resp);
        } finally {
            out.close();
        }
    }

    @Override
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        processRequest(request, response);
    }
}

Code for JSP file:

<%@page contentType="text/html" pageEncoding="UTF-8"%> Load content while scrolling - Infinite Scroll with Java and JQuery

Demo page: Infinite Scroll with Java and JQuery

This page is a demo for loading new content while scrolling.

Credits: Veera Sundar | veerasundar.com | @vraa

1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.

2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.

3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.

4Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.

5Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare facilisis mollis. Etiam non sem massa, a gravida nunc. Mauris lectus augue, posuere at viverra sed, dignissim sed libero.

How it works?

The secret behind this is the scrolltop property. By checking this value we can determine whether the scrollbar has reached near to the bottom or not. If it reached, send an AJAX request to server to get more content and append it to the page. Look at the following two lines which does this:

 $contentLoadTriggered = false;
 $("#content-box").scroll(function(){
     if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false)
     {
         $contentLoadTriggered = true;
         $.get("infinitContentServlet", function(data){
             $("#content-wrapper").append(data);
             $contentLoadTriggered = false;
         });
     }

 });

How to make Reliance Netconnect broadband to work on Ubuntu 10.04

Veera — Thu, 17 Jun 2010 18:18:06 +0000

If you are following me in this blog, you might be aware of that I switched to Ubuntu 10.04 last week. On changing, I had to give some effort to make sure my Reliance Netconnect broadband connection working in Ubuntu. Here’s how I did it, based on referring several sources and forums in the internet.

Method 1: The Out-Of-The-Box method

Getting internet connection working in this method is really a child’s play. Just follow these steps:

The MUST thing first – Buy a Reliance Netconnect broadband USB device! Most probably it would be a huawei device and I assume it is.
Plug-it in any available USB port. Remember, the port has to part of your laptop. Inserting the device in your friend’s laptop doesn’t make internet work in your laptop, obviously!
Ubuntu 10.04 should detect your device now. Now go to System -> Preferences -> Network connections and select the Mobile Broadband tab. You’ll see something like this:
From the above step, just follow whatever the wizard says (don’t worry! the wizard won’t ask you to jump from the building). Select India in Providers Country page and select Reliance in Provider page respectively.
In the last window, give a name to the connection (Reliance for example) and then enter your USB device number which is nothing but the mobile number in the user name and password fields (yes, both are same). In the Number field, type #777 if it is not already there.
If you want, you can check the Connect automatically check box.
Now, click apply and you’re done. The connection should work now. If you didn’t select connect automatically then you can click on the network icon on the Ubuntu top bar and select your connection which you created just now.

Unfortunately, the above method did not work for me. So, I researched (googled, to be accurate) a bit more and found another way.

Method 2: The Do-It-Yourself way:

Since Ubuntu couldn’t come to my rescue, I have to make my hands dirty to get the connection working. Followed these steps:

In order to manually connect with Reliance netconnect broadband we need two packages: wvdial (tool to make connections from a modem) and gnome-ppp (front end to the wvdial).
These two packages have few dependencies too. Means you need to install all of them. Since you do not have an active internet connection yet on your machine, you cant apt-get anything. So, get a help from your friend who *might* be having an internet connection system and download the below packages.
Now bring the above downloaded files to your machine and install them (right click and select Open with GDebi package installer) in the above given order.
Now open terminal window and give the command lsusb which will list all USB devices attached to the laptop,. You must see the Hauwei device listed there. And then give the command dmesg to see which port our model actually using. It would be something like TTYUSB0, TTYUSB1, etc.
Now give the command sudo gnome-ppp to start the wvdial front end utility.
Now go to setup and in that window select the modem port (/dev/ttyUSB0 for example, which you must have seen in the 4th step using dmesg command) in the Device field and click detect. Your modem must be detected now. Then select Type as USB Modem and select the maximum available speed for the speed field.
Click close and come back to the gnome-ppp front window. Enter the username and password (which is your device number), #777 for the number and click connect. Now you should be connected.
Here after, whenever you want to connect to internet, just open gnone-ppp and click connect. The settings must have been saved already.

Fortunately, the above methid did work for me, because of which you are now seeing this post!

CSS Sorter – Revamped

Veera — Wed, 02 Jun 2010 16:41:36 +0000

If you remember, some time back I had released a small Java application called CSS Sorter that sorts the Cascading Style Sheet rules alphabetically. That application was developed based on Google’s App Engine Java platform. I took that project as a learning exercise to know more about Google App Engine development and it served well for that purpose.

However, the CSS Sorter tool was lacking few functionality and it had some bugs too (thanks to @sonnes for reporting one). I was holding the CSS sorter revamping plan for the past few weeks, mainly because the programming in my old laptop was a pathetic experience (hope my old laptop doesn’t read this post! ). Since now I’m a proud owner of a new powerful machine, I took up the revamping and here you go – the new CSS Sorter.

What did I fix:

Fixed a bug, that removed the forward slashes in any URLs that are present in CSS.
Added new ways to input CSS files. Now you can either Copy & Paste your CSS code or Upload a CSS File or Enter an URL which contains a CSS file.
Redesigned the user interface.

I have few more plans also in my mind to develop. Hopefully I’ll release those soon.

Disclaimer: I would recommend you to take a backup of your CSS file, in case this tool mess up your CSS file after processing. But if you notice any bugs, please let me know so that I’ll fix it.

Google Wave opened to public – are you using it?

Veera — Thu, 20 May 2010 17:07:30 +0000

After an year of development, Google has opened Wave for public access. Now you don’t need to wait for an invitation to get a Wave account. Go to wave.google.com, sign up, fill in the blanks and you’re on Wave!

When the Wave was announced, it was mainly considered as a move from Google to overshadow Microsoft’s announcement of Bing search engine. Many developers thought that the announcement of Wave was too early as the tool was not at all ready for the big time. But Google had opened Wave as developer preview and gave access to it through invitations. Google asked developers to contribute to Wave in the form of Wave bots and APIs.

Now the Wave is open to public. After my initial impressions, I could see noticeable improvement in the current version of Wave. The speed has improved, there are several new Wave types (discussion, task tracking, meeting, etc) and an extension gallery is being introduced. Importantly now it is easy to read updated wave messages just by clicking next on each Wave. So, with out a doubt, Wave team has done a good job in bringing in this new collaborative tool to the main stream.

But the success of Wave, surely depends on the way people use it. For me, I haven’t figured out any use cases yet. I’m content with Gmail itself for my communication.

But I want to know how you guys are using Wave for collaboration. I have created a Wave to discuss this. My wave ID is: talktoveera@googlewave.com. If you’re in Wave, leave your Wave ID in the comment box (or wave your ID to me). I’ll add you to the discussion Wave and we can try learning Wave by actually *using it*.

Why Twitter is not interesting to me anymore?

Veera — Tue, 20 Apr 2010 06:53:07 +0000

Why Twitter is not interesting to me anymore? – or, may be I should be more specific – Why Twitter Stream is not interesting to me anymore?. It is not because I’m following boring people in Twitter. The people I follow are in someway related to my work/friends and they tweet pretty interesting messages. But the Twitter stream does not deliver those interesting messages to me in a way I want.

First and foremost, Twitter is a live feed. i.e. I need to be online with my followers to see their tweets live. Off course, the tweets are archived and I can always come back and see them later. But I lose the interaction part here, because of my time zone (India) and the time zone of people I follow (mostly not in India) are totally different. It is something like a television broadcasting system. If you are not sitting in front of the TV, you miss the action. Period. So, what I need here is a better record-and-playback later mechanism for twitter messages.

Secondly, I use Twitter to interact with people. i.e. I reply to their message, by clicking on the ‘reply’ icon in Twitter stream. When the person I tagged (using @person) in my message, sees my tweet he should be able to understand that the tweet is actually a reply to his earlier tweet. He should be able to see a link to get the full context (like a thread) of the interaction. I remember a twitter app has this feature (but couldn’t remember that app name, plz comment if you know one). If Twitter has this feature built-in then it’ll be more usable.

Third, I need a rating system for twitter messages where I can rate and recommend a twitter message to my followers. Wait..wait..its not a Twitdigg application, even though the concept is similar. When I rate a tweet and when others also rate the same tweet, it’s popularity goes higher. I should be able to see what twitter message is so popular amongst my followers/the people I follow. Come on, Facebook has this (like), FriendFeed has this (Best of Day), why not Twitter!?

Fourth, ban Justin Bieber! (OK, I was just kidding!).

If your web site has this, then I hate your website

Veera — Thu, 15 Apr 2010 13:25:44 +0000

Every one has a design to design and every design has a decision behind it. But some designs prove that the decisions behind them are rock-solid and some other designs proves that the decisions are nothing but just rocks. In this post, I’m summarizing few of those rocks (a.k.a bad design decision) which could easily make me to hate that website.

1. Logo does not link to the homepage:

A website’s logo/heading is what the users see at first when they land on the page. The landing page need not be the home page of the site. It could be any sub-page also. If the user, who landed on a sub-page, wants to go to the home page, he’ll obviously clicks on the site logo. If the logo does not link to home page, then the user needs to type the URL manually, which means your site just lose a point in user’s rating.

2. No search functionality:

so, you don’t want to compete with Google, huh!? Even though it is possible to search within any website using Google (try: google site:veerasundar.com), why troubling your users and outsourcing site search to Google (btw, Google guys got lot more to do!). Simply add a search box and your user’s wont get lost in your site.

3. Bloated content and no clear operation flow:

These web designs are something that has lot to give. The site will just throw up everything it has to you and you need to pick from that. There won’t be any clear flow of operation.

4. No information about the current progress status:

If you want to avoid bloating your user interface, then it is obvious to split up the web page into multiple sub-pages and let the user to navigate page by page. You can see this navigational pattern as Wizards in graphical operating systems. These wizards will become less usable if they don’t tell anything about progress status (like where the user is currently in, how many steps are still left to complete, etc) to the user. The user has to remember his action to keep up with the page flow and don’t give more work to user.

5. Sites that do not speak with me:

Will you ever talk to a person again if he denies to answer your question, gives you a wrong answer, or speaks by looking at some where else and not looking at you? A website’s usefulness relies on how well the site is interacting with the user – in a way it responds to user’s action , communicate what it does, notify any errors, etc. A website should talk with me properly, by giving me correct messages displayed at the correct location in the page. If it is not, the add this website to the (s)hit list!

Veera Sundar » Web

Slidr – HTML5 app for making online presentations

Related Articles (System generated)

CSS Summit – 2010

Related Articles (System generated)

Google is good, but…

Related Articles (System generated)

Codered – Less SPAM, More Code!

Related Articles (System generated)

Infinite scroll : Loading content while scrolling, using Java and JQuery

Code for Servlet:

Code for JSP file:

Demo page: Infinite Scroll with Java and JQuery

How it works?

Related Articles (System generated)

How to make Reliance Netconnect broadband to work on Ubuntu 10.04

Method 1: The Out-Of-The-Box method

Method 2: The Do-It-Yourself way:

Related Articles (System generated)

CSS Sorter – Revamped

What did I fix:

Related Articles (System generated)

Google Wave opened to public – are you using it?

Related Articles (System generated)

Why Twitter is not interesting to me anymore?

Related Articles (System generated)

If your web site has this, then I hate your website

1. Logo does not link to the homepage:

2. No search functionality:

3. Bloated content and no clear operation flow:

4. No information about the current progress status:

5. Sites that do not speak with me:

Related Articles (System generated)