Detect HTML5 Geolocation Support

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

Hidden elements using HTML5

HTML5 introduce the hidden attribute, which will allow you to hide a specific element. So no need to use css display:none anymore!

<div hidden>You can't see this text.This is hidden by HTML5 hidden attribute.</div>

Source: http://html5demos.com/hidden

css only tooltip

Here is the html structure for tooltip

Lorem ipsum dolor sit

And here is the css styles

/* base CSS element */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}

/* arrows – :before and :after */
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -14px;
top: 20px;
content: ”;
}

.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -12px;
top: 21px;
content: ”;
}

Source: http://davidwalsh.name/css…

9 Signs You Shouldn’t Hire THAT Web Guy

My employer specializes in creating websites for middle-sized businesses. We rarely create “Mom’n’Pops” websites and generally don’t pursue contracts with major corporations. Working with mid-size business has given me the opportunity to speak with executives and “decision-makers” within each business. Our discussions eventually end up with the other person telling me about their previous web developers and how their current site is ineffective as a sales tool or representation of the business. There are some definitive characteristics about my customers’ previous web persons and without further adieu, I give you 9 signs you shouldn’t hire THAT web guy.

1. He Calls Himself a “Webmaster”

Any web guy that calls himself a “webmaster” probably isn’t a master of anything. The term “webmaster” has become a translation for the word “amateur.” The web has diversified into so many different realms that webmaster is no longer meaningful (was it ever though?)

2. He’s a FrontPage Expert

Any developer / designer with a degree knows that Microsoft FrontPage most definitely isn’t a professional tool. FrontPage will pass for Mom and Dad who want to create a website dedicated to their dogs, not someone who’s trying to do business. I’d argue that a solid Web Developer should work at code level.

3. He’ll Submit Your Website to [Inflated Number Here] Search Engines

Submitting your website to hundreds of search engines would be great…10 years ago. Websites are indexed by relevant search engines by how rich their content and keywords are. Search engine optimization is big business and submitting sites to search engines simply isn’t the way to get to the top of Google.

4. He Wants a “Designed By ….” Plug on the Bottom of Every Page

You’ve paid this person to create a marketing tool for you — not a billboard for him. Your website is a launch pad for your business and Poindexter McScooner is simply the man behind the curtain — keep him there.

5. He Created a Cool Website for [Insert Family Member / Friend Here]

Your business needs someone who’s been there before. The most common answer to my “Who was he and what business did they work for?” question is “Oh, he did a website for the CEO’s daughter’s [insert lame organization here].” I honestly hear that friend-of-a-friend story all the time. Choose someone with a sizable portfolio that can provide references.

6. He Can Make You a Great Splash Page Flash Animation

Translation: “I can spend dozens of hours wasting your money to create something that will take too long to load and will be skipped more times than dessert at a bad restaurant.” Consistency and website flow are important to web design — not meaningless animations that waste visitors’ time and your money.

7. He Mentions He’s a HTML Expert

Who the hell isn’t? I would argue that dropping any language acronym on a customer (PHP, Ruby on Rails, ColdFusion, etc.) unless they ask is meaningless fluff. A mechanic could use a banana on my car if it would fix it. Keep your tools, especially HTML, to yourself — the customer doesn’t care.

8. He’ll Fit a Cool Counter on Your Site

You’ll add an ugly relic of the early internet on my site so that my competitors have an idea of my web stats? Sweet! Counters make a website look as unprofessional as possible — don’t use them.

9. He’ll Place a “Best If Viewed in…” Message on Your Website

Any real Web Developer knows that he doesn’t make the rules. Follow standards in the initial build and then fix it in Internet Explorer — that’s the flow. No responsible programmer would place a “best if view in…” message on the front-end of a website.

Get this article from David walsh blog

HTML5 Audio

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.