# The CSS Setup

The theming of this particular project uses CSS custom properties. For simplicty I’m going to set up two named colors and then use two theme-specific custom properties to apply them in the default light theme and the dark theme:

:root{–color-dark: #222;–color-light:rgba(255, 255, 255, 0.5);–color-background:var(–color-light);–color-foreground:var(–color-dark);}@media(prefers-color-scheme: dark){:root{–color-background:var(–color-dark);–color-foreground:var(–color-light);}}

# Applying the Theme to Canvas

To get the theme into my canvas-related code, I set up a theme object to hold the values:

const theme ={};

Next, I wrote a function to pull in the theme colors using window.getComputedStyle(). After defining the function, I call it immediately to populate the theme object:

functionimportTheme(){theme.foreground =window.getComputedStyle(document.documentElement).getPropertyValue(“–color-foreground”).trim()||“black”;theme.background =window.getComputedStyle(document.documentElement).getPropertyValue(“–color-background”).trim()||“white”;}importTheme();

I set this up with just two theme colors, but you can import as many (or few) as you like. Be sure to set a sensible default or fallback for each color though, just in case your theme’s custom property names change.

With this in place, I can set my canvas animation’s colors by referencing them from the theme object. For example:

context.fillStyle = theme.foreground;

# Keeping Things in Sync

The final bit of magic comes when you add an event listener to a MediaQueryList:

const mediaQuery = window.matchMedia(“(prefers-color-scheme: dark)”);mediaQuery.addEventListener(“change”, importTheme);

Here I’ve used matchMedia() to get a MediaQueryList object. Typically we use the matches property of this object to establish whether the media query currently matches or not. A lesser-known option, however, is that you can attach an event listener to it that will be triggered whenever the query’s status changes. So cool! With this in place, the canvas contents will update whenever the user’s theme changes. Here’s an example of that:

# Demo

I put together a quick demo of this in a fork of Alvin Shaw’s Canvas Sine Wave Experiment:

Hopefully this is helpful to someone out there. Happy theming!

Great work Alla!

When we were approached to work on this project several months ago, the specs for the creation of a Chrome app were vague at best. We really had no idea what made a “Chrome app” different from a run-of-the-mill web app or even an HTML5 app. All we knew was that the rendering and JavaScript engines were the same for Chrome apps and web apps, but that Chrome would offer some additional “benefits” to apps built for it. What they were, however, remained a mystery.

Our client knew they wanted to leverage the bits of HTML5 and CSS3 that Chrome had implemented (and some the Chrome dev team had promised to implement soon, like 3D transforms), but hadn’t really come to any decision on what features would be included, or how the content would be presented. They just knew they wanted it to look amazing.

After throwing around several real-life metaphors, such as page turns and the like, we settled on the idea of dealing content from a magical deck of “survival cards”. Our goal was to do as much of the animation as possible using HTML and CSS, relying on JavaScript only when we absolutely necessary, so we could take advantage of the hardware-accelerated animations Google’s Chrome team promised us would also be available in the browser by the time the app store launched.

In building this app, we ran Chrome through its paces, uncovering a couple new bugs and pushing the limits of the browser. The project incorporates a lot of cutting-edge tech, including: CSS-based transforms, transitions and animations; web fonts; a client side database; HTML5 semantics; onHashChange events; and an application manifest. Many of these technologies are still in their infancy and finding a reliable, stable way to work with them has proven quite a challenge, but I think we managed to pull it off with only a handful of newly-gray hairs between us.

One final issue we ran into was that, when we started this project, you could build and even “compile” a Chrome app, but there was no way to install it because a beta of app store hadn’t even been built yet and was required for installation. We had no way of seeing how a Chrome app would behave differently from a web app. Our questions abounded, but there were few answers to be had. Would there be a location bar? Would there be browser chrome? How would links outside the app function?

We had to bide our time and build the app based on how we thought it would work and hope for the best until the app store was ready and we could actually install the app and test it out. Thankfully, as it turned out, installing the Chrome app didn’t really make it all that different from the web app. The only real difference was that, as a Chrome app, the Survival Kit was given a larger offline cache. Oh, and a smaller tab.

After the announcement and unveiling of the store yesterday, the interwebs were aflutter with opinions about the significance (or lack thereof) of Google’s choice to create such a store. Sure, the creation of a Chrome app was the impetus for this project, but for us the creation process was exactly the same as we’d use with any project: we built an amazing web app. In truth, I wish we’d had the time and budget to make it usable in any modern browser (unfortunately, that was beyond the scope of our contract), but I am encouraged by the fact that it is available on the web as well, which means you can visit it in any other modern Webkit browser.

Daniel will be posting a technical round-up of the project in the coming week and he’ll dig into the details of the project a bit more.

To check it out, go to a product page (the bizhub PRO 920, for instance) and click one of the links on the upper right of the focal image and watch the show (or you can go directly to a bookmark). AJAX is used to refresh the page content (with bookmarkable links) and then the “scroll and flash” takes over. Feel free to take a gander at the JS file to see how it’s done.

I have to give it up to Shaun Inman and Thomas Fuchs as it was their hard work that made this easy for me to do.

Update: It looks like someone has not taken proper care in managing these pages since I left Cronin and Company (where I had built the site), so not all of the links appear to be working (because their anchors have been removed… tsk, tsk). I’ve let Cronin know and hopefully that will be fixed soon.

From my day job at Cronin and Company, we’ve got Cronin’s “Grab Bag of Goodness.” As with most internal projects, this was a major rush job. I take no credit for the design (which was handed to me with no wiggle room), but when it comes to the CSS and DOM Scripting, that I’ll proudly take credit for. Use the code “9301″ to get in. Of particular note in this piece:

• Taking a page from Dan’s Bulletproof Logos, most all of the text is in (shock) images. Toss in the text as an alt attribute and with images and CSS off, you’re still golden. As this was a one-off, sIFR seemed like overkill.
• Ooh, check out that marquee. Brings back memories, doesn’t it. Well, this one’s a little different. The markup is an ul and each item is a li. CSS makes it all display: inline; and then JavaScript keeps reducing the margin-left of the first li by 2px until the absolute value of it’s margin-left is greater than the li’s width. That li is then plucked from the front of the list and appended to the end. Though I am not a big fan of scrolling marquees, this was a pretty fun experiment.
• Those animated icons you can click to make a donation are actually form controls. Originally, I had made them into custom submit inputs, but Safari’s inability to customize certain form controls made me abandon that element in favor of button. It’s a great effect too (IMHO).

Then there’s the Easy Designs holiday card. I will spare the commentary on this one with the exception of giving major props to Dave for building the game in a day. I’m pretty darn proud of it, especially since we pretty much went from concept to execution in a matter of days (yeah, procrastination’s a bitch). If you’re interested, you can see a rough approximation of the email that went out (our first Campaign Monitor mailing) or simply play the game.