1. Founders Talk

Founders talk is a really good because it interviews really interesting and influential people from the world of the web. Some of the notable people interveiwed include Drew Wilson (the guy who made Pictos & Screeny) & Vitalty Friedman (The editor-in-cheif of smashing magazine).

Average Duration: ~ 60 minutes
Release Schedule: Weekly

2. The Javascript Show

The Javascript show is a great round up of all the newest Javascript goings on in the Javascript world. It’s a great source to find out about new libraries & Javascript news. The key reason I love this show is because they cover a wide variety of useful tools & I always start using the libraries and tools they mention.

Average Duration: ~45 minutes
Release Schedule: Weekly

3. The ExpressionEngine Podcast

I’m not a massive fan of ExpressionEngine (I am a much bigger fan of CMS’s such as Perch or WordPress), however their podcast is really well put together & really high quality. While it does have a big focus on creating websites in EE, most the stuff they talk about can be applied to working with any website.

Average Duration: ~35 minutes
Release Schedule: Weekly

4. The Changelog

The Changelog podcast is great , it covers web and desktop development & the hosts appears to be quite well connected (So they interview some pretty interesting folk).

Average Duration: ~30 minutes
Release Schedule: Weekly

5. SitePoint

SitePoint is a really great resource of materials to get stared in the world of web development. Their podcast is really well put together & really informative.

Average Duration: ~40 minutes
Release Schedule: Weekly

6. Think Vitamin

Think Vitamin is well known as a sound information on web development. Their podcast does not disappoint.

Average Duration: ~40 minutes
Release Schedule: Weekly

7. Wired.co.uk

Wired is fairly well known technology & geek culture magazine, their podcast is a 40 or so minute summary of the weeks technology going ons with an in-depth interview. It’s really well edited, they stick to their release schedule & the quality is fantastic.

Average Duration: ~30 minutes
Release Schedule: Weekly

8. The ATX Web Show!

While this podcast is mostly based around the going ons in Austin, Texas, it’s a really good for finding out some of the cool things happening in web development.

Average Duration: ~45 minutes
Release Schedule: Weekly

9. Click

BBC Click is a really good TV show which has a excellent sister podcast which is really informative of the changes in the technology industry.

Average Duration: ~30 minutes
Release Schedule: Weekly

10. Forrst Podcast

Forrst is pretty well known among most web designers, their podcast covers the going on in the forrest community & also discusses whats happening in the rest of the web.

Average Duration: ~45 minutes
Release Schedule: Weekly

REPLACE(Original String, Find This, Replace with this)

So it can be used like:

SELECT REPLACE('My Original String', 'Original', 'Modified');
# This will output: My Modified String

So if you wanted to go through a full  table and replace a bunch of strings, you could use it like this:

UPDATE `table_name` SET `field_name` = REPLACE(`field_name`, 'Find Me', 'Replace with Me');

Useful no?

At first I thought it was fake, but if you visit the offending website, it’s unfortunately real. So yeah, after a short time of giggling and raging I worked on a way to bypass this.

How to bypass it

The easiest way, is to vote with your feet and not use the website. But in some cases, that isn’t always an option.

A working method I found (if you are using Google Chrome or Safari) is to hide the element.  With your mouse right click on the element and click “Inspect Element”, this will open the developer tools. Then under the “style” side menu just add the rule “display:none;” and it should disappear. In most cases, it might look a bit like the screenshot below.

You can also right click on the element in the developer tools and click “delete node” on the html causing the ragebox.

Extra Notes

• This is the same method using on my post labelled: Bypass Facebook’s “Like this to see the picture” pages using Google Chrome.
• You can also add a rule to your AdBlocker to stop these working on most websites, but that might affect sites which use lightboxes to look pretty.
• We totally need to standardise the <lightbox> tag into HTML5, just to deal with crap like this

Cookieless domains are (as the name suggests) are domains, in which the user will not send cookies (Which can add quite a few kilobytes to a request). For example, say I want a user to load a static image it would be silly of them to also send me the cookie data. Luckily they are super easy to set up.

Set up a sub-domain

Firstly, set up a subdomain on your website. For example static.yourdomain.com would be suitable, but it’s really up to you. Now point the domain to a path where you will keep your static files (Such as images and CSS files). For Full On Design, I set up http://files.fullondesign.co.uk/.

Stop cookies being set site wide

Next, make sure your website does not set website wide cookies. The fastest way to do this is by amending the .htaccess file and adding a CookieDomain Directive. For example:

CookieDomain www.fullondesign.co.uk

Alternatively in PHP’s setcookie() function, I could just use something like:

<?php
setcookie("TestCookie", 'Some Value', time()+3600, "/", "www.fullondesign.co.uk", 1);
?>

The key point to note is that the domain parameter is set to www.fullondesign.co.uk, not .fullondesign.co.uk. Thus the cookies will only be sent when the subdomain is www.fullondesign.co.uk.

Now start linking up to files in that directory and your pretty much done.

Setting up cookieless domains in WordPress

WordPress has a few neat built in functions to make this process easier. If you use wordpress pop the following code (just before the “That’s all, stop editing! Happy blogging.” comment) into your config.php file (amend as required):

define('COOKIE_DOMAIN', 'www.fullondesign.co.uk');

You can also change the uploads URL of your WordPress install to point to your cookieless domain. In the config.php file add the following(amend as required).:

define('WP_CONTENT_URL', 'http://files.fullondesign.co.uk');

Useful Resources

I’ve barely touched on the topic of cookieless domains aside from just saying “They making your website load faster”, here a two website which go a little more in depth.

• Google: Minimize request overhead
• Ravelrumba: Serving Static Content from a Cookieless Domain

Reasons to use PDO

• It’s Fast - it talks to the database via a database specific PDO-driver.
• It’s Object Oriented – The methods within the class are the same for each database driver, so you can easily change your database driver without lots of extra coding.
• It’s Flexible-  You can easily change between such database drivers as PostgreSQL, MySQL or SQLite by pretty much just changing your construct statement.
• It’s Safer – PDO encourages you to bind parameters to your SQL query’s, meaning that it’s significantly less likely your website will suffer from a SQL injection based attack.

Connecting to a Database

Connecting to a database is pretty simple. Here is how to connect to a MySQL Database.

<?php
// Define the parameters
$host = 'localhost';
$dbname = 'my_database';
$user = 'mysql_username';
$pass = 'mysql_password';

try {
	// Call the PDO class.
	$db= new PDO('mysql:host='.$host.';dbname='.$dbname, $user, $pass);
} catch(PDOException $e) {
	// If something goes wrong, PDO throws an exception with a nice error message.
	echo $e->getMessage();
}

?>

Doing A Query

Again, doing a query is just as simple as:

<?php
$query = $db->query('SELECT * FROM `users` ORDER BY ID DESC;');
$result = $query->fetchAll(PDO::FETCH_ASSOC);

// $result will now contain an object of all the rows in the table 'Users'
?>

However, if you are using user variables which may cause a SQL Injection you should bind the parameter to the query (see next example).

Binding a parameter to a query

<?php
$query = $db->prepare('SELECT * FROM `users` WHERE `ID` = :ID: AND `email` = :email: ORDER BY ID DESC LIMIT 0,1;');
$query->execute(array(':ID:' => '3', ':email:' => 'me@email.com'));
$result = $query->fetchAll(PDO::FETCH_ASSOC);
?>

If you bind a parameter to a request, it will sterilize the input so that it will not cause a SQL Injection.

Useful Resources

PHP Manual: PHP Data Objects

Nettuts+: Why you Should be using PHP’s PDO for Database Access

PHP: The Good Parts

Update:

As of PHP 5.4 the MySQL extension will be softly deprecated. This means you really should start using PDO ASAP!

In a nutshell, these methods behave exactly the same as the jQuery selector but comes integrated into the browser, meaning you input the CSS selector (e.g. “#myDiv” or “.MyClass”) and out pops the first element in the tree, or a StaticNodeList of the elements (depending on whether you use the All part) .

querySelector() Example

The querySelector() method takes the CSS selector input, then returns a single element.

<p id="myElem1" class="classExample">My First paragraph</p>
<p id="myElem2" class="classExample">My Second paragraph</p>
<form>
	<fieldset>
		<legend>Input Field</legend>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
	</fieldset>
</form>
<script>
	document.querySelector('#myElem1').style.fontSize = "1.2em"; // Make the first paragraph 1.2em
	document.querySelector('p').style.color = "#0D0"; // This will only affect the first paragraph

	// You can also add event listeners...Again this will only affect the first checkbox.
	document.querySelector('input[type=checkbox]').addEventListener('click', function(e){alert("You Checked Me");});
</script>

View querySelector() Demo

querySelectorAll() Example

The querySelectorAll() method will return a StaticNodeList (Like an array) of elements in which you can cycle through.

<p id="myElem1" class="classExample">My First paragraph</p>
<p id="myElem2" class="classExample">My Second paragraph</p>
<form>
	<fieldset>
		<legend>Input Field</legend>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
		<label>Check Me : <input type="checkbox" name="TickMe" value="ticked" /></label>
	</fieldset>
</form>
<script>
	var classExample = document.querySelectorAll('.classExample'); // Get all the elements with class "classExample"
	for(i=0; i<classExample.length; i++) {// Cycle through them
		classExample[i].style.fontSize = "1.2em"; // Change the fontSize.
	}

	// Add an click listner to the element #myElem1 and #myElem2
	var idExample = document.querySelectorAll('input[type=checkbox]');
	for(i=0; i<idExample.length; i++) {// Cycle through them
		idExample[i].addEventListener('click', function(e){alert("You Clicked me!");}); // Add the alert.
	}
</script>

View querySelectorAll() Demo

Current browser support level

Selectors are currently a W3C Candidate Recommendation, so they work in most browsers updated after January 2010. Thus for the most part you can use the above code examples in your current website and only IE6 level users will have an issue (Though, they are probably use to that).

However, if you have to support older browsers you can make use of the getElementsByClassName() method. For example:

<p id="myElem1" class="classExample">My First paragraph</p>
<p id="myElem2" class="classExample">My Second paragraph</p>
<script>
	if(!document.querySelectorAll){ // If the user does not have querySelectorAll()
		var classExample = document.getElementsByClassName('classExample'); // Get all the elements with class "classExample"
	}else{ // Otherwise do it the HTML5 way
		var classExample = document.querySelectorAll('.classExample');
	}

	for(i=0; i<classExample.length; i++) {// Cycle through them
		classExample[i].style.fontSize = "1.2em"; // Change the fontSize.
	}
</script>

View Demo

Further Reading

I’ve only lightly covered this topic; here are a few pages which will give you much more information on the new HTML5 method.

• John Resig: Thoughts on querySelectorAll
• Jef Claes: HTML5: New in the javascript Selector API
• W3C: Selectors API Level 1
• JavaScript: The Definitive Guide (Definitive Guides)

In a nutshell they are a group of PHP functions why can be used to check strings to see if they are alphanumeric, numeric etc without using regex (So they are fast!). The key thing to remember is that they return TRUE or FALSE, unlike filter_var which returns FALSE or the string.
Here is the code example:

<?php
// Check if input is alphanumeric (letters and numbers)
ctype_alnum('abcdef1234'); // This returns TRUE
ctype_alnum('£%^&ab2'); // This on the otherhand returns FALSE

// check if input is alpha (letters)
ctype_alpha('dssfsdf'); // returns TRUE
ctype_alpha('12345dssfsdf'); // Returns FALSE

// Check if the input is numeric
ctype_digit('1234'); // TRUE
ctype_digit('1as2d34f'); // FALSE
?>

It also contains functions to check for just numeric strings, uppercase strings and lowercase strings.

<?php
// Uppercase
ctype_upper('HELLO'); // TRUE
ctype_upper('hElLo'); // FALSE

// Lowercase
ctype_lower('hello'); // TRUE
ctype_lower('HeLLo'); // FALSE
?>

Handy right?

<?php
function validEmail($email){
	// Check the formatting is correct
	if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
		return FALSE;
	}

	// Next check the domain is real.
	$domain = explode("@", $email, 2);
	return checkdnsrr($domain[1]); // returns TRUE/FALSE;
}

// Example
validEmail('real@hotmail.com'); // Returns TRUE
validEmail('fake@fakedomain.com'); // Returns FALSE
?>

Free feel to copy/share.

Here is a code example of how to get the weather:

$w = new Weather('50.799995', '-1.065545'); // Input the Latitude and Longitude
echo $w->getLocation()->getWeather()->sayHuman();
// Ouput~: Portsmouth, England, PO4 8 | Partly Cloudy 4°C, Humidity: 93%, Wind: N at 8 mph

Enjoy!

Here is a quick cookbook on how to get started with Canvas where you will learn how to draw basic shapes and colours.

Finding your Feet

The first thing you need to start playing with the canvas tool is a browser which supports canvas. Currently most modern browsers do support canvas (This includes, IE9, Google Chrome and Firefox).

Next, set up the shell of your HTML5 page. To save you time I have made a basic example you can copy.

The important thing to remember about adding the canvas tag to your page is:

1. Your page has the html5 doctype, otherwise it might not work.
2. You add a width and height, otherwise your graphics may look cropped.
3. You add a “Your browser does not support the  HTML5 notice” notice in the canvas tag for older browsers.

Making a Square

Making a square is pretty simple; in a nutshell all you need to be able to do is understand how x/y coordinates work. I’ve uploaded this demo.

// More canvas stuff  will go here.
context.moveTo(5, 10); // Move the start point to x = 5, y = 10
context.beginPath(); // Open the path i.e. Start drawing
context.lineTo(55, 10); // Draw the line to x = 55, y = 10 then continue
context.lineTo(55, 60);
context.lineTo(5, 60);
context.lineTo(5, 10);
context.closePath(); // Close the path, so that javascript knows the shape is done.

// Fill the shape.
context.fillStyle="#8ED6FF";
context.fill();

// Colour in the border of the shape.
context.strokeStyle="#0000ff";
context.stroke();

Building a Circle

Creating a circle is a little different, instead of just putting the x/y coordinates you also have to state the starting radius, ending radius and whether if you your arc to be anti-clockwise (Weird right?). Here is the code example.

context.arc(100,75,50,0,Math.PI*2,true); // arc(x coordinate, y coordinate, radius, startAngle, endAngle, anticlockwise)

Rotating your Canvas

This is probably one of the most useful features for most web designers out there. Pretty much you can rotate the canvas. Check out my example.

// Rotate the canvas 15%
context.rotate(0.15);

Further Reading

• MDN Canvas Tutorial
• How to Draw with HTML 5 Canvas by Think Vitamin
• HTML5 Canvas Cheat Sheet
• The canvas element – HTML Standard