JavaScript for all the things?

A prospective client of mine asked me to take a look at some design docs for a website. Let’s call the client Bo and leave it at that. Bo is a designer who had a very specific idea about the designed website and had hired some people execute this idea. Unfortunately it didn’t work out as Bo was expecting and the result was very disappointing.

Bo sent me the design docs and website and I had a look. The design was fine, it’s not my place to judge that. The website he gave me was another matter though.

I went to open the website. Well huh, it had been a while since I had seen a loading screen in the browser. Aside from games and demos that is. These were obviously mocks as the mock contents did not take ten seconds to load, but it had me scratching my ears nonetheless. How you’re going to make a loading screen on the web realistic is beyond me and probably not worth the effort. But hey, if the designs need you to download 20 megabytes of content I guess there’s merit in a loading screen. So who knows.

The main effect that happened afterwards was kinda nice. It was a diamond grid that moved in place like a web and made a tiny effect at some interval after that. The contents of the website was loaded in custom popups, including custom scrolls and custom menus. I’m not sure if that’s what you want to use for your website, but then again I’m not a designer.

The website wasn’t coded by Bo but by somebody Bo hired. I don’t know who. Seeing what the previous coder had required to get that to work was very disappointing. All kinds of libraries were tied in together, page weight of about 500KB (ok, 250KB gzipped). All this just to show a cute diamond spider web effect and some custom text boxes? My spider sense was tingling.

My first thought as I saw the effect was that it may have been a nice demo for JS1k (google it). I’m pretty sure that what I saw could be accomplished in under 1024 bytes of JavaScript, especially when done “ugly” and slow. That would be about 1/200th of the current weight. So there’s that. But whoever coded it before me clearly felt the need to go all out with it, using a canvas library on top of another canvas library op top of a DOM library. That is telling something.

So after looking at it I decided to tell Bo that Bo wasn’t looking for me but for a CSS animations expert. This is 2016, fancy animations on a website no longer solely belong to the domain of JavaScript. In fact, I think they’re better suited in CSS land. Browsers will be better at optimizations then you most likely will ever be in canvas.

On top of that the pure JavaScript solution would have a dramatic impact on SEO, is probably horrible for people depending on any kind of accessibility, has serious scaling issues, and would have been a pain to make mobile friendly.

The point of this little anecdote is that you should try to pick the right tool for the right job. You may be excellent at building sand castles but when the Royal Bank of Scotland asks you to build a bank on the beach for them, you should still respectfully explain that a sandy vault may not entirely live up to their expectations. Even when they think it would. You’re the expert on sand, not them.

I’m Peter and I do JavaScript. But the web isn’t all JavaScript and that is fine too.