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

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

Internet Explorer and most CSS-compliant browsers (e.g., Gecko-based ones—Opera has one quirk which Stefan M. Huber has documented) treat the styling of horizontal rules differently. Essentially, IE treats them as inline elements, while the others treats them as block elements.As such, to colour it red…

saila.com: How do I style an hr?

Styling an <hr> is a titanic pain.

Tags: html

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

CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously. If you like this, you may be interested in our browser compatibility service, Litmus. Yes, that’s why this software is free!

CSSVista - Edit your CSS code live on Internet Explorer and Firefox - Litmus

Does this support conditional comments, or will it force people to reintroduce browser hacks into their stylesheet workflow again? (Side-by-side -> IE hacks to get it working -> pull IE hacks out and build IE-only stylesheet)?

Edit: Yep, it does support conditional comments. Nice!

technorati tags:css, cssvista

CSS+Javascript power. Fancy menu. Really nice Flash look-and-feel in JavaScript, which means “I have something that looks cool that will degrade gracefully.” Very bouncy and round. I was right when I thought it used the famous Sliding Doors technique for its stretchiness, which means I follow A List Apart too closely. (via Molecular colleague Paul Irish.

technorati tags:mootools, menu, stolenlink

For all you obsessive designers that feel the need to style every possible form input (thus making the web browser look and feel exactly like the Mac’s Aqua interface).

File inputs (
) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

Styling File Inputs with CSS and the DOM // ShaunInman.com

I’m all for making things pretty. However, users have been trained for a long, long time to expect things like file inputs to look and feel a certain way. Are our designs worth retraining users or bending users’ expectations for how these things should behave?

(via Ajaxian).(Also, the top Flash thing on that site with the trick makes me sea-sick, in a “wow, that’s cool” way. :-)).

technorati tags:design, forminput, css, javascript

set rsCSS = db1.execute("select * from tblCSSClasses")

That line alone should gives a great peek into how that application handles Cascading Style Sheets in such a disastrous manner.

Overflowing Style Sheets - Worse Than Failure

Well, this is one of the worst disasters I’ve seen in a long, long time.

technorati tags:wtf, css

I dug up this blog post while trying to tweak Aptana’s performance on my (old) laptop. Check out the first comment to the post; following those recommendations really sped up and improved Aptana’s performance. Definitely worth trying, especially if you’ve got an older machine.

technorati tags:aptana, eclipse