Webymize for Rails - Optimize javascripts and stylesheets

It's been quite a while since my last blog post. I've been working on a Ruby on Rails SMS web service called Nibbme which will be presented in one of my future posts. During the development I created lots of Ruby on Rails plugins. I decided to present some of them to the public.

I'm starting with a simple plugin called Webymize for optimizing public assets like javascript and stylesheet files. Usually, RoR programmers rely on the Rails itself to handle optimization for them which is a common mistake. Rails do merge multiple javascript and stylesheet files to one file (all.js and all.css) to speed up page load time, but the code is not yet compressed as it should be for use in the production environment. The plugin adds rake tasks for building compressed merged javascript and stylesheet files.

Installation

When it comes to the implementation of a new website feature I just love Rails :). The Webymize installation is as simple as installing the plugin.

$ cd myrailsapp
$ ./script/plugin install git@github.com:xpepermint/webymize.git

How it's used

Now that we have successfully installed the plugin, we can simply execute Webymize's rake tasks like this:

$ rake webymize:javascripts
$ rake webymize:stylesheets

Note you can use SASS insted of pure CSS.

When do we use these rake tasks? It's up to you I guess. I use them as part of my Capistrano deployment process. After the page is deployed to the server the process automatically executes the necessary rake commands. You can find a Capistrano example at my GitHub.

Please try the plugin and give me some feedback.

Javascript Rich Text Editor - Insert image with titled frame

A week ago I accidentally came across the "Zemanta's Challenge" page where they were asking for a Rich Text Editor (RTE) solution that would support advanced images. The task was to build a library that would extend a basic RTE functionality for dragging images into the editor. When user drag an image into the editor, an image should be automatically displayed with frame and title around itself and the size of an image should be bigger (not a thumbnail but the true size image).

A year ago I built a RTE editor from ground up for a Spletoo sistem (www.spletoo.com) and I can still remember the pain I went through when I was implementing advanced features. Though the challenge focused on the Firefox 2+ I implemented some IE support (just for fun :)). It took me almost 15 hours to complete the task and I want to share it with others.

Explaining the idea

As you've probably noticed modern browsers allow you to drag images into the RTE. Image that is dragged into RTE is a cloned source image. No frame is painted around it and no title is displayed. I completed the task by painting the image frame using a CSS border and padding comand.

For displaying the title I inserted a DIV node and wrote a mechanism for auto-positioning. If a user would write/delete text or move the image the title should stay on the right position. That part was a little bit tricky. Some basic javascript events do not always trigger as expected thus I created a simple loop that updates title's position every X ms.

Every image you want to drag should have a "srcbig" (path to a big image) and "title" (image's title) attribute.

For this to work you have to load my library and then execute a command that extends RTE functionality.

The code

I want to share my code with people so that we can make it better. Please write your comments and propose better solutions. I haven't jet separated CSS from javascript because I first want to see your comments.

• Source Download
• Example