HTML5: Progress tag

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

Progress bars are usability patterns that represents how long a process would be. It may also represent how long you still need to wait.

A few years ago, progress bars were introduced to the web. Javascript scripts, some CSS and a bit of HTML code were used to develop this usability pattern.

The famous ones of today are jQuery UI’s progress bar and Twitter bootstrap’s progress bar component.

HTML5 has also introduced its own implementation. This is through the progress tag.

Attributes

The progress tag has two attributes:

  • value – Represents how much has been completed
  • max – Represents how long the progress will be

Sample Code

Represents 30% completion:

<progress value="30" max="100">30%</progress>

Represents 80% completion:

<progress value="80" max="100">80%</progress>

In Action

See the progress tag in action! using the above code with 30% and 80% completion.

Browser Compatibility

The progress tag is supported by Chrome 6.0+, Firefox 6.0+, IE10 and Safari 5.2+

 HTML5: Contenteditable attribute

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

HTML5, HTML5 HTML5 Everywhere!

In the last 5 years or so, we have seen so many javascript plugins that do many fantastic things we wish we could have with only simple HTML like validation, datepickers and autocomplete.

Here we are faced with one fascinating HTML5 attribute, contenteditable.

Values

  • true – The contenteditable attribute when given the value of true, makes content inside elements editable.
  • false – The attribute contenteditable can be given a false value which renders it useless.
  • inherit – It can also be given the value of inherit which makes it inherit contenteditable functionality if the parent is editable.

Sample Code

Can be edited

 <div contenteditable="true">
    This an editable element. Edit the content as much as you can.
  </div>

Cannot be edited

 <div contenteditable="false">
    This an editable element. Edit the content as much as you can.
  </div>

Usage

The contenteditable attribute is quite useful especially when creating CMS that uses javascript to directly edit HTML.

In Action

If you’re using one of the browsers that supports contenteditable, feel free to visit our demo

Browser Compatibility

The contenteditable attribute is supported in modern browsers like IE7+, Firefox 12, Chrome 20, Safari 5.1 and Opera 12.

 Working with HTML5

HTML5 has been gaining popularity in the web development world. There’s good reason too. HTML5 as brought us new tags like the datalist and video tags. HTML5 has also brought us attributes like data-* and placeholder attributes.

Although the benefit of HTML5 are numerous, a lot of developers don’t know much about them. I thought of doing the research for them for my own and their benefit.

I will be archiving posts about my HTML5 reasearch, tips and tricks here so there is a central point of reference on this site for HTML5 posts.

Input Types

  • Color – replacement for javascript colorpickers.

HTML5 Tags

  • Datalist – autocomplete replacement
  • Progress – replacement for jQuery UI progress bar

HTML5 Attributes

 Reset MySQL root password on Mac OS

Losing your password sucks especially when it’s the root password for your MySQL database.

Enter password: 
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

Here’s a convenient way to reset your root password when you lose it.

/usr/local/mysql/bin/mysqladmin -u root -p password

The command line will give you a similar question:

Enter password:

Don’t add anything and you will push asked for your new password:

New password: 
Confirm new password:

Voila! Your MySQL root password has been reset!

While it is easy to reset your root password, unless of course it’s a development machine, it not recommended that you use your root account for menial purposes.