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.

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.

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.

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.

Getting a Text Editor

Before I get into anything, let me first talk about text editors. Throughout this tutorial, you will find several instances where you need to be editting configuration files. I recommend a text editor called TextPad. This editor deserves a lot more fame than it has. It is best text editor I’ve ever used. It’s not only good for normal editting, I even use it to code a lot of my PHP web applications. It has an unlimited free trial so if you are poor, this is the way to go. You can also always pay $32 to get rid of the nagging box that asks you to buy it.

Installing Apache

For PHP web applications in particular, the Apache HTTP server is the server of choice. For Windows users who just need to install the web server, unless you need the source code of it for any reason, you can simply download the binary. This Apache archive contains what you need. Download the .msi file of the latest version (2.2.6 at the point of this writing). Apache insists you must also check your downloaded file against the .md5 code for security. (If you are just downloading it for personal use and testing on your local machine, I don’t think it’s necessary.) If you do want to be secure and run a md5 sum of your downloaded file, you can use this MD5summer (since WinXP doesn’t have any md5 tool).

Installation of Apache is fairly straightforward. On Windows, you have the option of running it as a permanent process (on port 80), or running it per user (on port 8080 by default for this option). For any normal web server, port 80 is what is used. When you type in a URL (say, http://www.agum.com/), port 80 is assumed. You can also specify a port, such as http://www.agum.com:8080/. That is what will happen when you run it per user. Typically, if you are just using this as a developer machine, you should probably just use the 8080 option. Most other options can be left at default for a new developer.

Configuring your web server

Once installed, before you run the web server, the first thing you will want to know is how to configure your web server correctly. This is done by editting the httpd.conf file. This file is located at C:\Program Files\Apache Software Foundation\Apache2.2\conf\httpd.conf, assuming you installed Apache using the default location.

There are many things going on here, but here are a few things of interest, for a beginner.

1. Find the line “Listen 8080″. On my file it’s line #53, so it should be near there. You can change the port number of your web server here if you need to, to pretty much anything (unused). Leaving it at 8080 is fine.
2. Find the line starting with “ServerName” (line #142 here). You can enter your IP address here, or you can enter a hostname if you have one. (places like Dyndns.org gives free hostnames you can use) If you are behind a router/firewall, and you are only going to be needing to test locally with no one else needing to access your server, it might be easiest just to use your LAN IP, or even 127.0.0.1, to save a lot of trouble with port forwarding on the router settings.
3. Now the most important: the line with “DocumentRoot” (line #149 here). This is the location your files are served from. I have this on my test machine:
   DocumentRoot “C:/webserv”
   This means I have created a folder on C drive called “webserv”, and all my html files, image files, php files reside in there. After editting this line, you will also need to edit a line a little below it (line #177 here), it looks like this:
   <Directory “C:/webserv”>
   Obviously, you will want to use the same location for here.

That should cover everything you might need to edit in the configuration. Now, you can run your web server to test it out. If you followed through the typical Windows installation, you can run it from Start -> Program Files -> Apache HTTP Server -> Control Apache Server -> Start Apache in Console. What this does is it will run httpd.exe with the default options. Don’t close that DOS prompt when you run the server. When you close it, Apache closes.

You can test to see if you have everything correct by going to http://127.0.0.1:8080/. It should show whatever you have in C:/webserv (if you have the same setup as me). Put an index.html file in there to try it out.

Installing PHP

When your web server is configured, the next step is to install PHP. Download PHP first. Again, on Windows, you will just really need the Windows binaries. (you really won’t be needing to modify any PHP source, for a while..) You only need to download the one that says “PHP 5.2.5 installer [19,803Kb] - 15 November 2007″ (at the time of this writing, this is the latest version.). You don’t need the PECL extension for now.

While installing PHP, you will run into a screen that asks you what extensions you’d like to install with PHP. Do not be intimidated by this huge list. For a lot of web applications, you don’t even need most of these. The ones that I do think will be needed are: gd2 (for manipulating images), mbstring (for handling foreign languag), mcrypt (encryption), mysql and mysqli (needed for using MySQL). You can pretty much just follow my recommendations if you have no clue what you’re doing.

Configuring PHP

Once installed, the configuration file of interest is C:\Program Files\PHP\php.ini. It’s a very long file, but there aren’t much that you need to pay special attention to. Here are a couple of items you’d want to look for:

1. Look for the line: (line #117 here)
   engine = On
   Make sure it says on. There shouldn’t be any reason it would be off.
2. Shortly after that, find this line: (line #128 here)
   short_open_tag = On
   Make sure this one is on. This is actually important because many pre-built PHP scripts out there (if you are running any) use the short open tag.

There isn’t much else you need to change. You can now test your PHP. Run your web server again the same way you did before. Put a test.php file in your C:/webserv folder. Put some test lines in there, like <?php echo ‘Hello world.’; ?>. See if it runs correctly.

Running phpinfo()

A good way to test out everything in your installation is phpinfo(). It is a function provided by the PHP language. You can simply put this in a file:

<?php
phpinfo();
?>

And save it, then run it from your browser. You should see a very long page detailing all the configurations of your PHP setup and extensions.

Installing MySQL

You can download the MySQL 5.0 Windows binaries here. The “Windows ZIP/Setup.EXE (x86)” option is probably the easiest to install. The installation will prompt you for several things, but should be quite straightforward. You can simply answer them based on how your machine will be used. (as a developer machine, only use part of the memory/cpu for the database, etc.)

One interesting thing I’ve noticed is that, after running through the installation, there is no place that asks you to set your admin password. I always use the way on the MySQL reference manual to reset the password after the installation.

The configuration file is at C:\Program Files\MySQL\MySQL Server 5.0\my.ini. However, there really isn’t anything you need to change in there, so I won’t be going through it.

Once my MySQL database is installed, I personally find it more convenient to have a quick shortcut to start my database, and to stop my database. Here they are.

Starting MySQL:
“C:\Program Files\MySQL\MySQL Server 5.0\bin\mysqld.exe” –standalone

Stopping MySQL:
“C:\Program Files\MySQL\MySQL Server 5.0\bin\mysqladmin.exe” -u root –password=1234 shutdown
(where your password is 1234)

Make a shortcut containing those commands. Correct the paths if you need to. Then, whenever you need to start or stop the database, simply run these shortcuts.

To easily test out your MySQL database installation, you will need a PHP script that uses the database. The easiest way is to download phpMyAdmin.

Installing phpMyAdmin

The phpMyAdmin software basically lets you administer your database from a web interface. To clear out any confusion — if you are fluent with SQL commands, you can simply use the text-based MySQL client (mysql.exe) to do anything that you could do in phpMyAdmin. This software is only an interface, written in PHP, for you to do anything to your database easily from your web browser. Installing it is optional.

Download phpMyAdmin. (There is a Quick Downloads box near the top left) Once downloaded, simply unzip the package to your web server’s document root, which is C:/webserv in the examples I’ve been using above.

There are a few steps in setting up phpMyAdmin. At this point, I’m not sure if my friend needs to do this or not. I will continue this writing when I find out that he does. For now, I’d like to publish this article as soon as I could so I could help out.

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

Usefulness vs triviality

It is extremely unfortunate that majority of the Facebook applications that “succeeded” (currently) are entirely useless ones such as SuperPoke, X Me, SuperWall, and Top Friends. It is not hard to see how they succeeded.

Slide and RockYou apparently has some sort of partnership with Facebook (correct me if I’m wrong in this); they were able to push out some applications since day 1 of releasing the Facebook apps platform. They created these useless little apps, and made ways of spreading them (mainly the “Invite your friends” page when you first add the app).

Of course, now that everybody knows what that is, everybody just skips that page entirely. But when it first started, people actually invite other people through that.

Normally, an app getting popular, no matter what ways it used to accomplish that, isn’t really a problem. The main problem here lies in the fact that these apps are mostly useless trivial apps — look at SuperPoke, X Me, Free Gifts — they do nothing more than posting a message or an image on a friend’s profile. Top Friends has a little more to it than that, but also doesn’t have much practical uses other than generating hate from your other friends who didn’t get in your Top Friends list. (did anyone actually think of that when they add people to their top friends? I can’t believe how many people actually think Top Friends is cool. It destroys a lot more friendship than improving any.)

All of this gave a really bad example for new developers starting at this stuff. Other programmers see the success of these useless little apps, and they go ahead and make some too. It easily became the norm, then, to make trivial apps on Facebook. This in turn leads regular Facebook users to get used to the fact that Facebook apps aren’t to be taken seriously. It’s just fancy little toys to be added to your profile with no practical uses. Now, the only difference between Facebook Apps and the trash you see on MySpace is that Facebook Apps are more secure and more difficult to program for — other than that, there is no practical difference.

This is really, really sad because Facebook apps would have so much potential otherwise. Facebook could’ve pulled the a great part of web 2.0 applications into their platform if Slide and RockYou didn’t set such bad examples! The possibilities would’ve been endless.

Before Facebook Apps

Did you know that a Facebook development platform existed before Facebook released Facebook applications? You could develop third-party web applications (or even desktop applications!) using Facebook’s social network data to back you up. They would be standalone web sites, only having a Facebook login. All “Facebook Apps” did was to allow you to integrate your application into people’s profile boxes and provide you with a canvas page (which is mostly just an individual web site, for the most part).

Take a look at this: MoochSpot. It lets you “keep track of debts and shared expenses with your friends”. Excellent idea, nicely done using the Facebook platform.

And you know what? That is what Facebook applications should have been like in the first place! Useful web 2.0 web apps integrated into Facebook. NOT trivial little toys to add to the Facebook profile.

Another way to see it

Perhaps, though, Facebook could help us partly solve this problem by fixing their Applications directory. Help those of us developers who actually invest development time into creating a serious application with practical uses, and help the users find out about these things.

Categorize Facebook Apps into two big categories — little toys and serious apps. Or better yet, just call little toys something different altogether, like “profile add-ons” or something. That is where stuff like SuperPoke, Top Friends belong. Facebook Apps should be where stuff like MoochSpot and GoInGifts belong. (That second one, by the way, is what my team has been developing in the past month. The Facebook app, not the standalone web site — that is just a temporary placeholder designed by some web designer.)

Conclusion

Of course, Facebook Apps are still young to really say anything about it significant at all. There could very well be major changes coming up within the year that makes it into something entirely different, maybe working like what I mentioned above. Even the Facebook platform itself isn’t in a stable state yet — changes are being made from their engineering team every week, stuff is getting added, removed, and updated all the time. Let’s hope for the best and hope that Facebook will eventually solve all this out, and not to make it like another MySpace.

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.

Now we enter the web 2.0 boom. Full-fledged web applications are being developed. Meebo is my favorite example. And there’s Google Docs & Spreadsheets, etc. How are applications developed? By programming, obviously. Just like desktop applications, web applications also have a backend programming element to it, as well as a frontend interface programming element. These are huge applications we are talking about — they are as large as or even larger on scale than desktop applications in the past!

Web applications backend programming is really not much different from traditional programming people have been doing since the beginning of time. (except maybe working with different languages — like PHP, Ruby on Rails now. But people still use Java and C++ too!) When we get to frontend, things get a bit different. We have new technologies like DOM scripting and AJAX. These technologies are still in sort of an infant stage. It really takes a tech-savvy person to bend them at will and do what you need to do. Heck, even writing standard XHTML and CSS and making sure they work across browsers is a challenge!

Needless to say, frontend development work has to be done by programmers as well. Here’s where the problem comes in. As we all know very well, programmers aren’t good designers. What this translates into is a whole bunch of web applications with badly designed interface. You could hire a designer to make things look good, but if an application has a bad interface, that makes it a bad application.

It takes a usability expert and/or a great UI designer to do this frontend work. Very often, the frontend programmer is not this person. Currently, the only solution to fix this problem is to hire somebody who is both a great UI designer and a programmer to do the frontend work. It certainly is a big challenge! There aren’t that many of them out there.

And we come back to the question. Where do you draw the line between designer and developer? I am a web application developer. A lot of times, however, I find myself having to take care of some aspects of the frontend design. So should I be considered a designer in addition? The designer at my company needs to learn some web apps programming in order to improve on her work. She needs to understand how AJAX works, how the DOM elements on the page work, in order to make her designs work. So is she a developer now?

Frontend applications development is an interesting job. It takes both good design knowledge and technical knowledge to do the job — an unusual duo. Frontend developers should really be more valuable than backend programmers, since old-school programmers are a dime a dozen. Why aren’t we getting paid more?

It started from a time when one of my clients was using (are you ready for this) Firefox 1.0. If you are one of the unlucky souls who don’t understand the meaning of this — Firefox 1.5 had been the “standard” Firefox for about a year or more, and Firefox 2.0 has been out for at least a month or two (or more; and I’m not even the type who keeps myself that updated). He told me that the page didn’t look right and he was using Firefox, so I wondered for a while before finding out that he was on Firefox 1.0.

So I figured there is actually a need to install multiple versions of Firefox for testing. Surprise! There are actually ways to install multiple versions of Firefox as well as IE on your computer, without having multiple computers or doing any sorts of virtualization. Oh, and this guide is for Windows users. If you’re doing any sort of frontend design, Windows testing is your main target, no matter how much you like Mac or Linux yourself.

Installing Multiple Versions of Firefox

I will try to make this your one-stop guide to doing this, so I will include every link you’ll need here. First of all, to give credit where it deserves, I first got my information from dojotoolkit.org.

If you attempt to simply install all 3 versions of Firefox separately and run them normally, you will always only open the latest version you have installed, no matter which executable you run. By following these steps below, you can run Firefoxes 1.0, 1.5 and 2.0 side-by-side.

1. First, to get old versions of Firefox, you should go to this oldversion.com link. Firefox versions older than 1.5 are not available on the official web site, so you will have to get 1.0 on third party archive sites. I recommend 1.0.7, that’s the one with the “latest” bug fixes from the 1.0 series. Note: As far as I know, rendering engines have no differences between subversions of 1.0 (or that of 1.5, or 2.0). So you only need to get the latest 1.0.
2. As for Firefox 1.5, at the time of this writing, it is still available on the official Firefox site. I recommend getting it from there, since they have the latest 1.5.0.12, versus the 1.5.0.7 on oldversion.com.
3. Run the installations for Firefox 1.5 and Firefox 1.0. Do not install them at C:\Program Files\Mozilla Firefox. Instead, rename the installation folder to Mozilla Firefox 1.5 (and 1.0). At the end of the installations, when asked if you want to launch the program, click No.
4. Go to the two respective installation folders, and rename the firefox.exe file in there to firefox1.5.exe and firefox1.0.exe correspondingly. This is not a required step, but I recommend it because you’ll able to tell their differences in Task Manager.
5. Then you need to create a .bat file for both of these versions. Make a new file called firefox1.5.bat (and firefox1.0.bat for the second one), and paste these lines in it. Of course, for the 1.0 version, change all the “1.5″ occurrences below to “1.0″.

   set MOZ_NO_REMOTE=1
   start "Firefox" "C:\\Program Files\\Mozilla Firefox 1.5\\firefox1.5.exe" -P "Firefox1.5"
   set MOZ_NO_REMOTE=0

6. Run the .bat file. The first time you run it, Profile Manager will come up and ask you which profile to run with. Create a new profile with the respective name (”Firefox1.5″ for version 1.5, and “Firefox1.0″ for version 1.0, as it shows in the .bat file lines above).
7. When Firefox runs, you will have all new bookmarks and everything, and the About window tells you that you are on the right version. By using the .bat file, you can run all versions of Firefox at the same time. After running for the first time, you will not get the Profile Manager that asks you for profile anymore.
8. Lastly, I recommend creating a .bat file even for your latest (2.0) Firefox, for maximum clarification. Use the same file content shown above, but take out the “1.5″ occurrences. For the profile name, use -P “default” instead.

That’s it!

Installing Multiple Versions of IE

Doing this with IE is way simpler than with the Firefoxes, thanks to some kind folks who developed a program called MultipleIE.

1. Install IE7. Yes, you may feel free to overwrite your IE6. You will get it back later, so don’t worry about it.
2. Go to Tredosoft and download the Multiple IE software. Follow all instructions on the web site and on the setup program.
3. You’re done. Did you expect more steps?

Simple enough?

Conclusion

Now, you have on your Windows PC Firefox 1.0, Firefox 1.5, Firefox 2.0 as well as IE versions from 3.0 to 7.0. As a good web developer (especially a frontend one), you should be testing for as many browsers as possible and make your code work for as many of them as you can. Safari and Opera are other browsers you should consider supporting. (You no longer need a Mac to test for Safari! )

There is also Camino, but it uses the same rendering engine as Firefox, so you can assume your site will work with it as long as it works with Firefox. As a bit more information: Safari and Opera use their own rendering engines which are different from Firefox. However, both follow web standards (defined by the W3C) pretty well, so most of the time you won’t get too frustrated with them. Internet Explorer is really the only one that likes to stray away from standards (even now in IE7), but it’s also the most commonly-used one. What can you do, right?

This is Bigi. It’s been a long time since I last owned a “public” blog - must’ve been a few years. The purpose of this particular one is to share what I find interesting in the topic of Web Development. When I say Web Development, it means everything from PHP, MySQL in the backend all the way to XHTML, CSS, JavaScript in the frontend.

I’m recently working on a project and I ran into many interesting things that I don’t want to just pass up without mentioning. It may be things you already know if you’re an expert, or it may be something you can learn from if you are a beginner, and it also just serves as a good record for myself to keep track of what kind of interesting things I’ve been picking up.

That’s all for the first entry. Any comments?