6 guests



Jekyll not working on OS X 10.9 Mavericks

Written by elmasse
Jul 02 2013

If you have installed the beta version of OS X Mavericks (10.9) and you try to run jekyll server command you will probably ending up having this error message:

$ jekyll server
/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems.rb:777:in `report_activate_error': Could not find RubyGem jekyll (>= 0) (Gem::LoadError)
from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems.rb:211:in `activate'
from /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems.rb:1056:in `gem'
from /usr/bin/jekyll:22

What's going on?

OS X 10.9 ships with Ruby 2.0 so, this is the list sort of step by step I did to get Jekyll back on track on my Mac:

Update gem

Run the following command:

$ sudo gem update --system

Download and install Xcode 5 and then open it!

Once you get XCode5 installed do not forget to open it so the command tools get installed.

Reinstall Jekyll, Pygmentize, Redcarpet, etc

Once I have everything updated I had to reinstall Jekyll and all the dependencies I have been using on my development site such as pigmentize, redcarpet, rdiscount, etc.

$ sudo gem install jekyll
$ sudo gem install redcarpet


I have searched a couple sites regarding this problem and it seems that there are other solutions such as stated in Tip: Ruby on OS X Mavericks which unfortunately didn't work for me.

Hope this helps if you run into the same problem.


Introducing CocktailJS

Written by elmasse
Apr 28 2013

CocktailJS is a small yet powerful library for NodeJS. It is mainly intended to explore some concepts in Javascript such as annotations, traits and talents.

CocktailJS Site


As I said the main idea is to explore some concepts. First, Annotations, they are intended to keep Objects and Classes more semantically and abstract the concepts of inheritance, and other mechanisms outside them. As in many other libraries for instance, extends is a method attached to each class. I wanted to move that outside. Yes, many other implement the extend mechanism as an util method - as node does - but I consider that is another problem. Utils are usually reflecting a language or design issue. But this is another story.
Another value added to annotations is they can be used not only when defining classes. In this way we can for instance, use annotations to declare Models without having to extend from a "framework base model".

Read more: Introducing CocktailJS


Ext.ux.Cover A Coverflow experience for Sencha Touch

Written by elmasse
Jul 14 2011

I was always interested in Coverflow. Now I want to announce my first draft for Sencha Touch. Ext.ux.Cover. It is based in Charles Ying's zFlow, if your are looking for a Coverflow like in js non-lib dependent for iOS, you should take a look at it!

Ext.ux.Cover works similar to Ext.List, you can add items to a store and show them in Cover using a itemTpl. Since Cover inherits from DataView, you get all the benefits in terms of modifying the store (add, remove, sort and filter). All the events will cause an immediate response in your Cover instance.

cover image

Some limitations

Due to the lack of support of css 3D animations (or bugs?) in Android, this implementation is only working for iOS devices. You can test it also in desktop, but keep in mind you should use Safari 5/ Chrome 12 (Chrome 12 in Ubuntu - do not know about other Linux distros - has no 3D neither, so it won't work).

I have successfully tested in Mac OS X 10.6.8 with Safari and iOS 4.3.2 iPhone and iPad.

Download it!

The code is already in my github repo so you can clone or fork the repo.

You can see it in action. Check the Demo Site

Future Tasks:

I will create a Wiki on github to explain how to use Ext.ux.Cover. Also, since this is in a experimental phase, you can find bugs. If so, please report them at github also. I will be working on Documentation too.


Ext.i18n.Bundle on GitHub

Written by elmasse
May 02 2011

I just created both projects (ExtJS and SenchaTouch Bundle) in my github repo. Now you can find'em at https://github.com/elmasse I will upload soon the previous versions also (ExtJS 2.x and 3.x) but right now you can download a working draft for ExtJS 4.

Please, feel free to download, fork, propose changes or whatever you want. You can also post bugs so we can track issues.

I will be working on documentation during the next weeks so we can get a wiki explaining how Bundle works.

Future plans are:

  • Upload CSS version
  • Create a new PlistReader so we can use this implementation with PhoneGap in iOS for .plist files
  • Test on PhoneGap
  • Documentation

Is CSS content Suitable for i18n?

Written by elmasse
Dec 13 2010
Internationalization (or i18n) is one of the worst features we have today on Web Application. I'm a big fan of Sencha and I have been reviewing their solution about i18n. I have also created my own solution a few years ago but, I came across both solutions have limitations and problems. Using a different js file with, let's call'em keys, you have to overwrite, for example, a Month name as Month.January so when you want to translate that into Spanish you just have to overwrite that key with
    Month.January = 'Enero'

The approach is excellent if you plan to keep that key as a pure variable, or you plan to reload the page in case you want to change the language. Now, what if I just want to change my language 'on the fly'. Ok, you could do that just adding those js files onto your document body or header, as scriptTagProxy does for example to load a new script. At this point everything will work ok. A common practice is to assign a key to somewhere or some property that is not used as a simple var. Let me explain this briefly. Assume we have a TabPanel with a few items on it, each one with its title as a key:
setupDemo = function(){
    //Bundle is declared global for this example
    Bundle = {title1: 'title One', title2: 'title Two'}; 

    new Ext.TabPanel({
        {title: Bundle.title1, html: '1'},{title: Bundle.title2, html: '2'},

Read more: Is CSS content Suitable for i18n?


Sencha Touch Bundles!

Written by elmasse
Jun 19 2010

Now you can download the Ext.i18n.Bundle component for Sencha Touch! It has the same usage as the one for ExtJS. I have also included a file called sencha-patch.js since the version 0.9 has some small issues with Ext.data.Store and Ext.data.AjaxProxy.

Now ready for SenchaTouch 1.0!

Go to Download Section or Read About i18n.Bundle Component!

Update:For latest versions check my github repository


Creating Reusable Components with Javascript

Written by elmasse
Oct 07 2009


With the many frameworks, libraries and other techniques you can see Javascript as an Object Oriented Language. I have developed a dozen of components with many of those frameworks, like Prototype, jQuery, YUI and ExtJS. What I wanted to share here some ideas about how to create components in a reusable way. In fact I will base this in ExtJS since it provides a tremendous well designed components. Also, another important thing are Events and more specifically Custom Events. They provide you a mechanism to broadcast and capture events between javascript's objects. But, leave this for a while I will explain it in detail soon.
OOP and well designs aim to reduce the coupling between objects. When you use or pass a reference to another object you are having dependence between them. This kind of coupling is often used, but also you could see some dependence when you get other components by their ids. From my point of view, you can avoid this by using Event Oriented Programming and as an extra benefit you will have a testable component which doesn't mean that it will be for free. You need to develop your components with the goal of doing them less coupled in order to have them to be reusable.

Read more: Creating Reusable Components with Javascript


Ext.i18n.bundle - Resource Bundle ExtJS extension

Written by elmasse
May 07 2009

This is a Resource Bundle implementation for ExtJS. What's a Resource Bundle? This idea comes from Java world where you can separate all the locale based information from the source code. This helps to maintain the source code and facilitates the translations.

Read more: Ext.i18n.bundle - Resource Bundle ExtJS extension


A CoverFlow like component for YUI version 0.1

Written by elmasse
May 02 2009
A CoverFlow-like component for YUI to show images. It can be used as an extension for YUI framework. You can customize the component color, size and you can show labels for each image. It also provides a functionality to bind a function to the onclick event for the selected image.

Release 0.1 beta version:

- Multiple image sizes. There is no restriction for size.

- No image limit. You can add how many images as you like.

- Simple interface. You can just use an image list, no need to have complex configuration.

- Works in Firefox3, Safari4 and Chrome. IE is not supported yet.

- All javascript. No flash required.

See it in action here

Download here

Read more: A CoverFlow like component for YUI version 0.1



6 guests
*/ ?>