Web Development — Category

Mozilla have unleashed Devmo. It is a comprehensive site that puts all the articles about web programming and Mozilla development in one place. If you are a web programmer, Mozilla extensions/themes writer, or make plug-ins for browsers, make sure you check it out.

I have recently been thinking about the term “RSS” and what it really means to the average Joe user. And then the term sprang up at Mozilla developer Asa’s blog about how Microsoft is getting slammed for calling “RSS” a “web feed.”

It may be frightful for someone to come up to this thing as an “RSS.” New people probably won’t touch it, what does it mean? RSS doesn’t say much about what it does do. RSS also doesn’t say much as to how to use it. RSS doesn’t even have a proper meaning. Syndication? What’s that? Push technology (the buzz-word of the 4.0 browser era, the height of the browser wars)? Huh?

If you still don’t know what RSS is, let me put it to you this way. It is a new way to find out if your favourite website has updated, letting you view what is new on the website and choose what you want to read. These are now coming to be called “web feeds.” A term Microsoft has picked up to use in the future Internet Explorer 7 browser. It is a distributive form of getting the information you want.

RSS isn’t such a great name for it anymore. There is now the new derivative named Atom about, which does the same thing. But why differentiate? I can just imagine programs now, saying “Bookmark this RSS feed,” when it is RSS and “Bookmark this Atom feed.” To the person using the program, it produces the exact same result.

But what is more frightening about RSS? The numbers. This blog, may I say, offers posts in RSS 2, RSS .92 and Atom .3. The comments are offered in RSS 2. So? Many RSS readers these days provide support for all forms of RSS and Atom feeds. In fact the differences between RSS 2 and .92 are small. Atom however is a different implementation. These all once again produce the same result. In fact, it didn’t take me until I was working on Now. that I found Blogger only supplies Atom feeds. Why didn’t I notice this before? Because I didn’t care. It did the job it was supposed to do.

RSS has been around for a while now, it was invented by Netscape back in the day. It has only really caught on along with the blog-revolution. Now web browsers are only just catching the wave. Firefox supports RSS feeds, only by calling them “Live Bookmarks.” That is a nice name. However, when you are on a site that provides them, and you click the live bookmark icon, you get presented with an interesting list, for example on my blog (regrettably) you get “Subscribe to feed ‘RSS 2.0′.” Boy that was a slip. Many other blogs and sites do this too. Safari supports RSS feeds by formatting them into a pretty format. All other web browsers (including Firefox) show the ugly code. Another thing that scares away the masses.

Here is about the best type of RSS feed I’ve found, BBC World’s latest news. They have the orange button to show that it is RSS, but underneath that they have a “What is RSS?” link. But if you do come across the RSS itself, BBC have made it beautiful (to the extent that they can). You don’t see the code, you get a good lot of explination text telling you what it is, and how you can use it. It even provides instructions on how to add it to your reader, links to the real news page, and links to other feeds. We should be heralding this as a fine example of what RSS feeds should be doing right now until all web browsers come into the playfield.

Meanwhile, sites should probably loose the “RSS” wording. I’m going to start this soon. However, what do you call it in it’s place?

OK, the problem with the site I mentioned a couple of days ago is solved now.

Let us look at how it came to be, and how it was fixed. Here is an area map of the main content part of the homepage:

OK, the margin to the left (in the lightest shade of blue) was 14.5%, while the margin to the right was 14.9%, this was to solve the problems originally. The darker blue elements are the content, the darkest being the main, the other being the side bar. Little did one know that the sidebar (also with the red and yellow) was sized by 200px. This was for the image slideshow which won’t exist anymore. The main content is of width 50%. Anyone can see that this is a disaster.

With CSS you can either have full proportions (such as percentages) or exact sizes (such as pixels) but if you mix the two together you’ll have trouble.

So, while the margin is 14.5%, the content being 50%, the sidebar was 200px, but here is the twist that web browsers seem to enjoy doing. The border (highlighted in red) added another pixel, and the padding (in yellow) added 3 pixels either side, so in reality the sidebar was 207px wide. Furthermore that because of its fixed size the margin was resizing correctly but because the sidebar was snug in the first place it pushed the side bar to the bottom of the page cause it couldn’t fit anymore.

So the solution? The content is still 50%, but the div element that was meant to be a container for the sidebar has had its border and padding stripped, and this information being delegated to a container inside the sidebar. The main sidebar was given the 20%, making the margins an equal 15% and everything being snug and resizable properly.

So the main moral of the story is that div elements should represent all the low level elements, getting as low as you can (of course having a div for the main body is stupid, because you already have the body tag to do that).

One of the things I wish CSS could do is regular expressions, for example position: absolute; left: content.left + content.width;. Of course, this can only be done on ID’d elements. And yes, Internet Explorer does do similar. Haven’t played with it yet (open to all sorts of security holes as it is Javascript, which means that you can do whatever inside CSS).

While I have been working on Now. I realised a problem that I haven’t really seen discussed before, probably because others haven’t really seen it as a problem.

What am I talking about? How we view RSS feeds in RSS readers.
(more…)

This morning I finally got it.
I made both #content and #sidebar float (left and right respectively) then added a margin to both. And now look!

Internet Explorer users have to download a couple of extra bytes because IE screws up the original. This is thanks to IE conditional comments.

So, for future reference, here is some info on conditional comments.

Internet Explorer since version 4.0 has supported conditional comments. Here is the syntax:

<!--[if (operator) IE (version)]>
content
<![endif]–>

See why it is called a conditional comment. It looks like a comment to other web browsers, only Internet Explorer knows what to do with the content inside.

You can do the standard comment, which just checks for Internet Explorer by using <!--[if IE]>, but you can also add operators and versions to check for those to.

So, if you also wanted to check if the version of IE is 6.0 and above, then use <!--[if gte IE 6.0]>.

Here are the list of operators:

• gte - greater than or equal to
• lte - less than or equal to
• gt - greater than
• lt - less than

You can also add a ! before the operator to make it a NOT statement.

However, do make note that this only works in Internet Explorer for Windows, not any other version.

And there was a quick lesson on the great thing Microsoft did do with Internet Explorer - thanks Microsoft!

Update OK, well the internet is a nasty place at this time. Two forces - Internet Explorer and Firefox - fighting over numbers. Now, if only one of those web browser, not naming names (stares in Internet Explorers direction) supported things. Then developers will be happy and not get one working fine and the other not.

OK, I have been trying to get this fixed ALL NIGHT!

Why? Why?

So, you see this format now right? It looks OK huh? Now click here. That big red bar! It’s going through the sidebar!

I’ve been doing everything. But I just can’t seem to get them to work how I want. I’m very tempted to use a table, but I will restrain myself for now.

I did at one point get the footer beneath everything in Internet Explorer and I was just hurt by Firefox.

So, here is my ultimate question, I’m even going to quote it to add emphasis:

How do I have two <div> elements sit side-by-side without breaking other <div> elements below them?

Oh please…