problem posts

Recaptcha and prototype.js conflict

One of Cogneato’s clients noticed that Recaptcha wasn’t working on their site. The checkbox wouldn’t check at all. I noticed that there was an error like “Unexpected token in JSON at position 0” in the browser’s console log. Since this was one of our really old sites, I figured it might have some sort of inadequate polyfill for JSON.parse(). I saw that the site was using Prototype.js, so I looked through the script to see if it was overriding that method, but it wasn’t. That did put me on the right track, though, to find the Stackoverflow answer that solved it for me.

Prototype was overriding the now browser standard reduce() method of Array.prototype with its own, incompatible functionality. The solution was simply to remove that method from the “prototype.js” file. We weren’t using the special Prototype functionality anywhere, so this didn’t cause a problem. If we were, we’d probably have to duck punch the browser’s functionality to handle both method signatures.

Fallback webfont and emoji

Recently I found that browsers will download a fallback webfont (@font-face) to try to find an emoji or other missing character. I was looking at the perf characteristics of my site when I noticed that the browser was downloading a webfont that wasn’t being used at all. After some digging, I found that the browser was going down through the full font stack to try to find an emoji I had added to that page, downloading the webfont on the way.

This is probably not a common setup, but I have a webfont in my font stack down stack from some similar common system fonts, as a fallback just in case. It uses a nice system font unless it can’t find it, in which case it uses the webfont, unless it can’t use that, in which case it uses a less desirable system font or the generic font class.

Continue reading post "Fallback webfont and emoji"