Stoyan from Yahoo! presents some surprising facts.
Image optimization for the web: common mistakes
Leave a reply
Category Archives: Web
JavaScript: encodeURI()
Internationalization is no simple mattertm
JS URL Encoding
Sometimes we want to pass a free-text user-input string in the URL, which may be at any language. At work, we used the escape() JS built-in function to make a UTF-8 legal URL. *WRONG*
PHP Session locks
At work we have a page that loads multiple PHP scripts (in parallel), using XMLHttpRequest.
Later, we noticed that if one PHP script responds very slowly (i.e. when we put sleep(120) inside), all the others are waiting till the first one finishes loading. In other words: the load is serial, not parallel!
What? Why?!
A little research revealed an interesting phenomena: PHP session locks the session file till the session is closed. By default, the lock starts with session_start() call, and ends at the end of the PHP script!
HTML 5 canvas tag
HTML 5 introduces the Canvas element, which enabled javascript "free drawing". Check this cool canvas example.
Apparently it's already supported by all modern browser except IE - which needs the Explorer Canvas plugin.
Joseph Smarr talks about High performance JS
Joseph Smarr gave this great talk [~50mins] at Yahoo, which contradicted many myths that I had about 'what is right' in JavaScript. (i.e. using InnerHTML is way faster than manipulating DOM)
He's cool.
How can a parent DIV get the child DIV's width?
In the following code, I wanted the parent div to expand to the size of the child. But it doesn't work this way:
<div id="parent">
<div id="child" style="width: 500px">Child Text</div>
</div>
Instead, the parent takes 100% of the screen width and does not shrink to the width of the child. Quite a long googling revealed some interesting facts:
- div is a 'block', so it always tries to take all available width. (unlike a span which is 'inline')
- Using 'float: left' in the parent, makes it "shrink wrap" over the child, thus not trying to take all available width.
adding 'clear: both' will prevent the float from causing the other blocks to join the same line. - If the parent is a <td>, then the "shrink wrap" effect takes place.. (Also with <div display="table-cell"> on firefox, but not in IE)
Click to activate – no more?
Back then, Microsoft was forced (by some lawsuit) to require a mouse-click to activate each ActiveX control embedded in a web page, even Flash. This was implemented as an IE6 update, and also built-in IE7.
No need to explain why it's really annoying for users.. Ok, I'll explain anyway: think of an ActiveX control that contains buttons. Clicking the button first only activates the control, and another click is required for the button to be pressed..
Most sites used some types of hacks to overcome this.
So now Microsoft solved that law-issue (lots of $$$$s I guess) and they're about to disable the click-to-activate "feature" and bring everything back to the way it used to be, this time- legally.
However, there are already millions of computers with the "click-to-activate" IE version, and some of them won't install the update.. This means that I'll still have to use one of the hacks for the next few years. Annoying.
Session cookie preserving; other browser window/tabs
Many websites use session-cookies (PHP session installs such a cookie, for example). Session-cookies have expiry time of zero, and the browser usually deletes them after closing its window. This is very useful for a 'log-in' session, like in your bank account, gmail, etc.
So all browsers delete the cookie as you close them, but what happens when you open a new browser window or tab? Does it also respect this temporary, session cookie? If you're logged in to gmail from one window, can you open a new browser window with another gmail account?
The answer is not surprising: that depends on your browser.
'onmouseout' event of a container div
Today I wanted to catch a 'mouse-out' event in a div. Every time the mouse leaves the div, I want to call a function So.. there's the onmouseout event which, at first sight, does exactly what I needed.
<div id="parent" style="height: 500px; width: 500px;" onmouseout="alert('out!');">
<table id="child"><tr><td>child text</td></tr>
</div>
HOWEVER - if the div contains child elements (it usually does.. like above example), when mouse moves from the "bare naked" div directly to its child element, an 'onmouseout' event is called from the div, while the mouse is still inside the borders of the div. And the worst news is that it's not a bug! 🙂
So straight to the sad solution: onmouseleave event does exactly what I needed, but isn't standard and is IE-only (same goes for onmouseenter). As Rick summed it in the post which solved my issue today: "Bummer."
So bummer, but the good thing is that among the reads, I've found this must-read article which talks about the order browsers handle the events, and how to deal with it.
Time zones – how to do it right
After some struggling with how the Daylight Saving Time change affected my code, I realized that one shouldn't mess with the time zone offsets on his own (i.e. Add or Subtract hours manually from the UTC time), because underlying libs already implement it - and probably better (yes, including DST changes, works flawlessly!). Here are the new simple rules I set to myself:
- Absolute time: Store dates only relative to UTC (usually [milli]seconds since Unix epoch or another reference date. The familiar Timestamps are measured as UTC and not as Local Time!
- Absolute-to-Local: When local date matters, convert UTC-to-local (and vice versa) using the already-existing methods:
- PHP: date() and many, many other PHP date functions
- JavaScript: Date object methods
- Libc and Perl: localtime() and friends
- MFC: CTime object (Don't trust me too much for Windows tips though)
- Absolute-to-somewhere-on-the-globe: instead of the OS-defined local time zone settings, PHP seems to have a way, but for JavaScript I haven't found anything unfortunately.
Bottom line: stick to UTC as much as you can, it's good for you.
Trivia line: Morocco is GMT+0 and has no Daylight Saving Time (so it's identical to UTC). Good for them, eh?