Frontend · How To · HTML5 · Usability · User Iterface Design · Web Design

HTML5: How to Make a datalist for a Form Field Input Element

Isn’t it nice when web developers make it easy for end users to fill out a form? One way to make for a pleasant user experience is to offer suggestions on a form’s input field. HTML5 now has a cool feature that makes this easier for the developers too!

The HTML5 datalist element provides an “autocomplete” feature on form elements. With it, you can provide a list of predefined options to the user as they input data.

Now, when a user is entering some text into a text field, a list can drop down with pre-filled values for them to choose from.

How to Make a datalist for a Form Field Input Element
The datalist tag was introduced in HTML 5.

Use the ID of the datalist tag to associate it with the appropriate input.
For example, if the datalist tag has an id=”myDataList”, then the list attribute of the input element will look like this: list=”myDataList”.

You can fill the datalist element by nesting option tags inside the datalist tag. Here is an example of the code for the HTML5 datalist element:

OK, so now you know. Go be nice to your users with the HTML5 tag!

bbEdit Tips · Frontend · How To · Usability · User Iterface Design

Where’s the ^%@$*$ ‘end of line’ Shortcut Key in BBEdit on Mac OS ?

The HOME and END keys move to the top and bottom of the document instead of start or end of the current line as expected. The HOME and END keys lay dormant on the keyboard, because the need to move to the top or bottom of a document is, like -ALMOST NEVER !!!
Now, the shortcut key to the start or end of the current line in Mac OS is the CMD+RIGHT/LEFT ARROW shortcuts.

Too bad, these are not as easy to remember, oh well.

So anyway, if you’re going MAD like me trying to figure out a quick “end of line” key now you know. Hope this helps ! : )

Backend · Usability · Web Design

View Local Developement Sites with Parallels and MAMP on a Mac

How’s that for a long title? I just wanted to make sure that the desperate souls in need would be able to find what they are looking for. If you are a web developer, you must deal with Internet Explorer. If you’re developing on a Mac, that can be even more of a pain the the already agonizing ordeal. Here is a little something to make it easier, thanks to MAMP.

MAMP is a program that helps you run a server on your MAC. “But, I already can run a server on my MAC!”, you exclaim. True, but there are some really nice organizational features about MAMP (even the FREE version) that makes it worth checking into. That is another post. For now, I’m going to tell you a simple way to get IE as viewed from Parallels to “see” your local web site(s) you may be developing. This makes trouble shooting, especially where CSS is concerned, much faster and easier. Hey, I’m all for anything that makes dealing with IE easier.

For this post, I assume you have decided to install MAMP and have successfully done so (It’s easy, by the way) and you have also decided to use Parallels and have it installed.

Take a Look at your MAMP console. Do you see where it says “Preferences” ?

Press the preferences button on the MAMP console.
Press the preferences button on the MAMP console.

After clicking on the “preferences” button, you will then click on the “ports” button. It should look like this.

Notice the port number of MAMP
Notice the port number of MAMP

Notice what the port number is where it says “Apache Port”. You will use this in you URL in IE. The port number is almost always going to be 8888 unless you have changed it for some reason.

OK, now go to you MAC’s “System Preferences”. Not to insult your intelligence, but, in case your a newbie or just a bit flustered at the moment, you get there by clicking on the little apple in the far upper left corner of your screen. The resulting pane should look like this.

Notice your local IP address
Notice your local IP address

Do you see the IP Adress in the middle of this pane?

After opening Internet Explorer in Parallels, type the following address.

address to type in Internet Explorer
address to type in Internet Explorer

Did you notice that it is a combination of your local IP and the MAMP port separated by a colon? If everything else is working as it should, then this will show you your local site from within the “Sites” folder just under your “Home” on your MAC.

In another post coming soon, I will tell you how to set up multiple sites with the free version of MAMP. Its easy and makes for a much smoother transition between projects.

I hope this post was helpful and easy to understand. Feel free to let me know your thoughts. I’m grateful for any friendly criticism or “how to” contributions.

Frontend · Usability · User Iterface Design · Web Design

Learn To Guide Web User’s with Precedence

In web design, it is important to guide the user’s eye. Without a sense of “flow” a feeling of frustration takes over creating a negative experience. The art of subtly, and sometimes not so subtly, guiding the viewer’s attention is referred to as Precedence.

Since web pages are, for the most part, about the users getting information, how the information is presented is of great importance. There are several ways to do this, namely,

Frontend · Usability · User Iterface Design · Web Design

What is Web 2.0 ?

Web 2.0 is a blend of new technologies that provide a much more rich and robust user experience. There are 3 main Components to Web 2.0 as described by Andy Gutmans, Co-Founder of ZEND.

RIA (Rich Internet Application) Andy Gutmans says RIA is “…how we bring the experience from the desktop into the browser.” What this means is this. You may have noticed


Usability -Not Fine Art on the Highway

I have spent 19 years as a fine artist exhibiting my paintings in galleries from California to North Carolina. It should come as no surprise that fine artists do not think like the public. I do have an analytical mind however, so it was by hard pressed analysis that I have come to agree with the following.

The Internet, if nowhere else has established beyond any doubt, that usability (ease of use) along with utility (a site’s practical value) are what determine a web designs success over its aesthetic appeal. Imagine if the road signs along your way to an unknown place where works of fine art with beautifully painted details and higher notions of several individual artist’s ideals.