Modulor. Custom Software Solutions.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on June 28, 2011
Category: Javascript
Typeface.js is a javascript that allows you to embed custom fonts in web pages. When using it you will identify some up / downsides compared to other libraries such as Cufon.

One of the upsides is that is allows you to do searches and select & copy rendered text.

On the other hand, it is not still prepared to handle rollovers/hovers in CSS.

Don't worry, there is a workaround to this. We found it on the forums of Typeface website (http://typeface.neocracy.org/forum/topic.html?id=152)

It involves generating a couple of spans that will be rendered with typeface and then using CSS we will be able to add hover capabilities to hide / show each of the spans, allowing us to "emulate" a hover / rollover.

h1 a .white { display: none; }
h1 a .blue{ display: block; }
h1 a:hover .white { display: block; }
h1 a:hover .blue{ display: none; }

<h1>< a href="#">
<span class="white">this is a link</span>
<span class="blue">this is a link</span>
</a></h1>

The post also mentions problems that might be encountered on IE which can be solved adding the following:

h1 a { height: 15px; cursor: pointer; }

It might not be very efficient, but accomplishes the objective while a solution is developed.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on February 9, 2011
Category: HTML
Many times, websites require the generation of menus that people can use to navigate around.

From an html coder point of view, menus can be built in many different ways. We have found out the two most common ways to build them are a) Using Unordered Lists (UL) and b) Using DIVs.

However, the most semantically correct approach is to use ULs. The main difference you'll find is that with ULs you can have easy to read code and your CSS definitions will be shorter and easier to build:

div.menu {} div.menu_item {} div.menu_item div.sub_item {}

vs

ul {}
li {}
ul ul li {}
Share.
Facebook | Twitter | LinkedIn
Posted by: Serguei on January 14, 2011
Category: Ruby on Rails
Just found this Ruby Quicktip for getting a random element from an array. There are two ways you can do this.

Given an array @array

@array = [1,2,3,4,5]

You can obtain a random element from the array with the 'choice' method:

@array.choice
=> 3

You can also do it with the 'sample' method

@array.sample
=> 2

With the 'sample' method you can specify the number of random elements you want:

@array.sample(2)

=> [4,1]

Happy coding.
Share.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on January 13, 2011
Category: Javascript
This is a very short tutorial on how to embed Twitter through its old but still very useful and flexible script.

Twitter stopped promoting this script a while ago, but it still works. We liked it because it allows full CSS styling, opposed to the inflexible Twitter feed widget commonly available.

Here are the steps to set it up:

1. Add the following html to your view:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>

2. Insert the javascripts that will load the feed on the view:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=10"></script>

Remember to replace USERNAME.json with your Twitter Username adding the .json extension. You can also manipulate the amount of tweets you wish to retrieve modifying the variable "count=10."

3. CSS Style

Now you can modify customize the styles. Some of the elements you can customize include:

div.navtitle {
}

ul#twitter_update_list {
]

ul#twitter_update_list li {
}

ul#twitter_update_list li a {
}

Now you can have a Twitter feed that can be mixed in with your current design.