IE6 in SP3 has the same version of jscript (@_jscript_version) number as IE7. (5.7 in this case). If you’re using jscript to target conditional compilation, heads up.

Tags: ie6, ie7, conditional compilation

Ever since Awesomebox closed down, I’ve been looking for a YUI-based lightbox script. Looks like I found it in Shadowbox. The best part: it’s completely library agnostic: you can use adapters to run it off any of the big libraries (YUI, jQuery, ext …).

It also aces the "hot lightbox opening animation test." Nice!

And on the side, a libary-agnostic app like this? About time! When are we going to stop seeing a billion different plugins in a billion different libraries and instead see one or two really great plugins that can run anywhere? I guess the limiting factor is the amount of time plugin authors can spend here. Wouldn’t a JavaScript library common architecture be something worthwhile: write it once, follow the plugin standards, and run it anywhere? How about it, library people???

I’ve been meaning to mention this for a while, but was waiting on a couple post-launch releases that added some “extras” that I liked.

NikonUSA.com was re-designed and re-built by my company, Molecular. We launched in late February and this was a total overhaul: new CMS (Interwoven LiveSite/TeamSite), new design, and plenty of custom code. I built the entire front-end here, from the overall architecture to writing XSL to build HTML to build pages.

There’s lots and lots of custom stuff I wrote from “Quick View” overlays to DOM stylesheet manipulations, and plenty of YUI, awesomebox, and yCarousel to go around, too.

Cool stuff to look for:

• “Product Detail” page— This one mashes up YUI’s tab component, custom flyout code that I wrote, ycarousel, awesomebox for lightboxing images/swfs/video, and all kinds of loading magic. The D300 serves as a nice example. Take a look at that “Media Bar” right there! Plenty of jazzy stuff.
• Pages I designed: the low-bandwidth homepage and search results page.
• JavaScript-to-XML-to-Flash (built by Alisdair Mills) on the homepage.
• Product views, sample photography, and other images being cranked out by ImageMagick scripts that I wrote (ah, Perl!).
• Liberal uses of iepngfix for good old IE6.
• Plenty of tricks (view source) to add in browser-specific stylesheets and extra print media targeting.
• The CSS-only top nav. Tried and true but always nice to show as cross-browser.

I’m most proud of being able to wrangle some nice, semantic HTML in there. The “AJAX” features feel natural, too, something I always like to do in an app: the lightboxes and carousel presentation makes sense and feels right in context; it doesn’t feel “bolted on”, like these flashy bits sometimes do. I can also now give dissertations on Flash/DHTML layering, ImageMagick, and many other cool things.

I may add a few posts describing bits and pieces of functionality in the future; the front-end here was huge, and I built a lot of stuff (and trained users, and designed pages…). But, it’s still a launch!

Tags: nikon, nikonusa, design, build, launch, javascript, html, flash

Here’s an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.We also have MIDI music embedded as base64-encoded data: URI’s. No music for IE, though, and it seems all the other browsers each have different, minor problems with it, but it sort of works.

nihilogic: Super Mario in 14kB Javascript

!!!

Makes me think I should: a) be doing more with Canvas and b) be doing more with encoding data as strings.

Tags: javascript, examples, !flash

JavaScript is the world’s most misunderstood programming language, and even if we use them from about 10 years, there is still confusion about the basis of its prototypal inheritance nature.

JavaScript Prototypal Inheritance - My 5 Cents From Web Reflection

Andrea Giammarchi is a very smart guy, and this is a very good read of the inner-workings of JavaScript’s prototypal inheritance structure.

Tags: javascript, prototypal inheritance

My favourite AJAX ide Aptana still doesn’t support YUI 2.5 (latest stable version supports 2.3.1) so i decided to write a plugin for YUI 2.5.0,.. and i would like to share it with all of you guys … just download the YUI 2.5.0 plugin for Aptana and drop it in the plugins folder of Aptana, and restart Aptana.

YUI 2.5.0 plugin for Aptana | Gaurav Verma

Since Aptana’s own team is a bit behind, Gaurav Verma put together this little YUI 2.5.0 helper for Aptana. Now you can create a glorious YUI 2.5.0 project from the Aptana project wizard and enjoy all the benefits thereof.

Tags: yui, aptana

One method deserves special attention: elementFromPoint(). This method expects two coordinates and then reports which HTML element is located at these coordinates. This is a godsend for drag-and-drop scripts. If the user drops an element, get the mouse coordinates and use this method to find out which HTML element is located at these coordinates.One catch: you first have to temporarily hide the dragged element, because otherwise elementFromPoint() would always report the dragged element — after all it itself is the topmost element under the mouse.

Google Reader (1000+)

PPK reports on the new W3C CSSOM spec. I’ve wanted a getElementFromPoint() method forever.

Tags: dom, css, javascript

Ernst & Young have just launched a site that I had a hand in building. EY Insight is a college prep tool for students interested in a career at EY. It’s the closest I’ve seen to a true JavaScript and Flash hybrid, mixing them together so well that you can’t really tell them apart. And, this is true high-fidelity JavaScript animations sitting on top of full-screen Flash video: they are damn smooth and look damn good all the while!

Why is it cool? It’s one of the first sites I’ve seen that mashes up JavaScript (in this case YUI) and full-screen Flash video. There’s some pretty complicated Flash/JavaScript interaction going on, and I really haven’t seen too much like it. (Thanks SWFObject and Alisdair Mills). This is the biggest YUI app that I’ve launched, and brings a nice, high profile to how much fidelity you can get out of a JavaScript app.

What did I do? With the design/UX team, I helped drive the interaction design for this one, especially the Picture Yourself app. Really cool, snappy, sensible interactions there: this is how to make a quiz "not boring". I also did a lot of the JavaScript heavy lifting (a big chunk of the JavaScript back-end and the Object modeling) as well as the bulk of the Flash / JS interaction work before helping David (below) when I could spare a minute or two.

Props to David Tong of Molecular’s San Francisco office, who was the sole full-time engineer on the project for doing some really nifty work.

Yes, I snuck in conditional compilation on this, too. Another interesting note: IE6 has some interesting issues while trying to destroy Flash objects and Flash streams. Seems to orphan them a lot. This might be worth another post in the near future.

Tags: yui, launch, production, ajax, flash, video

Over at the day job, I ran into a situation where I couldn’t use conditional comments to insert my IE-only stylesheets into the Document. In fact, I didn’t have access to the <head> of the Document at all.

Without any access to the <head> at all, how can we add a stylesheet to the Document? Well, we can do it improperly, by using JavaScript’s document.createStylesheet method to cram our CSS into the body of the Document. Is this where it should go? No. Does it work: yes.

What about making that IE-only? Conditional compilation. By placing the document.createStylesheet call inside some conditionally compiled JavaScript, we’ve achieved the same effect as our conditional comment would. But, what about targeting a specific browser?

With conditional compilation, we have access to the @_jscript_version property of the browser. IE7 uses Jscript version 5.7 and IE6 uses 5.6. Knowing that, we can create an IE6-and-lower-only stylesheet with a one-line test:
@if (@_jscript_version < = 5.6) document.createStylesheet('/path/to/ie6andlower.css');. Voila! A working structure.

Put it all together, and we have a solution that looks something like this:

        /*@cc_on
            document.createStyleSheet("/css/all_ie_fixes.css");
            /*@if (@_jscript_version < = 5.6)
                document.createStyleSheet("/css/ie_6_and_below.css");
            /*@end
        @*/

Is it pretty? Nope, but it works.

Tags: crossbrowser, conditionalcompilation, ie6, ie7, stylesheets, conditionalcomments

According to this post on the YUI group, the YUI team will be releasing a charting component. Based on YUI’s Datasource, the new control will ultimately render charts in Flash.

Most high-quality charting apps (MeasureMap / Google Analytics) run their charts on Flash/Flex as it is. I’d love a skinnable, charting tool that would let me write JavaScript and let the API fill in the details, though. (It would also save me from buying Flex + Flex Charting tools. ) I’ve been looking for an OSS JavaScript-based charting package forever; hopefully, this will fit the bill.

I wonder if this is a collaboration between the YUI team and the still-new Yahoo! Flash team?

technorati tags:yui, javascript, charting