MacKuba

🍎 Kuba Suder's blog on Mac & iOS development

RipTip - pretty tooltips for RightJS

Categories: Frontend, JavaScript Comments: 11 comments

I’m working on a new version of this blog, in which I want to use RightJS. This week I wanted to add some kind of pretty JavaScript tooltips there; there is a Tooltip class in RightJS, but I don’t like the way these tooltips look. However, I know a jQuery library called “TipTip” which adds very attractive black tooltips. So I took the TipTip code and rewrote it using RightJS (and renamed to RipTip, for obvious reasons) – code is available on GitHub, as usual.

This is how the tooltips look:

Read more »

JavaScript template libraries

Categories: Frontend, JavaScript Comments: 4 comments

For the last 3 months I’ve been working on a new web application at work. It’s quite unique in some regards, from the architecture perspective; the biggest difference from other projects that I’ve worked on is that almost entire page is one huge embeddable “widget”. This requires a completely different approach than I usually use:

  • a lot of the code above the model layer is moved to the client side (i.e. JavaScript); this means that controllers and helpers are rather simple, controllers mainly return JSON, and there’s quite a lot of JavaScript to write
  • since a significant part of the system is written in JavaScript, it needs to be unit-tested too
  • I have to be very careful not to cause any JS, CSS or DOM id conflicts between the embedding site and the “widget“ (which includes such things as keeping all JS code in a single global namespace, and using jQuery in the “noConflict extreme“ mode through an alias)

Another thing, which I’d like to write about today, is the way the views were implemented in this project. Since entire GUI is created dynamically by JavaScript, I had basically two options:

  • render the views in Rails with ERB and send big chunks of HTML via AJAX to JavaScript;
  • or make Rails send only data as JSON, and render the views on the JavaScript side.

Read more »