CSS tips: Widths calculations, and links with icons

I haven’t posted in a while, so let’s see if I can make up for that by posting two different CSS tips today.

These are more on the intermediate level side. If you’re an advanced CSS developer you may already know about these. Today I bring you:

1. Elements’ widths calculations in CSS under different browsers (most importantly, the difference between IE and Firefox).

hotel furnishing in Bulgaria

2. компютриBest method to implement links with icons next to them.

Save in del.icio.us StumbleUpon this

JavaScript: Using Event Listeners, attaching handlers on page load, and DOMContentLoaded

For anybody who has ever coded any JavaScript at all, they are no doubt familiar with events such as “onclick”, “onmouseover”, “onmousemove”, and more. In old HTML web pages, it was very common to add these attributes to <a> tags to achieve some special effects.

Later on, browsers begin to support these attributes even in other tags like <div>, and pretty much anything else.

However, as web standards develop over the years and people’s coding practices for the web begin to standardize, it is generally considered bad practice to use them. There are many reasons for this, among others:

1. You cannot attach more than 1 action this way. If you want to do a lot of things in one event, you will need to put a lot of code either in this attribute, or in the function being called from this attribute; and these may very well be unrelated actions. This makes your code less organized and harder to develop.
2. No good separation of presentation (HTML) from functionality (JavaScript). Everything is mixed together. This makes collaboration development efforts difficult; and makes the code hard for you to manage even if you were the sole developer.

Fortunately, we have an alternative solution. They are Event Listeners.

Continue reading JavaScript: Using Event Listeners, attaching handlers on page load, and DOMContentLoaded…

Save in del.icio.us StumbleUpon this

Internet Explorer issue - maximum of 32 CSS @import

To be honest, I just ran into an issue that I thought was fairly ridiculous.

Internet Explorer restricts you to a maximum of 32 @import statements in your CSS file.

For the less advanced developers, you can import another CSS file from within one of your CSS files. Consider it like a #include in C programming, or an include statement in PHP. The syntax would look like this:

@import url("mystyle.css");

When you are developing a complex web application, you are likely to have many CSS files. Admittedly, we haven’t cleaned up the CSS structure and removed any outdated CSS stylings for a while, in our project. We shouldn’t have imported so many. But it struck me as ridiculous for Internet Explorer having such limits. (Needless to say, Firefox has no such ridiculous limits.) To me, it just seems like a programming flaw (using a 5-bit number as indexing for imported files?).

Reference: http://www.juniper.net/security/auto/vulnerabilities/vuln3394.html (the topic discussed in this link is not related, but pay attention to the end of the second paragraph: “Internet Explorer imposes a maximum limit of 32 imports that an individual styleSheet object can hold, and a depth limit of three on the number of style sheets that may be included within the style sheet chain.”)

Update (3/27/08): Apparently, IE doesn’t only impose a number of files limit — but even a file size limit for each CSS file. The IE CSS file size limit seems to be ~288kb. Again, Firefox doesn’t seem to have such limits. Way to go IE, for continuing screwing web developers up.

Save in del.icio.us StumbleUpon this

CSS: z-index - so what appears on top?

CSS provides an interesting property called z-index, that determines what element appears “on top”, on a page. You can tell that this was put in the CSS standards because of absolute positioning. Imagine the 2D page having X and Y coordinates, and the Z-axis points out of the screen at you, as well as inside to the page.

Interestingly, when these CSS standards were first developed, no one imagined they could become so useful — it’s an important part of what makes web 2.0 applications like meebo possible. (chat windows overlapping others to simulate a desktop application design)

So, when developing web applications nowadays, you could very well have needs to utilize this property. Unfortunately, support for z-index is flaky in browsers. Not every browser interprets code the same way. Unfortunately for developers, Firefox and Internet Explorer, again, have different opinions on z-index.

In this article, I will discuss some potential discrepancies with z-index, and how you can get around them.

Continue reading CSS: z-index - so what appears on top?…

Save in del.icio.us StumbleUpon this

JavaScript: jslint, data types, “null” and “undefined”

Straight to the point: If you want to get one thing out of this article, get this:

In JavaScript, “null” is not the same as “undefined”.

This was what costed me some debug time recently when working with JavaScript at my job.  I will talk about how I came across this issue, because there are various valuable aspects of this story that could be worth reading for those of you frontend developers.

Actually, scratch that, if you don’t know about jslint, do read the following section too. It is useful, and you won’t regret it.

Continue reading JavaScript: jslint, data types, “null” and “undefined”…

Save in del.icio.us StumbleUpon this

Special announcement: Badware is gone

So, I was checking my blog’s statistics and found it weird how it suddenly had so much fewer visitors and no traffic referral from Google for a couple of days.

Then I was reminded that my Wordpress hasn’t been updated in a while. So I ran a check in the source code of my blog for some common hacks (usually an <iframe> code inserted somewhere), and guess what, I found some.

This lead to Google then listing my site as “harmful”. This is a special announcement entry to tell you all (however few regular readers I have) that the badware is removed, and Wordpress is updated to the latest and greatest.

This is also a post to tell you that, if you own a Wordpress blog running a version older than 2.3.2, you should update. More info could be found on this Wordpress support thread. I hope Google didn’t scare anyone off (especially potential new visitors of my blog) by saying it’s a harmful site. And I hope they do the review as soon as possible, as I submitted it for review arleady.

Save in del.icio.us StumbleUpon this

CSS: Absolute position in a relative block; and IE’s hasLayout property

What a long title for a post! And it sums up what I’m writing about this time. I’m going to talk about a semi-commonly known CSS trick, as well as a potential problem with Internet Explorer 6 with it and the fix for that. Most advanced CSS coders/web designers will be familiar with this trick, but the beginner to intermediate readers will certainly benefit from this.

CSS Positioning

If you’re reading this, you probably know what CSS positioning is.

When you define the CSS of a div block with position: relative, any top, left, bottom, right attributes you give it will move the block accordingly, from its original position (where it would be if you didn’t move it). Giving it top: 20px will move it 20px below where it would be.

On the other hand, if you define a div block with position: absolute, you are essentially telling it exactly where it should appear on the screen. Giving it top: 0px and left: 0px will put the block at the very top left corner of the page. It also effectively “floats” the element and put it on top of any page element that are in the way, but don’t confuse this with the float attribute in CSS. Also, you can control which element appears on top with z-index, if you have more than one.

That said, let’s get into what I’m really talking about this time…

Continue reading CSS: Absolute position in a relative block; and IE’s hasLayout property…

Save in del.icio.us StumbleUpon this

PHP Web Applications Development — A Starter Tutorial

This is a beginner’s guide to setting up an environment to start doing web applications development in PHP. If you are anything past the beginner level, this article may not be any beneficial to you at all; so you may stop reading here.

A friend of mine has recently requested me to write a starter tutorial for someone (presumably, who already has some programming experience and web site development experience, as he does) to start doing web applications development, particularly in PHP. I thought, hey, maybe I should just write it up here, since I haven’t written anything here for a while.

In this tutorial, I will cover some simple steps on how to setup a web server (Apache), PHP, and a database (MySQL) on your machine. In particular, I will assume the use of the Windows machine. Why? Honestly — if you’re operating Linux already, shouldn’t you know enough to be able to setup all that on your own? I will also be writing some of my preferred methods of managing the server.

Continue reading PHP Web Applications Development — A Starter Tutorial…

Save in del.icio.us StumbleUpon this

Facebook Applications

The Facebook platform has been released for a while now, and believe you me, I’ve been doing development on it since day 1 of that until now, non-stop. I think I can say with fairly good confidence that I’m an expert Facebook developer in PHP.

Facebook applications originally provided something with very good potential, but unfortunately, it isn’t really working in the way I would hope it should.

Continue reading Facebook Applications…

Save in del.icio.us StumbleUpon this

Where do you draw the line between designer and developer?

As web 2.0 applications get more and more mature, the roles of web designers, web developers and web application developers become more and more blurry.

Years ago, web designers simply design web sites. They aren’t very different from traditional print designers. Sure, some of them might not only do the design, but also code up their designs in HTML. But a lot of times, web designers are only responsible for the visual designs, and they pass on their work to web developers to convert the visuals into actual web pages. Back then, there wasn’t even much of a term as “web application developer” — what is a web application in 1998? A form mail script? A guestbook? Nobody would do that for a living. Let’s rephrase that — you won’t make a living doing that.

Continue reading Where do you draw the line between designer and developer?…

Save in del.icio.us StumbleUpon this