I'm lazy

@7:02 Leave a comment

Yes, I'm so lazy I haven't updating this site in ages. So much of the stuff on here is out of date. I'll be updating it soon with some of my recent projects and a new design. After two years, this design is getting very old. Gone are the days when I had time to update the design every 4 months.

I've already written a load of new content, and I've nearly finished my book on CSS (which will be a free PDF of course), so I'll probably put those up at the same time as the re-design.

Or.. I may get bogged down with work again and not update for another few months. I never really know anymore.

Tags : wblinks

Chrome Beta Released

@13:30 Leave a comment

Google's new browser, Chrome, is now available for download on Windows XP/Vista only.

First impressions are that it's a very fast install, and imported all of my Firefox bookmarks with no issues. Loads much quicker than any of my other browsers, and looks quite nice. The address bar is a bit thick for my liking, but that's just me being picky. None of the usual "File", "Edit" menus, etc as the entire interface is pretty simplistic. Exactly what we've come to expect from Google products. It's got the usual Google feel about it, a nice clean interface, no status bar showing useless information, etc. When the status bar does show, you can move your mouse towards it, and it'll drop below the window so it's not in the way of the page. A nice touch.

Some things are noticeably missing though, such as a "home" button, which is a feature common to most browsers. It is available, but not enabled by default. It's an option on the "Basics" part of the options page. I guess it depends on how much you use it whether that will be an annoyance or a blessing.

Sites are loading pretty fast, as I would expect from something based on WebKit. One feature I have noticed, is that when you're on a page with a download link, it gives you a list of the available downloads at the bottom of the page. I've already found this useful.

They've taken a page from IE8, and fade out the rest of the URL that's not the main domain. I'm not really sure why this is becoming common, and I don't really see the point. Regarding the address bar though, it's also a search bar. You can either enter a URL, or a search term and it will search Google. This combines the two bars you get in Firefox quite nicely. Of course, in FF you can choose the dropdown for various sites (for example I have a Wikipedia one), and I haven't found a way to do that easily in Chrome yet.

Next up are the screenshots.



The home page is pretty nice, shows you some recently visited pages along with your bookmarks. You can edit the things which are shown on it from the options screen.



This is the download bar that appears when there are things to download on the page. Quite useful.



Not really many options to go at, but it's simple enough for the average user.



"Incognito" mode, is the privacy option. Does exactly what it says on the tin.



Passes ACID2 test with flying colours.



Only gets 61/100 on ACID3, but that's better than a lot of other browsers. It takes a very long time to run though on my machine.



The task manager is quite nifty, and gives you a breakdown of the memory usage of each tab. It'll even tell you how much Flash is taking up if the page has Flash on it.



A new feature is the "about:memory" page, which gives you a breakdown of the memory usage of the browser, along with any other browsers you happen to have open too. I can imagine this being useful for testing purposes.


Overall, I'm impressed. It's clean, quick and will be great for most users. I won't be using it as my main browser though, as I really can't do without some of the FF extensions I have, they're just too useful. If they include an Add-on, or extensions feature, they're onto a winner! I think the hardest part for Google is going to be getting people to actually download Chrome, and then switch to it as their main browser. People don't like change. As long as they're moving away from IE though, I've got no complaints.

A great start, and much better than the IE8 Beta. I see amazing potential in this if it gets released on the various platforms, and has the ability to customize it to your needs.

For reference. Here's what happened the first time I loaded IE8b2 after a fresh install. I'm not making this up just because I hate IE.. this is actually what happened. Look how cluttered it is compared to FF, Chrome or any other browser!! Plus the fact that it crashed. (I should point out, it only crashed the first time. It seems to work fine on second load).

Tags : browsers, chrome

Google Chrome

@13:32 Leave a comment

Came across this today.

Google Chrome is Google’s open source browser project. As rumored before under the name of “Google Browser”, this will be based on the existing rendering engine Webkit. Furthermore, it will include Google’s Gears project.

Apparently, it also includes its own JavaScript VM to help speed up scripts. Sounds interesting. I wonder how it'll render CSS ;) Seen as it's based on Webkit, I'm guessing it'll be very very good.

In other news, I also came across a FF extension called Pixel Perfect (well, actually it's a Firebug extension). It allows you to overlay an image onto a website, so you can see how close the coded site is to the original designs. Quite handy if you do that sort of thing.

UPDATE 1 :There's a load screenshots now available.

You can read the comic if you want. It describes some of the features.

Due to be released tomorrow, so I'll be giving it a go then.

Tags : browsers, google, css

IE8 Beta 2 Released

@4:32 Leave a comment

The new beta of Internet Explorer 8 has been released.

Complete with the new InPrivate option that's been all over the news the past week or so. They've also got Compatibility View, which quickly switches to render the page as IE7 would render it (so.. incorrectly). They had IE7 rendering in the old beta, but it was crap, as you had to reload the browser. Apparently this one does it instantly.

It fares well against current CSS standards though, a lot better than any current iteration of IE. There's an updated compliance table over at quirksmode.org.

I shall be trying it out myself later on to see how it is.

Tags : ie, web

Number 10 goes Web 2.0

@4:02 Leave a comment

Yes, another in the long list of sites to redesign this year (I can't really complain, as I'm re-doing mine too), number10.gov.uk, the website of the prime minister's office has taken on the whole web 2.0 thing.

It's got Flickr, YouTube and Twitter all in the sidebar, plus links to submit stories to Facebook, Digg, etc andof course, RSS feeds.. just in case you want to keep up to date on everything Downing Street it twittering.

Seems like it's built on top of WordPress (based on the code), despite the fact there's no mention of it anywhere. They've already got some rather interesting code cock-ups. Nested anonymous <div>'s for absolutely no reason, links pointing to local IP addresses (e.g. the "Home" link, which points to http://10.10.0.215/), not to mention the fact they're not clearing floats on the "Communicate" page, so the images are pushed off to the left.

There's a grand total of 72 errors if you try and validate the XHTML. Nice :) Although to be fair, most of those are because of using & instead of &amp;. At least the CSS is valid, although they didn't write it, it's a pre-made WordPress theme called NetWorker.

Also, no print stylesheet. C'mon people!!! All websites should have a print stylesheet. Trying to print their website is painful, and is going to waste a hell of a lot of paper, along with lots of ink. Is that really the environmental message they want to give out?

It's even in "Beta", a true web 2.0 site! Which would explain the above issues, can't expect everything to be perfect first time.

It does look very good though, and is definitely an improvement on the old site. Nice to see they're actually making an effort!

Tags : design, web

A Redesign is in Order

@7:47 Leave a comment

It's been nearly two years now since I've bothered to even attempt to fiddle with the code of this site, and it's amazing just how much you can learn in that time.

I look back on this code here, and cringe at some of the techniques and things I've done. How against my current practice it is. Of course, that used to happen all the time, and I would tweak the code at least every 4 months. Unfortunately with my current work schedule I just haven't had time to do that.

The projects section is the worst hit by this 2 year gap, it's pretty much entirely out of date, which doesn't really help matters. The blue background doesn't sit well with me any more, the drop shadow effects are so.. 2006.

So, I've decided a change is in order. I'm still busy with work, but I'll be making time to work on a new version of the front-end for this site. Who knows, maybe I'll actually keep the new one up to date!

Tags : redesign

Separation of content and presentation with HTML and CSS

@8:02 Leave a comment

Almost every day I come across sites which have missed this vital point entirely. They think that just by adding CSS to a site, it's suddenly now much better. This is not the case, and I admit I've been in this category myself in the past.

The whole concept of HTML and CSS is to separate the content of a site, from the presentation. To layer it. This means that there should be absolutely NO content in the CSS, and absolutely NO presentation in the HTML.

Over and over I'm seeing sites with things like id="left" in the code. What happens when the design changes? "left" gives no semantic meaning to the element at all, that is presentational, and should not be used. A better way is to name it something relevant to the content it contains id="home-page-quote", etc. Now when the design changes, the HTML still semantically represents the content.

I'm also seeing the use of spacer.gif's. Back in the days of table based layouts, people would use spacer.gif files ( a small transparent image ) to space out the content. Not only is this very bad practice, as it will mess up the layout for people who use mobile devices, but also because when the page is viewed without style (such as for screen readers) there will be images all over the place, that lend absolutely nothing to the content. If you use CSS, there is absolutely no need for a spacer.gif file, you can do everything you need in CSS, with no exceptions! Padding and margins can space out the content and you can use letter-spacing, text-indent or line-height to space out text.

Another thing I've noticed, is the use of a div or hr which has class="clear", yet they have no content whatsoever. Again, these add nothing to the content of the page, they don't make semantic sense. This is presentational, as you want to clear a float. But again, what if the design changes? The markup will need to be changed too. It is possible to use CSS to make self clearing floats with minimal effort, and with valid standards compliant CSS. A quick Google search will reveal many different pages discussing the matter of self-clearing floats.

When viewing HTML without the CSS applied it should be in a suitable order so that it reads well, and only images which are part of the content should be shown (logos are included here, as they're part of the page content). If the page is in an odd order, screenreaders will be confusing for people and if random style images are showing, then it detracts from the content. You should be able to completely change the layout of a page by only editing the CSS. If you have to edit the markup, then you've done something wrong and need to re-think the code. This includes extra markup only used for presentational purposes. You shouldn't have a div called "coloured-line" for example, as this is specific to the current design. Yes, you can hide it in later designs with display:none, but ideally you want to make the coloured line just part of the CSS and give no reference to it in the markup.

Nobody's perfect, and I've done many of the things I've mentioned here in the past myself (and a lot more recently I've found myself naming classes "left" without realising until later). The whole point is that we find new and better ways to do things, and constantly strive for perfect code. Hopefully this will help some people to use HTML/CSS the way they were meant to be used.

Tags : web, html, css

Last.fm Redesign

@12:46 Leave a comment

Read the last.fm blog post.

Personally, I'm not a fan of the new look. Maybe it'll grow on me, but for now it just gives off a MySpace kind of vibe (and I *hate* MySpace with a passion). While I don't mind change, as I think it's nice to change things around once in a while to not make it stale and boring, they've changed a *lot* of things, and I'm having trouble finding where everything is. But obviously, that'll change the more I use it, so it'll probably grow on me after a while...

My main gripe at the moment is the width. The old style was variable width, which looked really good on my widescreen monitor. Now I just have loads of whitespace, which seems like a waste.

I do like the new design for the recommendations area though.


What's with the microfont for the login box? I don't understand this fascination websites currently have with using really small fonts. I have a big screen and pretty good eye sight, so it doesn't really matter for me, but I'm sure it's a pain in the arse for others. I've always thought it was good design practice to not make fonts really small? Maybe that's just me.

Also, the banner image looks like it was made in MS Paint. Just sayin'.


This appears to be the replacement to the "Dashboard" that was on the old version. Recommendations are a tab click away, which is irritating because they were just on the page on the old version. They've added an extra click into my life! *shakes fist*. The recommendations page itself though has quite a bit of an overhaul and is much easier to navigate. It's also got a lot more recommendations on display, I shall certainly be using this page the most.


Why is everyone making "ID Card" style profile pages all of a sudden? The "bio" information is now way over on the right, away from my profile pic and info, it's just separating information that should be together. A very odd decision in my opinion. I also now need to scroll right to the bottom to see the "shouts", Facebook wall style. They've changed the focus of the page to be the big userpic and info about me at the top, but it's a music site, so I'd expect the focus to be my recent tracks and music tastes, which are now under it all. Still though, the recent tracks are above the fold, so I guess I shouldn't moan.

Tags : design, web, music

FontStruct - Build your own fonts.

@10:09 Leave a comment ( 1 comment )

"FontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks."

Pretty nifty stuff!

FontStruct.

Firefox 3 Beta 5 Released

@2:14 Leave a comment

"Firefox 3 Beta 5 includes more than 750 changes from the previous beta, improving stability and web compatibility, providing platform and user interface enhancements, and resulting in the fastest Firefox ever. Many of these improvements were based on community feedback from the previous beta."

Full Release Notes.

Tags : internet, browsers