
**TLDR;** [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline)

Just finished updating/redesigning (or messing up) [my online resume](https://veerasundar.com/resume/). For the new design, I needed a timeline like UI component to show my work history. The componenent need not to be a perfect timeline, with actual scaling and all. But it should look like one and should respond to the screen width.

Here's a screenshot of the timeline component from my resume's work history section.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284453065/"
  title="timeline by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3786/12284453065_87e377c0e9_c.jpg"
    width="800"
    height="557"
    alt="timeline"
  />
</a>

And, here's the responsive layout of the timeline in smaller screens.

<a
  href="http://www.flickr.com/photos/94921037@N05/12284483625/"
  title="timeline-responsive by v33ra, on Flickr"
>
  <img
    src="http://farm8.staticflickr.com/7391/12284483625_0f187a5924_c.jpg"
    width="501"
    height="800"
    alt="timeline-responsive"
  />
</a>

After implementing the design, I thought of separating the timeline code alone as a re-usable component. Hence the new github repo: [https://github.com/vraa/css-timeline](https://github.com/vraa/css-timeline).

If you have a need to use something similar in your code, feel free to fork and use. Customize the variables in timeline.less file to your taste and compile it with less.js.

Fair warning: There are few limitations with the current implementation, which I'll fix in near future. If you happened to patch any bugs, please send me a pull request. TIA.


Responsive timeline with CSS and HTML


Recently I decided to redesign my online resume. Though the [old design][1] was quite satisfactory to me, I thought I could give it a makeover. So, here's the [new resume][2].

[1]: https://www.dropbox.com/s/giavg7k0vmqkdt5/old-resume.png "Old resume design"
[2]: https://veerasundar.com/resume/ "Veera Sundar - Resume"

If the redesign was just a bunch of HTML CSS changes, I wouldn't be blogging about it here. But, it isn't. There's much more than just the code change. I thought the tricks I used could help you in someway when you sit out to design your online resume. So decided to blog it.

## 1. Using hResume and Microformats

[Microformats][3] specifies a set of semantic markup to be used in the web pages so that the page can be easily understood by the machine (such as Google, Bing or other engines that eats the web pages). It also specifies a structure for marking up a resume page - the specification is [hResume][4]. I have used it in my [resume markup][5].

[3]: http://microformats.org/ "microformats are a set of simple, open data formats built upon existing and widely adopted standards."
[4]: http://microformats.org/wiki/hresume "hResume is a microformat for publishing resumes and CVs"
[5]: https://github.com/vraa/resume/blob/master/index.htm "Resume markup"

Advantage!? If my page is displayed in a device which can parse these microformats, then it can present my information is more meaningful way - for example it can pull up my contact information from the page and ask the user to add me to his/her contact list.

## 2. Pulling up favicons from web pages

![][6]

[6]: https://veerasundar.com/img/2012/06/skills.png "skills"

If you see the Skills section, you can notice that some skill pills(!) has an icon with it. This image is not served from my server, instead it is being dynamically pulled from the web pages itself, using **Google Favicon service**.

The sample code to illustrate this:

```css
    .skill.appengine{
     background:url(http://www.google.com/s2/u/0/favicons?domain=appengine.google.com);
    }
    .skill.java{
     background:url(http://www.google.com/s2/u/0/favicons?domain=java.com);
    }
```

There, pass the appropriate domain value and you'll get back the favicon of that domain. One point to note is that this will not work if the domain has the favicon in *ico *format.

## 3. HTML CSS Ruler

![][9]

[9]: https://veerasundar.com/img/2012/06/html5-css3-ruler.png

The highlighted part in the above image is done using pure HTML and CSS (including the arrows at both end). No images used. Here's the code.

#### HTML Markup:

```html
      <div class='scale'>
        <span class='left-end'/>
        <span class='line'>
          <label class='lbl-left'>Recent</label>
          <label class='lbl-right'>Older</label>
        </span>
        <span class='right-end'/>
      </div>
```

#### CSS:

```css
    .scale{
    	position: relative;
    	margin:20px 0 5px 0;
    }
    	.scale > span{
    		display: inline-block;
    	}
    	.scale .left-end{
    		width: 0;
    		height: 0;
    		border-top: 10px solid transparent;
    		border-right: 20px solid #ddd;
    		border-bottom: 10px solid transparent;
    		border-radius:5px;
    		position: absolute;
    		top:-10px;
    		left:0;
    	}
    	.scale .right-end{
    		width: 0;
    		height: 0;
    		border-top: 10px solid transparent;
    		border-left: 20px solid #ddd;
    		border-bottom: 10px solid transparent;
    		border-radius:5px;
    		position: absolute;
    		top:-10px;
    		right:0;
    	}
    	.scale .line{
    		width:100%;
    		border-top:1px dashed #ddd;
    	}
    		.scale .line label{
    			font-size:.8em;
    			color:#ddd;
    		}
    		.scale .line .lbl-left{
    			float:left;
    			margin-left:30px;
    		}
    		.scale .line .lbl-right{
    			float:right;
    			margin-right:30px;
    		}
```

So, what do you think about the redesign? If you are interested you can [fork this code @ github][8] and make it your own version. If you do so, don't forget to leave me a note so that I can also check it out.

[8]: https://github.com/vraa/resume "Resume source at GitHub"


Redesigning my resume with HTML5, CSS3 and hResume


All these days, I was using [my home page][1] to tell my visitors about myself. My previous home page designs were all similar to magazine style with all the information spread across the page and the visitor can go and read.

[1]: https://veerasundar.com

But yesterday, I got an idea to change this. What if the user discover the information about me rather than me showing all information at once. It would increase the visitors curiosity and give them some fun rather than boring reading stuff.

Then born the idea of presenting my information by means of a simple card matching game. Sat down for 5 hours to write the game logic and design the site - thanks to JQuery, JQuery Flip, HTML5 and CSS3 for designing websites such an easy task. Within one day, I conceptualized the idea, implemented it and pushed it to live.

[![vraa-home-page][3]][3]

[]: https://veerasundar.com

Only the basic version is now live. I'm planning to add scoring, reloading, randomizing cards position and few more stuffs once I get some positive feedback from my readers.

[Play the game][1] and let me know your feedback.


Redesigning my home page as a game


![ie-wtf][1]Sometimes you might want to read the 'class' attribute value of an HTML tag (for example _div_) from your JavaScript for processing. Almost all major JavaScript frameworks provide method to read attribute values, using which we can easily get the value of 'class' attribute.

[1]: https://veerasundar.com/img/2010/12/ie-wtf.jpg "ie-wtf"

But if you're not allowed to use any such libraries, then you would have to rely on the browser's built-in method **_getAttribute_ **to achieve the functionality.

Before you use the JavaScript's *getAttribute *method, do keep in mind that its implementation (especially for 'class' attribute) differs from browser-to-browser. I.e., IE does it differently from what other browsers are doing (as you would have expected!).

The below code would alert the _class_ value of *'myElem' *in all browser's. But, Internet Explorer would just say 'null'!

    var elem = document.getElementById("myElem");
    alert(elem.getAttribute("class"));

To make that work in Internet Explorer, change to 'className' and see what happens!

    var elem = document.getElementById("myElem");
    alert(elem.getAttribute("className"));

Now the above code will work **only in Internet Explorer **but will fail in all other browsers. ![:)][2]

[2]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif

So what's the correct solution that works in **all browser? **Well, don't use the *getAttribute() *method at all. Instead, use the property **className **to get the class attribute value.

Here's the cross-browser solution:

    var elem = document.getElementById("myElem");
    alert(elem.className);

That should do the trick!


JavaScript getAttribute method


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 Stage **- uses simple, plain HTML and the 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?

Become a successful developer with [testking 70-649][1] training course. Learn all the basics of web development using [testking 1Y0-A17][2] tutorials and [testking PMI-001][3] study guides.

[1]: http://www.testking.com/70-649.htm
[2]: http://www.testking.com/1Y0-A17.htm
[3]: http://www.testking.com/PMI-001.htm


The Evolution of a Web Developer


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.

![Visually modifying page layout using Firebug][1]

[1]: https://veerasundar.com/img/2010/02/firebug_layout.png "Visually modifying page layout using Firebug"

## 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.

![See the computed styles for an element][2]

[2]: https://veerasundar.com/img/2010/02/firebug_computed.png "See the computed styles for an element"

## 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.

![Find out which CSS file is the black sheep][3]

[3]: https://veerasundar.com/img/2010/02/firebug_multi_styles.png "Find out which CSS file is the black sheep"

## 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.

![Not just edit CSS, edit HTML too][4]

[4]: https://veerasundar.com/img/2010/02/firebug_edit-e1265179743540.png "Not just edit CSS, edit HTML too"

## 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_.

![Jump to the element you are editing][5]

[5]: https://veerasundar.com/img/2010/02/firebug_scroll_view-e1265179923269.png "Jump to the element you are editing"

Become IT expert with [testking 350-001][6] training course. Get the latest [testking SY0-201][7] css tutorials and [testking 642-901][8] study guide to learn about different web applications.

[6]: http://www.testking.com/350-001.htm
[7]: http://www.testking.com/SY0-201.htm
[8]: http://www.testking.com/642-901.htm


5 Ways of effectively using Firebug to edit HTML, CSS


Recently one of my colleague asked me the question

> 'I am a Java resource. Is it necessary for me to learn and understand the web design?'

I've seen many newcomers to Java language has been discussing this topic with themselves when they are given training in HTML and web design. For many of those folks, JavaScript is the another name for a nightmare. They just don't understand the necessity for a Java developer to learn HTML. This happens mainly for the people who are switching from a AS400/Mainframe or any other non-web technologies to Java. If these developers are going to design a web site without the proper understanding of web design techniques, they simply fail or got struck even for a simple mistake in the HTML code.

In my opinion, knowledge about (at least in a basic level) HTML/JavaScript/CSS is a must for any Java developer, unless you are completely going to work in Java SE. For all those Java developers, I would like to give some tips from my own experience in reviewing some Java developers page design markup:

- **Close all the HTML tags properly:**
  If all the HTML tags are closed properly (i.e. inner tags are closed first and then the outer) most of the page layout problems will be solved. Most Java developers would be using a CSS written some other web designers and a template HTML page. When they want to modify or add any data to the HTML page, they usually cut and paste HTML tags and forgetting to close them properly. This may affect CSS styling and the page layout may collapse. Properly closing the HTML tags may save lots of HTML debugging time to those Java developers.
- **Never use inline CSS styling / Scripting:**
  This is the frequent mistake I've seen most of the Java developers doing while designing the page. They just embed in the servlet/JSP page itself. Avoid this kind inline definitions. Externalize styling and scripting. It makes the page to be re-designed easily without much effort. and helps us to organize the code better.
- **Learn basics of CSS / JavaScript:**
  By learning this, you need not to wait for a web designer to come and fix your page for a proper layout. Also it helps you to add two more technologies to your resume. ![:-)][1] )
- **Use Firefox and Firebug:**
  I would recommend this combination to a seasoned web designer, but it is also good for the beginners to know about this. Firebug is the best thing that happened to JavaScript ever. With this little Firefox plug-in debugging JavaScript becomes much easier. Inspecting DOM elements also possible in Firebug, so finding out which CSS style affects which HTML element is no longer harder.

Above simple tips, if followed, could save lots and lots of time for a web design beginner.

Would you like to add anything to it? What are your tips / suggestions for a Java developer turned web designer?

[1]: https://veerasundar.com/blog/wp-includes/images/smilies/icon_smile.gif


#html (7)