Harry Seldon's blog

Fractals, Chaos, and Control Systems on Rails


News from Typo edge

Posted by Harry Seldon on March 08, 2009

I have updated this blog engine in order to install the recently added Feedburner support. My recent post about Rails heroes RSS feeds clearly showed me that feedburner was a must have as everybody is using it. Feedburner gives you an idea of your RSS traffic.

Here are some more recently added features to Typo:

More info, for French readers, here

I encountered some small issues during this update. Here they are, so you can avoid them.


Since my last post about Typo installation from git, the plugin management has changed. Typo now uses gems. Therefore, to install locally Typo, the process is now:

git clone git://github.com/fdv/typo.git
sudo gem install htmlentities  coderay json  calendar_date_select
sudo gem sources -a http://gems.github.com
sudo gem install datanoise-actionwebservice mislav-will_paginate
Rake db:migrate

You can still manage the plugins such as related content or recent comments using git submodules.


Some routes have changed. Therefore, you will probably need to update your theme. For instance: in theme/views/articles_comment_form.html.erb I replaced:


For the live search: in theme/views/shared_search.html.erb I replaced:

{ :controller => 'live', :action => 'search' } 


This is about Typo edge. It is not supposed to be a stable version. So use with caution! Right now the cache needs some improvement which should be done soon. Temporarily, I have disabled it by commenting in app/model/blog_sweeper.rb the line:

observe Category, Blog, User, Article, Page, Categorization, Comment, Trackback

About recent news, Matijs van Zuijlen has joined the Typo core team.

Thanks a lot to the Typo core team, Fred, Cyril and Matijs, for their excellent work and also for their extremely reactive support.

Posted in | no comments | Tags , , , , , | atom

Git and Rails: A detailed tutorial including plugins, submodules, development and production

Posted by Harry Seldon on January 14, 2009

I had started talking about setting up a development and production environment with git for Typo in this post. Because of this new version of Typo, I have finally had a very good reason to change the set up of this blog and to migrate to git. Installing Typo from its git repository, I have had the opportunity to use the git submodules. That is why in this post I will use the Typo blog engine to make a case study for the use of git with:

  • Several repos for development, production and deployment
  • Several repos for open source development
  • Use of submodules for plugin management and development

Indeed, my own aims for this new setup are to:

  • Have a test environment and a production environment for this blog
  • Be able to update the blog engine from its main repository
  • Be able to contribute to this open source blog engine
  • Manage properly rails plugins
  • Be able to contribute to these plugins

The final setup is as following, represented on the figure below:

  • I have a repository where I develop and test Typo. This repo is first created by cloning Typo’s repo. From my point of view this is the main repo. Indeed I can pull from Typo’s repo or push to it. in the same way I can push to the production repo, to deploy. Deployment can be managed easily by Capistrano in this configuration. Notice that several branches can be contained in the repo (public branch pushed to the main repo, private production branch, etc.)
  • Production repo. The actual production code is a checkout from this repo.
  • My public dev repo. It contains the changes I can propose to Typo’s dev team through a ‘pull request’.
  • Main repo. Currently it is Fred’s repo but thanks to git architecture it could be as well the public repo of who you want.
  • Fred’s private repo. He may have several dev repos, with plenty of branches, on several computers .
  • Cyril’s public repo.
  • Cyril’s private repo

git image
For each repo, the plugins are put in subrepo and managed through git submodules. That is, each plugin has its own repo and is not included in Typo’s repo. However, the beauty of the submodules is that you can really easily develop and update your plugins.

Now let’s go for a detailed tutorial to set this up.
This setup is for people willing to have a full development environment. However, if you just want to install Typo, you simply need to skip the first step, the creation of the public repo. And in this case you can consider that your public user name is ‘fdv’ but you will not be able to push to the repos.

Create your public repo
Fork Typo on github using your account. As you are doing that, also fork the plugins that interest you, for instance Recent comments, Recent posts and Related posts.

Create your dev repo
Then, clone the Typo repo from your public repo. Type this command in the local directory of your choice. Replace the user name harryseldon by your name.

git clone git://github.com/harryseldon/typo.git

To be able to update your dev repo with the latest changes, add the address of the main repo:

git remote add main_typo git://github.com/fdv/typo.git

Then to update your copy, you simply need to pull the changes:

git pull main_typo master

NB. The repo you clone from will be called ‘origin’ in your local copy. If you prefer you can initially clone from the main repo and then add the address of your github repo.

In order to run, like every Rails app, Typo requires some plugins. They are managed through the git submodules. So you just need to run:
[EDIT 3/8/2009] Typo plugins are now managed using gems, check this post.

git submodule update --init

With this command the plugins will be pulled from the addresses written in the .gitmodules file which looks like this:

[submodule "vendor/rails"]
  path = vendor/rails
  url = git://github.com/rails/rails
[submodule "vendor/actionwebservice"]
  path = vendor/actionwebservice
  url = git://github.com/datanoise/actionwebservice.git
[submodule "vendor/plugins/rspec"]
  path = vendor/plugins/rspec
  url = git://github.com/dchelimsky/rspec.git
[submodule "vendor/plugins/rspec-rails"]
  path = vendor/plugins/rspec-rails
  url = git://github.com/dchelimsky/rspec-rails.git
[submodule "vendor/plugins/will_paginate"]
  path = vendor/plugins/will_paginate
  url = git://github.com/mislav/will_paginate.git

If you have your dev version of one of these plugins, do not hesitate to change the address to point to your public repo.

Then you may want to install your preferred Typo plugins. The ones you have just forked on github.

git submodule add git://github.com/harryseldon/typo_related_posts.git vendor/plugins/typo_related_posts
git submodule add git://github.com/harryseldon/recentposts_sidebar.git vendor/plugins/recentposts_sidebar
git submodule add git://github.com/harryseldon/recent_comments_sidebar.git vendor/plugins/recent_comments_sidebar

and again

git submodule update --init

To use Typo in your dev environment, you finally need to configure your database. Use your usual settings and run the migrations. Typo will work like any other Rails app.

Like any other git repo, feel free to create as many branches as you like. For instance you can create a production branch:

git branch typo_production

You would typically set the environment to production in environment.rb.

Create your production repo
Assuming an ssh connection, you create the repo on your host in a ~/git/Typo directory.

git init

You add the address of this repo to your dev repo:

git remote add production_repo ssh://user@ssh.domain.com/home/user/www/git/typo/.git

Now you can push your code to production. Let us say you created a special production branch,

git push production_repo typo_production

This step could be done using Capistrano and pushing the development branch. Capistrano would be typically in charge of making the changes in environment.rb.

Commit changes
Assuming you made some changes in your dev repo. You commit them:

git commit -a -m "my changes"

Then you can push them to your public repo:

git push 

Accordingly with the previous NB, this is equivalent to:

git push origin master

Then from your github account, you can send a “pull request” to Typo maintainers if you would like to see your changes included in the official Typo code.

As far as the plugins are concerned, the process is similar. You cd to your plugin folder which is under a git version control and you can push, just like for the Typo repo.

Following this tutorial, you have installed a typical environment for a Rails application under git version control.

Feel free to leave comments about the git environment or the Typo installation.

Posted in | 8 comments | Tags , , , , | atom

Migrating to Typo 5.2 and to GIT

Posted by Harry Seldon on January 13, 2009

Typo, this blog engine, underwent a lot of great improvements these last months thanks to Frederic and Cyril (2 blogs in French). So it was time for me to upgrade this blog to the new version: Typo 5.2 Release Candidate named after Helmut Newton. The main improvements are:

  • A lot faster (you should notice it)
  • A new backend: more flexible, simpler, with a clearer dashboard summarizing the last comments, the last posts, the most popular posts
  • A new text editor that facilitates the use of markup languages (I am specially glad of that one as I had complained about the previous text editor)
  • New SEO functions: places to easily enter your meta information: keywords, webmaster tools api, google analytics key etc.
  • Use of Coderay for a better syntax highlighting for many programming languages
  • Easier search (previous one was sexy but surprising when you hit the enter key)

The main thing missing is a live preview but that might be for the next release !

During the migration (to the RC) I had a few small difficulties:

  • I did not find the sidebar settings: they moved to the themes menu and sidebar submenu .
  • The plugins recent comments and recent posts were not compatible with Typo 5.2. I had modified them. But actually they now are compatible as Fred added the backward compatibility.
  • If you use your own theme, you will need to update the index page. Indeed the call to ‘classic pagination’ must be replaced by a call to ‘will paginate’. Simply copy and paste from one of the example themes.

By the way, migrating to git, I was able to update these plugins accordingly with what I had said in this post: Typo plugins for “recent comments” and “related posts”. To get the modifications, right now, you need to use my forks on github:

I had started talking about setting up a development and production environment with git and Typo in this post. Because of this new version of Typo, I have finally had a very good reason to change the set up of this blog and to migrate to git. The migration to git will be the subject of the next post. Installing Typo from its git repository, I had the opportunity to use the git submodules. That is why in this post I will use the Typo blog engine to make a case study for the use of git with :

  • several repos for development, production and deployment
  • several repos for open source development
  • Use of submodules for plugin management and development

To be continued !

Posted in | no comments | Tags , , , , | atom

How to add social bookmarking features to your (Typo) blog

Posted by Harry Seldon on December 28, 2008

As you can see below I have added the social bookmarks buttons at the bottom of each article. The buttons are for the following sites.

The links will direct you to their widget page.

The code to add these buttons is:

<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
<img src="http://static.delicious.com/img/delicious.small.gif" height="50" width="50" alt="Delicious" /></a>
<script type="text/javascript" src="http://www.reddit.com/button.js?t=3"></script>
<script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script> 
<a href="http://technorati.com/faves?sub=addfavbtn&amp;add=http://harryseldon.thinkosphere.com">
  <img src="http://harryseldon.thinkosphere.com/files/technorati.jpeg" alt="Add to Technorati Favorites" height="50" width="50" /></a>
<a href="javascript:location.href='http://slashdot.org/slashdot-it.pl?op=basic&amp;url='+encodeURIComponent(location.href)">
  <img src="http://harryseldon.thinkosphere.com/files/slashdot.jpeg" alt="Slashdot" border="0" height="50" width="50"></a>

Notice that the one for technorati is special. I have not found exactly what I wanted. It favorites the blog itself not only the article. Therefore, this part of the code is not suitable for your blog ! You need to adapt it. For the other links they should work as such on your blog.

If your blog engine is Typo simply add the previous code to /themes/your_theme/views/articles/read.html.erb, typically after the line :

<%= render :partial => 'article', :object => @article %>

And you which social bookmarking websites do you use ?

Posted in | no comments | Tags , , , , , , , | atom

A New Design ! (and some thoughts about web design and Typo theme creation)

Posted by Harry Seldon on December 05, 2008

As you can see this blog has a new design. This will also be the future design of the poll and survey website ThinkoSphere.com. In order to make this design, I worked closely with professional designers that I really congratulate for their awesome work (references available upon mail request).

Web Design
About the web design, I have recently learnt two important things that you, as a web developer, have known for long:

  • Separate the content and the design.
  • Do not use tables for your layout
    And actually the second one is implied by the first one. The main idea behind a good design is that you should be able to change your design without having to change your html code, that is you only need to change the CSS code.

Even when it is done properly I still hate CSS. Indeed, I hate the fact I cannot declare variables in CSS. I think it is a language for computers not humans, just like xml.
For example, you have this CSS :

.gray_box .content h3{

Corresponding to this (x)html:

<div class="gray_box">
            <div class="content">
                    <h3>December 2008</h3>

What I would like to write in order to define the style is something like:

style.gray_box.content.h3.font-weight = 'bold';

And for the color something like:

style.gray_box.content.h3.color = my_beloved_blue;

where ‘mybelovedblue’ is a variable.
I am pretty sure there exists some converters from serialization language such as xml, json, yaml to CSS. I just need to find them ! Do not hesitate to comment if you can help me !

Typo Theme
To export the design into a Typo theme I followed mainly 2 articles from 2 great Rails community contributors:

  • one from Geoffrey Grosenbach
  • one from Frederic De Villamil (in French)
    The most important thing is definitely to understand how the routes to the theme are defined. See for that Geoffrey’s article. Then when you have in your regular (not Typo) Rails application CSS file something like “url(../images/layout/headerbg.png)” you just need to replace it with url(../../images/theme/layout/headerbg.png). Notice the added ‘../’ and ‘theme’.

Any comment about this blog design, web design and typo theme appreciated !

Posted in | 5 comments | Tags , , , , , , | atom

Markdown and typo

Posted by Harry Seldon on November 30, 2008

Thanks to Cyril* I have just solved a weird problem I had with Typo. To write my posts, I use Markdown. When I began to use Typo I did not know how I could use Markdown. First, I simply wrote in the visual rich editor but then Markdown was not taken into account. So I used the ‘source’ mode, there it was working. Except that the carriage returns where not displayed by this view. So, as long as I was typing the post it was ok but when I wanted to go back to a post it was really ugly. Thus I saved my posts in a text file and if I wanted to update one I updated the text file and copied and pasted to typo. You imagine the pain !
I have long thought this stupid problem was due to a bad configuration. Somehow it was. A way to solve this problem is to go to Settings/Write and choose ‘Use simple editor without live preview’ instead of ‘Use visual rich editor’. The catch is with that you won’t be able to have a … ‘live preview’. There is at least one other person wishing a ‘live preview’.
I am glad to have Typo fully working now !

* To be precise Fred also helped me on this subject some time ago but his answer, while correct, was not precise enough and I had not understood it, my bad. Thanks all the same !

Posted in | no comments | Tags , , , | atom

Typo plugins for "recent comments" and "related posts"

Posted by Harry Seldon on October 26, 2008

I have been using Typo for 3 months and I am enjoying it so far. So after 3 months, I want to dynamize my blog. An easy way is to show the recent comments in the sidebar. Fortunately there is a nice plugin to do that: recent_comments_sidebar. To install it, if you have Rails 2.1 or above, simply run:

script/plugin install git://github.com/fdv/recent_comments_sidebar.git

If you have Rails 2.0.2, get the code from github and copy it to your plugin folder.

Looking for the recent comments plugin, I found 2 other nice plugins: recentposts_sidebar and typo_related_posts. The first one allows you to show your recent posts in the sidebar.

script/plugin install git://github.com/fdv/recentposts_sidebar.git

The second one is really neat. It displays a list of related posts at the end of your post (or wherever you want). This list is generated using the tags. The install process is a little more involved.
You still need to get the plugin:

script/plugin install git://github.com/fdv/typo_related_posts.git 

Then you need to add the call to the plugin in your template. Generally in template/views/articles/read.html.erb, you just add: <%= render_related_posts %>. You add this typically at the end of the post. But you may also want to add it after the comments. Moreover, you might want to change the langage. In vendor/plugins/typo_related_posts/lib/typo_related_posts.rb, make this change (personalize according to your wishes, you are welcome to propose here something better):

#    html += '<h3>À lire également</h3>'
    html += '<h3>Read also</h3>'
#    html += '<p>Si cet article vous a intéressé, vous pouvez poursuivre votre lecture avec ces billets similaires :</p>'  
    html += '<p>If this article has interested you, we suggest you read these related posts:</p>'

One more thing, I needed to make this change in the previous file because the permalink was not created. I do not know why though.

#    html += "<li><a href='#{this_blog.base_url}#{article.permalink}'>#{article.title}</a></li>"
    html += "<li><a href='#{article.permalink_url}'>#{article.title}</a></li>"

This blog uses the 3 mentioned plugins. So you can see them here at work.

In case you use recent_comments_sidebar and recentposts_sidebar there is a little catch. Both names begin by recent and at some point typo creates an id named recent. In the admin interface this prevents you from moving the recentposts plugin from the plugin list to the used plugin list. To solve this bug, in vendor/plugins/recentposts_sidebar/lib/recentposts_sidebar.rb, simply rename the class RecentPostsSidebar to LastPostsSidebar and change the call accordingly in init.rb.

While you are on github/fdv, have a look and browse for other plugins of your interests.

For info, the move of typo to github is very recent, see this post (in French) from Frederic De villamil.

Thanks Fred for Typo and all these neat plugins.

Posted in | no comments | Tags , , , , | atom

Installing Typo : trackbacks and markup

Posted by Harry Seldon on August 07, 2008

After installing Typo 5.1.2, I had some troubles with mail capabilities. My second problem came from the trackbacks. Typo should add a trackback link at the end of an article (see below "Use the following link to trackback"). However, this link was not added even if the "allow trackbacks" option was activated in Typo.After some more debugging, it simply appeared that this was due to the theme. I had downloaded a new theme (techblue) but this theme like others at typogarden are not updated for Typo 5.

A beginning of solution is to copy all files from themes/typographic/articles to themes/techblue/articles.

Another question I had is how to use Markdown or textile markups with Typo. I was using the default mode to write content but actually you need to be in source mode.

Posted in | no comments | Tags , , | atom

Installing Typo : mails

Posted by Harry Seldon on August 07, 2008

To install Typo I used the experienced user method. Meaning I installed it as if I was developping it. The setup is the same as Thinkosphere website. The code is inside a svn repository and the deployment is done thanks to Capistrano. 

Installation was pretty easy until it came to mailing capabilities which were not working. My old friend Google sent me to this blog : locomotivation.com/trackbacks The same tunings solved the problem. Indeed I am also working on Rails 2.x and this problem is due to a modification in Rails2.

However I add some more difficulties. Here is how you can lose 2 hours. The mailing was perfectly working in development environment but not in production. After 2 hours of Rails debugging into the mail sending low level code and a discussion with my host to get the smtp log, the solution appeared clearly : everything was working perfectly… but emails from the production blog were stopped by my spam filter while emails from the dev blog were not ! That’s a tricky situation.

So when working with mails do not forget your antispam !

Posted in | no comments | Tags , , , | atom



Recent Comments

Recent Posts


actuators aircraft atc blog chaos chaos_theory charts control controllers controls crisis economy finance flight fractals git gnc gs guidance linux mandelbrot marketing navigation ns ofc on pilot rails ruby sas scs sensors statistics systems techcrunch thinkosphere tutorial typo ubuntu wifi