Compiled Thoughts by John Ciacia » JavaScript

HTML5 Speech Input

John — Sat, 04 Jun 2011 06:12:27 +0000

The new features being introduced by the HTML5 standard are simply astounding. Just as the awe of one feature starts to wear off, I discover another that is even more awesome than the last. The current jaw dropping discovery is largely due to the Speech Input API Specification. Thats right, speech input.

You can add speech input to any input element by simply using the x-webkit-speech attribute.

The following code
[code]
[/code]
Will yield this

You can do other exciting actions language translations, or the famous voice search for android:
[code]

[/code]

Although this currently only works in Chrome 11 and relies on Google’s voice API, it is anticipated that more browsers will adopt the technology, and users will have the ability to choose which voice API they want to use.

*does the happy dance*

HTML5 Input

John — Sun, 01 Aug 2010 17:53:12 +0000

Lets be honest, HTML5 is the new buzz word. Every blog, tutorial, tweet, article, or post I read contains some reference to HTML5. It’s almost as bad as presidential campaigns during election year (well… maybe not that bad, but you get the idea!) However, unlike the latter, I am fully confident HTML5 will live up its expectations. Why is HTML5 so special? Well, you know all those hoops you’ve had to jump through and JavaScript libraries you’ve had to include? Kiss them goodbye! Let us take a look at some of the new features HTML5 provides with regard to input types.

Placeholder

[code lang="html"]
[/code]

Range

[code lang="html"]
[/code]

Number

[code lang="html"]
[/code]

Search

[code lang="html"]
[/code]

Date

[code lang="html"]
[/code]

Month

[code lang="html"]
[/code]

Week

[code lang="html"]
[/code]

Time

[code lang="html"]
[/code]

Datetime

[code lang="html"]
[/code]

Datetime-Local

[code lang="html"]
[/code]

Currently, desktop browsers treat the following types as plain text. However, Safari on my iPhone optimizes the keyboard layout.

Email

[code lang="html"]
[/code]

URL

[code lang="html"]
[/code]

Tel

[code lang="html"]
[/code]

The next type is built into the HTML5 specification, but I could not find any browser that takes advantage of it.

Color

[code lang="html"]
[/code]

Email Obfuscator

John — Sat, 23 May 2009 00:25:21 +0000

[code lang="Javascript"]

function cloakmail($content) {

preg_match_all("^[-a-z-A-Z-0-9\._]+@[-a-z-A-Z-0-9\._]+\.[a-z]{2,4}^", $content, $emails);

for($i = 0; $i < count($emails[0]); $i++) {
$username = explode("@", $emails[0][$i]);
$domain = explode(".", str_rot13($username[1]));

if(count($domain) > 2) {
$replace = '' . asc2html($emails[0][$i]) . '';
} else {
$replace = '' . asc2html($emails[0][$i]) . '';
}

$content = str_replace($emails[0][$i], $replace, $content);
}

return $content;
}

function asc2html($email) {
$html = "";
$len = strlen($email);
for($i = 0; $i < $len; $i++) {
$html .= "&#" . ord($email[$i]);
}
return $html;
}

$content = "Sidewinder@anything.extreme-hq.com
\n
Sidewinder@extreme-hq.com";

echo cloakmail($content);
?>

[/code]