JavaScript

warning: Creating default object from empty value in /home/kourge/kourge.net/modules/taxonomy/taxonomy.pages.inc on line 34.

Object Destructuring Shorthand: New in Firefox 3 Beta 3

One of the changes in Firefox 3 Beta 3, which has just been released, brings the object destructuring shorthand to JavaScript 1.8. Why would you need object destructuring in the first place? Commonly when you need to pull certain values out of an object structure, as demonstrated here. The introduced shorthand sprinkles a bit more of syntactic sugar into object destructuring assignments. Read on for concrete examples.

Spellify: How Not To Use Prototype

About two and a half weeks ago I wrote about jQuery being underutilized. That's nothing compared to Spellify, the absolutely perfect and horrendous example of how grossly unutilized Prototype is. Read on.

Flayout: Flexible Degrading Layout

Some time ago, I read an article that described a smart dynamic layout mechanism for web pages that would gradually hide and collapse certain elements of the page as the browser window is resized. Unfortunately I can no longer find the article (I'd appreciate it if someone points out where it is), but I thought the idea was great. In this era of awesome JavaScript libraries, it's trivially easy to implement this mechanism. So I took the liberty to do just that on this site.

On a resize event, it would check the viewport width and height, and, depending on what range it falls in, it would hide or collapse elements accordingly, gracefully degrading the layout. A technique that I dubbed "intelligent switching" was used to determine which range the width and height falls in, elegantly. To me, that means not resorting to a chain of if statements. I'll talk about intelligent switching in another article, but for now, below is the list of ranges and what happens when the viewport dimensions fall in that range.

When Width Is Below (px) This Happens
875 Right sidebar disappears.
700 Service links disappear.
550 Pine trunk on the right collapses. The navigation and breadcrumb bars disappear.
When Height Is Below (px) This Happens
500 Breadcrumb bar disappears. Navigation bar shortens and floats to top right. Header region collapses.

When the viewport dimensions move out of range the changes reverse. Flayout is working right now, live on this site, so try it out and see for yourself how it works. This has been tested and known to work under Firefox, Opera and Safari, and it isn't working under Internet Explorer, yet. I have yet to debug this under Internet Explorer. Someday, I'll do it.

Chyrp: How Not To Use jQuery

Chyrp, a recently dugg blogging system, looks like a very good and clean blogging system. I strongly agree with Alex's (the author) philosophy about Ajax: no overajaxifying.

Because we've all seen AJAX abused too many times, Chyrp is made to use it only where it works good. For example, creating a new post uses AJAX, because it's already definite where it's going to end up (the content, with all the other posts [unless you made it a draft, in which case it goes in to "Your Drafts" and tells you so]). However, for creating a page it uses regular old form submitting. This is because pages are meant to be their own section of the website. There's no point in having it fade in to the content or do anything fancy, because you'll end up going to its own page anyway.

Chyrp uses jQuery; a good choice. Inferring from most of the Ajax-pushing code, I can see that Alex has made the JavaScript as clean as possible. There are still some room for improvement, however, as seen in this:

Synthetic Division Heavylifter

Synthetic Division Heavylifter is a tool available in JavaScript, Python, Ruby, and Common Lisp that performs synthetic division. Synthetic division is a process that is used to speed up the factoring of polynomials. However, it is still a hassle to utilize when the first term or the last term of the polynomial has a large number of factors, since the possible number factor candidates would increase.

Regular Expression: Match Unicode Block Range

This is an online tool that builds a JavaScript regular expression that matches characters that fall in any number of specified Unicode blocks.

Firefox 3: getElementsByClassName

John Resig (author of jQuery who recently joined Mozilla Corp) wrote about Firefox 3 will have native support for document.getElementsByClassName(). This is what almost all web developers want; almost all Ajax libraries implement this.

Libraries: On Size and Usage

As beginners, people who write Ajax applications (for the first time) tend to blindly slap on the Prototype JavaScript framework because of its fame and popularity. What then follows is the usual complaining on Prototype's size (over 60 kilobytes).

Regular Expression That Matches RegExps

Being bored, curious, and redundant all at the same time, I thought: "What if you want to check, in JavaScript, to see if a string is a JavaScript regular expression?" The obvious answer is, in a sense, self-referencing, because you'll have to check with regular expressions too. So basically, a regular expression to check regular expressions in JavaScript. Ugh.

Prototyping: Not a Flaw

A Slashdot article, titled "AJAX May Be Considered Harmful", claims:

87C751 writes: "Security lists are abuzz about a presentation from the 23C3 conference, which details a fundamental design flaw in Javascript. The technique, called Prototype Hijacking, allows an attacker to redefine any feature of Javascript. The paper is called 'Subverting AJAX' (pdf), and outlines a possible Web Worm that lives in the very fabric of Web 2.0 and could kill the Web as we know it."

Syndicate content