Today’s Readings

The Google Developers Web Fundamentals series is a collection of really great reads and resources, and I really like their take on animation, CSS vs. JS.

From SitePoint, comes Five pretty useful JS APIs, especially for mobile.

Spaced-out is a cool menu toggle effect, but it fails pretty badly on my mobile; how about yours?

Points of Interest is a nice way to highlight sections of your website. What I really like most is actually the CSS look and effects. What I like less is that you have to add CSS classes to your mark-up, and the user cannot dismiss these highlights when “they get it”…

Just activated JetPack’s Monitor feature. No reason to think I need it, but I guess Monitor will tell me… ;-)

Nice little online SVG optimizer (unfortunately the author didn’t bother to make deep-links, so you’ll need to manually click the Optimise link at the top of the page). The savings on the example SVG are pretty impressive!

Stumbled across this MDN article on the MouseEvent whilst reading another article, and was surprised to see .altKey, .ctrlKey and .shiftKey… Somehow I was not aware these Boolean values were available… :-/

Memory Management Masterclass with Addy Osmani (LOVE that it is also captioned!). Nice live walk-through of a memory leak investigation. Slides also available.

Impulse is a really impressive JS library for creating some very common UI patterns. And performance is pretty good on the mobile devices I tried.

Are we finally at a point where we can start building things using IndexedDB? This Smashing Magazine article thinks we are. With a little polyfill help to proxy our code for WebSQL in older iOS, this is a pretty simple implementation, but it shows the strength nicely!

12 HTML5 tricks for mobile. Certainly not all necessary, but you never know what you’re going to need until you need it…

I’d add the HTML5 Page Visibility API into that list, though, great way to save on performance when tabs aren’t the active one.

Centering in CSS: A Complete Guide. You’ve just got to love , always so thorough… :-)

The concept of proportional design involves using percentage units for anything that contributes to “the combined width of the document” (width, margin-left, padding-right, etc.) and using rems for everything else (which, unintuitively, also includes max-width and min-width, since they help limit, but do not contribute to the doc width). This approach has some great benefits, give it a read.

I don’t know what your mobile testing situation is, but unless you’re as fortunate as I am and have literally hundreds of devices in a lab at work, this article on emulators, simulators and remote debugging might be pretty useful.

Must-Watch CSS: A useful list of must-watch videos about CSS. Indeed.

Haven’t talked about flexbox in some time… Well, here are a bunch of typical, annoying design layouts that are solved, rather simply, and all hack-free, using flexbox. So, enjoy!

And once you’re convinced and are finally ready to start coding your own flexbox layout, don’t. Let this incredible web-based tool do it all for you! Seriously powerful, and makes it so simple!! (Hint: Hover over the “workspace” area to get add/split controls, then click one area to adjust its settings in the left-column.)

And finally, in case all the hype and waiting for the upcoming Star Wars installment is just too much for you to handle, here is a little something to help pacify

Happy reading,

Today’s Readings

The last issue started with a classic game created solely with HTML & CSS. This issue starts with another classic game, but this time with just a sprinkling of JS.

A robotic butler (dubbed a Botlr) has started work at the Aloft hotel in Cupertino, California.

How long, do you think, until they start grumbling about lousy tips??

Humin is a phone app, on steroids! (Skip to the 4th paragraph, where the author starts talking about the actual app.) Humin automatically adds where & when you added contacts so you can later find them by searching for things like “met in New York last summer”; it “even does some clever work finding a photo for each of your friends, their work experience, when your next meeting with that person is, and even which friends you have in common.” Worth checking out!

Lots of developers use Git. At work. But how many use it home, for personal projects? I know I don’t. Setting up and managing your own version is not always easy. But Bitbucket might be the way around it!

I was not previously familiar with , but this video of his Effortless Style presentation from CSS Day is not only pretty entertaining, but suggests several CSS tips to allow editors to just write, and have their content just look good… (He really gets into the gist of the topic at about 6:40, but those first 6:40 do a really good job of setting the stage for his suggestions.)

And if you like that CSS thing, here are all the videos I could find from that conference:

offers a new tool for creating all the various icons you need with just a simple drag-and-drop and a button click. Handy!

Sticking with Christian for another tool, this one is called Make Thumbnails, and it does just that! Though, only a single crop at a time, you can customize the size, and since the whole thing is available for download, you could probably configure a set of crop sizes and have it return the lot.

smoothState.js lets you add really cool page transitions to your site, so users don’t have to deal with that flash of white page until your actual content starts appearing. The animated GIFs in the above demo are good, but the actual smoothState.js site is an even better demo of the transition effects.

And speaking of CSS animation, once your page has elegantly loaded, here are 22 CSS3 animations that will hopefully inspire you, or at least give you something to rip-off… ;-)

It seems to me that position: sticky is really what most people have wanted position: fixed to do all along… And while browser support isn’t very good yet, this SitePoint article shows how to implement it natively, test for support, and apply a polyfill when needed.

Sticking with SitePoint for a moment, shows 5 uses for a vertical media query. Good tips!

How well do you know your favicon? I’ll bet not well enough to get the correct answer for every question on this favicon quiz from

How do you get your sites to load faster? Download them before the user asks for them, that’s how!

If you’re a WordPress user, and want to get some insight into your server’s current status, this tutsplus tutorial will show you how to create a Server Dashboard with 9 widgets to keep an eye on things!

The good folks from appendTo, like many of us I imagine, got annoyed with the responsive framework options that are bloated, overbearing, and require a ton of overrides to customize, so they built their own:

BareKit is a super minimal, open source, responsive framework. Unlike most frameworks, it comes with zero “styling”. It uses CSS, but only for positioning and display properties.

And with a total CSS weight of 10kb and JS weight of 7kb, it is easily worth a shot, to see if it can do all you need.

The 11 most exciting open source projects on the web. (Interestingly, the URL says 10, guess they found one more just before publishing?) Most you already know, maybe one or two might not really be “exciting”, but hopefully you find something new and interesting.

My wife recently downloaded a new iPhone app, Photo Sphere Camera,
by Google, that let’s you take and stitch together 360-degree photos, for a very cool image. Unfortunately, the only thing you can then do with that image is upload it to Google Maps (I guess how else would you look at a 360-degree photo?), and unfortunately you will look like a complete dork taking all those photos, but what you get is actually very cool.

Waves is a cool CSS click effect for a, button, or input elements. Minified CSS and JS are each around just 3kb.

Minuum is “[t]he little keyboard for big fingers” that uses a “revolutionary auto-correct” so you can “worry less about typing”… I’ve seen a lot of variations of keyboards and typing, but I just don’t know if I could do it… Could you?

And finally, ever thought about lying in a hammock listening to waves crashing on the beach while you’re coding? Then check-out Nomad List: the best cities to live and work remotely. :-)

Happy reading,

Today’s Readings

Let’s start off with something that we’re probably all familiar with, but would probably think isn’t possible: Pure CSS Tic-Tac-Toe… The first secret is an insane amount of mark-up, the second is having all that mark-up be siblings, the third is a very clear understanding of which patterns constitute a win, and the last is some wicked-clever CSS! Nicely done!!

And speaking of pure CSS, Slick sliding-highlight navigation effect, sans-JS.

And now for something completely absurd: Changes to the IE11 User-Agent string. Oh, that’s not the absurd part; the actual URL is! Only a Microsoft engineer would think that’s a good idea… (facepalm)

Some of the bigger news on the web-dev front recently has been the support of the picture element in both Chrome and Firefox. And the majority of thanks for that goes to . Here is a video interview and workshop with Yoav!

And here is an article from Yoav about the same subject, also discussing some history, other attempts, and use cases.

I despise litter. Nay, I doth loath litter. And cigarette butts are some of the most loathsome litter there is. So an article with the title Used cigarette butts turned into high-performing energy storage material really made my heart go pitter-patter. Finally, a useful use for all those damned things…

I am slowly coming to terms with the name “hamburger icon”… I tried hard to give all my support to “navicon“, but every time I said it to someone, they just said “Huh?”. So, let’s at least find out how to get this cholesterol-filled navigation menu icon into our pages properly

Continuing the idea of “how to”, Secrets of the Browser Developer Tools is an incredible treasure trove of web dev deliciousness! Resources, how-tos, and more. Read them all!

Then see if you can find any they missed from this video Secrets of the Chrome Developer Tools! :-)

Got inline SVGs? Must say, I don’t use SVG inline very much, I typically use background-image and data-URIs. But if you are, then has several good options for swapping inline SVGs on-the-fly.

Sticking with CSS-Tricks for a moment, a guest post from addresses CSS Columns. I’ve always liked the concept, but have avoided them because a) support is still pretty bad, and b) I don’t like how they can make users scroll down to read the bottom of the first column, then scroll back up to continue reading from the top of the next column… Well, Katy nicely provides code that fixes my second problem, and my first problem is solved by the lovely graphic at the bottom of the article… :-) (Or by the polyfill references in the Comments, your call.)

Great primer on OOJS. Compares old-school examples, and thoroughly explains when/where/why OOJS is better.

CSS Animations can make a huge difference over simple, A/B, on/off transitions. Fades, slides, etc., are just more pleasing to the eye, and less jolting to the user. But linear transitions look so mechanical, and Beziers are just too damned difficult to figure out! Not so, not anymore anyway! ‘s article Bouncy Transitions does a nice walk-through of the basic CSS Animations, and then points us to ‘s cubic-bezier tool which, with a little playing, allows even a design-challenged fool like me to create a cool animation like this!

And finally, if you are reading this post, you simply have to know who is, and if you do anything that helps to create a website experience, then you owe Jeffrey, whether you know it or not. This documentary about the man, myth and legend is well worth the ~40 minutes to watch and learn more…

Happy reading,

Fix disappearing fullscreen video in Firefox

I recently encountered, and hacked together a fix for, a bug in Firefox where a video element appeared and played fine, until I clicked the fullscreen button, then the audio continued to play, but the video completely disappeared. The solution vexed me a bit, so when I found it, I thought I should share it…


The problem is only Firefox, and it only happens if the video being sent to fullscreen is inside a parent element with !important added to a CSS transform. Without !important, the video plays fine in fullscreen-mode, but unfortunately I need it when not in fullscreen-mode. Finding a way to do both was my challenge… ;-)


The Situation

My original video element opens inside of an overlay and has a good bit of presentational CSS, but I found that only the following HTML:

  <video controls>
    <source ... />

and the following CSS:

div {
  transform: translate(0)!important;

are required to reproduce this issue…

Again, the video works fine, until a user clicks the fullscreen button, then the audio keeps playing, but the video disappears…

The Fix

This involves a good-old-fashioned JS/CSS two-step! Well, I could have done it solely via the JS file, but I want to keep things clean, so I use the following JS to toggle a class on the video wrapper (targeting only Firefox, since it’s the only browser I’ve found with this issue).

I added this JS:

document.addEventListener('mozfullscreenchange', function () {
}, false);

and this CSS:

.mozFullscreenFix {
  transform: none!important;

and suddenly the video appears, and plays, just fine, even in fullscreen-mode…

The Conclusion

So, there it is, pretty simple, but since it took me a few minutes of scrounging around and trying other things that didn’t work, I thought I’d share it.

And like a good citizen, I filed a bug with Mozilla, so hopefully this issue will be resolved in some future release.

In the mean time, happy fullscreen videoing,

Today’s Readings

A treasure-trove of tools for cross-device debugging, including a new one to me: Ghostlab, which syncs all actions and behaviors across all devices using viewing the same page, including filling in forms!

Or for some old-school single-device debugging, Chrome Canary’s Device Mode is seriously impressive, though still only emulators, not real devices.

A-to-Z CSS is a pretty fine-looking list get-to-know CSS videos. They’re up to “o” (for opacity) already, so you might have some catching up to do!

A thorough 3-part series of best practice tips for WordPress (parts 1 & 2 are linked at the top of this article).

Seems the much-maligned manifest is trying to make a comeback, as a completely re-designed, JSON-based spec, instead of that old wonky thing that we all hated so badly… Looks quite good, but the authors state repeatedly this isn’t ready for prime time yet!

The way a ground-up redesign process should happen, as explained by the internal team that re-did the now-responsive Guardian site. Fine work, and really well explained!

It’s official: WebKit won the Internet! Or at least we can all act like they did, because pretty much everyone else now supports their prefixes

Very impressive collection of input type="radio"-controlled interface options, from tabs to menus to modals to sliders to columns, all working sans-JS!

And while we’re hating on JS, here are 5 more CSS-only UI options.

I’m pretty sure everyone is sick of me yacking on and on about SVGs, so, if you’re one of them, skip this; otherwise, here’s a 3-part series on animating SVGs (parts 1 & 2 are linked from this article).

Don’t think I’ve encountered CSS’ step easing before, and couldn’t imagine why you would want to use it, but the author gives multiple useful purposes.

If you feel like you need to get your web performance read on, here’s a heckuva collection!

And what’s faster than “right now”? How about “hasn’t even happened yet”! Several options for trying to plan ahead based on what you think your users will do next

Got Git? Then you’re going to want GitFlowCreate aliases for all your common Git commands, even combining commands and passing messages to aliases. Less keystrokes for the win!

There have been a lot of stabs taken at making semantic data tables fit onto small screens. And at some point they all fail, but usually because no one solution solves all the various needs. Meet TableSaw. Which mushes a bunch of solutions under a single roof, letting you choose which method you need for which set of data.

Autoployfiller is brilliant… Scanning your site’s code to determine what polyfills it needs. Check out the code samples to see how easily it works, but brilliant idea!

Pretty nice-looking select element, purportedly cross-browser, too! Fair bit of CSS (and nicely done, by the way!), but if all your drop-downs can look that nice, I say it’s worth it!

Wow, the code generator of code generators: Web Code Tools! From CSS3 to HTML5 to Microdata to Open Graph and more…

Ever wanna get the skinny on your CSS files (number of selectors, exact size, etc.)? CSS Analyser can help…

If you’re still fighting to pull CSS values from PhotoShop files, then this in-process extension might be your new best friend!

And finally, in case you missed it, Microsoft’s first web page was recently recreated, in all it’s image-based glory! For an amazing trip down memory lane (for some of us, or tales from the crypt for others), be sure to follow all the links and read the stories from the days of yore. has a few notes of his own on the subject as well.

Happy reading,