Chris Bateman

Blog

Old Particle App

Access it here: Bright Lights.

A couple years ago, I built an app for the iOS app store using HTML5 Canvas. It was there for a year, and made a very modest profit, but it was really too silly and simple to be worth keeping there.

I’ve been meaning to put it on GitHub for a while, and I finally got around to it, so here you go. I made a number of modifications to make it suitable for use on the open web, and it’s also hosted here now. It’s a couple minutes worth of fun for kids, you can add it to your home screen, and it works offline.

With an app like this, there’s just one notable drawback to having a “home screen app” instead of a native app – you can’t prevent the notification and control centers from popping up when your finger goes past the top or bottom of the screen. Oh well. Also, you can’t remove the status bar, though that’s not a huge deal.

Impetus.js

Long story short: I made a simple JavaScript utility for adding momentum to anything — Impetus.js.

Long story: I used to play around with creating panoramas (you know, before smartphones made it easy to make bad ones), and I was wondering if you could display a spherical panorama using CSS 3D transforms. Turns out you can. I wasn’t the first to come up with it, but it was really fun to figure out. You can check it out here: Spherical.js.

I built it to work on touch devices – but the first time I tried it, it was clear that I’d need to add momentum to the touch interaction. Momentum is so ubiqitous in touch UIs, that anything without it feels really unnatural. I started coding momentum into the panorama code, and then realized that I was solving two separate problems, so I abstracted out the momentum code, and Impetus was born.

You give it an area to listen for touch or mouse events, and it gives you the x and y values plus some momentum. That’s it. It’s not for scrolling, it’s not for touch carousels — it’s just simple momentum. I have no idea if it’ll be useful to anyone, but if you have any feedback or suggestions, please let me know!

The code is on Github and it’s on Bower as “impetus.”

I Still Love Firefox

I switched to Chrome as my primary browser almost right after it was released. The UI was minimal and fast, and I loved it. And the developer tools matured at lightning speed, so it wasn’t long before I dropped Firefox for development too. And Firefox was relegated to the status of “testing only,” right alongside IE.

But here’s the thing: I really want Firefox to succeed. This has been thrown in to sharp relief lately, as we’ve seen Chrome/Blink start to throw their weight around (also: meme version).

So here’s why I still love Firefox and Mozilla.

Firefox is 100% open source. You don’t have to wonder what they’re doing with your data – you can see for yourself.

Firefox stuck their neck out for unencumbered video formats. And they’re doing the same now, fighting against DRM.

Their documentation is second to none. From JS to CSS to DOM to HTML5 to helping you fix the code you wrote for other browsers. (Oh, and don’t forget to click on MDN in your search results, not the site that shall not be named!)

Mozilla is working on all sorts of fantastic projects to help move the web forward. There’s Servo, Firefox OS, and asm.js, among many others.

Mozilla’s mission is to, “promote openness, innovation & opportunity on the Web.” And their manifesto is even better.

So I’m going to put my money where my mouth is and switch back to Firefox for browsing. I’m not quite ready to switch for development yet – but the dev tools have made some great progress, and I’m expecting more to come.

I love Firefox and Mozilla because I know I can count on them do do what’s right for the web. And I don’t know if I can say that about any other browser.

Stats for 2013

Well I don’t think I’ll do this again, but, to continue last year’s tradition…

In 2013, I added a paltry 6 posts to cbateman.com. Page views increased to about 26,500, in large part thanks to my Chrome experiment.

International traffic also increased – the top countries were: USA (27%), UK (7%), India (6%), and Germany (5%).

San Antonio lost its pole position on the top cities list: London (1.9%), San Francisco (1.3%), Paris (1.2%), and New York City (0.9%).

82% of visitors came from a desktop computer, 13% from a mobile device, and 10% from a tablet.

The top search query was “javascript webcam” followed “webcam javascript.” I currently hold the top Google result for “easeoutbounce css3.” I’m still sore about losing the top spot for “IE getUserMedia” to caniuse.com and MDN (just kidding, I love you guys).

I am going to post more this year. Really.

High-DPI Media Queries and Standards

If you’re doing “retina” media queries on your site and they look something like this:

@media (-webkit-min-device-pixel-ratio: 1.5) {

you might not be coding with standards. And maybe you thought you’d add some more versions, just to be safe:

@media (-webkit-min-device-pixel-ratio: 1.5),
       (-moz-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5) {

The bad news for you is that neither -moz-min-device-pixel-ratio nor min-device-pixel-ratio have been implemented in any browser — and neither will they ever be. Because it’s not a standard; WebKit came up with it on their own.

Okay, so actually, it’s kind of a trick question, because Mozilla actually did go ahead and implement it — but they named it min‐‐moz-device-pixel-ratio. Either way, you didn’t do your homework.

Back to standards. The media feature you’re looking for is resolution. Basically, it sounds like WebKit didn’t like the original unit options for resolution (dpi or dpcm), so they made their own thing. In the meanwhile, the W3C created a new unit (dppx), and everyone is happy now. You can read more about it from the W3C here.

So, with a little help from MDN, a good high-DPI media query should look something like this (you can add min‐‐moz-device-pixel-ratio if you want to support Firefox 15 and older):

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx)

Cool. So don’t forget to be careful when using vendor prefixes or unprefixing them. And for crying out loud, use the standards!

By the way: I recently learned that you can accurately simulate high-DPI screens in Firefox! Just go to about:config and change the value of layout.css.devPixelsPerPx.

No comments yet. Don't hold back.