HTML5 Datalist

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Autocomplete is probably one of the most used UI implementations of the last decade.

Why shouldn’t it be? It makes it easier for websites to present possible values you would want. It makes for a sleeker form instead of having an ugly select tag.

HTML5 Datalist

As always HTML5 has come up with the neatest tricks possible. As a replacement to our old autocomplete implementations, HTML5 presents the Datalist.

How to Use

First, we will need to have some data that we want to present to our users.

<datalist id="countries">
    <option value="United States">
    <option value="Afghanistan">
    <option value="Andorra">
    <option value="Antigua and Barbuda">
    <option value="Argentina">
    <option value="Armenia">
    <option value="Australia">
    <option value="Austria">
    <option value="Azerbaijan">
    <option value="Bahamas">
    <option value="Bahrain">
    <option value="Bangladesh">
    <option value="Barbados">
    <option value="Belarus">
    <option value="Belgium">
    <option value="Belize">
    <option value="Benin">
    <option value="Bhutan">
    <option value="Bolivia">
    <option value="Bosnia and Herzegovina">
    <option value="Botswana">
    <option value="Brazil">
    <option value="Brunei">
    <option value="Bulgaria">
    <option value="Burkina Faso">
    <option value="Burundi">
    <option value="Cambodia">
    <option value="Cameroon">
    <option value="Canada">
    <option value="Cape Verde">
    <option value="Central African Republic">
    <option value="Chad">
    <option value="Chile">
    <option value="China">
    <option value="Colombia">
    <option value="Comoros">
    <option value="Congo (Brazzaville)">
    <option value="Congo">
    <option value="Costa Rica">
    <option value="Cote d'Ivoire">
    <option value="Croatia">
    <option value="Cuba">
    <option value="Cyprus">
    <option value="Czech Republic">
    <option value="Denmark">
    <option value="Djibouti">
    <option value="Burundi">
    <option value="Dominica">
    <option value="Dominican Republic">
    <option value="East Timor (Timor Timur)">
    <option value="Ecuador">
    <option value="Egypt">
</datalist>

Then we need to add our input box

<input name="countries" list="countries" />

Try it!

Try the HTML5 Datalist sample here!

 Best Practices When Creating HTML Emails

Most web developers have, even once, written an HTML email.

Coding a HTML website is one thing. Coding an HTML is another. There are a few things you have to consider when designing and coding one.

Keep it Light on the Images

While most people who prefer websites with dazzling images, most people don’t like it in their emails. For a few reasons.

  • They load slowly
  • It (sometimes) makes things hard to read
  • Makes it hard to make sense of it all

Besides, most email clients block the images at first load. Why not take advantage of CSS colors instead?

In any case, use images, but use them sparingly.

Use Tables

I can’t image using tables when coding in HTML, except when its for data based content. I am a big fan of pushing CSS to the limits but with HTML emails, you shouldn’t. Tables will be your friend here. No floats will be available to you.

<table><tr><td>I know you hate me and I know it.</td></tr><table>

Use External Images

Images should be hotlinked from an external server. That’s the way it should be.

<img src="http://www.gravatar.com/avatar/2461e49b79f7b1f72273bad5d06f2b3d?s=75" />

Use Inline CSS

Remember having read, never to use CSSs inline? Forget that when writing HTML emails. Most clients will block or won’t interpret external CSSs.

<p style='background-color: #333333; color: #FFFFFF'>This is some white text on black background</p>

Test on various email clients

Test. Test. Test. A nice HTML email will be able to be rendered correctly on a bunch of mostly used HTML email clients. The most popular are:

  • Microsoft Outlook
  • Yahoo! Mail
  • Hotmail
  • Gmail
  • Apple Mail

Now, don’t forget these when you think of writing or designing your own HTML emails!

 Create / Modify Text Files on the Command Line

While working on the command line, I hate opening up files in editors just to create files that would contain measly content like, .rvmrc, phpinfo files and README files.

Fortunately, in Linux and Unix systems, you can easily create and modify files with just the command line. This guide will teach how to create and modify any text files without the use of a text editor on the Command line.

Create a file

This command simply lets you create files:

touch phpinfo.php

This command simply lets you create the files and start adding content. Press Ctrl+D to stop.

cat > phpinfo.php

Append content

This simply lets you append some text. In this case, <?php phpinfo();.

echo "<?php phpinfo();" > phpinfo.php

This command simply lets you append to the file specified. Press Ctrl+D to stop.

echo "<?php phpinfo();" > phpinfo.php

View a file’s content

cat phpinfo.php
<?php phpinfo();

‘Nuff said!

 Vim Commands every Programmer should know

Aside from using Rubymine and occasionally using a bunch of GUI editors, I enjoy the occasional geeking with Vim, a text editor written by Bram Moolenaar, as my command line editor of choice.

It is probably one of the most popular editors of our times and will continue to be, most probably because of the fact that it is cross platform and has been pre-installed in a lot of unix systems. Not only does it make you look cool, not using a mouse, it boasts having to help you become more productive.

Vim commands basically removes the need to hold a mouse, everything is at your fingertips, literally. Moving your cursor through a document requires the use of 4 basic keys, j for down, k for up, h for left and l for right.

How cool is that!?

Now here a few VIM commands that will make you a VIM expert in no time:

Basics
Command Description
:e Open a file
:w Save a file
:q Close a file
:qa Close all files
:wqa Save and Close all files
Navigation
Command Description
Ctrl+v Block Selection
gg Go to first line
Shift+g Go to last line
o Go to next line and start editing
Shift+o Go to previous line and start editing
Shift+v Highlight current line
Shift+v Shift+g Highlight current line until end of file
Shift+^ Go to to the beginning of the line
Shift+$ Go to the end of the line
Search and Replace
Command Description
/keyword Search from top to bottom
?keyword Search from bottom to top
%s/old/new/g Search and replace old with new on current document
Working with multiple files
Command Description
:split filename Split window and open file in new split
:vsplit filename Split window vertically and open file in new split
:vs filename Split window vertically and open file in new split
ctrl-w ctrl-w Go to next window
Recipes
Command Description
gg Shift+v Shift+g Highlight the whole file
Ctrl+v Block Selection

Most of this commands I have learned working on web applications. It has made me faster for most tasks that needed text manipulation. I learned to love it. Trust me. After a few days or months on Vim, you’ll seem to hate all GUI editors.