How To Use Speech To Text

First of all, you need to be in Google Chrome Browser (only browser that currently supports speech to text input) to test it out. To enable speech to text is really simple. All you need to do is add one attribute to your textbox. The webkit only attribute is x-webkit-speech. Here is what it looks like:

<input x-webkit-speech type="text">

To future proof your website, just add the html5 attribute speech to ensure that your inputs work in any browser when the api is actually supported in Firefox, Safari and Internet Explorer

<input speech x-webkit-speech type="text">

Will All Browsers Support Speech To Text In The Future?

Probably, eventually… I hope so! I think most browsers that stay up to date will be supporting this feature soon. Besides, the “real” attribute that will eventually be supported is called speech, just like the webkit attribute but without the prefix. You can actually check out the spec for speech input in html5 yourself.

Demo Speech Input

If you are in Chrome, click the microphone icon in the textbox and speek something related to web development, Then hit enter.

Final Thoughts

I was doing some testing with the attribute and I found something pretty funny. Speech input functionality is actually available on password inputs, not very practical I’d say. I’m not the one to speek my password out in the open air… but thats just me. As far as I could tell, speech input only works on text inputs. Not textareas. And yes, I tried on radio and checkbox inputs. Hey, it was worth a try!

Related posts:

1. Default Text Field Value without Javascript (placeholder) Don't use JavaScript where you can do the same thing...
2. Hide Form Input Values On Focus With jQuery This is a simple and light weight JavaScript snippet using...

When you use urlencode on a get parameter in the url, you do not need to use urldecode on the value when you retrieve it in your script. PHP automatically performs a url decode for you.

I was recently writing a php script to verify an email address after a user signs up on a website. It actually took me quite a while to sort out a bug that I encountered. I’m writing this post today in hopes that my trial and error will help you in the future to avoid this situation.

The Objective

I needed to send a hash of the users email and a timestamp using a query variable from an auto generated email. The user would click the link and be redirected to the website where the site would process the hash and verify the user account. Simple enough, right? As it turned out, not really.

• Generate hash from email and timestamp
• Send email with email verification link that includes a urlencode‘ed hash
• User clicks link from inside email
• Hash is processed
• User is found in the database using information from hash
• User is verified and then logged in

The Problem

Everything runs smoothly until the user clicks the link inside their email. The hash is urlencoded by using the php urlencode() function. When I process the hash, I was url decoding it using the php urldecode() function. After that, I was splitting the hash using php explode with a colon as the delimiter. I should have gotten back an array with two values, an email and a timestamp. Instead, I got an error (undefined index).

I was supposed to have gotten the email and timestamp back so I could run a query against the database to find the user that had the pertinent data in their user row.

The Solution

I found out that when you get a parameter from the url using $_GET, php automatically uses urldecode on the value. With this not known to me at the time, I was running urldecode on a value that was already decoded. In essence, I was, obliviously, url decoding twice. This was spitting out some weird characters such as boxes, triangles and question marks.

Long story short, you do not need to use urldecode on $_GET variables. At least, that is what I got out of the ordeal. Please correct me if I am wrong.

Thanks and as always, Happy Coding!

No related posts.

What do I need?

First of all, you really don’t need much. All you need to be able to log in using ssh and the script.

The Bash Script

Log into your server and create a bash script wherever you keep your scripts at. I recommend placing the script outside of the root.

The script: wordpress.sh

#!/ramdisk/bin/bash

wget http://wordpress.org/latest.zip
unzip latest.zip && rm latest.zip
cp -r wordpress/* ./ && rm -rf wordpress/
echo "Finished!"

• Line 1: Location of your bash. Find yours by doing which bash
• Line 3: Download the WordPress zip archive.
• Line 4: Unzip and then delete the archive.
• Line 5: Copy all the files from the wordpress/ folder into your current directory
• Line 6: Lets you know when it completes.

Using it.

Just create a directory where you would like to install WordPress, enter the directory. Then just type the location to your bash script and you are 7 seconds away from a painless WP install.

Conclusion

In a nutshell, your are not one of the fastest people to have ever installed WordPress. Let me know if you find this useful! And happy coding!

Related posts:

1. Install WordPress In 30 Seconds If you are anything like me, then you tend to...
2. Must Have WordPress Plugins When you create a new website with WordPress for yourself,...

What is a meme?

According to Yahoo Answers (Better than Wikipedia)

On the internet a meme usually means one of those thingies that are ridiculously popular for no reason at all (like lolcats for example). Although the term “meme” was apparently coined by Richard Dawkins and is used in a more serious context meaning a “self-replicating unit”.

Anyways, I thought it was time for me to get in on the “fun”. I have taken the liberty of creating 3 popular meme templates with formats that you have surely seen before. You may download the zip archive that has the meme psd’s.

The templates include neatly created and named layers and groups for the sake of easy meme creation.

>>>Download Meme Templates<<<

Neatly Organized Layers

Meme Template Style 1

Meme Template Style 2

Meme Template Style 3

No related posts.

Download Apex Desktop Wallpapers

Below is a summary of the wallpapers in the zip folder. I hope you like them!

No related posts.

Update:

1. Get the download link for WordPress

Head over to http://wordpress.org/download/ you will see the blue button on the right side. Right click the button and select “Copy Link Location”.
The the link should be: http://wordpress.org/latest.zip

2. Download WordPress to your install directory.

This is the part that saves a lot of time. If you have ever uploaded an entire WP install with ftp, you’ll know what I’m talking about, it takes forever!

Go ahead and log into your server through ssh, navigate to where you will install WP then enter the command
wget http://wordpress.org/latest.zip

This will download the latest.zip within seconds.

3. Unzip the WP archive

To unzip the WordPress archive run the command
unzip latest.zip

You should see a large list of files scroll down the screen. This is good!

Now you can delete the archive, it isn’t needed anymore. Run:
rm latest.zip

4. Move files out of wordpress/ directory

After you unzip the archive, you will be left with a directory called wordpress/. To get your current location on the server, enter pwd, this will show a path – copy this to your clipboard for later use. Move into the wordpress/ folder by using cd wordpress/.

To copy all of the files from the folder and into the directory above wordpress/ run the command:
cp -r * ~/public_html/yourwebsitefolder/

Where ~/public_html/yourwebsitefolder/ is what you copied after you used the pwd command.

5. Delete the wordpress/ directory

Backup out of the wordpress/ folder by using cd ... Then run the command:
rm -rf wordpress/

Now you have all of WordPress on your server within 30 seconds.

6. Install the database

If you haven’t already set up the database, you will need to do that. Then all that is left is to visit your site, follow the instructions and enter your database connection credentials. Simple as pie!

Important!!!

Be very careful when you use the rm command. This command can delete your entire server if you are not careful, be sure you do not make any typing errors before you decide to press enter.

Related posts:

1. Must Have WordPress Plugins When you create a new website with WordPress for yourself,...

First, understand how the Kohana routing system works

If you haven’t already, head over to the previous post, explaining the basics of Kohana routes. If you already know that much, good! I will now show you how to use reverse routing.

What is reverse routing?

Reverse routing is basically a way to construct a URL, programmatically. Using reverse routing is an easy way to piece together a URL using the parts that you defined in the route definitions.

Ok, Show me!

It is super simple. In this example, I will create a route that could be used for a URL in the form of http://example.com/category/slug-of-the-article.
This route will match the structure of the example URL I provided.

Route::set('article', '<category>/<slug>')
	->defaults(array(
		'controller' => 'article',
		'action' => 'view',
	));

Now to do the actual reverse routing, woot! First of all, I specified that my url NEEDS two things (a “category” and a “slug”). The keywords between the <> mean that these will be available as variables. These variables can be accessed in your controller like so:

public function action_index()
{
    $slug = $this->request->param('slug');
    $category = $this->request->param('category');
}

So now that we have a route to direct requests to, let me explain how to do it. If you see when you define your route, with Route::set('routename');. ‘routname’ is how Kohana will know what structure to build our route as. Since ours is named ‘article’, we can get that route by going:

Route::get('article');

Now since we didn’t include any of the parameters in the route inside of parentheses, both keywords are required. So lets create a route with the structure http://example.com/kohana/how-to-use-kohana-routes.

$slug = 'how-to-use-kohana-routes';
$category = 'kohana';
$route = Route::get('article')->uri(array('category' => $category, 'slug' => $slug));

$route would be equal to kohana/how-to-use-kohana-routes. Now you can use this method of reverse routing in your views inside of a helper function to create an absolute url.

I like to create links like so:

<a href="<?php URL::site(Route::get('article')->uri(array('category' => 'kohana', 'slug' => 'how-to-use-kohana-routes'))); ?>">Kohana Routing Article</a>

Conclusion

Once you master the routing system in Kohana, you will quickly realize how much power the framework has. I have grown to absolutely love Kohana greatly in part because of the Routing system. There is still one more thing I need to tell you guys about the routing system though. There is a way to tell Kohana what your URL parameters must match, like a regex in order to create a valid route. But that will have to wait for another time. Thanks and Happy Coding

Related posts:

1. Understanding Kohana Routes A lot of people struggle with creating a simple template...

Turns out there is a handy little method: textObject.defaultValue. Instead of using the .val() method, it would be slightly better to use the one he mentioned.

However, I have another way, which I hope most of you know about already, but I will put it out there just to make sure. Its an HTML5 attribute called placeholder.

It looks like this:

<input type="text" placeholder="Your Placeholder Text" />

Which renders like:

There is even a way to style the placeholder text with css… like so:

::-webkit-input-placeholder {
   color: #ccc;
}

:-moz-placeholder {
   color: #ccc;
}

Long Story Short

Don’t use JavaScript where you can do the same thing with HTML or CSS! However, my script with the updated methods would be a good fallback for browsers that do not support placeholder text. Also, big thanks to Karl Ringrose for pointing out the js method!

Thanks and Happy Coding!

Related posts:

1. Hide Form Input Values On Focus With jQuery This is a simple and light weight JavaScript snippet using...

2. U-Design WordPress Theme

3. Modernize – Flexibility of WordPress

4. Di’verso – A Flexible WordPress Theme

5. RT-Theme 15 Premium WordPress Theme

Related posts:

1. WordPress Theme Logo Plugin Tada I would like to introduce you to my first...
2. 5 Awesome Website Boilerplates To Get Your Project Started If you are a freelance Web Developer, then chances are...

1. CSS Text Direction

Its simple, reverse the text so bots can’t read it.
The CSS

.reverse{
	direction: rtl;
	unicode-bidi: bidi-override;
}

The HTML

<span class="reverse">moc.evitaercydiggiz@ofni</span>

Which looks like this: moc.evitaercydiggiz@ofni

2. PHP Obfuscation

This one is a little more involved, but this one is click-able.

<?php

function obfuscate($string)
{
	$safe = '';
	foreach (str_split($string) as $letter)
	{
		switch (rand(1, 3))
		{
			// HTML entity code
			case 1:
				$safe .= '&#'.ord($letter).';';
			break;

			// Hex character code
			case 2:
				$safe .= '&#x'.dechex(ord($letter)).';';
			break;

			// Raw (no) encoding
			case 3:
				$safe .= $letter;
		}
	}

	return $safe;
}

function email($email)
{
	// Make sure the at sign is always obfuscated
	return str_replace('@', '&#64;', obfuscate($email));
}

function mailto($email, $title = NULL)
{
	// Obfuscate email address
	$email = email($email);

	if ($title === NULL)
	{
		// Use the email address as the title
		$title = $email;
	}

	return '<a href="&#109;&#097;&#105;&#108;&#116;&#111;&#058;'.$email.'">'.$title.'</a>';
}

?>

Functions taken from Kohana Framework

The implementation using php:

<?php
$email = 'info(at)ziggidycreative.com';
echo mailto($email); ?>

Which looks like this:

<a href="&#109;&#097;&#105;&#108;&#116;&#111;&#058;&#x7a;&#97;&#99;&#107;&#64;zi&#103;g&#105;&#100;&#121;&#99;&#114;e&#97;&#x74;iv&#x65;&#46;&#x63;&#x6f;m">&#x7a;&#97;&#99;&#107;&#64;zi&#103;g&#105;&#100;&#121;&#99;&#114;e&#97;&#x74;iv&#x65;&#46;&#x63;&#x6f;m</a>

3. CSS Hiding

Trick the spammers by hiding some silly text in the middle of your email.
The CSS

.hidden{
	display: none;
}

The HTML

<span class="email">info@<span class="hidden">istoppedyourspam</span>ziggidycreative.com</span>

This is what the bot will see: info@istoppedyourspamziggidycreative.com but non spammers will see your actual email.

Conclusion

You just learned 3 simple ways to obfuscate your email from spammers. Use these wisely and you will be spam free!

No related posts.