Widgets - How Hard Could It Be?

Yesterday, I was given a task to build a drop-in widget - one that can be paradropped into some hostile website and survive landing. Yey! Right this way sir! I never thought I'd see the day that I'll be building one of those again. It was like the ghost of JavaScript past paying me a visit after 15 years. Remembering Friendster, my layout that was perfect in IE6 but the mp3 player was covering my face on Firefox 2, writing in vanilla JS without the aid of jQuery, hand-crafted XMLHttpRequest calls and all that. Good times, good times... wait. How in the world did I write those things? The horror ensues.

The problem is back then, I had all the time in the world to craft one. These days, it's a rare resource. Making it a bit more challenging is that the task was a challenge on how fast I can prototype this thing and make sure it survives in what looks like an IE6-era website. I've seen the standard-issue horrifics in these kinds of websites that I didn't even bother looking under the hood.

Since it was issued just before the day ended, I decided to do it the next day for a fresh start. That evening, I was spacing out more often than necessary. No eureka moments though, I was simply just... bummed. That zero-motivation feeling, not in the mood to do anything. I even slept early... and still woke up late, very late.

The next day, I went to the battlefield ready... sort of. I had no battle plans actually, just sheer determination of getting it done before another project tries to grab my attention. For an hour or so, I pondered on what I needed to pull this off.

Problem #1: Sandboxing. How can I create something that, when dropshipped into position, doesn't immediately blow up on landing? Then I recalled how I embedded a YouTube video the other day. An embedded YouTube video is simply a no-border, unscrollable iframe. The reason is that an iframe is a completely different document. This means anything built inside of it can start fresh, free from the influences of the outer environment and will always come out perfect. And so I did, and the effects were immediate.

Problem #2: Styles. CSS is fine, but having to re-define normalization styles is just a pain. Talk about defining box-sizing: border-box everywhere so that width: 100% makes sense on padded boxes. Sheesh! And starting off with a very bland page is not really exciting. I wished it started with sane defaults. Then I remembered I'm in an iframe, I can do anything! So what the heck, I pulled in Bootstrap and boom! Styling covered!

Problem #3: Widgets. I remember telling people "all I can give you is time" because I had all the time in the world back then. But these days, time is a limited resource. Since I pulled in Bootstrap for the styles, thinking minimal, how's about pulling in jQuery for the logic? And so I did, but ended up reinventing templating, event handling and all that stuff (sigh). So I ended up pulling in Ractive and get it over with. And in 20 or so lines of code, I was done. Instant win.

In the end, a little over 2 hours, I was done.

Conclusion

One can say pulling in a full framework is overkill. Yes, I know. I used to build stuff like this with vanilla JS but the thing is, time isn't always by your side. It makes no sense reinventing event management, DOM manipulation, data binding and all that when there are tools built to solve that. Work smarter, not harder.

A hammer, in certain situations, is better than having nothing.