Hot keys

Common

• ⌘+N – Create a new story
• ⌘+R – Refresh stories list
• ⇧+⌘+R – Reset cache
• ⌘+M – Switch stories mode
• ⌘+L – Logout
• ⇧+⌘+P – Open tracker dashboard on the web http://www.pivotaltracker.com/dashboard
• ⌘+Mouse click – Open story on the web http://www.pivotaltracker.com/story/show/$STORY_ID

ID-Button

• Mouse-click – Copy “$STORY_ID” to the clipboard
• ⌥+Mouse-click – Copy “[#$STORY_ID]” to the clipboard. Supper feature if you use integration of Pivotal Tracker with GitHub
• ⇧+Mouse-click – Copy “http://www.pivotaltracker.com/story/show/$STORY_ID” to the clipboard

Story Details View

• ⌘+S – Save changes to the service
• ⌥+⌘+R – Refresh story details, comments, tasks or attachments
• ⌘+Enter – Save new comment or task to the service

There are two methods to programmatically use Skype:

• Via the native desktop Skype application using Skype Desktop API
• Via SkypeKit Runtime using SkypeKit SDK wrapper.

The first method is rather slow due to an interaction with the user interface. The second one is more interesting as there is no UI application.

SkypeKit SDK includes only wrappers for:

• C++
• Python
• Java

Is Ruby wrapper missed? No more!

On the way to gem

Before releasing gem, we tried several approaches. We tried to implement SkypeKit in pure Ruby as it done in SkypeKit Python Wrapper. But then, we realized that even if we make do it, its implementation will not be as fast as it should be. Then, we started to write a C extension for Ruby using the SkypeKit C++ Wrapper. But then, we admitted that this implementation will be inefficient due to asynchronous SkypeKit API and pure Ruby thread. Finally, we came to the implementation via Ruby FFI. We think that it’s the best way to do it because:

• Thread stuff are completely on C side.
• Synchronous program is easy to debug an test.
• SkypeKit gem works in Ruby.
• SkypeKit gem works in jRuby!
• It’s possible to quickly implement SkypeKit in Perl/Python/lua/etc.

SkypeKit C library

Libskypekit is a simple C library that brings asynchronous SkypeKit C++ wrapper functionality to the usual synchronous C applications.

The goal of Libskypekit is to catch all asynchronous callbacks of SkypeKit C++ SDK and push them as events into a simple queue. Then synchronous application can pull this queue, retrieve each event and process it.

Libskypekit is rather a young library, but we have already implemented the next basic events:

• Account status changed
• Chat message received

It’s enough to write simple chat applications. If your are familiar with C language look at ping_pong example

Is Ruby wrapper still missed? No more!

Skypekit Ruby gem

Thus LibskypeKit has a simple API, it’s was relatively easy to create a Ruby library using Ruby FFI.

Plus the Skypekit Ruby library provides a simple interface. For example, look at ping_pong example:

require "skypekit"
 
$skype = Skypekit::Skype.new(:keyfile => 'myskypekit.pem')
 
$skype.start
$skype.login('myskypename', 'mypassword')
 
def terminate
  puts "Terminating"
  $skype.stop
  exit
end
 
trap('INT') do
  terminate
end
 
loop do
  event = $skype.get_event
 
  unless event
    sleep 5
    next
  end
 
  case event.type
  when :account_status
 
    if event.data.logged_in?
      puts "Congrats! We are Logged in!"
    end
 
    if event.data.logged_out?
      puts "Authentication failed: #{event.data.reason}"
      terminate
    end
 
  when :chat_message
    message = event.data
 
    puts "@" * 80
    p message
    puts "@" * 80
 
    if message.body == "ping"
      $skype.send_chat_message(message.convo_id, "pong")
    end
 
  end
end

I want try it

In order to play with SkypeKit gem you need:

• Register at developer.skype.com
• Obtain SkypeKit SDK
• Obtain SkypeKit Runtime
• Obtain SkypeKit personal keypair

Then:

• Compile SkypeKit SDK – see SDK documentation
• Compile LibSkypeKit – see README in repository
• Install SkypeKit gem – see README in repository

Now you can play with it.

Legal part

Libskypekit and Skypekit gem are both released under the MIT license.

But SkypeKit SDK is not!

Please carefully read SkypeKit License Agreement.

There are a lot of restrictions!

References

• SkypeKit SDK
• SkypeKit Desktop API
• Skype API Terms of Use
• Skypekit C library
• Skypekit Ruby library
• Skypekit Ruby gem
• Ruby FFI gem

Similarity search in large databases is an important issue in nowadays informational services, such as recommender systems, blogs (similar articles), online shops (similar products), image hosting services (similar images, search image duplicates) etc. PostgreSQL allows to make such things more easy. First you need to understand how we will calculate the similarity of two objects.

Similarity

Any object can be described by a list of characteristics. For example, article in blog can be described by tags, product in online shop – by size, weight, color etc. It means that for each object we can create the digital signature – array of numbers, which describing the object (fingerprint, n-grams). Let’s create an array of not ordered numbers for every object. What should we do next?

Similarity calculation

There are several methods for calculating the similarity of objects by signatures. First of all, the legend for calculations:

Na, Nb – the number of unique elements in the arrays

Nu – the number of unique elements in the union of sets

Ni – the number of unique elements in the intersection of arrays

One of the simplest calculation of the similarity of two objects is the number of unique elements in the intersection of arrays divided by the number of unique elements in two arrays:

or only

Pros:

• Easy to understand
• Speed of calculation: N * log(N)
• Works well at similar and large Na and Nb

Similarity can also be calculated using the formula of cosines:

Pros:

• Speed of calculation: N * log(N)
• Works well for large N

But both of these metrics have common problems:

• Few elements -> large scatter of similarity
• Frequent elements -> weight below

TF/IDF metric avoids these problems to calculate the similarity:

where

Now it would be great to use this knowledge in practice.

Smlar extension for PostgreSQL

Oleg Bartunov and Teodor Sigaev developed PostgreSQL extension, called smlar, which provides several methods to calculate sets similarity (all built-in data types supported), similarity operator with indexing support on the base of GiST and GIN frameworks. Let’s look how to work with this extension. First of all, we need install it (PostgreSQL should be already installed):

git clone git://sigaev.ru/smlar
cd smlar
USE_PGXS=1 make && make install

On PostgreSQL 9.2 this extension should build without problem, for PostgreSQL 9.1 and earlier you need to make a little fix. In file “smlar_guc.c” on line 214 change call

set_config_option("smlar.threshold", buf,
                                            PGC_USERSET, PGC_S_SESSION ,GUC_ACTION_SET, true, 0);

to this (delete last argument)

set_config_option("smlar.threshold", buf,
                                            PGC_USERSET, PGC_S_SESSION ,GUC_ACTION_SET, true);

Let’s test instaled extension:

$ psql -d test
psql (9.1.3)
Type "help" for help.

test=# CREATE EXTENSION smlar;
CREATE EXTENSION

test=# SELECT smlar('{1,4,6}'::int[], '{5,4,6}' );
  smlar  
----------
 0.666667
(1 row)


test=# SELECT smlar('{1,4,6}'::int[], '{5,4,6}', 'N.i / sqrt(N.a * N.b)' );
  smlar  
----------
 0.666667
(1 row)

If you have the same output in console, you’ve installed extension successful. More information about this extension you can read in README file.

Function smlar computes similary of two arrays (arrays should be the same type) and return float from 0 to 1 (0 – absolutely no similar objects, 1 – absolutely similar arrays, equal). Function can take the third argument – the formula, that calculates the similarity of the two arrays. Module provides several GUC variables and it’s highly recommended to add to postgesql.conf:

custom_variable_classes = 'smlar'       # list of custom variable class names
smlar.threshold = 0.8  # or any other value > 0 and < 1

Array’s with similarity lower than ‘smlar.threshold’ are not similar by % operation.

test=# SELECT '{1,4,6,5,7,9}'::int[] % '{1,5,4,6,7,8,9}'::int[] as similar;
 similar
---------
 t
(1 row)

GiST/GIN support for % operation. The parameter “similar.type” allows you to specify what kind of formula used to calculate the similarity: cosine (default), overlap or tfidf. For “tfidf” need to make additional configuration, but I will not consider this in the article (all can be found in the README file). Now let’s consider an example of using this extension.

Finding duplicate of images

For example, I select the search for duplicate images. Other options for shopping, blogs are implemented in a similar way. The algorithm helps to find similar images that are slightly different: desaturated images, add watermark, passed through the filters.

In our algorithm, we will create a pixel matrix of each image. Let it be 15×15 pixels. The next step: we do not know the color of a pixel, but its intensity (the intensity is given by 0.299 * red + 0,587 * green + 0,114 * blue). Calculating the intensity will help us find the image is not paying attention to the colors of the images.

Once you have to calculate the intensity of all pixels in a 15×15 matrix, we find the ratio of the intensity of each pixel to the mean intensity of the matrix, and generate a unique number for each cell (in the code to generate unique for each cell, I added the coordinates to intensity) and obtain an array of 225 elements length (15 * 15 = 225). Excellent.

Below is the code to generate a digital signature for images on Ruby and PHP languages:

Ruby

PHP

61,33% similarity

23,56% similarity

87,55% similarity

Excellent, but it is comparing two images. Now let’s use PostgreSQL for searching. In PostgreSQL is an array type of the field. We will write the digital signature of the image:

CREATE TABLE images (
 id serial PRIMARY KEY,
 name varchar(50),
 image_array integer[]
);

INSERT into images(image_array) VALUES ('{1010257,...,2424257}');

test=# SELECT count(*) from images;
 count 
--------
 200000
(1 row)

test=# EXPLAIN ANALYZE SELECT id FROM images WHERE images.image_array % '{1010259,...,2424252}'::int[];


Aggregate  (cost=14.58..14.59 rows=1 width=0) (actual time=1.785..1.785 rows=1 loops=1)
   ->  Seq Scan on images  (cost=0.00..14.50 rows=33 width=0) (actual time=0.115..1.772 rows=20 loops=1)
         Filter: (image_array % '{1010259,1011253,...,2423253,2424252}'::integer[])
 Total runtime: 5152.819 ms
(4 rows)

It works, but search works without index. Let’s create it:

CREATE INDEX image_array_gin ON images USING GIN(image_array _int4_sml_ops);

or

CREATE INDEX image_array_gist ON images USING GIST(image_array _int4_sml_ops);

Difference between GiST and GIN indexes you can read here.

test=# EXPLAIN ANALYZE SELECT id FROM images WHERE images.image_array % '{1010259,1011253,...,2423253,2424252}'::int[];



 Aggregate  (cost=815.75..815.76 rows=1 width=0) (actual time=320.428..320.428 rows=1 loops=1)
   ->  Bitmap Heap Scan on images  (cost=66.42..815.25 rows=200 width=0) (actual time=108.127..304.524 rows=40000 loops=1)
         Recheck Cond: (image_array % '{1010259,1011253,...,2424252}'::integer[])
         ->  Bitmap Index Scan on image_array_gist  (cost=0.00..66.37 rows=200 width=0) (actual time=90.814..90.814 rows=40000 loops=1)
               Index Cond: (image_array % '{1010259,1011253,...,2424252}'::integer[])
 Total runtime: 320.487 ms
(6 rows)

Perfect! Let’s check performance.

test=# SELECT count(*) from images;
  count 
---------
 1000000
(1 row)


test=# EXPLAIN ANALYZE SELECT count(*) FROM images WHERE images.image_array % '{1010259,1011253,...,2423253,2424252}'::int[];


 Bitmap Heap Scan on images  (cost=286.64..3969.45 rows=986 width=4) (actual time=504.312..2047.533 rows=200000 loops=1)
   Recheck Cond: (image_array % '{1010259,1011253,...,2423253,2424252}'::integer[])
   ->  Bitmap Index Scan on image_array_gist  (cost=0.00..286.39 rows=986 width=0) (actual time=446.109..446.109 rows=200000 loops=1)
         Index Cond: (image_array % '{1010259,1011253,...,2423253,2424252}'::integer[])
 Total runtime: 2152.411 ms
(5 rows)

Let’s add sorting in SQL (the most similar images were the first), and add similarity as extra field:

EXPLAIN ANALYZE SELECT smlar(images.image_array, '{1010259,...,2424252}'::int[]) as similarity FROM images WHERE images.image_array % '{1010259,1011253, ...,2423253,2424252}'::int[] ORDER BY similarity DESC; 


 Sort  (cost=4020.94..4023.41 rows=986 width=924) (actual time=2888.472..2901.977 rows=200000 loops=1)
   Sort Key: (smlar(image_array, '{...,2424252}'::integer[]))
   Sort Method: quicksort  Memory: 15520kB
   ->  Bitmap Heap Scan on images  (cost=286.64..3971.91 rows=986 width=924) (actual time=474.436..2729.638 rows=200000 loops=1)
         Recheck Cond: (image_array % '{...,2424252}'::integer[])
         ->  Bitmap Index Scan on image_array_gist  (cost=0.00..286.39 rows=986 width=0) (actual time=421.140..421.140 rows=200000 loops=1)
               Index Cond: (image_array % '{...,2424252}'::integer[])
 Total runtime: 2912.207 ms
(8 rows)

Added sorting did not complicate query execution.

Here you can see all results in raw format.

Conclusion

PostgreSQL extension smlar can be used in systems where we need search similar objects, like texts, images, videos.

That’s all folks! Thank you for reading till the end.

In non trivial projects we often use SOA approach. Thereby one big monolithic application can be segregated into smaller applications or services. The benefit is obvious – it’s easy to control and maintain small applications. If you use Rails framework you probably already use ActiveResource for requesting your services because if follows ActiveRecord conventions.

Definitely ActiveResource operations are much slower than ActiveRecord operations because first one use HTTP connection and second one use usually persistent connection to database and database is usually always faster than application service.

But modern HTTP/1.1 servers support persistent connection and as Ilya Grigorik already mentioned in his awesome article we can have serious speedup for resources usage.

The problem is that ActiveResource does not support keep-alive connections.

But not for Railsware .

ActiveResource is Persistent

After playing a bit with sources we released small gem ActiveResource::Persistent that allows ActiveResource to use HTTP keep-alive feature.

Installation

Installation is trivial. Just drop line into your Gemfile

gem 'activeresource-persistent', :require => 'active_resource/persistent'

And all your resources will automatically reuse connections to services! You should NOT modify any line of your code.

Under the hood

Persistent connections are handled by excellent net-http-persistent library. The gem actually is very simple and provides ActiveResource::Persistent::HTTP object wrapper for ActiveResource.

However we covered library with specs that ensure it will work with different ActiveResource versions.

Currently it works with:

• v2.3.x
• v3.0.x
• v3.1.x
• v3.2.x

Enjoy!

References

• ActiveResource::Persistent gem
• ActiveResource::Persistent repository
• Optimizing HTTP: Keep-alive and Pipelining
• ActiveResource does not support keep-alive connections
• net-http-persistent gem

I’m going to use Photoshop CS4 and Fireworks CS5 and hope there will be no significant differences if you are using other versions. Also, my way around PS could be different from yours, so please don’t take any of my advise as immediate call to action, be flexible.

Concept

What I’m trying to do here is to get most of our PS experience to FW. Since we are not switching to FW completely — I’d recommend you not to use FW features full throttle yet, at least not all of them. And to keep the balance — same goes for PS. We’ll try to avoid using some specific stuff in both applications to make our files reasonably compatible and switching back and forth as easy as possible.

OK, a little less conversation, a little more action.

Preferences

The one and only thing I recommend adjusting there for now is to turn mouse highlight off in Edit section of FW (it will show you object boundaries when you mouse over). It’s the first thing that will make FW interface feel alien to you comparing to PS and we don’t want that, do we? I guess It could be handy while exploring a file of your colleague’s creation to overview the structure, but you should well know what is where in your own, so it looks a bit excessive to me.

Keyboard shortcuts

You can select “Photoshop” shortcuts from the “Current set”, but if you are anything like me you have a lot of shortcuts remapped to easy use with one hand and a bunch of your own exclusive ones for frequent operations — this option can’t get you covered completely. So transit as much of your PS shortcuts to FW as you can and create new ones as you explore FW.

Few hints:

• There is a useful, in some cases, tool – the Select Behind tool that hides under the Pointer tool, but since there is no such thing in PS and I’ve selected it by mistake a few times–you may consider removing a hotkey from it or assign a separate one.
• Same goes for the Vector Path tool and the Redraw Path tool — those go in pack with the Pen tool and we can put them aside for now. I can tell you that working with shapes is way more convenient and advanced in FW, but we will get to it later.
• There are a lot of cool vector shapes in FW, but we are trying to use stuff that we are already familiar with, so let’s stick with rectangle, round, polygonal and rounded rectangle.
• If you are using “save for web” in PS — map your shortcut for it to file/image preview, it’s a close enough analogue.

Panels

Everybody has own panel arrangement, so pull familiar ones, add Pages, States, and both Libraries. Arrange them the way you’ve used to in PS. Notice the Properties panel on the bottom — it’s the important one, leave it there and map a hotkey to show/hide it so it won’t be in your way in some cases. Now give your layout a name and save it. Btw, if you are on Windows and know how to remove the top panel — let me know. It’s useless for me, now it’s there and I didn’t find a way to hide it properly.

Here is my current PS and FW layout.

GO!

Now open a new document, turn rulers on (they are always in pixels — nice, huh?) and try to sketch something basic. I hope you’ll feel at home. Btw, here is a feature that I never used in PS, but found it in FW — by click and drag from the rulers corner you can move “zero” mark, so that it can be where your bleed ends and actual artwork begins. How cool is that?

What’s next?

Next time we will wireframe using libraries, pages, states and some more FW features that PS-only users can only dream about! Stay tuned!

Is it possible to deliver a child with 9 women in 1 month? Answer is obvious.
However we’ve tried to prove an opposite during one of our last experiment.

Amongst other goals of our client we got a fairly decent challenge — refresh the UI and put new layout together. Funny enough all that we had was 3 days and a bunch of approved designs.

Initial estimation for the front-end guys was 40 hours. Taking into account limited amount of the lead time and the fact that resources are shared between different products we’ve found out that the only one way to hit the delivery goal is to boost front-end performance.

We’ve gathered 4 front-end engineers from 4 different products — our kind of 4×4 in this case. Here they are — say Hi to Oksana, Alex, Sergei and Dima.

Upon starting this up we wanted to achieve a lot more than just plain scope execution.

What we’ve aimed for:

• Implement defined scope
• Build up self-organized team
• Hit the scope, present to the customer
• Share everybody’s knowledge
• Apply best practices in everyone’s product
• Have ton’s of fun

Few nights, hundreds lines of code and countless pizzas later the new born team finally got everything together. You’re welcome to compare the results yourself (great design is by Andrey Khorolets):

Goals completed:

• Scope was completed! 3 days instead of planned 4 though
• Everyone is now willing to use learned practices in products they are doing
• And everybody agreed that we certainly need to conductmore of those sessions. At least once a month and not only for front-end stuff
• Yep, and it was a whole lot of fun

Lessons learned:

• Participants has to be pro-active, self-organized, open and focused on the problem solving
• The scope should be clearly defined and prioritized. Ask a question if there is any concern.
• Synchronization and again synchronization. Start day at same time, periodically go through work done and recap remaining scope

Hopefully you’ve enjoying reading it. Railswarians have by far more awesomeness to show so stay tuned!

Here some of Code examples stuff:
1.

2.

3.

PostgreSQL is an object-relational database management system (ORDBMS). The main features of PostgreSQL are:

• database support of virtually unlimited size;
• powerful and reliable mechanisms for transactional replication;
• built-in extensible programming languages;
• inheritance;
• easy expandability by extensions.

The last feature allows to extend the capabilities of PostgreSQL. Let’s look at some of these extensions.

PostGIS

http://postgis.refractions.net/

PostGIS adds support of geographic objects to the PostgreSQL object-relational database. In fact, PostGIS “spatially enables” the PostgreSQL server, allowing it to be used as a backend spatial database for geographic information systems (GIS), much like ESRI’s SDE or Oracle’s Spatial extension. PostGIS follows the OpenGIS “Simple Features Specification for SQL” and has been certified as compliant with the “Types and Functions” profile.

This extension is very useful if you want do location-based queries in database, such as “find the closest N items to this location.”.

PostPic

http://github.com/drotiro/postpic

PostPic is an extension that enables image processing inside the database, like PostGIS does for spatial data. It adds the new ‘image’ type to the SQL, and several functions to process images (crop, resize, rotate, etc) and to extract their attributes (width, height, date, etc.).

PL/Proxy

http://pgfoundry.org/projects/plproxy/

PL/Proxy is database partitioning system implemented as PL language. Main idea is that proxy function will be created with same signature as remote function to be called, so only destination info needs to be specified inside proxy function body.

Texcaller

http://www.profv.de/texcaller/

Texcaller is a convenient interface to the TeX command line tools that handles all kinds of errors without much fuzz. It is written in plain C, is fairly portable, and has no external dependencies besides TeX.

PgMemcache

http://pgfoundry.org/projects/pgmemcache/

PgMemcache is a set of PostgreSQL user-defined functions that provide an interface to memcached. Installing pgmemcache is easy, but does have a few trivial requirements – libmemcached 0.38 or newer and PostgreSQL 8.4 or newer. With this extension the PostgreSQL can write, read, search, and delete data from memcached.

Prefix

http://pgfoundry.org/projects/prefix

The prefix project implements text prefix matches operator (prefix @> text) and provide a GiST opclass for indexing support of prefix searches. Typical query like the following is now able to benefit from index lookups, as soon as the prefix column is of type prefix_range: SELECT * FROM prefixes WHERE prefix @> ’0123456789′ ORDER BY length(prefix::text) LIMIT 1

pgSphere

http://pgsphere.projects.postgresql.org/

pgSphere contains methods for working with spherical coordinates and objects. It also supports indexing of spherical objects. Used to work with geographic (can be used instead of the PostGIS) or astronomical data types.

Multicorn

http://multicorn.org/

As of version 9.1, PostgreSQL can link to other systems to retrieve data via Foreign Data Wrappers (FDWs). These can take the form of any data source, such as a file system, another RDBMS, or a web service. That means that the regular database queries can use these data sources like regular tables, and even join multiple data sources together. Many extensions for FDW is available:

• oracle_fdw – connects to Oracle databases.
• mysql_fdw – connects to MySQL databases.
• tds_fdw – connects to Sybase and Microsoft SQL Server databases.
• odbc_fdw – connects to any ODBC source.
• couchdb_fdw – connects to CouchDB databases.
• redis_fdw – connects to Redis databases.
• twitter_fdw – fetches messages from Twitter.
• ldap_fdw – queries LDAP servers.
• file_fdw – access data files in the server’s file system and query them as tables.
• file_fixed_length_record_fdw – reads flat files with columns of fixed width.
• PGStrom – uses GPU devices to accelerate sequential scan on massive amount of records with complex qualifiers.
• s3_fdw – reads files located in Amazon S3.
• www_fdw – accesses web services as a data source.

Multicorn is an extension that enables Foreign Data Wrappers to be written in Python. There are a number of foreign data wrappers it provides as standard:

• multicorn.sqlalchemyfdw – used to access data stored in any database supported by the sqlalchemy python toolkit, such as MySQL, SQLite, Oracle, Microsoft SQL Server and many others.
• multicorn.fsfdw – used to access data stored in various files, in a filesystem.
• multicorn.csvfdw – used to access data stored in CSV files.
• multicorn.rssfdw – used to access items from an RSS feed.

Hstore

http://www.postgresql.org/docs/9.1/static/hstore.html

This module implements a data type hstore for storing sets of (key,value) pairs within a single PostgreSQL data field. This can be useful in various scenarios, such as rows with many attributes that are rarely examined, or semi-structured data. hstore has GiST and GIN index support for the @>, ?, ?& and ?| operators. hstore also supports btree or hash indexes for the = operator. This allows hstore columns to be declared UNIQUE, or to be used in GROUP BY, ORDER BY or DISTINCT expressions. The sort ordering for hstore values is not particularly useful, but these indexes may be useful for equivalence lookups.

Intarray

http://www.postgresql.org/docs/9.1/static/intarray.html

The intarray module provides a number of useful functions and operators for manipulating null-free arrays of integers. There is also support for indexed searches using some of the operators.

All of these operations will throw an error if a supplied array contains any NULL elements. I used this extension when developed simple method for comparison of images by PostgreSQL (http://leopard.in.ua/2010/12/09/bystroe-sravnenie-izobrazhenij-s-pomoshhyu-rubyphp-i-postgresql/, russian article).

Dblink

http://www.postgresql.org/docs/9.1/static/dblink.html

Adds support for connections to other PostgreSQL databases from within a database session. Also dblink allows to do autonomous transactions (like in Oracle).

That’s all folks!

Pivotal Tracker is a great project management tool for teams, which we at RailsWare use extensively for all our projects.

However, for a GTD practitioner such as myself, the Tracker violates the virtue of having all your tasks in one place. And, even if you think you can split your work and your personal life and use the Tracker only for the former, it’s still not well suited for GTD.

Thus, I consider Pivotal Tracker an Inbox and copy all my stories into my OmniFocus. Doing boring stuff manually is not the RailsWare way, so I wrote an extension for Google Chrome, that sends stories to OmniFocus with one click of a button.

Get the extension on the Chrome WebStore: Send to OmniFocus from Pivotal Tracker

Let’s imagine that we have a task, where on first load of the page we show only 10 products. But when user scroll, we should automatically load more products on page (aka continuous pagination). Of course, this task can be solved in several ways, but I want solve this task by sharing one template between Rails and JavaScript.

There are many JavaScripts templates exists today – Hogan.js, Handlebars, Mustache etc. I choose Mustache, because it’s simple and has template engine implemented on many languages (we need JavaScript and Ruby). We created a gem for such type of tasks – smt_rails. How it works?

First of all you have to add this gem to your Gemfile and start ‘bundle install’:

gem 'smt_rails', git: 'git://github.com/railsware/smt_rails.git'

Next launch generator:

rails g smt_rails:install

That’s all.

Now you can create a directory in ‘app/templates’ mustache templates (these templates ends with ‘.mustache’ by default). Let’s create partial for the product:

File: ‘app/templates/products/_product.mustache

Content:

<a href="{{url}}">{{title}}</a>
<p>{{description}}</p>

You can render this partial in ActiveView:

<%= render "products/product", :mustache => product.as_json %> 

And in JavaScript:

var product = … ; come from ajax call as json
var content = SMT['products/product'](product);

So in the end you’ll have only one template, which is shared between Rails and JavaScript.

Demo application with scroll pagination you can find here

Source code: https://github.com/le0pard/smt_rails_example

That’s all folks!

SMT_rails (Shared Mustache Templates for Rails)

Rubygems: https://rubygems.org/gems/smt_rails

Source code: https://github.com/railsware/smt_rails

Our overall goal is to build product vision together at the very beginning of a development cycle and not at the end of developing a product-he-doesn’t-need and which doesn’t solve consumers problems. Here are few general words about how Railsware does that approach.

Step 1. Interview, definition of benefits

First and foremost, we particularize what product should be created during the interview with business owner. The very most important part is a deep understanding of what benefits the business should deliver to its consumers.

Step 2. ColorScope – a way for critical (close to 100%) data acquisition and prioritization

All the data collected during interviews is being divided into descriptive parts, then being coded by color according to its magnitude and priority.

Steps 1 and 2 can be repeated as many times as needed.

Step 3. User Stories

Product functionality consists of logical parts. Within every single part, user can make only one action (e.g., to sign in). All possible behaviors of a functional part (e.g., entering wrong data, output of errors) are described in user stories. Every user story is finished by its benefit description. So you can see all the components and screens needed to be created, including the smallest ones.

Step 4. Flow Document

When product vision is finally created, it is time to step forward and visualize product by screens based on user stories. Instead of sending tons of emails, we decided to organize space for all screens and comments grouped into iterations. This documentation method we call FlowDoc.

FlowDoc – is a Google Sites document comprising product description divided into iterations (flows), with mockups and final designs. FlowDoc makes it easy to synchronize team members, to share updates, to edit and comment.

We use DropBox as a screen storage space. Screens are to be placed in Public folder. For screen sharing, you need to copy Public Link of a file and put it into Google Sites document. All folders with screens are named according to documentation parts (e.g., Register on Site). A screen filename is the name of a certain user story.

Designer needs to put pictures into the document just once. To provide full-automatic screen updating he or she just need to renew files in DropBox. This update action can be implemented by one click. Below are some tips for popular graphics editors.

Exporting screens from Adobe Fireworks
This program natively supports multi-page mode. It means you can hold all product screens in one file. So, page-by-page export can be provided into any graphic format by Export Pages to Files.

Exporting screens from Adobe Photoshop

There is no multi-page support in Photoshop. In this case, we need to use one trick – Layer Comps. Layer Comp is a special layer with information about object placement, visibility and style. Comps can be accessed through the Layer Comps Panel.

We can imitate multiple pages by saving layers’ and folders’ visibility in Layer Comps being named as the respective application pages. In this case, switching between Layer Comps looks like switching between application screens. Every Comp can be exported as a separate JPEG or PNG file. Thus, exporting all pages from one file takes less time than exporting pages from separate files – only few seconds. You just need to run a script from the menu File > Scripts > Layer Comps to Files.

That’s how easy and vivid product design method looks like. It is ours and it works!