Maybe you’ll say that IE6 is still used by aprox 15% of users. That is correct, but think at this aspect: an average user has no idea how awful his browser is. Because we – the front end developers – we struggle to make site 100% compatible with IE6. Ok, no user will upgrade their browser for *your* site, right? Partially correct. Let me show you why: If the user can’t use your site, i’m 99% sure that he will *not* update his browser and will leave. Unless will find several sites that won’t work on his “great” browser, right?

To demonstrate the user ignorance (ignorance is bliss, right?), take a look at what average user answer on a very simple question: “what is a browser?”

I personally offer IE6 support only for some extra cash (+25%). Some clients are OK, some are not.

So.. Do you still support IE6?

• Turn off the monitor
• Hold the `menu` key and `+` key pressed and turn the ‘monster’ back on
• After it’s on, release all buttons then press `-` key. A huge menu will be displayed in top left corner

Ok, so? What can you do with this? You can set some stuff that you usually can’t. Do this on your own risk

For various reasons, E-text can crash or just hang when you want to save (especially when you work remotely, via FTP) and can ruin the work of a whole day (or even more) because when saves, the editor will first empty/remove current file, then will write the new one. And if the editor crash just after file is removed, you are screwed. Or, at least, you think so.

Whan you need to do:

Grab a small and fast editor. My pick is Scite. Is small and is DAMN fast with huge files.

Hit your WIN+R on your keyboard and write this: %appdata%\e\temp. Then dragg all files in Scite. Here you can find all recently edited files (may be many files, on my pc there is around 30 or so). Now, all you need to do is to find the file you was saving when the editor crashed. I know, it may be hard, but i can bet is not harder than rewritting your whole file

Bonus tip:

Older version of E-texteditor was somehow unstable in various circumstances. And because i use E since 1.0 or so, i had to develop a good habit: backup my settings. For doing that i use Sync Toy 2. Every night i close my editor and every morning synctoy will copy my settings on another partition, just in case. It’s VERY important to close the editor before backup, because most settings (like ftp accounts) are saved when editor closes. So, unless you want your backup to be useless, please, close your editor

Bonus tip 2:

From time to time, visit e-texteditor forums. Most new versions don’t hit the front page if they are not well tested. Live example: on homepage, the last version is 1.0.30 and on forums is 1.0.31 (which is way more stable). So.. Keep an eye there!

In this mini-tutorial i assume that you use Xampp, but you can use with any other *AMP configuration, on any platform (Windows, Mac, Linux, whatever). Also, because i don’t own a static IP (my ISP is “kind” enough to change my IP every single time when i power up my PC), i use a dynamic DNS service. Ofcourse, you are not restrained to use this service, you can find plenty of similar sites, but i use this and i’m happy with it

Anyhow, let’s begin.

Step 1. Edit httpd.conf

If you use Xampp, and you installed with default settings, you will find httpd.conf in C:\xampp\apache\conf. On httpd.conf you need to find Include conf/extra/httpd-vhosts.conf. If this line have a “#” char, just remove.

Step 2. Edit conf/extra/httpd-vhosts.conf.

This is the fun part. Just add at the end of the file this lines:

	DocumentRoot G:/htdocs/mysubdomain
	ServerName mysubdomain.my_domain.selfip.com

Then save and restart your apache server. Guess what? Now you have a subdomain!

Step 3. Assets folder

In a previous article i showed you how to put all libraries in same folder to avoid too many folder. Of course, this is fine when you don’t use subdomains. But what to do when you use? Well.. You edit httpd.conf !

First of all you need to be sure that Mod_alias.so is loaded. Find LoadModule alias_module modules/mod_alias.so and be sure it doesn’t have any “#” in front. Then add this at the end of the document:

AliasMatch ^/assets(.*) G:/htdocs/assets$1

Don’t forget to save and restart your server.

Next step is… There is no next step! You are ready to start/resume your regular work

Enjoy!

CSS Code

Each child is indented with a tab. So, i have this style:

#header {

}
	#search {

	}
		#search button {

		}

When you read only CSS you know that #header is the parent, #search is his child and the parent for button. Easy to read, easy to understand, right?

I try to avoid code like:

#parent #another_parent #header #search button { }

Because is kinda bogus.

I saw some guys who wrote their code on single line, without any indentation. Even if you have a less KB file, the result is hard to read and edit. Even though, i use very rarely one line code when i have to add one-two rule to a selector ( something like .element { color:red } ).

HTML Code

Actually… Somehow, i have same rule here: every child have a one tab indent:

		Button
	

As an extra info: when i have large blocks of code (div, forms), on closing tag i add a comment with the id or class name: if the block has a class, the closing comment is /.class name and if is an id /id name

Again, easy to read and to maintain, especially when you reuse some of your code.

Javascript/jQuery Code

Well.. Probably is already clear enough how do i do:

function function_name() {
	var someVar = 1;
	if( someVar === 1 ) {
		alert('someVar is 1!');
		for(i=0;i<10;i++){
			alert(i);
		}
	} else {
		alert(':(');
	}
};//function_name

Conclusion

The main keywords are: indent and comments. You don't have to overuse indent, because the code will be impossible/hard to read. Also, don't over-comment your code. Don't comment the obvious :

var foo = 'bar'; // the 'foo' get 'bar' value

Well.. I can't say nothing else but „happy coding!”.

Kinda obviously, jQuery is NOT Prototype and they seems to NOT work in the same manner. Today i think to test the results of various selector. For this, i used Profiler from Firebug (what? you don’t know what firebug is?). And i was amazed. And i mean AMAZED!

I made this test right on this blog. I used jQuery('li') in console and, after that i used jQuery('ul li') (there is 24 LI elements on the first page). Until today i think the second option is faster. Why? Well.. Is more specific, isn’t it?

The second pick is around 2.6 times SLOWER than first one. (0.533ms vs 0.205ms).

Unfortunately, i’ve try to use the slower technique on many projects. But, lucky me, for no reason, i always forgot to do that (and i use to remember too late)

So, be careful! Don’t make this mistake If somebody will tell ya that a method is faster, DON’T take his word as a law. TEST IT!

Keep only one copy of your favorite javascript library (and also up to date!)

I use jQuery a lot. No, actually i LOVE jQuery (is small, is fast, is easy to use, you know, usual craps that make you to love it; just like a woman ). To avoid duplicates of jquery, i use a folder called assets (but you can rename as you want as well). Here i keep latest version of jquery and jquery UI 1.5.2 (which now is the last stable version). With wget for windows in the assets folder, i wrote a small script to get latest version:

del jquery-latest.min.js
wget http://code.jquery.com/jquery-latest.min.js

Put this in a file called update.jquery.bat and double click it whenever you want to update your version of jquery (or any other library). This way you can keep all your sites up to date BE CAREFUL! Some plugins may WON’T work on newer versions of jquery!

Use snippets like a smart guy!

If you use E-texteditor (and if you don’t, then YOU SHOULD!), you probably know what snippets are. But, the question is: are you using them?

I put some snippets all together into an archive HERE. What you should do with this? Go to Start-> Run (or press WIN+R) and write this: %appdata%\e\Bundles then press enter. Extract the archive content right there and…. Done.

In each HTML document you can write ui then press tab. VOILA! A menu with jquery UI components are displayed and waiting for you to pick from there! Ofcourse, you MUST have UI files (minified) in /assets/ui folder (which must be in the root of your project folder). Again, be careful when you update UI. Even though UI 1.6 have same files as UI 1.5.2, there is (still) some issues with 1.6 (actually it’s a beta).

You have two solution:

First one, if you already coded your site and you saw the bug very lately, you can add a negative margin to list elements (either top or bottom). Every time i used this method i had no problems, so… I think it works

Second one implies to use some non-semantic code. Actually… Is not always non-semantic. Sounds weird? Well… Did you ever heard of Definition Lists? DL/DT/DD. If yes, then start using it! IE doesn’t have any problems at all with this. If no, read some infos about this and then start using.

Why i tell you that is both semantic and non semantic code? For instance, on a menu, is more adequate to use UL/LI tags. Is a list? Ofcourse! But, you can use, as well DL/DD tags.

I know, is messy, but it works flawless

The simple but efficient answer is this:

$(document).ready(function(){
$('
Loading...

')
        .ajaxStart(function() {$(this).show();})
        .ajaxStop(function() {$(this).hide();})
        .appendTo('body');
});

And that’s all. You need to do this only once.

Ofcourse, you can apply some CSS styles to #busy div, using an image generated with ajaxload or something similar.

I didn’t use any other libraries (actually i used prototype with scriptaculous sometime like AGES ago), but i think all cool libraries (like jQuery) have similar methods.

Another great news: with MORE than 50 fixes (but no new features tough) jQuery UI 1.5.1 is out.

1. They know that their browser suck so they put conditional comments. Is not a really hack, because you have a documentation, but is the best (and also the safest) way to fix CSS bugs (or even add some extra content for certain version of IE).
2. The second reason is funny and creepy: the fresh SP3 for windows is delivered with… IE6. Yes, if you don’t have IE7 installed, you will have IE6. That sucks, isn’t it?

Ok, enough with this, let’s show some real hacks, right?

Internet Explorer hacks

First of all: the best way is to use conditional hacks for IE. That’s because new version of other browsers can misunderstanding some hacks. As far as i know, this wasn’t happen yet, but you never know what gift we can get, right? Use hacks when you have only a couple to fixes!

The most used hack for IE6 is the star selector :

#wrap {border:2px solid blue}
* html #wrap {border:5px solid red}

For IE6, wrap container will have a 5 px border. For any other browser, you will get a 2px blue border. Is important to get IE6 hack AFTER the normal rules, otherwise you won’t get any result.

html>body #wrap {background:white}
#wrap {background:red}

This one is some kind of first rule, but reverted. That’s because IE6 simply don’t know how to deal with this kind of selectors (which is valid tough!). Lucky us, right?

Another hack is the underlined and !important. However, those hacks are NOT recommended for mass production (is ok for testing, but… that’s all):

#wrap {
color:red !important;
color:blue
}

and

#wrap {
color:red;
_color:blue
}

With both hacks you will achieve same result. But i repeat, DO NOT USE it unless you know what are doing. You will avoid a LOT of headaches

Until now, i talk about IE6 hacks. Here you have a IE7 hack:

#header { font-size:1em }
*:first-child+html #header { font-size:2em }

Like i said before, is mandatory that hack to be AFTER proper rule!

IE6 min/max-width hacks

#wrap {
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
	}

For this one, we need to use some CSS expressions. Also, is not recommended (can affect user experience, because browser execute that expression). This hack was founded here.

Image flicker problem

One of the most annoying thing on IE is this: when you have a css image on a link, when you hover that link, the image is reloaded, resulting a short time flicker. Mister-pixel.com comes with a handy solution for this (that works only in IE6 SP1 or greater):

You only need to put these lines in your header (inside of conditional tags) and your problem is done.

There is more?

Well… I’m sure i didn’t cover all CSS hacks. However, these are some of the most important hacks, ready to use anytime you need it (and for your own good, you should bookmark this page because you will need it A LOT!). Do you know any other hacks?

Use CSS reset

This is my CSS Reset:

/* resetting some default styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ul {list-style: none;}
body {line-height: 1;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
:focus {outline: 0;}
a:focus {outline:1px dotted #999;}
ins {text-decoration: none;}
del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

html { font-size:100.01%; }
body { font-size:1em; }

textarea {overflow:auto}
button {cursor:pointer}
input[type="checkbox"],
input[type="radio"],
input.radio,
input.checkbox {
	vertical-align:text-top;
}
a {text-decoration:none}
a:hover {text-decoration:underline}
/*  -----------------------------------
	a better and smarter way to clear floats
--------------------------------------*/

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block}
/* Hide from IE Mac \*/
.clearfix {display:block}
/* End hide from IE Mac */
* html .clearfix {height:1px}
/* -----------------------------------------------------------------------------------------*/

Not only i reset all styles, but i also use a smart way for clearing floats. Just add class=”clearfix” to some floatet box container and here you go. No more clear both extra tag, no more other tricks.

(Don’t) Use CSS frameworks

I don’t like to use code that is not mine. And CSS frameworks is this kind of code. Beside that, when you start to use a framework (no matter what framework is), you MUST learn it. Too much waste of time to learn another people code. Again, you have plenty of CSS frameworks to pick and try.

Validate your code and search for browser bug

Some times a page is not displayed well. Either you have a bug in your code or bug in your favorite browser, you need to figure in a way or other what is guilty for headaches. The best way to eliminate code bugs is to validate your code. If all lines is ok, you should search for bugs in browsers.

Comment your code

You probably say: why should i bother to comment my own code? I wrote it, i will remember! Yeah, sure! Over the past years i convinced myself how much i can be WRONG! I try to read some past code (yes, written by myself) and i ask: what the heck i wanted to do here? So now i comment my code: CSS i split in blocks and on html i comment the closed div/class for big containers:

  content goes here

Read news, blogs and forums

I have a many RSS feeds in Google Reader and half of them is about development. CSS, Javascript or only news, is all good. Of course, i don’t spend too much time reading all articles. I read only headers and if is worthing, i read it all. Is the BEST way to stay informed about web technologies.

Test in many browsers

Don’t matter if you made a website for yourself or for a client, because that site MUST be rendered in the same way in ALL browsers. Or at least to degrade graceful and remain usable.

Use your own javascript vs. libraries

Well, if you read constantly this blog, you know that i’m in love with jQuery And for most projects i need speed in development and just to be sure i achieve same results in all browsers. I can use my own JS or i can use my own JS powered by jQuery. The second way is always preferred

More to come?

Sure! If i remember any other tips, i will surely tell you! Just add this blog to your reader and stay tuned!

In real life, developer needs more than that. Here is a more than basic list with what programs i use:

• Adobe Photoshop. There is versions for both Mac and Win (no Linux; i will tell you later why) and it’s do his job very well. If is too big for what you need (and almost every time is too big), you can try his little brother Fireworks. You need only a soft for making slice and play with layers, so if you can find another software for doing this, let me know.
• Text editor. There is a PLENTY of editors, one better than other and you only need to pick one. Ofcourse, you don’t have to be stuck with that editor because anytime you can find a better one. I used Dreamweaver for about one year (or even more). I found UEstudio and i used for another year or so and last year i found a great TextMate port for Windows: e-Texteditor. And for now i think is the best (still having bad parts, but if i put side by side all editors, e is the ONE) and for now i don’t think to change it. The best thing is if you use e for a while and you want to switch on Mac with all your e custom bundles and themes, just DO IT! Working like a charm. Ofcourse, you can find a HUGE number of editors: Aptana, Zend (yes, some guys are using this not only for PHP), Eclipse, Intype (is some kind of e or textmate), Komodo, Maguma, GoLive!, Notepad++ and so on.
• VMWare, Parallels, VirtualPC or any other software that will allow you to run another OS in your current OS. Again, there is versions for both Mac and PC. This is to be sure that your site will be displayed like you want in ALL browser (or as many as possible). I’m sure you don’t want a site that is looking good on IE7 and is screwed up in IE6, right? I use Vista as main OS, OsX as secondary OS (yes, Hackintosh) and Windows XP with IE6 and Ubuntu 8.08 on my virtual machine.
• Apache, php and mysql. Either you installing this manually or install a all-in-one package (Xammp, EasyPHP), you probably need a server like that if you plan to develop themes for CMS/Forums or Blogs. For Movable type, for example, you also need too install Perl.
• If you are working on big projects with many developers, you should consider to use SVN and a SVN client.
• Patience. A HUGE dose of patience, because will be a LOT of stuff that will simply won’t work on some browser (usually IE6) and if you don’t know what to do, you will get some white hair before the time
• A music player I don’t know how do you code, but i can’t code in absolutely silence. I search for a radio station and just play at a low volume.

As i said before, i will tell you why you don’t have some of these tools on you Linux box (but maybe you have many other great tools): there is a tremendous number of Linux distribution with a huge number of configuration and Adobe (and many other companies) don’t want to spend time with technical support (just imagine a call center operator who MUST resolve problems of 20 distro/day!). For front end development i personally think is a MUST to have Windows or Osx (or even both).

Soon i will post a guide with best practices and some advices for front end developers.