1. Computer
2. HTML

Internet Exploder gits

A very brief review of CSS and JavaScript gotchas of IE 8.

Today I’ve faced a problem I thought has disappeared into the void with the final extinction of Internet Explorer 6 (and 7). I was almost sure that IE 8 wouldn’t give me any major troubles like unsupported basic CSS or JS or HTML. And I was very much surprised.

I typically design and develop the initial code in Firefox and it works out of the box in Chrome. It even often works in Opera with slight fixes (though they tend to be getting more numerous and grow with each its major release). Of course it has almost never worked in Internet Explorer before right away. Below I’ll list some things I’ve stumbled across to remember not to trigger the same backlashes twice.

Note that I won’t mention hiccups fixed with ie9.js (like HTML 5).

CSS

«…»

1. Computer
2. JavaScript

Add slashes & strip slashes in JavaScript

JS equivalents of PHP's addcslashes() & stripcslashes().

Long story short – the following functions are drop-in alternatives of the two PHP C-style string slash helpers:

Usage:

1. Computer
2. JavaScript

JavaScript mug

Now that’s incredible. Sure, WAT is something that can make you giggle but the riddle below far surpasses it.

Just run this (by CamiloMM):

Try to guess what it will output. And no, it’s not composed of «undefined» letters in specific order, it’s more.

(For those unfamiliar with JavaScript – yes, it’s valid code, even +[] which I was surprised to discover myself.)

1. Computer
2. HTML

CSS-only thumbnails & JS-spiced dragging

See my follow up article: «Making pattern borders with CSS 3».

One day I was absent-mindedly studying the list of CSS properties at W3Schools when it occurred to me that there were really useful CSS 3 properties that were actually supported by modern browsers (by that I mean FF 3.6+, IE 8+, etc.).

Below is an example of using (relatively) new background-size and background-position properties to allow various modes for displaying thumbnails – with pure CSS. And added a bit of JavaScript you can let the user view cropped parts of thumbnails by rolling the mouse inside the image box.

As you can see, by varying width and height of the image container as well as its background-size and background-position we can achieve different effects: make thumbnail larger or smaller, change whether it fits into its dimension box or fills it and so on.

«…»

1. Computer
2. JavaScript

Calling constructor with custom number of arguments

Cross-browserly instantinating an object with an array of arguments.

There are rare cases when you need to construct an object but don’t really know its exact arguments. This usually happens in some sort of factory methods.

Luckily in JavaScript constructor is essentially a regular function that’s ran in the context of newly created empty object. In other words you can write jsnew (function () { }) – first new allocates memory and setups other stuff and then it calls your function (albeit it’s anonymous here) as if you did jsctor.apply(newlyCreatedObject, arguments);.

This means we can do this (I have found the solution somewhere in the Internet but forgot to save the link):

Once executed Firebug will show 3 parameters given to MyObj (the constructor) – numbers 1, 2 and 3.

«…»

1. Computer
2. JavaScript

Automatic binding of JavaScript this

Tired of tracking what 'this' means?

JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. Okay, I won’t take away this entire article on this keyword but what it says is true. JavaScript is nice (better than PHP!) but some of its concepts, in particular prototyping inheritance and the this keyword look confusing at first (and, honestly, at second glance too).

Quick intro: unlike most other OOP languages in JavaScript methods are not bound to the particular instance of object they’re defined with. Methods here are just functions, or even anonymous functions, and can be assigned to objects just like you set their properties to integer or strings.

While this «unbound» this looks like a neat idea when working with document tree (you can have one method performing tasks for any number of DOM nodes without changing its code since this is automatically adjusted to match the calling node) when using JS in an «industrial» business logics it provides more of a hassle than usefulness.

Long story short: you can make this always point to the constructed object instance. How? Simply add the code to the end of class constructor:

«…»

1. My programs
2. Web

FileDrop – cross-browser JavaScript Drag & Drop file upload

Self-contained cross-browser pure JavaScript class for Drag & Drop and AJAX (multi) file upload.

FileDrop is a lightweight JavaScript class for easy-to-use file uploading that works out of the box.

Features:

• Cross-browser – supports Firefox 3.6, Internet Explorer 6, Google Chrome 7, Apple Safari 5 and Opera 11.61 (Opera 12+ supports native drag & drop).
• Self-contained & tiny – just 490 lines of code; 8 KiB when minified, 3.5 KiB when gzipped.
• Various callbacks – on progress, on done, on error and on many other events.
• Graceful degradation using IFrame fallback.
• Multiple file selection.
• Any number of independent FileDrops.

FileDrop uses some ideas and solutions from qq FileUploader (Github) which is similar to FileDrop but almost 3 times as large (although, perhaps, more elaborated).

«…»

1. Computer
2. Thoughts

No more global variables – the Arguments object

The power of Arguments - store variables in your function's "static local scope"!

JavaScript is an unusual language in several ways: it doesn't have class tree and inheritance as traditional languages do, it's pretty forgiving to syntax errors sometimes (optional var, optional semicolons, etc.).

Among all this there's one thing rarely thought about. Each function is an object – it's more or less known fact. But each function also receives an arguments objects – which is not a simple array (you can find references at Mozilla DevCenter: arguments, Array).
It, however, behaves like one because it has the following array-like properties:

And here's how you can convert arguments into a real array:

But this is a child's play. Argumens has more properties than that!

«…»