Free HTML5 tools for developer

/1 Comment/in /by

Since start of HTML5 it took the web to next level.Now most of the web development is implemented using HTML5 and css3 . Today i listed some HTML5 tools to reduce the development time.

1) Modernizr.com

modernizr_com

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.It will add class on html tag.

2) html5boilerplate.com

html5boilerplate_com

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

3) html5please.com

html5please_com

html5please.com will let you updated about HTML5, CSS3 features.If they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

4) videojs.com

videojs_com

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video.Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.

5) liveweave.com

liveweave_com

Liveweave is a HTML5, CSS3 & JavaScript playground for web developers and designers.Very useful tool for test your coding quickly.

Hope this tools will help you on your next project.

Happy coding 🙂

Detect HTML5 Geolocation Support

/0 Comments/in /by

Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust.
To check if the user browser support Geolocation you can use any of the following techniques:

Technique #1:

By using a JavaScript junction.

function supports_geolocation() {
  return !!navigator.geolocation;
}

Technique #2:

you can use Modernizr to detect support for the geolocation API.

if (Modernizr.geolocation) {
  // let's find out where you are!
} else {
  // no native geolocation support available 
  // maybe try Gears or another third-party solution
}

Get this tips from http://fortuito.us/diveintohtml5/detect.html#geolocation

HTML5 Audio

/0 Comments/in /by

Previously we uses flash to play audio files.Now HTML5 support a new element called Audio.It will give web developer much controls to do funny stuffs with audio.No need to use flash any more! 

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
 <!-- add your fallback solution here. Like you can add flash here for older browser-->
 <p>Oh! Your browser does not support the HTML5 audio element.</p>
</audio>


Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the element.
For more detials about html5 audio you can visit this post Playing audio files with HTML5.

Journal – Free wordpress Bootstrap theme

/10 Comments/in , /by

I have lunched a new free WordPress Bootstrap theme.
This theme is packed with features :

  • Using Bootstrap framework
  • Theme option panel
  • Video support
  • Widget ready
  • Language support
  • And best of all free to use

Here is the live theme demo

Download from Github https://github.com/maidulcu/JOURNAL.git

HTML5 Input Type Month

/0 Comments/in /by

HTML5 introduce new Input Type Month.This month type allows users to select a month and year.It will just select the month and year with no time zone.
You can call this Input Type Month using input type="month" on your input field.

Currently the latest version of Chrome, Opera and Safari browser supporting this.
 
 
 

<form action="#">
Month and Year: <input type="month" name="month_year" />
<input type="submit" />
</form>

If you are using any of this above browser then you are lucky to see it on action

Month and Year:

Or it may look like the screenshot below

html5 datetime

HTML5 Input Type datetime

/0 Comments/in /by

HTML5 Input Type datetime is just like Input Type Date except it will allow visitor to select a date and time (with time zone).

You can call this datetime picker using input type="datetime" on your input field.This will certainly reduce your development time so need nasty Javascript code. Read more →

HTML5 Input Type Email

/0 Comments/in /by

A typical email address structure is [email protected]
As you can never trust your website user so you have to check the email id when user submit the form.
To solve this, HTML5 came with a news input type email.
The syntax is as basic as a text input you just have to use type="email".

Some advantage of using this new Email input type is:

  • This input field will be automatically validated when submitted.
  • On mobile device like iPhone or on Android will display a keyboard with the @ symbol provided on the primary screen

Syntax for this Input Type:

<input type="email" name="usremail" />
html5 input date

HTML5 Input Type Date

/0 Comments/in /by

HTML5 Input Type Date will allows the user to select a date.
Previously this is done by Javascript date picker.
To make you life easier you can now call this date picker by simply using this
type="date" on your input field.

May be looks like this way : 

<input type="date" name="birthday" />

Currently the latest version of Chrome, Opera and Safari browser supporting this.

If you are using any of this above browser then you are lucky to see it on action

Date Picker:

The code i used abode is: 

<form action="#">
Date Picker: <input type="date" name="bday" />
<input type="submit" />
</form>

Or it may look like the screenshot below

html5 input date

color Input Type

HTML5 Input Type Color

/0 Comments/in /by

You can get color input box in html5 with this attribute type="color".
With this new html5 Input Type Color, you no longer need a complex Javascript color picker.

Not all major browsers support all the new input types. Only latest version of Chrome and Opera support this.
If the browser are not supported, they will behave as regular text fields.

Select your color: <input type="color" name="favcolor" />

color Input Type

HTML5 Autocomplete Attribute

/0 Comments/in /by

When HTML5 autocomplete is on, the browser will automatically complete values that the user has entered before.
This HTML5 autocomplete attribute works with the following input types: text, search, url, tel, email, password, datepickers, range, and color.

Also you can turn off this autocomplete attribute by using this attribute autocomplete="off"

<form action="/" autocomplete="on">
  First name:<input type="text" name="f_name" />
  E-mail: <input type="email" name="email" autocomplete="off" />
  <input type="submit" />
</form>

On this above HTML form autocomplete on and autocomplete is off for email input field.