Give Fluxbox A Try

Are you getting tired of running Unity, Gnome or KDE on your Ubuntu desktop? Try Fluxbox, a windows manager that is light on resources. Fluxbox is based on Blackbox. It’s extremely easy to use. If you are looking for an alternative to Unity, Gnome or KDE, then you should give Fluxbox a try.

How To Install Fluxbox

To install Fluxbox, you can access the Ubuntu Software Center and search for Fluxbox, and then Click Install. If you prefer the Terminal, you simply type the following command:

sudo apt-get install fluxbox

Start Fluxbox

To start Fluxbox, you will need to log out of your current windows manager. There is no need to reboot your computer. You will be taken to the Ubuntu Login screen instead. You can choose Fluxbox instead of your default windows manager. Mine was originally set to Gnome.

Right Click

Once inside Fluxbox, you can access everything using the left click of your mouse. Fluxbox has a simple menu that is accessible anywhere on the screen. Just right click and select any application that you want.

Adding to the Menu

Not everything is on the menu. You may have to add a few things. It’s easy. The file is located in ~/.fluxbox/menu. You may want to edit it and add your own entries.

vi ~/.fluxbox/menu

It uses the following format:

[exec] (Gimp) {/usr/bin/gimp}

Change Background Image

You can change background by typing this command on the Terminal:

fbsetbg -f path/to/file/image.jpg

In addition, you can also change themes. Just right click and select Styles. Choose one from about 25 different themes. I happen to like bora_black.

Give Fluxbox a try. If you don’t like it, you can always go back to your default windows manager. If you like it, you might want to stick around for a while. Enjoy the fast response of Fluxbox.

Multiple Columns in HTML5 and CSS3

Creating a multiple column pages is so much easier now with HTML5 and CSS3 than was previously possible. Consider if you have a page with 200 unordered lists. The HTML markup for this would be something similar to this:

Unordered List

<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>

As you’ve noticed, I’ve abbreviated the markup. The page rendered will be long. It will take some scrolling down to get to the bottom of the page. The obvious solution for this page layout is to display the data in multiple columns.

Displaying two to three columns is ideal. You can add more if you like. It really depends on how you want to layout your page. How do we add multiple columns on our pages? It’s quite easy. You’ll be surprised how simple it is.

First, let’s add a class div to our markup. In this example, we will call our div “data.” Our markup will now look like the example below. It’s relatively unchanged, except for the div we’ve just added.

HTML5 Markup

<div class=”data”>
<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>
</div>

CSS3 Markup

The magic is really in CSS. It’s ideal to place a width in your class div, unless your class div is already inside another div that already has a width limit. We can then set a limit how wide we want our columns widths and column gaps.

I’m using a div with a width of 500px because it goes well with the 150px columns widths and 25px column gaps. You probably already guessed, the column widths are how wide the columns are, and the gaps are the spaces between column widths.

.data {
  width:500px;
  -moz-column-width:150px;
  -webkit-column-width:150px ;
  -moz-column-gap: 25px;
  -webkit-column-gap: 25px;
}

Give It A Try

Give it a try. Adding multiple columns in HTML5 and CSS3 is much easier than was previously thought. Create a simple page with some sample data. Add a class div and use the CSS3 multiple column styles to it.

Compatibility

The code has been tested with Mozilla Firefox, Google Chrome and Apple’s Safari. I haven’t tested it with any Internet Explorer. I’ll be curious if it works with IE 7, 8 or 9.

Here’s a demo of a page using the multiple columns.

Add Focus To HTML Forms

When you visit Google.com, you probably noticed that the mouse cursor jumps to the searchbox, ready for users to type and submit a search. This method is called form focus. It’s made possible by using Javascript. With Javascript, you can set certain elements of the HTML form to be set in focus. This is particularly helpful for pages where there is minimal content, and the intent of the web developer/designer is to get the user to enter data and submit quickly. A login page is a perfect example of such a page.

You can bring into focus the username field, so users can start typing their login credentials. The form focus saves users from finding the mouse cursor on the screen, and then clicking on the field. With form focus, users are already on the form, ready to input text and submit. If the user presses Tab, the cursor jumps to the next field, which happens to be the password field. Pressing Enter, simply submits the form to start the login process. This article will show you the most simple way to add form focus to your HTML forms. Consider a login page. It has two fields: username, password, and a Submit button. The HTML markup is:

<form method="post' action="submit.php">
<label for="username">Username: </label>
<input type="text" name="username" />
<label for="password">Password: </label>
<input type="password" name="password" />
<input type="submit" name="submit" value="Login" />
</form>

How To Add Focus To Forms

1. Assign an ID to the form. We are using an id of “login” in this example.

<form id="login" method='post' action="submit.php">

2. Add IDs to the fields.

<input id= "user" type="text"  name="username" />
<input id= "pass" type="password" name="password" />

3. Add Tab Index to the fields. Notice the order starting with 1 and then 2.

<input id= "user" type="text" name="username" tabindex="1" />
<input id= "pass" type="password" name="password" tabindex="2" />

4. Add Javascript at the end of the form.

<script type=”text/javascript” language=”JavaScript”>
document.login.user.focus();
</script>

Where login is the id of the form, and user is the id of the field.

Final Form

<form id="login" method="post" action="submit.php">
<label for="username">Username: </label>
<input id="user" type="text" name="username" tabindex="1" />
<label for="password">Password: </label>
<input id="pass" type="password" name="password" tabindex="2" />
<input type="submit" name="submit" value="Login" />
</form>
<script type="text/javascript" language="JavaScript">
document.login.user.focus();
</script>

This is just one way of adding form focus to HTML forms. There are other methods, like using body onload and such, but I find this method the cleanest and the most simple one to implement by far.

Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.

Redirect With Cancel Button

When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.

Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”

Cancel Button To Reset Form

<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="form.html">
<label for="firstname">Firstname:</label><br/>
<input type="text" name="firstname" value="" />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="cancel" value="Cancel" />
</form>
</body>
</html>

Redirect With The Cancel Button

To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “http://google.com.” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.

<input type="button" name="cancel" value="Cancel"
onclick="window.location='anyfile.html'" />

This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.