Today i discovered a worrying bug with Firefox, Firebug and Page-speed.  A good friend of mine, Chris Murray, was demonstrating his new flash photo upload applet. I rudely pointed out that it didn’t work in Firefox only to find out that it did in his. After wasting his time trying to prove SWFOject, Firefox and maybe Flash needed to be updated it turns out that no dynamically embedded flash worked in my version of Firefox. Sorry Chris…

What do i mean by embedded flash? Well, to get round the various methods of embedding flash into multiple browsers, javascript is often used to insert the flash into the DOM. Thereby using different techniques per browser.

To cut a long story short here is a screenshot of the relevant flash:

As you can see, the mark up is correct and present, just strangely disabled.

I am using Firefox 3.5.3, Firebug 1.4.3 and Page-speed 1.3. All are the updated and most recent versions.

What can you do?

Nothing really. The issue has been raised with Page-speed guys and there is a support thread too. I expect this to be resolved straight away as the issue has been marked critical. It is probably best to disable Page-speed for the time being. There is always Yslow!

//only works for a string beginning with a number!
('123 Hello World').toInt();  //=> '123'

Mootools FTW!

Imagine you have a string:

var myString = "123 Hello World";

I was in the middle of some mootool’in and i was about to go down the usual route of:

var myNumber = myString.substring(0,myString.indexOf(' '));

when i rushed off to google a better way to do it. Thanks to stackoverflow i found it. Regular expressions! I have no idea how to write them but i can appreciate them. The following expressions get the first integer within a string:

("123 Hello World 4").replace(/(^\d+)(.+$)/i,'$1'); //=> '123'

//If it's somewhere in the string:

(" Hello 123 World4").replace( /(^.+)(\w\d+\w)(.+$)/i,'$2'); //=> '123'

//And for a number between characters:

("Hello123World 4").replace( /(^.+\D)(\d+)(\D.+$)/i,'$2'); /=> '123''

Good stuff!

Mootools is a great, stable, open source javascript library which is maintained by a limited number of proffesional developers. It does have a browser detection class built in but it doesn’t natively provide a method to detect the version of Internet Explorer.

The Mootools developers are code purists; Extending their browser class would be easy but they do not want to do it. They do provide a method to get the browser build and this could be used along with the remaining browser string to work out the version. Essentially, they like to keep their code relevant and streamlined.

In a previous post i covered how to detect IE6 with one line of Javascript. This solves the problem where later builds of IE6 can show a browser string similar to IE7.

This can be combined with the Mootools browser class to produce browser variables.

//declare global variables
var WEBKIT = Browser.Engine.webkit;
var GECKO = Browser.Engine.gecko;
var OPERA = Browser.Engine.presto;
var IE = Browser.Engine.trident;
var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
&& (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1);

//test variables (delete)
if(WEBKIT) alert("WEBKIT");
if(GECKO) alert("GECKO");
if(OPERA) alert("OPERA");
if(IE) alert("IE");
if(IE6) alert("IE6");

Placing this code at the top of your JavaScript include will give you simple global boolean variables for each browser platform. Creating one variable per browser at the very start means the calls to the browser class are limited to one and the detection script is ran only once. It also means you have very simple and easy to remember variables to use throughout your code.

It started as a Reddit thead: Facebook girl “loves an*l” but apparantly doesn’t know it

Basically, to some up, someone who is probably close to Diana has been able to access her account and choose her username. They chose ‘I Love An*l’. Now, if you type in http://www.facebook.com/i.love.anal you go to her page. I am, of course, assuming she didn’t do it herself.

The original person who found this out was good enough to try to tell her…

This didn’t go down too well!

Reddit also became aware of how much publicity the thread achieved. A new one was started up pointing out the results if you Googled the girls name. Reddit has now removed the above picture as the joke ‘went too far’. They were probably right, everyone was queuing up to tell Diana what has happened. She will almost certainly be a well know name for at least the next 24hours.

Just goes to show what happens if you leave yourself logged in somewhere.

(please note i have not mentioned her name anywhere in this article, i’m assuming facebook will change her username very soon, hopefully she will soon fall back into obscurity)

So, pick your usename name!

http://www.facebook.com/username

Facebook should have done this from the start!

or you could end up like these people (found via the reddit thread):

http://www.facebook.com/cumonmyface

http://www.facebook.com/cock.eater

http://www.facebook.com/gayer

Font Stacks

It’s a basic CSS declaration but not many people are aware of what font stacks do. In a world where most fonts are not available on the web, or ‘web-safe’ as we like to call it, you have to stick to a limited amount. Luckily CSS enables the developer to list his ideal fonts in an order of preference. Therefore if the first font, or most ideal, isn’t available then the next one will take over. This is called the font stack.

Unit Interactive wrote a great article about font stacks

and also created a downloadable PDF document with examples.

This is a great tool to help explain to designers what is possible in true web design. As many developers will know, you typically get a PSD file from a designer and find you have to go back to them to explain why they can’t use a certain font.

via firstwebdesigner.com & CSS Globe

!important CSS Declaration

Impressive Webs – everything you need to know about the !important CSS declaration

This is another great article which explains a common CSS declaration. CSS, by it’s nature, is cascading or in other words heiracial. This basically means it sets properties as it is read from top to bottom. A duplicated selector further down the page will overwrite the previous properties (where properties match).

There are also instances where someone has used in-line styling or you have no choice but to use in-line styling (i can’t think of one). ‘!important‘ can also overwrite this!

Typing ‘!important‘ after any CSS property tells the browser that this CSS declaration is the most important one and overwrites all other declarations. It is great for overwriting common classes or properties where you might want to use an exception or perform a minor tweak.

via CSS Globe

Finally, some good html tips

Line25.com – html crimes you shouldn’t commit

This article provides a quick list of 10 html good practices which would improve your coding. The majority are straight forward and known to many, the most being about out-dated tags, but still it’s great to see a blog going back to the basics.

One great thing about using the more updated tags is that you can wrap the older tags around html elements, reset them with CSS (font-weight:normal), and use them together with a Javascript frame work to create advanced effects!

Just like every other web designer i can’t wait for Internet Explorer 6 to be gone. There are some people who do not share this view. Maybe IE6 does have some good points. Just maybe it might be worth saving…

visit Save IE6

Ha! Tongue is definately in cheek.
Forget about IE6 for a second and you are looking at a nice site, it even works perfectly in IE6. Check out the download link where you are forced to complete a compatibility test first and then sign the petition.

I’d like to think the writing is on the wall for IE6 and that it won’t be around for much longer. In that case it really does need your help. Let’s hope it’s too late!

Every year on the 1st of April it is traditional to try to April fool somebody before the clock strikes midday. To do this you simply have to convince your gullible friend or colleague about a fictional or misleading non-truth. Basically you feed them the most unbelievable hoax, laugh at them when they fall hook, line and sinker and finally give them a pinch and a punch (for the first of the month) for their troubles.

The day itself is a bit of a mystery even Wikipedia doesn’t give a definite answer. The best guesses include the name given to fools who plant their crops too early or people who kept to the old calendar where the year started in April not January. Either way it makes a great excuse for some fun.

Ok so what happened today?

It seems every year the web design community get more and more involved with April Fools day hoaxes. Today was no exception;

Gmail announced an Autopilot feature to auto-respond to those annoying messages. It is ran by CADIE google’s Cognitive Autoheuristic Distributed-Intelligence Entity who has it’s/his/hers one blogger homepage and favorite places!

Google Chrome release their new 3D plugin

Smashing Magazine introduced IE8 Eagle Eye the all conquering update (they got in their nice and early too)

Youtube went all Ozzie on us

Mootools announced a new name

Opera announced a new feature called face gestures!

Sitepoint announce the impending reboot of the internet at 11:59am

The Guardian switches to a twitter only news feed

Silktidestudios announced the second National Naked Developer Day!

Expedia sell flights to mars!

Dial a Phone sell a coin and card operated phone

Thinkgeek announce an array of amazing products including a unicorn chaser and squeez bacon!

The Uk government plan to give out free Wii Consoles

Kodak launch the genius eyeCamera

Microsoft launches a Alpine Legend game controller?

Some people have far too much time on their hands! Brilliant none the less! Roll on next year!

The Problem

The code has to be included just before your closing body tag, this is because Google doesn’t want to hold up your page loading while it crunches this data, by placing it there it guarantees 99% of your page has finished loading. This works perfectly in almost all cases but there have been exceptions. The only time i have come across a problem was when i was testing a site on Internet Explorer 6. I kept receiving this error:

'_gat' is undefined

This can only be created when the code tries to call the Analytics code before it is launched. Basically, it’s is trying to call the function _gat too soon. Google have tried to fix this by adding a Javascript ‘try’ function.

<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
	try {
		var pageTracker = _gat._getTracker("UX-XXXXXX-X");
		pageTracker._trackPageview();
	} catch(err) {}
</script>

This helps as the code ‘tries’ to run the function and if it can’t then it runs the catch command. This works because it doesn’t create any other errors and the site will continue operating normally. The only problem is no tracking information will be passed.

Fixing it with Mootools

Firstly, more and more websites are using Javascript to provide better interactivity and functionality so there is a good chance you are already using a library in your site. Secondly they provide core functions which can detect when the page’s DOM is ready and when the page itself has actually finished loading. There a couple of things that can improved by converting this code to use a popular Javascript framework such as Mootools. Page load speed should be improved as we try to insert the tracking code after the page has completely finished loading and has been initiated. As a result we can also hope to improve the code performance by making sure the code has been downloaded before trying to run it.

Using Mootools we simply add a new Javascript assets into the page using the ‘addEvent’ function and then run the analyitics function calls when it has loaded.

window.addEvent('load', function() {
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
	new Asset.javascript(gaJsHost + "google-analytics.com/ga.js", {
		onload: function() {
			try {
			var pageTracker = _gat._getTracker("UX-XXXXXX-X");
			pageTracker._trackPageview();
			} catch(err) {}
		}
	});
});

As you can see, I have left the try function in, this is to protect against the same problem we faced initially. Only this time the chance of it happening has greatly reduced. Another benefit of using this method is that you can remove the tracking code from your HTML template or masterpage. Now it is simply added into your Javascript include instead. If you use analytics to track your AJAX calls then it helps that all your code is in the same place!

I hope you find this useful, please leave a comment if you know of any improvements or think you know a better method.

This snippet of actionscript can be used to simply re-order or randomize an array in Adobe Flash.

var myArray = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
myArray.sort(function (){
return Math.round(Math.random());
});
trace(myArray);

ps and yes i know I’ve spelt randomise wrong ; )

Do you remember the guy that created www.milliondollarhomepage.com to get himself through college and pocketed one million dollars? Everyone was jealous because they didn’t think of it first. Well, someone else has updated the concept and it still works!

Jason is a web designer from the states who has designed and created www.iwearyourshirt.com.

The idea is simple. Everyday he will wear a t-shirt with a company’s name and brand on the front of it. That alone will get you nowhere but Jason has cleverly linked up his idea with blogging and social media platforms to provide really good marketing posibilities. He posts daily on youtube, flickr and twitter to make sure the t-shirt gets noticed. The daily price goes up as the year passes, it originally started a $1, this makes sense as more people will know about the site by December!

Top idea Jason. Good luck.

(i wonder what he will do with 365 used t-shirts in a years time?)

A cool video, inspired by the flyers you get handed out to you advertising club nights throughout the country, telling the story of one particularly good night out.

Music is Mr Scruff - get a move on! Top choon!

The site was originally created with a google maps platform but suffered from a huge hit rate and was taken down. I’m very glad to say it is now back up and surprisingly it is now built using the Microsoft silverlight platform. This is one of the first times i have seen a practical use of the silverlight over adobe flash. A hint of things to come perhaps?

Ajaxian recently posted a link to blackbaud.com and the release of an iPhone Browser Simulator.

The guys over at blackbaud labs have carefully skinned a full version of safari 3 into a windows compatible program. The iPhone is apparently based on an older version of Safari than the current released one so this provides an excellent way to check your websites compatibility without having to bug your friends who own an iPhone!

Yes, MS Paint, that well known digital creative tool. It rivals an etch-o-sketch in advanced technology!

Surprisingly it turns out quite well. The artist is obviously very talented and spent a long time on it.

Then i did a quick search on youtube and found a whole host of copycat videos.

These ones are no way near as good but they have a certain charm about them. If you watch them you will soon see what i mean. This is why i love youtube!

Ascii art rocks!

and of course.. the best til last!

..change the variable by a couple of pixels!

After some quick googling i found a way of doing it by using the user-agent string.

The Future of the Web » Detect Internet Explorer 6 in JavaScript

This seemed perfect until i read the comments and stumbled across something. I was already aware that there are several different versions of IE6 and IE7 in existance but i didn’t know that some IE7’s return ‘msie 6‘ as it’s user string. An oversight by Microsoft perhaps?

Thankfully the user who pointed this out also offered a solution. Kudos to James King (comment number 8)!

var IE6 = (navigator.userAgent.toLowerCase().indexOf('msie 6') != -1)
 && (navigator.userAgent.toLowerCase().indexOf('msie 7') == -1)

heart attack for breakfast?

Pizza burger - genius!

Thanks goes out to Stephen Fry on twitter for tweeting this amazing website!

Thisiswhyyourefat.com

A simple but brilliant idea for a blog. Everyone has a weakness when it comes to food, some peoples idea of gastronomy is hardly gourmet, and yet they all look so delicious. Personally, i can’t wait to try a pizza burger. Now where did i leave my cholesterol tablets?

Moxie.com have blogged a useful checklist. They list 13 steps you would do well to consider before launching a website to the world wide web!

13 Steps to a Successful Website Launch via e-moxie.com.

I agree with all their points and can think of a couple extra..

14. Gzip all your javascript (if supported by your server). Otherwise use a javascript compressor to shrink the code.

15. Compress all your CSS using a CSS compressor. Try to compile it into one file and with different media types for print and screen.

16. Remove all your annotations from your code and insert a copywrite comment.

17. Run a broken link checking  site to find all the problem links.

18. Use a sitemap generator to create your sitemap.xml.

19. Verify your site with google webmaster tools.

20. Finally, don’t forget a favicon!

Wow, that’s seven more tips! I hope you find this useful.

more posts coming soon..

Is IE6 dead? – yet?

This site is cool, i have no idea who made it or how they calculate the date, but i hope they are wrong! Get IE6 out now!

Do you remember the days of 56k modems and surfing the net with images ‘turned off’ so the page didn’t take a year to load?

This really cool rug by Richard Hutton is inspired by old school browsers which would download a picture one line at a time. I like the rug but i love the idea! Shame it’s a one off..

found at Ouno Design.

Click to view the fullsize version

This little composition was created from a series of pictures I took when I went to see Arsenal take on Newcastle in the Carling Cup 2007. It inspired me to edit it into something a little bit different. I experimented with colour and photoshop filters to create this dynamic effect.

This is Nike’s new tv advert! It’s really well shot, fantastic composition, superb colour and it’s a great story line all directed by Guy Richie!

I’ve found another gem..

If you write CSS then you will be aware how bulky it can become and, more importantly, difficult to read. Using shorthand CSS you can cut through a lot of the bulk by removing excessive property declarations and with a quick scan you can find a property to change or update.

Roger Johansson over at www.456bereastreet.com has written a good post about the most common forms of shorthand.

A summary of efficient css with shorthand properties

Typically they combine many declarations into one single declaration. The most important thing to remember from these findings is the order of the attributes within the new longer declaration!

One other thing is worth mentioning again.. if you are setting a value to zero or 0 you don’t need to add the measurement on the end (it is px by default).

For example:

Margin:0;

is the same as

Margin:0px;

and finally, this is purely my own habit, when setting margin or padding i always use..

Margin:0 0 0 0; Padding:0 0 0 0;

..even if i just want to change one value. It saves typing, keeps things neat and if you do need to go back and alter something you have already included it so you just change the value!

I would love to have the opportunity to see the source code and fla’s for these:

http://www.scifi.com/tinman/oz/

http://samorost2.net/plantage/plantage.swf

http://www.adobecards.com

http://www.potatoparade.co.uk

http://www.nawlz.com

http://www.zunejourney.net/

Thanks to the creator of ajaxload.info i never have to again! Simply choose your style, foreground colour , background colour then download your loader gif.

Loader bar.. Done!

Your browser homepage is more important than you think. The days of the old Google are long gone. You can personalise a homepage to include many optional extras such as email, RSS aggregators, calendars, ebay listings and even weather forecasts. Not only that but there are a multitude of similar solutions available. Live.com, yahoo, netvibes to name a few. I have experimented with netvibes and live.com but every time I find myself back with Google.

Why?

Well, these solutions are limited by two problems. Compatibility and speed. A huge percentage of the add-ons are made by independent programmers and as such they sometimes don’t include all the features you would expect, have compatibility issues and sometimes they are not maintained. The second issue occurs when you add many add-ons to your page thus increasing the load times. Some solutions offer a tab system which only load the visible add-ons but this can still be a problem. As a result I now only have three add-ons. Gmail, google calendar and a to-do list. Personally I have found anything else is worthless to me as I find it easier to go the site. The only other one I tried was the Google Reader add-on. Again, this simply did not perform well enough to stop me needing to view the actual web app. I now have a streamlined and efficient landing page. It shows me the information I need to know when I first start surfing and ONLY the information I would automatically check every time.

What’s changed

Google has updated iGoogle! Some would say it’s long over due, I would have to agree. The minimal Google look is surprisingly looking a little bit dated! (strange i know) It’s looking a lot more like netvibes, round corners and more effective tabbing. Check out the screenshot..

It gives it a more friendly feel. I much prefer it. There are practical benefits too; you have the option of viewing your add-on at full width and with the more developed add-ons you get much more functionality. The two which have impressed me the most is Gmail and Google Calendar. Click on the side nav and you basically get these two as fully functional sites. I now can cancel Gmail from forwarding all my mail to my work email account and can receive it right here in the browser, even though it is blocked. Fantastic. Good work Google. Thanks!

(ps my iGoogle page has the radiohead theme)

Since CSS is hierarchical and semantic you can greatly condense your style sheets by cutting out the over use of classes and id’s. For example, if I were to have a list within a div, you only have to give the containing div and id name to style all the contents.

This is where the CSS Frame Generator comes in. Basically you enter your (x)html, with the main elements given id’s, and the application will create a stylesheet full of empty CSS attributes. You can then start filling in the style attributes and finally delete the ones you don’t use!

So, to sum up, it doesn’t help with design but could just save you some time and make your code better!

The SEO Rapper – Design Rap

The SEO Rapper – Link Building 101

The SEO Rapper – Paid Search 101

The SEO Rapper – Social Media Addiction