PikaJS: Think jQuery but smaller, lighter, and just as easy to use

(Updated February 2021 for PikaJS 1.2)

Introducing PikaJS: a jQuery-like JavaScript library that simplifies the client-side scripting of HTML.

I had been using jQuery and PrototypeJS, and I needed to ditch PrototypeJS at long last.

My colleague Michael Franzl said, “Hey! Check out this Balalaika thing!”

So I did.

Unfortunately, Balalaika doesn’t give you many methods to do cool stuff. That’s left as an exercise for the programmer…

So, I decided to make my own jQuery, and PikaJS is the result!


jQuery AJAX Form Submit for Dummies

AJAX Form using jQuerySo you’ve decided to be supercool and use jQuery. That was a wise decision you made, because jQuery totally rocks. Especially in Rails apps, jQuery makes life a LOT simpler. Yes, you have to learn some JavaScript and some quasi-new syntax, but it’s still seriously powerful and convenient.

There’s only one problem: if you’re like me (i.e. JavaScript-impaired), you just couldn’t get your forms to submit via an AJAX call.

You’ve probably heard of something called the jQuery Form Plugin. It’s a bit overwhelming looking at all the options and trying to extract just the functionality you need if you aren’t a JS Jedi, though. And so, without further ado, I present to you jQuery Form Submission for Dummies!


Adding a Delay to jQuery Effects

jQuery JavaScript LibraryThe jQuery JavaScript library is a seriously beautiful thing. With a code base that is much smaller than Prototype + Scriptaculous, jQuery can be used on a web site do a whole lot of fancy AJAX stuff with syntax that is surprisingly easy.

At first, jQuery doesn’t look easy. In fact, it looks downright scary. But once you actually dive in, you find that the water is warm and inviting indeed!

If you’ve used jQuery, there is undoubtedly one problem you will encounter: How do you insert a delay between special effects like fadeIn() and fadeOut()??

I found several answers to this question on the web, but I decided not to use any of them. Instead, I decided to leverage jQuery’s built-in callback functionality to get a “delay” in one clean, simple, and super easy step. But, as always, there is a catch…