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!)

Related Articles (System generated)

• CSS Summit – 2010
• Google Chrome Frame : enabling HTML 5 in Internet Explorer
• Timelinr – A web 2.0 application for creating timelines online
• Infinite scroll : Loading content while scrolling, using Java and JQuery
• CSS Sorter – Revamped

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

Related Articles (System generated)

• Slidr – HTML5 app for making online presentations
• Infinite scroll : Loading content while scrolling, using Java and JQuery
• The Evolution of a Web Developer
• Geolocation in HTML5 – browser and device support
• 5 Ways of effectively using Firebug to edit HTML, CSS

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.

Related Articles (System generated)

• Google is good, but…
• CSS Sorter – Revamped
• Google Caffeine : The next version of Google Search
• Google has brought the Java to AppEngine
• Google searchWiki – an answer to Wikia?

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 += "<p><span>"
                        + counter++
                        + "</span> This is the dynamic content served freshly from server</p>";
            }
            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"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Load content while scrolling - Infinite Scroll with Java and JQuery</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
            body{
                font-family:Arial;
                font-size:.93em;
            }
            #content-box{
                background-color:#FAFAFA;
                border:2px solid #888;
                height:300px;
                overflow:scroll;
                padding:4px;
                width:500px;
            }
            #content-box p{
                border:1px solid #EEE;
                background-color:#F0F0F0;
                padding:3px;
            }
            #content-box p span{
                color:#00F;
                display:block;
                font:bold 21px Arial;
                float:left;
                margin-right:10px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $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;
                        });
                    }

                });
            });
        </script>
    </head>
    <body>
        <h1>Demo page: Infinite Scroll with Java and JQuery</h1>
        <p>This page is a demo for loading new content while scrolling.</p>
        <p style="margin:20px 0;background-color:#EFEFEF;border:1px solid #EEE;padding:3px;">
        	Credits: Veera Sundar | <a href="http://veerasundar.com">veerasundar.com</a> | <a href="http://twitter.com/vraa">@vraa</a>
        </p>
        <div id="content-box">
            <div id="content-wrapper">
                <p><span>1</span>Lorem 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. </p>
                <p><span>2</span>Lorem 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. </p>
                <p><span>3</span>Lorem 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. </p>
                <p><span>4</span>Lorem 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. </p>
                <p><span>5</span>Lorem 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. </p>
            </div>
        </div>
    </body>
</html>

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

 });

Related Articles (System generated)

• How to create a horizontal navigation website using JQuery.
• Downloadable fonts in Firefox 3.5
• Timelinr – A web 2.0 application for creating timelines online
• I am a Java developer. Should I know about DIV ?
• CSS Summit – 2010

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.

Related Articles (System generated)

• Google has brought the Java to AppEngine
• Hosting Java applications in the web
• Codered – Less SPAM, More Code!
• Infinite scroll : Loading content while scrolling, using Java and JQuery
• Google Wave opened to public – are you using it?

If you are learning something new , be it a programming language, photography, driving a car – you name it, you get to learn the very basics first. And then you slowly move upwards the learning curve and start learning the best practices and pit falls. Finally you tend to master the art and bring your own ways of doing it.

In the same way, a web developer might evolve progressively in web development. What I think as the different stages in an web developer’s evolution are:

1. HTML + <font> Stage - uses simple, plain HTML and the <font> and similar tags to design the site layout and look and feel.
2. HTML + Inline CSS + In file JavaScripts stage- starts using Cascading Style Sheets to separate the content from style and a basic JavaScript to validate inputs. Heavily depends on prompt and message box for communicating with site user.
3. HTML + External CSS + External JS stage - intermediate stage where the developers learns to separate the content from the functionality and design. But still often re invents the wheel, by avoiding to use language frameworks.
4. HTML + CSS/JS Frameworks + AJAXified stage - has a wide knowledge about several web frameworks and using them in projects. Try to solve any problem using AJAX (even Hello World can’t escape!). Builds the site for high end browsers (Chrome, etc.) first and the fix it for the low end browsers (IE5, etc) .
5. HTML 4.01 + Progressive Enhancement stage – builds the site for the low end browsers first and slowly introduce the enhancements (CSS, JS, etc.) in step by step. Always try to comply with the web standards. Puts the graceful degradation as important as the complete functionality of the site.

So, At what stage are you in?

Related Articles (System generated)

• CSS Summit – 2010
• Infinite scroll : Loading content while scrolling, using Java and JQuery
• 5 Ways of effectively using Firebug to edit HTML, CSS
• Downloadable fonts in Firefox 3.5
• Timelinr – A web 2.0 application for creating timelines online

If at all there is one player who is running late in the web race, it is Internet Explorer. The web standards support is different in IE when compared with other modern browsers. When it comes to HTML5, IE lags further behind.

Developers are started experimenting HTML5 in their projects. Most of the modern browsers, like Chrome, Firefox, have already ported their browsers to support HTML5 features. But, Internet Explorer is yet to make a step in that direction. The HTML5 support in Internet Explorer 8 (the latest version of the browser) is very limited, which includes only bug fixes but not any new HTML5 feature.

But if you are stuck with Internet Explorer for any reason (if you are in a corporate network) but still want to experience the HTML5 features, you can make use of the Google Chrome Frame plug-in. It is an open source technology that brings the Google Chrome’s engine to Internet Explorer. So, you can enjoy all HTML5 features inside your Internet Explorer.

Similar to Chrome Frame, Cristian Adam is developing a <video> plug-in for Internet Explorer. The Xiph.Org Ogg Codecs enables the HTML5 video support in Internet Explorer. You can download the codec installer (1.10 Mb) and install it in your system to test the feature. Since the plug-in is in the early stages of development, it only supports video playback. There are no navigation controls yet.

Btw, you can view HTML5 videos in Youtube by joining the beta program.

Related Articles (System generated)

• Google Chrome Frame : enabling HTML 5 in Internet Explorer
• Slidr – HTML5 app for making online presentations
• CSS Summit – 2010
• Geolocation in HTML5 – browser and device support
• HTML 5 Canvas element

Firebug is an inseperable tool in any Web developer’s toolbox. It’s one of the best things that happened to JavaScript and Web Development. I have been using Firebug for a long time and have been wondering how my web development would be if there is no Firebug. So, in this article, I’m sharing few of my tips and tricks to use Firebug effectively to speed up your web development.

1. Visually modifying page layout in Firebug

Firebug’s Layout panel let’s you to examine the selected element’s height, width and other position related attributes in a visual manner. Apart from showing the positional attribute values, the Layout panel allows you to edit the values directly from the panel. To edit a value, just click on it and the modified value will be reflected immediately on the page.

2. See the computed styles for an element

As you might have known, CSS apply styles in a cascading manner (after all, it is cascading style sheet, isn’t it?). I.e. The styles that are defined for the parent element will be applied to all of it’s child elements too. But, the child element is allowed to override any of the parent styles and define its own styles. Thus, the final set of style attributes which are applied to an element is always changed at the run time. To view the final style attributes, which are calculated after applying all the inherited style definitions, are displayed in the Computed panel. Please note that it is not possible to edit any attribute from this panel.

3. Find out which CSS file is the black sheep

Some times it becomes very difficult to figure out which CSS definition is affecting a element style. When more than one CSS files are being used in a single page, then it becomes even more difficult. In such scenarios, Firebug could be used to identify the CSS file name from which an CSS style definition is being taken. For example, in the below screenshot you can see that the particular page uses two CSS files (screen.css and reset.css) and the Style panel clearly displays which style is taken from which CSS file. The overridden styles are striked out. The Style panel also links to the URL of the style file being used, so it is easy for us to get the entire CSS file if needed.

4. Not just edit CSS, edit HTML too

Firebug Style panel lets you to edit any CSS attribute and view the results immediately. Firebug can be used to edit the HTML content also. To do it, right click on the tag which you want to edit in the HTML panel and then select Edit HTML (or, just double click on the element). Firebug opens the inner HTML of the element you selected in edit mode. The changes you make will be visible on the page immediately.

5. Jump to the element you are editing

This is a nifty option for quickly navigating to the element that you are currently working. While editing a HTML element, right from the HTML panel, you can easily bring that element into view by right clicking and selecting Scroll into view.

Related Articles (System generated)

• Downloadable fonts in Firefox 3.5
• Timelinr – A web 2.0 application for creating timelines online
• I am a Java developer. Should I know about DIV ?
• How to create a horizontal navigation website using JQuery.
• CSS Summit – 2010