If you’re looking for inspiration or just a really cool website to browse, check out the FWA - Favourite Website Awards.
Every day the FWA selects their favourite website of the day, giving you something new to look at every 24 hours.
What’s more, after each month the FWA pick their favourite of the month, and after each year they choose their site of the year. Check it out!
In the old days of 2D computer games, graphics were drawn on screen using sprites. As games and their graphics got more complex, memory and speed issues began to surface, and as a result a technique using sprite maps was invented, which would place all animations for a character into one image, and then use mapped positions to display the correct frame of animation at any time. So can the same method be applied to websites, and what are the advantages?
Having a website with many images can have a large overhead on loading times with the browser having to request each image individually from the server. Placing multiple graphics into the same image file would mean there would only be one request to the server. It’s natural to think that increasing the image dimension would actually mean it would incrementally increase the file size too; but one image means that there is only one colour table, one set of meta properties and also your image software may be able to match patterns between the two images and reduce file size during compression.
The technique of placing multiple images into one image file is known as ‘CSS Sprites’, and it can be very useful for smaller icon sets and for buttons where you need to quickly load the hover state graphic.
Ever wondered how you could speed up your web pages? Perhaps you feel you’ve tried everything but you just can’t nail down what is taking the time to load? Enter Yahoo’s YSlow, which is actually a plugin to another Firefox plugin - Firebug. YSlow analyzes web pages and tells you why they’re slow based on certain rules. For each rule your website will be given a grade along with an explanation of why your website received that grade so that you can focus on key areas to speed up your content. A detailed description of the rules can be found here.
In the coming weeks, I’ll be looking into some of the techniques that can be used to speed up your website, but in the meantime, find out more information about YSlow here!
So I discovered this not-so-handy bug in Firefox today related to filling in information into a HTML form. Sometimes when the user is about to enter data, the text entry field’s cursor caret becomes invisible.
It’s a bug I’ve seen before but had just put down to my browser set-up, but today after seeing it happen on a colleague’s machine, I decided to investigate what was actually going on. It turns out I was not alone in having this problem, it is a known bug.
Basically, the problem seems to be caused by the scrolling properties of the DIV elements that an input field is contained in. There’s no z-index or cursor CSS fix - instead you need to use one of the two following solutions.
I don’t normally post about Flash-based websites on Weekly Web Dev, but I thought this one was special enough to share. It’s very clever, interactive and also good fun - well worthy of a mention!
Check out the awesome new Red Bull Flight Lab website, where you can design, build and fly your very own aeroplane!
Weekly Web Dev wants to know what YOU think of it’s weekday blogs.
- Is there anything you’re just waiting for us to cover?
- Would you like to see more news or more features?
- Is there something we’ve covered that you’d like us to go back to in more detail?
- Perhaps you’d like a beginner’s guide?
- Should we concentrate on more JavaScript or Flash?
Tell us what you think of Weekly Web Dev below, we want to know what makes you visit and how we can keep your attention.
Thanks for reading so far, there’s much more to come!
What would ever happen if HTML tags escaped their text based prison and were free to roam the real World? ‘Things You Don’t See Everyday‘ have created some funny pictures showing what those HTML tags would be doing.
If you’ve ever been in a situation where you’ve had an image such as a logo in a bitmap image format that you really need to get a vector copy of, then you’ll probably appreciate Vector Magic, a true web 2.0 application.
No more manually recreating logos, or drawing over/around scanned in artwork. Just use Vector Magic!
Simply:
- Upload your JPG, GIF, PNG, BMP or TIFF image (less than 5MB) to Vector Magic
- Select whether the image is a logo or photograph
- Select the level of detail you wish the vector to retain
- Wait a few minutes while it produces an image in EPS, SVG or PNG format!
Go check Vector Magic out now and never manually recreate a vector again!
Update: Vector Magic is unfortunately no longer free to use, but we can recommend the service should you be interested in paying. We’ll keep an eye out for a free alternative to Vector Magic. - Andi 28th Feb 2008
This week’s tip is actually a link to a blog entry about JavaScript notations and comes from Chris Heilmann’s ‘Wait till I come!‘ site.
If you’re still learning JavaScript, or perhaps you are self-taught, you may find this article useful as Chris shows us some of the more useful JavaScript shortcut notations available.
I stumbled across this wonderful piece of web software/art recently, created by Salathe Marcel, which converts any given web page URL into a pretty pattern by reading each HTML element on the page and displaying it as a coloured dot.
Here’s what Weekly Web Dev currently looks like as one of these pretty patterns:
Why not try your website as a pattern? (requires Java) It’s quite addictive!
Loading ...
Recent Comments