Hello, I'm Sean a student with a passion for
web development.

I’ve been really busy recently with two site’s for clients so haven’t had time to write any posts so hear is a quick update.

I’ve just released a new webapp. Basically when I’m developing sites I like to be able to quickly find that tab again so i made this app which you can add a nice favicon to you site quick and easy in a colour of your choice. If your in a good browser take a quick look up in the address bar I’m using it on this site.

Check it out and feel free to use it on your site: http://lnkr.it/iconapp

Also I’m thinking about giving this site a redesign soon to give more prominence to my portfolio and tidy up some of my code now i have learn’t more about wordpress since coding the theme.

So I hope to have more posts soon.

I’ve seen a good few tutorials on the css3 box-shadow but none about the inner shadow attribute of it, so i thought I’d show you here.

Here’s our div with a few basic bits of styling:

Then when we add box-shadow:inset 0 0 10px #000000; to the css it becomes:

Don’t forget that this property is only available on Firefox as far as i know but I’ve included both box-shadow:inset 0 0 10px #000000; and -moz-box-shadow:inset 0 0 10px #000000; in my css to futureproof it for when more browsers support it.

Here is a screen shot for people using other browser’s than Firefox.

For more information on this property visit:
http://www.w3.org/TR/css3-background/#the-box-shadow

Any comments? Just drop them in the box below.

Just to show the concept i decided to make a speech bubble with a little pointer out of only html and css3.

Demo

I’ve taken this idea from an episode of from the couch (#170) and turned it into code.

Demo Download the files.

This is David Walsh’s String.Tweetify in jQuery.

$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'$1')
				.replace(/(^|\s)#(\w+)/g,'$1#$2')
				.replace(/(^|\s)@(\w+)/g,'$1@$2')
		);
	});
	return $(this);
}

$("p").tweetify();

Before:
<p>@seanhood have you seen this http://icanhascheezburger.com/ #lol</p>

After:
<p><a href="http://twitter.com/seanhood">@seanhood</a> have you seen this
<a href="http://icanhascheezburger.com/">http://icanhascheezburger.com/</a>
<a href="http://search.twitter.com/search?q=%23lol">#lol</a></p>

Demo

These guys are awesome so i made a wallpaper based on the colours at the start of some of their videos

1280×1024
1280×800
iPhone (320×480)

I was recently looking for a way to clean up the sign up form for a project I’m working on. I realised I could merge the First name and Last name fields on the form but I needed a way to split the name up afterwards. So after a quick “Google” I came up with a way. The code below splits the name at the first space.

Input: John S Smith
Output: First Name: John Last Name: S Smith

// PHP

$name = "John S Smith";

list($fname, $lname) = split(' ', $name,2);

echo "First Name: $fname, Last Name: $lname";

I will soon be creating a new category that I will post snippets of code & website elements that you can use in your own website’s. This will include my Accordion Lightbox gallery and the “Load More” script i ported to PHP.

When visiting other websites I quite like to have a peek in the code to see how the developers make the sites look how they look.

One of the things I’ve had trouble with in the past is horizontal navigation menus, more precisely the styling side of things and how the HTML should be for content and the CSS for the presentation.

See for yourself

view-source:http://sublimeorange.com/

Sites that helped me:

• http://www.alistapart.com/articles/previewofhtml5
• http://html5gallery.com/
• http://html5doctor.com/

Update:

• HTML 5 Pocket Book
• HTML 5 Validator