Give your variables meaningful names

I just realized that the fullscreen plugin I was using with tinyMCE (v3.3.5) was throwing an error in my Firebug panel everytime I closed it.

As I wrote some tinyMCE plugins myself I thought I may have done something that was causing this. So I opened up the javascript file and checked for the error line :

var win, de = DOM.doc.documentElement;
if (ed.getParam('fullscreen_is_enabled')) {
  if (ed.getParam('fullscreen_new_window'))
    closeFullscreen(); // Call to close in new window
  else {
    DOM.win.setTimeout(function() {
      tinymce.dom.Event.remove(DOM.win, 'resize', t.resizeFunc);
                  tinyMCE.get(ed.getParam('fullscreen_editor_id')).setContent(ed.getContent({format : 'raw'}), {format : 'raw'});
                  tinyMCE.remove(ed);
                  DOM.remove('mce_fullscreen_container');
                  ed.style.overflow = ed.getParam('fullscreen_html_overflow');
                  DOM.setStyle(DOM.doc.body, 'overflow', ed.getParam('fullscreen_overflow'));
                  DOM.win.scrollTo(ed.getParam('fullscreen_scrollx'), ed.getParam('fullscreen_scrolly'));
                  tinyMCE.settings = tinyMCE.oldSettings; // Restore old settings
    }, 10);
  }
        return;
}

If you're not familiar with the complex tinyMCE syntax this may seems a little... well... complex.  I'll focus on the error line but I wanted to paste the whole code block so you can see my point.

The error line is this one :

ed.style.overflow = ed.getParam('fullscreen_html_overflow');

Of course it will throw an error, we try to access a property of an element we just removed from the DOM (two lines before : tinyMCE.remove(ed);). Why would someone want to do that ?

Well in fact, this is not ed (that we should try to access, but de (short for DOM.doc.documentElement). In fact the code was correct in 3.3.2, but someone changed it around 3.3.3.

My guess is that someone had the file opened, saw this bit of code, spotted the de, and seeing a lot of references to ed all around, thought it was a typo and 'fixed' it.

Reading the tinyMCE code (whenever you want to understand how it works, or want to study plugins before creating your own) is pretty hard. There are almost no comments, and variable names are only one or two letters long.

The tinyMCE team released a survey asking user what should be improved on the tinyMCE product. I answered it, and my main point was to improve documentation, because reading the tinyMCE core to understand its inner goings is quite a chore.

@font-face with multiple fonts and CSSTidy

The .woff font extension is the standard-to-go in terms of font embedding on the web.

You should add them first in the order of fonts you're loading, before the .ttf/.otf ones.

@font-face {
  font-family: "Unibody8SmallCaps Regular";
  src: url('fonts/unibody_8-smallcaps-webfont.woff') format('woff'), url('fonts/unibody_8-smallcaps-webfont.ttf') format('truetype');
}

The interesting thing to note is that you cannot omit the quotes around the format('woff')/format('truetype') part. Otherwise the font won't be recognized (at least by FF3.6).

CSSTidy seems to have a bug when there are multiple format()declarations in a rule, it removes quotes in each of them except the last one, thus making the whole rule unparsable by the browser.

So I started, again, to dig into the CSSTidy code and see what I could do about that.

I updated the csstidy.php file at around line 847 and changed the if statement to look like this :

if($this->sub_value != '') {
  $this->sub_value_arr[] = $this->sub_value;
  foreach($this->sub_value_arr as &$sub_value) {
    if (substr($sub_value, 0, 6) == 'format') {
      $sub_value = str_replace(array('format(', ')'), array('format("', '")'), $sub_value);
    }
  }
  $this->sub_value = '';
}

This way all sub values of the src: rule will be correctly parsed, and not only the last one.

Preventing Firefox from auto-filling login and password fields

When you login in an app and tell Firefox to remember your password, it will then automatically fill any password field that have a login field near it.

It can be quite embarassing when you are developping an admin panel where you can edit your own profile informations. The password field will be filled every time you go to that page, even if you explicitly set no value.

The way to circumvent this is to add an autocomplete="off" attribute to the field.

It may not validate, but is understood both by IE and FF AFAIK.

You should always test on older browser versions

You probably already have installed on your computer various web browsers (FF, IE, Safari, Opera and Chrome) to test your websites. You most certainly also have multiple installs of IE (or are using IETester) because the underlying engine of those browser is very different from one version to another.

Firefox, Safari, Opera and Chrome users are more educated to the "always update to latest version" paradygm so you rarely have to debug old and obscure version of those browsers.

At least it was what I thought until I was stucked with an old 3.0 version of Firefox on my laptop (mostly due to my inability to upgrade to the latest version. I'm still new to the linux world and my laptop is running ubuntu). Anyway, it made me understand that even if you are willing to upgrade you can't always do it and old browser versions should be supported too.

In a recent CSS experiment, I managed to style checkboxes and radio buttons in pure CSS. Unfortunatly, because I was using some "advanced" CSS selectors, FF3.0 wasn't able to render it correctly, in fact it was able to render only half the rules, making the whole thing totally unusable.

That was a perfect example of an old browser I had to debug. I will not dive into the details of the CSS (mostly because I haven't fixed it completly), and this post was only to remind you (and me) to always check on previous browser versions.

Next post will be explaining how to test on multiple Firefox versions side by side.

Using :after and :before

:after and :beforepseudo-elements allow one to add generated content before or after an other element. It can be used to add quotes around text, icons after a link to specify the language of the target page and a lot of other useful stuff like that.

It can also be mastered to create more powerful styling. I'll post more about that later.

Anyway, IE6 and IE7 don't support it. Firefox is supposed to support it from the 3.0 version but in fact it is still buggy in this release.

Pseudo-elements must be inline elements and can't be absolutly positionned in FF3.0, thus greatly reducing the number of fun things we could do with them in this browser.

It faced me with a challenge. If I wrote :before and :after rules, they would be only understood by FF3.0 but badly rendered, resulting in half the styling I expected.

Browsers that don't understand the rules would not apply them and keep the default rendering, compliant browsers will render all the rules, but the grey area in between is filled with FF3.0 that will think it can handle them and will finally badly render them.

I haven't found a way to specificaly target FF3.0, so I used an alternate method.

All the browsers that understand the :only-of-type selector also understand :before/:after. But FF3.0 and IE7 do not understand :only-of-type. So if I wrote a rule starting with body:only-of-type, it will only be applied to browsers with complete :after and :beforesupport (excluding FF3.0). This solved my problem.

Unfortunatly, it will also filter out IE7 who does not understand :only-of- type but does understand :after/:before. I usually remove all fancy form styling for IE anyway so that's not a big deal for me, but if you really care, you just have to override the rule in a IE7 specific stylesheet.