Category Archives: Software

Web Development Resources

Since I have been in Web Development for like forever, I’d like to put some resources I found useful and interesting for my future references. If this can also help you, that’s cool.

Clearing Floats Elegantly

The tutorial will introduce and guide you to clear floating elements. It also deals with browsers’ specific problems.


This allows you to easily embed a chat box anywhere in your Web page. You only need to enter a few properties, such as chat title, font, box size, and color. Then they will provide you with a JavaScript code to put somewhere in your Web page.

CSS for Bar Graphs

A good tutorial to show you how to create bar graphs only with CSS.

CSS for Bar Graphs

Custom Radio (Option) Buttons and Checkboxes

You can customize your radio buttons and checkboxes using this tool.

Custom Radio (Option) Buttons and Checkboxes

Fancy Menu with JavaScript and CSS

A tutorial on creating a very cool menu with JavaScript effect and CSS.

Forms Without Tables

Want to create forms without tables? Take a look at this tutorial.

Forms Without Tables

Light Weight CSS Tabs

Using CSS to create light weight tabs for Web navigation.

Light Weight CSS Tabs

Star Rating

A tutorial on how to create interactive star rating using CSS.

CSS Star Rating

Transparent PNG in Internet Explorer 6 and Older

Prior to Internet Explorer 7 — i.e., IE 6 —, IE cannot render transparent PNG images correctly. Fortunately we can resolve the problem pretty easily using JavaScript. Find the JavaScript code and tutorial on how to use it in the above link.

Next, I’ll put some resources related to SharePoint.

Change Your Fonts, Change Your Mood

You must already know Arial and Times New Roman pretty well. If you are a programmer, you must also know Courier inside-out. They are the main line of Microsoft‘s fonts pack. Microsoft Word defaults to Times New Roman. Excel’s default font is Arial. Notepad has Courier New (or Lucida Console in later Windows versions). Have you been tired of them after seeing them for 1, 3, or 10+ years? I do. If you are like me, then please continue reading.

Change Your Printing Fonts

You have a wide choices for printing fonts. If you have a fine quality printer, chances are all fonts will look crisp and great on papers, even the good old Times New Roman. But sometimes you will need variation to fresh up your eyes.

Basically, you can use either serif or sans-serif fonts as your printing fonts. If you don’t understand the difference, serif fonts have structural details on the end of strokes that make up letters and symbols (definition quoted from Wikipedia). If you still don’t get it, observe the picture below (also captured from Wikipedia).

Serif and Sans-Serif

There are some pretty good alternatives to Times New Roman. I personaly like Palatino Linotype and sometimes Georgia. Bitstream Vera Serif looks pretty good too.

Change Your Screen Fonts

Screen fonts are used to render the text you see on your computer monitor. It can be anything from GUI elements such as menus or labels, to the text displayed on your Web browser. Windows XP mainly combines Tahoma and Trebuchet MS to render GUI elements which are pretty much okay for me. Internet Explorer uses Arial and Times New Roman as its default fonts (that is the fonts which are used when the Website you visit doesn’t specify a certain font), and this looks rather ugly for me.

Unlike printing fonts, you usually have fewer choices for screen fonts. Not all fonts will look good on screen since monitors have much lower resolution than average printers. Usually, serif fonts won’t look good on screen since the serifs parts may be rendered poorly. So you better stay with sans-serif fonts here.

Microsoft has several fonts which are designed specifically for screen fonts: Tahoma, Trebuchet MS, and Verdana. They are made so they look crisp on monitors and easy on the eyes. Generally, we won’t get tired quickly when reading text on-screen using the mentioned fonts.

I used to like Verdana so much, but now I use Bitstream Vera Sans as my default font in my Firefox browser. The Bitstream Vera Sans font is also optimized so the rendering quality is great on low-resolution devices such as monitors. The following are the pictures of my Website rendered with Bitstream Vera Sans (upper) and Arial (lower).

Bitstream Vera Sans and Arial

Do you like it too? I will show you later how to install and use the Bitstream Vera fonts.

Change Your Code Fonts

Are you a programmer? Do you mainly develop on Windows platform? If the answers to the both questions are “yes”, then you must be very familiar with the Courier or Courier New fonts. The Courier family font has been used widely in Windows development environment. There are some popular alternatives for this code fonts, mainly the Lucida Console font.

You cannot pick any fonts as code fonts since programmers will need monospace (aka fixed-space) capability to ease indenting in coding. If you are bored with Windows’ standard fonts, you can try Bitstream Vera Sans Mono. It is designed for programmer to optimize the clearness of codes. Take a look at the following picture comparing Bitstream Vera Sans Mono (upper) and Courier New (lower).

Bitstream Vera Sans Mono and Courier New

About the Bitstream Vera Fonts

You read them several times. I use the Bitstream Vera fonts. They look good, but you can’t find them in your font selector dialog box. Why? Because they don’t come with Windows. Bitstream Vera fonts are released under an open source license and published by the GNOME Foundation. Since they are open source, everyone can use and modify them freely (as in free speech). There is a TTF (True Type Font) version for use with Microsoft Windows which can be downloaded here.

Installing and Using the Bitstream Vera Fonts in Windows XP

Here is a guide for those who are unfamiliar with basic fonts operation. This guide is for Windows XP, but should work under different Windows version with some adjustments as well.

  1. Download the TTF package. They are packed in several formats: zip, tar.gz, and tar.bz2. Choose the zip package if you are unsure.
  2. Double click to open the zip (or whatever) package. You will see some files beginning with “Vera”, copy them to any folder you want.
  3. Open Control Panel, switch to Classic View, then double click on Fonts.
  4. Choose menu File > Install New Font…
  5. Navigate to the folder where you copied the Vera fonts earlier in step 2.
  6. Select them all in the “List of fonts” box and click the OK button.
  7. They are installed and ready to use.

Here is another guide to change your default browser font. I use Mozilla Firefox 2.0, but you can do this also in Internet Explorer.

  1. Launch Firefox.
  2. Choose menu Tools > Options…
  3. Click on the Content tab.
  4. Under the Fonts & Colors group, click on the Advanced button.
  5. Set Bitstream Vera Serif, Bitstream Vera Sans, and Bistream Vera Sans Mono to the Serif, Sans-serif, and Monospace combo boxes respectively.
  6. Click OK several times to close the Options dialog box.

Many applications allow you to change the fonts, just explore, change some fonts to brighten up your mood. Have fun.