Cross-browser, Cross-platform Lightbox

May 5th, 2008

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???

It’s (Been) a Launch!

May 5th, 2008

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: , , , , , , ,

Now! … with CakePHP

April 16th, 2008

I’ve spent the bulk of the day getting CakePHP up and running on the www-side of the amodernfable.com domain. Why? Because I wanted to use a framework to handle things like integrating a database-driven portfolio with some static content and learn more PHP (and the Cake framework, which I’ve heard nothing but great things about) in the process.

The CakePHP installation here on Dreamhost was a snap. No real configuration necessary other than setting up my database config file to point to the right spot. I was expecting worse (I know I’ve seen some nasty stuff happen when I tried to get Ruby on Rails up and running before, but this was simple and easy).

Overall thoughts on the framework (from a couple hours’ use): if you’re used to Rails, you’ll know how things work or where they go right off the bat (there are some differences that will catch you, such as default layouts being enforced right off the bat, and I like the RoR approach better that way). Setting up routing was a bit easier than my last Rails attempt. Documentation is easy to find with the right Google search. My object oriented PHP is a bit on the slim side, but, when you’ve programmed enough, PHP is a quick learn; hopefully, the controllers and models will give me more experience there.

It’s nice to have a framework in place to speed things up. Also, I’ve built in Cushy CMS support right into my views, which should make it a snap to update things. I really dig Cushy for doing one thing (managing small blocks of content) very well. Let’s see how well it plays with Cake. (And, there’s two plugs in a single post!)

Server-side jQuery and more cool tricks with Aptana Jaxer | Aptana

April 14th, 2008

Above is the contents of the HEAD element. Just the usual suspects, setting the title and some simple CSS stuff. The only interesting part is at line #3, where we load the jQuery library on the server, because we intend to do some serverside DOM manipulation before the page is sent to the client.The runat=’server’ attribute tells Jaxer to load this javascript library on the server.

Server-side jQuery and more cool tricks with Aptana Jaxer | Aptana

Yes, please. Now, where can I get an environment set up with Jaxer so I can try this?

Why do I think server-side JavaScript will only take off when ECMAScript 4.0 becomes reality and brings with it explicit class declarations, packaging, imports, etc? Those things would make it feel more like those languages Java/.net folks use everyday, and could make them sit up and take notice. Yes, it works fine now, but it’s all about perception.

Tags: ,

cabel.name: Japan: URL’s Are Totally Out

April 11th, 2008

Within minutes of riding on the first trains in Japan, I notice a significant change in advertising, from train to television. The trend? No more printed URL’s.

cabel.name: Japan: URL’s Are Totally Out

Really good article. Highlights the how the exhaustion of good, descriptive domain names leads to a logical alternative: providing accurate keywords that users can type in to get to your site.

How many domains have you thought would be perfect but are already taken? Why even bother trying to haggle with a domain squatter when you can build your relevance in a few terms and build your advertising campaign around getting users to type in these keywords?

Plus, here’s your instant top-of-mind awareness: you’re now the brand people think of when they’re Googling your niche.

Tags: , ,

nihilogic: Super Mario in 14kB Javascript

April 9th, 2008

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: , ,

Google App Engine - Google Code

April 8th, 2008

Run your web applications on Google’s infrastructure.Google App Engine enables you to build web applications on the same scalable systems that power Google applications.

Google App Engine - Google Code

Well, this is just excellent. I wonder how well it performs versus Amazon’s S3/EC2?

Tags: ,

pi-js - Google Code

April 8th, 2008

pi.debugger is a cross browser web development tool allows you to examine web page’s structural and debug with console.

pi-js - Google Code

A formidable entry into the debug toolbars. I played with it for a few minutes and it doesn’t appear to have "live edit" of the DOM or CSS like Firebug (and to a lesser extent IE Developer Toolbar), but it does have a really, really nice console.

Recommendation: keep Firebug and add this to IE and Safari; now you have a console in all your browsers. Great app.

Tags: ,

Execs & Accounts for Friday, March 28, 2008 - ClickZ

April 4th, 2008

Ernst & Young collaborated with Molecular to build the site “Ey Insight”. The student career microsite includes personalized tools for prospective employees.

Execs & Accounts for Friday, March 28, 2008 - ClickZ

I’m slightly more famous…

Tags: , ,

Google + April Fool’s

April 1st, 2008

Google’s gone wild on April Fool’s, just like they do every year.

This is why everyone loves Google. How many extra eyes are going to be on their sites today and how much extra positive "good will" will they receive (from users, bloggers like me, etc.)?

The moral of the story: Devote some time to having fun. Building things "just for fun" adds whimsy to a brand; this is the "stickness" or traction that many major brands lack. This is why Google is "fun and cool" (and, by proxy, popular) and a company like Microsoft is a "stoic corporate giant."

It never hurts to toss some money into making fun things happen on the web. (And, btw, RickRolling everyone on YouTube is the greatest Internet April Fool’s prank I’ve ever seen.)

A (partial) list of Google’s April Fool’s Day pranks

Thanks for the delightful experience, Google!

Tags: , , ,

I'm Reading…
Search This Site

AddThis Feed Button

Need great hosting?

Categories