Posts in the "" Category

Vacation time

Yes! Finally! Time for summer vacation! Unlike my friend Roger, I will not be away for five weeks, but I hope my “mere” three weeks will get me rested too. No computers, just spending time with my family and friends and having a great time doing it.

During this summer, I’ve been an eager beaver(eh… or something), so while I’m away I’ve put together a list for you with good reads (or you can just browse through the June and July summaries, or go to one of the most popular posts listed to the right).

 

Web development posts

 

Get to know me-posts

 

Please, feel free to comment on any post, but don’t expect a reply till the end of August.

Have a great summer, and welcome back to read my next post August 21th!

IE 7 beta 1 – a first glance

Oi, web developers, listen up! Microsoft has now released beta 1 of IE 7! Unfortunately, though, it’s only available for MSDN subscribers (however, it seems to be available from a number of BitTorrent web sites as well). I’ve only had a couple of hours to test it, but here’s the first impression.

 

The good

It’s got tabs
About time, to say the least. Open a new tab with Ctrl + T and close it with Ctrl + W. Works like it should.
RSS support
Finds RSS feeds for the current web page you’ve navigated to, and offers a view of the feed.
A search field adjacent to the address field
A small search field is placed just next to the address bar, for easy searching. However, I haven’t found out a way to open up the search results in a new tab, nor any keyboard shortcut for setting focus to search field.

The bad

No additional CSS 2 support
Yes, you read that correctly. Still no support for Child selectors, Universal selectors, Adjacent sibling selectors, Attribute selectors, Pseudo-classes (except :hover on a tags, but has been there since version 4) or Pseudo-elements. Why, oh my God, why? You tell me.
Only two CSS bugs fixed
The Peekaboo Bug and the Guillotine Bug, but to me it seems that the fix for the latter one isn’t a 100% stable, if you look at the tests in the test page. And they still haven’t fixed the doubled margin bug for floated elements. Sigh.
Correct event handling
Nope. Only the same ol’ non-standard event handling as before.
No support for the application/xhtml+xml MIME type
No support, and no validation of XHTML as XML.

Yes, I know, this is only the first beta, and a lot of things can happen before the release. But it certainly doesn’t look promising, to me it seems the focus has only been on the end-user and not for web developers at all.

Another thing that bothers me is that the beta isn’t publicly available (at lest not yet). I can understand the reason for only releasing certain products that will eventually cost money to MSDN subscribers, but IE 7 will not cost money, and they definitely need a lot of web developers to test it, to get the feedback necessary to avoid a scenario with a release that has to be patched soon after its release date.

 

Important update!

Chris Wilson just posted the extremely interesting post Standards and CSS in IE. In it, he addresses what will come in beta 2, where he outs this dream list:

 
Bug fixes
  • Peekaboo bug
  • Guillotine bug
  • Duplicate Character bug
  • Border Chaos
  • No Scroll bug
  • 3 Pixel Text Jog
  • Magic Creeping Text bug
  • Bottom Margin bug on Hover
  • Losing the ability to highlight text under the top border
  • IE/Win Line-height bug
  • Double Float Margin Bug
  • Quirky Percentages in IE
  • Duplicate indent
  • Moving viewport scrollbar outside HTML borders
  • 1 px border style
  • Disappearing List-background
  • Fix width:auto
 
Feature list
  • HTML 4.01 ABBR tag
  • Improved (though not yet perfect) <object> fallback
  • CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
  • CSS 2.1 Fixed positioning
  • Alpha channel in PNG images
  • Fix :hover on all elements
  • Background-attachment: fixed on all elements not just body
 

If this happens, it really is amazing! I’m sorry for my doubts.
The one and only essential thing I can think of is missing from that list is correct DOM event handling. Support for the application/xhtml+xml MIME type would be nice, but as Jim states in his comment at the IE blog:

Anne van Kesteren’s suggestion for an Internet Explorer that can follow the specs 100% and still render old websites with quirks is a great idea, and I hope you guys will consider it for Internet Explorer 8 – implementing a buggy application/xhtml+xml will ruin any chance of it working though

The only thing I’m wondering about is why they didn’t let us know this till know. Weren’t they allowed to, or are they simple masochistic and longed for a real backlash like they got? 🙂

Anyway, I can’t wait to get my hands on beta 2!!!

 

Links

Why I blog

The other day, Molly asked Why We Blog, but I was too tired to write a comment then so I thought it deserved a post now to explain my view on it.
First, and foremost, I do it because of my very strong interest in web developing. I want to stay on top of things that are happening in the web world, and I love that I have the opportunity to have a job doing something that’s actually my hobby!

When I first started out learning how to develop for the web, there were, already back then, many web sites with information, tutorials and discussions that helped me become a better web developer. Most people that I got in touch with were eager to help and very humble about it. Now that I have 6-7 years under the hood, I feel ready to start giving something back, and I really hope that people gain knowledge and perspective from my blog.

Another reason that motivates me is getting comments that actually make me laugh out loud (not just writing the nowadays almost mandatory “lol” in a chat or something similar), things like Krijn’s comment and Chris’ comment. Make me laugh and you’re my friend, life’s too serious anyway!

Which leads me to the topic of writing posts that aren’t about web developing. I do it pretty sparsely, but there are times when I want to write about a concert, something funny or about anything else that I like to share. I don’t see this blog as a web development-only one, I also want to share other parts about me and I hope I entertain you while doing it! 🙂

Something I regard as being very important when you blog is to show the common courtesy to reply to people’s comments and e-mails. It doesn’t matter if you’re a high-profile blogger with thousands of visitors every day, your visitors are one of the reason you are there in the first place. I think that one’s obliged to answer serious e-mails to you, when time is given, even though you’re stressed and feel that you have no time. No need to write a novel, just a sentence or two to acknowledge that you’re read their question, criticism or what it may be.

Some rockstar bloggers are still very humble and good at this, Molly being one of them, and some aren’t.

My opinion is: show respect and you will gain respect.

Conclusively, my dear readers, I hope this blog helps you in web developing and that you also find it amusing from time to time. Thanks for reading!

Explaining width and height

Many people have written about this, one way or the other, but I thought it was about time to explain how to handle width and height in CSS, and how it’s actually supposed to work.

There are three properties for width and height that allows you total control of the rendering, and their names are pretty self explanatory for how they work:

width/height
Sets the width/height of the element. It will be exactly this wide/high, no matter if its content fits or not.
min-width/min-height
Sets the minimum width/height of the element. It will be at least this wide/high, but will expand if its content requires it.
max-width/max-height
Sets the maximum width/height of the element. It will be as wide/high as its content needs, but never more than the set value.

Crystal clear, isn’t it? So is it that easy?

Of course not. Enter IE, who handles width/height as if it were min-width/min-height, and who doesn’t have any support for min-width/min-height or max-width/max-height.

What this means is that if you want the correct behavior in IE for width/height (i.e. a fixed size for an element, no matter what), or want to use max-width/max-height, you need to resort to one of these:

Dynamic expressions
Preferably used in an IE-specific stylesheet included with conditional comments, see RobLab’s CSS page‘s first item for more info.
JavaScript
You can either write the script yourself, or take a look at Dean Edward‘s IE 7 project (inevitably time for a name change now, right Dean? :-))

Related reading

The Real Reason Microsoft Won’t Support CSS2 in IE7 by Dean Edwards.

Transforming text to paragraphs

Recently, in a customer project, I came upon a situation where I would get a bulk of text delivered from the database through XML. Naturally, the customer wanted the text to be presented in neat paragraphs and the only way to differentiate one paragraph from another in the source text was line breaks.

I then created a JavaScript in the XSLT file to wrap every text entity separated by line breaks within p tags.

My solution can be found in RobLab‘s Text to paragraphs article.

Panda problem

I just read a headline from one of our big Swedish news papers:

10-year old panda stuck in tree

I mean, WTF!

First, what news value is that?

Second, isn’t the whole purpose of a panda’s life to climb trees? How the hell dit it get stuck?

Posted in Fun

Does Microsoft think developers are stupid?

Well, do they? Because every tool they have for web developing, it “magically” rearranges the code when writing it and when it is delivered at runtime to the requesting web browser. I guess Microsoft’s intention is to make it as easy as possible for the web developer, and sure, it goes fast to set up a dynamic page in .NET (if we, of course, look away from the invalid code, dependancy on the obtrusive JavaScript and a total lack of accessibility).

It probably helps some web developers, but to me it just adds a lot of extra time trying to correct the invalid output. Instead of helping or aiding me, it adds 25% to my working time covering up for its flaws.

My approach as a web developer is to have total control of the code being output. This means that if I have the necessary skills, it wil be a good result. Unfortunately, the way it is now, Microsoft tools are really keen on (or even, horny about) trying to be more intelligent in its code generating than they expect the web developer to be.

I really hate when a tool think it’s smarter than you and just gives you a lot of extra things you don’t need, nor ever asked for. It’s like going to a store and buying something, and the sales man throws in a lot of extra crap that you have to bring from the store and throw away after.

It needs to be pointed out that this is not written out of deprecation for Microsoft, I do think that they have created many good things too. This goes out to any company that makes tools that alters my code without being asked to do it. In this case, this company’s name is Microsoft.

Please, please leave my code alone!

A Summer day

If you’re one of those persons who are fed up with people talking about their babies, or you just want to only read about web developing, you should stop reading now. Othwerwise, please read on and let me share something from my weekend.

It goes without saying that Saturday morning, after two weeks of intensive sun here in Sweden, it was cloudy when I got up (why wouldn’t it be clody, when i finally had some time to go out). We did some things inside for a while, like putting up paintings and pictures on the wall, but then I suggested that we get out and take a short walk to get some air. Fredrika (my girlfriend) and Emilia (my eleven-months old daughter) seemed to be up for the idea, so out we went.

Emilia was put in the stroller and we walked around the hill where we live and past the nearby golf course and its driving range. I found some range balls that Emilia and I played around with, and she found it hilarious!
Then, as we turned into the steep climb up to the hill again, I turned to Fredrika and said:

Aren’t you happy now that I suggested that we go for a walk?

The moment I uttered those words, the sky literally opened. Straight away, the rain was pouring down with such intensity it actually hurt when it hit your body. I managed to get the small roof over Emilia and the umbrella to protect her from the “sun”, and then I sprinted uphill with her to get home. After me and Fredrika running through the rain for some minutes, we got to the house. We were drenched, and all the fabric in our clothes were so wet it had become see-through, no matter the original color.

After that, the rest of the day the weather switched schizophrenically between shining sun and pouring rain; as soon as I tried to go out, I could feel driplets falling on me again. I decided to spend the rest of the day inside.

So, instead I was just playing around with Emilia. It’s hard, if not impossible, to describe how amazing it is to have a child. It doesn’t matter how hard a day has been, how many narrow minded or just plain evil people I’ve met; when I come home and see her smile all my troubles are gone. She’s been walking for a couple of weeks now, and is currently trashing around, totally fearless.

She has this little book with pictures of animals, and being the pedagogic father I am (read: try to be), I point to the pictures and make the sound of that animal: Cow – Muu, etc. But then came the tricky part: what in the hell kind of sound does a hedgehog make???!!!

I quickly browsed past that page and continued with my excellent sheep and horse impressions. Emilia is the reason I want to live, she’s my everything. 🙂

WaSP DOM scripting task force

Today, WaSP issued the Web Standards Project Announces the DOM Scripting Task Force press release, to announce its DOM scripting task force.

Amongst the task force members are such interesting names as (in alphabetical order by their last name, no internal ranking :-)):

 

I recommend everyone to read The JavaScript Manifesto and WaSP DOM Scripting Task Force definitions.

Good luck, this is especially needed and a great initiative. Just one question: why wasn’t I asked? 🙂

Lowercase your darlings

Personally, I’ve always disliked uppercase tags in the code. Uppercase characters in digital format is often perceived as screaming, and if that’s true, boy, have I’ve been screamed at by a lot of code I’ve seen. It looks bulky and feels like working with skyscrapers when doing a cut-and-paste operation, one expects the computer to start screaming from the effort.

Estethics aside, there’s also a good technical reason for not using uppercase tags: it’s not allowed in any flavor of XHTML. To quote the XHTML 1.0 specification:

XHTML documents must use lower case for all HTML element and attribute names

As a follow-up to this, if your XHTML/HTML is indeed lowercase, make sure that your tag-specific rules in your CSS is lowercase too. Otherwise, you might not get the behavior you expect (you will not get it to work with lowercase XHTML tags and uppercase references in your CSS, if it’s sent with the MIME type application/xhtml+xml).

So, if you like and use uppercase tags, please lowercase your darlings. For me, and for the future.

The most important CSS rule

I thought I’d share the CSS rule that’s most important to me (at least for the moment). Here goes:

*{
	margin: 0;
	padding: 0;
}

Why do I love it? Since the universal selector (*) applies to all elements in the web page, hence removing all unwanted margins and paddings and helps me getting rid of inconsistent space and rendering in different web browsers and platforms. From there on, I totally control how code will handle every aspect of space (well, almost, form elements are still hell…).

I think the first place where I saw it was Eric Meyer’s web site, but I’m not sure of who wrote it first.

So if you aren’t using it already, I really recommend trying it out!

Posted in CSS

RobLab – How to find out the Text Size setting in IE

If you’re reading this, you’re probably interested in making your CSS-controlled layouts em-based, to be able to adapt the font, width of elements etc to the text size setting the user has in his/her web browser.

A colleauge of mine recently had the problem that the customer of one of the web sites she had worked on got around ten e-mails per day from complaining web site visitors that they couldn’t read the text, since it was to small.
The text size was controlled using em.

After doing some investigation, she found out that all of the complaints were from people using IE that had their Text Size setting set to Smallest. This was probably due to the users having incidentally held down the Ctrl key while scrolling with the mouse wheel (which changes the text size in many web browsers and other programs).

And since most of the web site layouts out there use a px-based font, that IE doesn’t handle correctly when it comes to text resizing, this were the only web site where they saw this “error” occur.

So she asked me if there’s any way to find out the user’s Text Size setting, to optionally warn them and to serve them an alternate style sheet where the font would be a little bit increased. I pondered about this, and came up with a pretty basic JavaScript solution for finding out the Text Size setting.

Making an impression

Yesterday, when I got out to take my bike to the train station, I realized that I had a flat back tire. Well, shit happens, so I took our worned out borrowed second car instead. No sweat.

After I’d worked for a couple of hours, it was time for my team’s 10.00 meeting. It was with the Marketing Director of the company where I’m currently doing some consultant work, a semi-large and well-known company here in Sweden, with around 1500 employees in the nordic countries.

I was sitting in the meeting room when the Marketing Director came in, held out his hand to me and said:

-Hi, good to meet you, Johan.
(Say what?)
-Eh, well, my name is Robert.

We shook hands, and the introductory part of the meeting was over. We talked for maybe an hour or so, planning a new web site and the development for it during this Summer. At the end of the meeting, he turns to me, and says

-So, Patrik, when's your vacation?
(Surely, he must be kidding now)
-Robert. My name's Robert.
-Uh, oh well, sorry.	
	

Worked for about an hour after that and then we went to lunch. We frequently go to a pasta/salad place that have really good food, and usually I use my credit card to pay. Since it’s a pretty small restaurant, it’s stressfull (naturally), so their routine is to take the credit card, swipe it when the line’s gone and then return it to your table, and for you to sign the slip.

After lunch, we walked back to the office in the tremendous heat that has been present in Stockholm for about two weeks now. Once back, trying to get out my key card to get into the office, I realize that I never got my credit card back…
A 20 minute walk later, sweating fervently now, I got the credit card back and once again went back to the office.

On the way home from work, it’s always a hassle since the commuting company here in Sweden, SL, have very few departures per hour since everyone and his mother here go on vacation in July. I got out of the subway and walked briskly to the train station. The train was already in and I ran to the door and pressed the opening button. Nothing happened. Then I saw the conductor board the train through one of the other doors and it left. Next train was due in half an hour…

I’m normally pretty intense and engaged in what I do, people usually notice me. I like to see myself as the Henry Rollins of web developing (sorry for the comparison, Henry :-)).

Ever had one of those days when it seems like no one notices about you? Like you don’t do any impression at all?

A Maiden voyage

Last weekend was a strenuous but happy one! Myself, my little brother Martin and two friends Danne and Tony went on a road trip from Stockholm down to Gothenburg (around 500 kilometers) to see the Iron Maiden concert at the lovely Ullevi stadium.
We started out around seven Saturday morning, to be able to get down there in time to make into the front enclosure of the standing section. On the way down we passed by a small village named “Köttkulla”, which loosely translates to “meatmaid”…

Due to some lack of planning we didn’t have any hotel or hostel room to stay in, and literally every place in Gothenburg was sold out. The plan was to find something on the way down or drive home all night straight after the concert.

About maybe 40 kilometers or so before we reached Gothenburg, Tony saw a sign that said “Cabins to lease”. We took the exit and started following the signs, but all it did was getting us deeper end deeper into some woods where the Swedish equivalent of Deliverance should be filmed. We found some ghost ski hill/camping site, but by then we turned back before it was too late. I think the place was called “Bollekullen”, just to warn all you other unaware travellers…

Once in Gothenburg, we parked the car in a parking place close to the Liseberg amusement park and started the walk in the 30 degrees Celsius heat. And trust me, doing that in jeans and a black t-shirt was not a pleasant stroll.
When we got to the arena, around maybe two in the afternoon, I was shocked to see how many people that were already queuing to get in to the standing section. Some of them had been there since Wednesday, so I really was amazed to see people waiting for four days to get in.

After about an hour or so we met up with my friends Peter, Rickard and Rickard’s son Oscar, and then waited for some hours in the scorching sun and the chaos that belongs to testosteron-filled men afraid of not getting a good spot. At around 4.30 they started to let us in, and it was a bit of ruckus before we got into the arena. When I got onto the field, I’m pretty sure I set some kind of sprinting record running as a maniac to make it into the front part. But I made it! Once in there, one can walk in and out of that enclosure, with a small plastic bracelet that basically is a guarantee for a good place to stand when the show starts.

The weather had been terrific the whole week, so imagine my surprise when the rain started pouring down at around 5.30. Not that attractive when it comes to an outdoor concert…
It rained maybe an hour and a half, and during that time there were many theories going around, designated cloudwatchers trying to see where the wind would take them etc, but then it stopped and the weather was flawless the rest of the evening.

One of the two opening bands were In Flames, originating in Gothenburg, so it really was home turf for them. Personally, I’m not really a big fan of their music, but their joy and sheer happiness was contagious, and it ended up being a really good opening band moment.

Then, it was time to get ready for Maiden, time to start making one’s way into the crowd to get as close to the stage as humanly possible. This was going to a very special event, for a number of reasons:

  • There were 57 000 people in the audience.
  • It would be broadcasted live on national television in Sweden and Finland.
  • They were only going to play songs from their first four records.

So, what could stop it from being the greatest thing ever? Well, unfortunately, some things…
I mean, except for the anecdote Danne told me where one guy pied in his beer glass and then put it down, just to later found out that it was gone…

Anyway, let me describe the gig:

The audience

While most of them were in some kind of eternal bliss mood, they weren’t really acting it out as I thought they would. During the beginning of it, I was standing some meters from the stage, but during the latter half it was just one guy between me and the front fence. People seemed to be worn out from waiting outside the arena for several days, many of them not really knowing when to jump and some actually seemed surprised and unknowing of a couple of the songs and their special differential parts.

The amosphere before the gig was great but it didn’t feel just that happy after a couple of songs. To compare, I think it was a much better ambience at Iron Maiden’s concert in Stockholm Stadion in 2003.

The set list

I’m sorry to say this, but to me it was disappointing. This is how it looked:

  1. Murders in the Rue Morgue
  2. Another life
  3. Prowler
  4. The trooper
  5. Remember tomorrow
  6. Where eagles dare
  7. Run to the hills
  8. Revelations
  9. Wrathchild
  10. Die with your boots on
  11. Phantom of the opera
  12. The number of the beast
  13. Hallowed be thy name
  14. Iron Maiden

Encores:

  1. Running free
  2. Drifter
  3. Sanctuary

Of course there are many good songs there, but first, I think that any song from the Killers album is a song too much. Well, not really, but out of the ones chosen only Wrathchild appeals to me. Murders in the Rue Morgue is an ok song, but definitely not one I’d chosen to open with. My pick? Maybe Prowler or Where eagles dare.

Instead of the mediocre songs they chose from the Killers album, I think it’s unforgivable that they didn’t play any of these songs:

  • Charlotte the Harlot
  • Transylvania
  • Children of the Damned
  • The Prisoner
  • 22 Accacia Avenue
  • Flight of Icarus

 

Conclusion

It was a good gig, no doubt about it. But being their last concert on their Europen tour and being broadcasted live to about 20 million people, I think I expected a little more extra than an ordinary gig. Maybe it’s because it’s the 9th time I’ve seen them live, maybe I had my expectations set too high due to the above mentioned circumstances. But I still think they could’ve played longer (it only lasted about 90 minutes) and perhaps add some extra songs for the occasion, that they could’ve had a more spectacular stage show and just something that would’ve made me feel that it wasn’t a day on the job for Maiden.

Personally, I also think that they could’ve thrown some more stuff to the hardcore audience in the front (no, I’m not jealous since I didn’t get anything, my happiness was already made on a previous Maiden evening when I managed to get Dave Murray’s pick). It makes people so happy to get a little piece of plastic or something of the like from their idols. But I still have to congratulate the guy in front of me who got sweatbands from both Nicko and Dave!

I haven’t seen the live recording yet, so this is my perception of actually being there. It’ll be interesting though to see what it looked like on TV.

So, to round the review part up. It was good, but not spectacular. I’d give it a 3 out of 5.

Afterwards, I was soaked with sweat and water that the guards at the fence poured at us to stop us raving fans from dehydrating. Since things can get a little crazy at concerts, I told the other guys that we would meet up at the fence separating the front and back part of the standing area. Naturally, they weren’t there. I waited for maybe 20-30 minutes before I gave up and exited the arena. It was also given that it was impossible to reach anyone on their cell phone, so I wandered around outside the arena scouring the place in my search for them (especially since one of them had the car keys).

Finally I found them and of course the reply was:

Oh, you meant that fence.

We got to the car and changed into dry clothes. After that, it was time to get something to eat, and inevitably we ended up at McDonald’s. Like Tony said, the staff in the kitchen there seemed to multiply like rabbits, I’ve never though they could fit so many behind the counter.

Finally, we got back to the car and Martin, our hero, drove the whole night back to Stockholm. I got home exactly 24 hours after I left the previous morning. A great weekend adventure!

 

Related post

A Sabbath night

RobLab addition – Dynamic column width without tables

I regularly express my opinions here about how things should be developed, and now I thought it was time to share something I recently created.

In my current project, I came across the need to have a dynamic column width, i.e. a minimum width but if the editors enter some content that would be wider than it is supposed to be (through their CMS“), it should react as a table does and dynamically resize itself and its sibling column.

Personally, I still wanted the control through CSS, therefore I created a CSS-based dynamic column width solution that I put in RobLab.

I also have a question: do you think it was worth it? Would you’ve done the same or resort to using tables?

 

PS. Thanks to Kristin VÃ¥gberg for being a good discussion partner while creating this. DS.

Microsoft and WaSP form a task force!

You will not believe this, but WaSP and Microsoft have formed a task force to promote web standards. This will most likely help affecting and improve what IE 7 will support and what Visual Studio.NET 2005 and ASP.NET will deliver. It is indeed good news!

Of course there are many obstacles in the way, and most likely the products won’t be perfect. But still, it’s such a good initiative and if it only delivers half of my hopes the web will be a much much better place!

The discussion and praise goes on in Molly‘s WaSP to Collaborate with Microsoft to Promote Web Standards post, where Molly also outs that there will be some kind of announcement on July 15th.

I was actually smiling on the way home from work yesterday, after finding this out. WaSP and Microsoft, please make me smile in the future too.

 

PS. I really like Summer and all, but this morning, when I was riding my bike (“riding my bike” sounds a hell of a lot cooler than “bicycling”) to the train station, I got a bug the size of a B 52 in my eye. After a long train ride it finally just came out of my eye, and my colleague was astounded by the size of it… DS.

Congratulations, Jeanette!

Jeanette, the godmother of my daughter Emilia, gave birth to her first baby this morning! It was a little girl, now named Nellie, who weighed 3,2 kgs and was 48 cm long.

Congratulations and all the best to you!

Is image replacement really worth it?

I’ve been wondering if image replacement and the promotion of it is really a good idea. But let’s start from the beginning: what is image replacement?

Image replacement is a common name for a technique to use images for headings and their likes from an external CSS file, as opposed to in the XHTML/HTML. The general approach is to hide the text content (one way or the other) of the element and instead show an image through CSS.

An example (Note: this is not the most sophisticated way to do it, but an easy one to get an overview of the basic idea):

HTML

<h1>
	<span>Some text...</span>
<h1>

CSS

h1{
	width: 138px;
	height: 40px;
	background:url(images/my-logo.png) no-repeat;
}

h1 span{
	display: none;
}

Many more alternatives/techniques can be found in Dave Shea‘s Revised Image Replacement.

There are some general arguments why to use image replacement, and I though I’d respond to them here:

You can add images for a rich typography or logo
Reply: You can do the same thing with an inline img tag.
Images referenced in the CSS file are cached
Reply: As far as I know, images referenced through inline img elements are cached in most, if not all, major web browsers.
Easier maintenance with a single file to edit
Reply: In pretty much every web site, the content is dynamically generated through ASP.NET, JSP, PHP or something similar. Then you just have a WebControl/include file witht the content of your header and the tag is still just in one file. And if you have a hard-coded site, basically any tool offers search and replace functionality to easily change the content of every file.
For accessibility reasons, it’s good to have a fallback text in the document
Reply: You get the same thing using the alt attribute on the img tag.

Another major reason for not using image replacement is that, to my knowledge, there’s still no way to handle the scenario where the user have a web browser setting with images off and CSS on, then they won’t see the text nor the image. There is, however, ways to use JavaScript-enhanced image replacement, but to me being dependant on JavaScript isn’t an option either.

So, use image replacement if you want to. I know I won’t (at least not until someone convinces me of any advantage of it over using an img tag).

A Sabbath night

Last night, the original line-up of Black Sabbath played the Globe arena in Stockholm to an extatic crowd. I was there, of course, and really had a great time! They have inspired so many musicians and they’re the base of many, if not all, heavy metal bands, so seeing them live is an extraordinary happening.

Two things that really made it special:

Seeing Ozzy live
Ozzy truly is an amazing person. If you’ve seen the Osbournes show on MTV, you know it’s a miracle that he’s still alive. But there was no trace of that whatsoever last night, he was jumping intensely, laughing wildly and grinning insanly, and no one has such a crazed stare as Ozzy’s. He’s the mother of entertainers, controlling the whole crowd like a puppet master. If you haven’t, I really recommend you to try to get and see Ozzy; it’s a non-forgettable experience.
Tony Iommi
Like a Swedish newspaper wrote in their review: he’s the man behind all the cool riffs ever made. Not as crazy as Ozzy, Tony was nodding his head, seeming to just totally dig what he’s doing with his guitar.

I was in the standing part of the crowd, in the front enclosure rocking away just a couple of metres from the stage. Why? Since I like to go crazy at concerts, jumping up and down with a big mass of people. Having Ozzy throwing buckets of water on me and the others sure helped too! 🙂

And, at the end of the concert, guitar god Iommi came to the center of the stage and threw out some picks. Everyone struggled and tried to get a pick. And I managed to get one! 😀

No noscript, m’kay?

To generalize, there are three different standpoints web developers usually take when it comes to implementing JavaScript in a web page.

Make it JavaScript dependant
This usually means making the web site and important functionality of it dependant on the visitor having JavaScipt activated alternatively a web browser that supports JavaScript. Bad.
Have a noscript fallback
Often, in this case, the web site’s functionality is still dependant on JavaScript, but includes a noscript tag with a text explaining for those who don’t have JavaScript that they can’t use it. Better.
Not JavaScript dependant and no noscript tag
This is the ultimate scenario. JavaScript is used to progressively enchance the functionality of the web site, but all the main functionality will work without it. When it comes to the noscript tag, it’s redundant. Instead, include the necessary elements or warning texts in the code that’s initially loaded, and then use JavaScript to hide them. Best!

So, no noscript, m’kay?

 

Related reading