Spinning the Ubuntu symbol

I recently saw the “Circle of Friends” casu­ally referred to as a “spin­ning logo”. It doesn’t actu­ally spin, but that got me won­der­ing: If it did, what might it look like? Its shape does seem to sug­gest motion.

What first came to mind could be described as hav­ing the mechan­ics of a loosely cou­pled ratchet. I imag­ine the ring kick­ing the dots, which recoil and then spring back into posi­tion:

Spinning Ubuntu "Circle of Friends" symbol

Watch­ing this reminds me of try­ing—and fail­ing—to pull-start an engine. If I encoun­tered it in a user inter­face I’d prob­a­bly inter­pret its stut­ter­ing motion as a sign of uncer­tainty, of per­haps the suc­cess of an attempted error recov­ery or response from an unre­li­able ser­vice.

The mood notice­ably improves when I model the sys­tem after a torque limiting clutch. In order to move the dots, the ring must ini­tially accel­er­ate slowly. Then, just as wheel accel­er­a­tion is mod­u­lated for effect in a hurdy gurdy, this sys­tem per­forms the tablecloth trick by skip­ping a seg­ment before allow­ing the dots to return to posi­tion:

Spinning Ubuntu "Circle of Friends" symbol

In a user inter­face, I’d expect this to sig­nify that work is being done. The dots' oscil­la­tion sug­gests that progress is still piece­meal, but the way the ring so grace­fully catches them just as they rebound speaks to the work’s sta­bil­ity.

To more strongly com­mu­ni­cate a mes­sage of progress, I inverted roles of the dots and ring, allow­ing a trans­fer of momen­tum from the for­mer to lat­ter, which in turn rotates the whole sys­tem. The result­ing dynamic resem­bles an overbalanced wheel in per­pet­ual motion:

Spinning Ubuntu "Circle of Friends" symbol

I find the con­tin­ual for­ward motion of this pleas­ing. Pre­sented with this as an activ­ity indi­ca­tor in a user inter­face, I would feel reas­sured that sure progress is being made.

There is, how­ever, a some­what grue­some prob­lem I’ve over­looked through­out this explo­ration. The mere act of sep­a­rat­ing dot from ring seg­ment is, upon reeval­u­a­tion of their orig­i­nal sym­bol­ism, a tragic behead­ing of our three friends.


Smarter timestamps in Middleman

The feed template in middleman-blog uses file mod­i­fi­ca­tion times to deter­mine when arti­cles were updated. If your arti­cles are under ver­sion con­trol, how­ever, you can do bet­ter.

Your ver­sion con­trol sys­tem already describes pre­cisely the mod­i­fi­ca­tions that are mean­ing­ful: those that involve the arti­cles' con­tent. Arbi­trary file sys­tem activ­ity such as cloning a repos­i­tory or syn­chro­niz­ing data between com­put­ers is irrel­e­vant.

To tap into this more reli­able data source, I’ve created a Mid­dle­man exten­sion that pro­vides an mtime attribute on each arti­cle. Behind the scenes it queries the ver­sion con­trol sys­tem to find the last recorded change to the arti­cle’s con­tent.

With the exten­sion in place, the atom:updated element for each arti­cle can be writ­ten as:

xml.updated article.mtime.iso8601

and for the entire feed as:

xml.updated feed_articles.map(&:mtime).max.iso8601

The exten­sion is mod­u­lar with respect to ver­sion con­trol sys­tems. I’ve imple­mented sup­port for Git and a plain file sys­tem fall­back.


Monokai terminal typescripts

I recently had occa­sion to include a ter­mi­nal ses­sion in a blog post. To cap­ture it I used script, as in this exam­ple:

aha git:(master) script
Script started, file is typescript
aha git:(master)  git graph
* 1f2e5c5 5 hours ago: (HEAD, tag: 0.4.7, upstream/master, master) Littles changes for the input of Andrew Kvalheim (thanks) Ziz
* 5b161b3 16 hours ago: (stylesheet) Add option to use a stylesheet instead of inline styles. Andrew Kvalheim
* 36b0a3a 1 year, 6 months ago: (tag: 0.4.6.1, origin/master, origin/HEAD) Small version changes, make clean, merging, etc. Ziz
*   86abaa4 1 year, 6 months ago: Merge branch 'master' of github.com:theZiz/aha Ziz
|\  
| *   d0dc6c1 1 year, 6 months ago: Merge pull request #1 from xtaran/master theZiz
| |\  
* | | ed4f29b 1 year, 6 months ago: Fix several hyphen-used-as-minus-sign issues in the man page Axel Beckert
| |/  
|/|   
* | bf5ed98 1 year, 6 months ago: Honor common compiler and linker flags Axel Beckert
|/  
* 42a7c6f 1 year, 7 months ago: (tag: 0.4.6) Added Feature for not creating a header e.g. for already existing HTML-files (thanks to Nicolas Zagulajew) Ziz
* f718ba6 1 year, 8 months ago: (tag: 0.4.5) - Added Feature for word wrap (thanks to Jussi Leinonen) Ziz
* 21fd441 1 year, 9 months ago: First commit Ziz
* 79e3f97 1 year, 9 months ago: initial commit theZiz
aha git:(master)  exit
Script done, file is typescript
aha git:(master)  

I ran the type­script through aha to gen­er­ate the HTML for the blog post, but received hard-coded col­ors that match nei­ther my ter­mi­nal nor this site:

aha git:(master)  git graph
* 1f2e5c5 5 hours ago: (HEAD, tag: 0.4.7, upstream/master, master) Littles changes for the input of Andrew Kvalheim (thanks) Ziz
* 5b161b3 16 hours ago: (stylesheet) Add option to use a stylesheet instead of inline styles. Andrew Kvalheim
* 36b0a3a 1 year, 6 months ago: (tag: 0.4.6.1, origin/master, origin/HEAD) Small version changes, make clean, merging, etc. Ziz
*   86abaa4 1 year, 6 months ago: Merge branch 'master' of github.com:theZiz/aha Ziz
|\
| *   d0dc6c1 1 year, 6 months ago: Merge pull request #1 from xtaran/master theZiz
| |\
* | | ed4f29b 1 year, 6 months ago: Fix several hyphen-used-as-minus-sign issues in the man page Axel Beckert
| |/
|/|
* | bf5ed98 1 year, 6 months ago: Honor common compiler and linker flags Axel Beckert
|/
* 42a7c6f 1 year, 7 months ago: (tag: 0.4.6) Added Feature for not creating a header e.g. for already existing HTML-files (thanks to Nicolas Zagulajew) Ziz
* f718ba6 1 year, 8 months ago: (tag: 0.4.5) - Added Feature for word wrap (thanks to Jussi Leinonen) Ziz
* 21fd441 1 year, 9 months ago: First commit Ziz
* 79e3f97 1 year, 9 months ago: initial commit theZiz

So I added the option to anno­tate color with classes instead, pro­duc­ing markup like this:

<span class="green bold"></span><span class="cyan bold">aha </span><span class="blue bold">git:(</span><span class="red bold">master</span><span class="blue bold">) </span>git graph
* <span class="red">1f2e5c5</span> <span class="green">5 hours ago:</span><span class="yellow"> (HEAD, tag: 0.4.7, upstream/master, master)</span> Littles changes for the input of Andrew Kvalheim (thanks) <span class="blue">Ziz</span>
* <span class="red">5b161b3</span> <span class="green">16 hours ago:</span><span class="yellow"> (stylesheet)</span> Add option to use a stylesheet instead of inline styles. <span class="blue">Andrew Kvalheim</span>
* <span class="red">36b0a3a</span> <span class="green">1 year, 6 months ago:</span><span class="yellow"> (tag: 0.4.6.1, origin/master, origin/HEAD)</span> Small version changes, make clean, merging, etc. <span class="blue">Ziz</span>
*   <span class="red">86abaa4</span> <span class="green">1 year, 6 months ago:</span><span class="yellow"></span> Merge branch 'master' of github.com:theZiz/aha <span class="blue">Ziz</span>
<span class="green">|</span><span class="yellow">\</span>  
<span class="green">|</span> *   <span class="red">d0dc6c1</span> <span class="green">1 year, 6 months ago:</span><span class="yellow"></span> Merge pull request #1 from xtaran/master <span class="blue">theZiz</span>
<span class="green">|</span> <span class="blue">|</span><span class="purple">\</span>  
* <span class="blue">|</span> <span class="purple">|</span> <span class="red">ed4f29b</span> <span class="green">1 year, 6 months ago:</span><span class="yellow"></span> Fix several hyphen-used-as-minus-sign issues in the man page <span class="blue">Axel Beckert</span>
<span class="purple">|</span> <span class="blue">|</span><span class="purple">/</span>  
<span class="purple">|</span><span class="purple">/</span><span class="blue">|</span>   
* <span class="blue">|</span> <span class="red">bf5ed98</span> <span class="green">1 year, 6 months ago:</span><span class="yellow"></span> Honor common compiler and linker flags <span class="blue">Axel Beckert</span>
<span class="blue">|</span><span class="blue">/</span>  
* <span class="red">42a7c6f</span> <span class="green">1 year, 7 months ago:</span><span class="yellow"> (tag: 0.4.6)</span> Added Feature for not creating a header e.g. for already existing HTML-files (thanks to Nicolas Zagulajew) <span class="blue">Ziz</span>
* <span class="red">f718ba6</span> <span class="green">1 year, 8 months ago:</span><span class="yellow"> (tag: 0.4.5)</span> - Added Feature for word wrap (thanks to Jussi Leinonen) <span class="blue">Ziz</span>
* <span class="red">21fd441</span> <span class="green">1 year, 9 months ago:</span><span class="yellow"></span> First commit <span class="blue">Ziz</span>
* <span class="red">79e3f97</span> <span class="green">1 year, 9 months ago:</span><span class="yellow"></span> initial commit <span class="blue">theZiz</span>
<span class="green bold"></span><span class="cyan bold">aha </span><span class="blue bold">git:(</span><span class="red bold">master</span><span class="blue bold">) </span><span class="yellow bold"></span> exit

With a cus­tom stylesheet to map names to a color scheme, in this case Monokai Light,

// Palette
$black:  #49483e; $blue:   #66d9ef; $gray:   #75715e;
$green:  #a6e22e; $orange: #fd971f; $pink:   #f92672;
$purple: #ae81ff; $white:  #f8f8f2; $yellow: #e6db74;

// Default colors
.reset    {color:            $white;}
.bg-reset {background-color: $black;}

// Named colors
$map: black  $black,  blue $blue, cyan  $orange, green  $green,
      purple $purple, red  $pink, white $white,  yellow $yellow;
@each $name, $value in $map {
  .#{$name}    {color:            $value}
  .bg-#{$name} {background-color: $value}
}

// Effects
.bold      {font-weight:     bold;}
.blink     {text-decoration: blink;}
.underline {text-decoration: underline;}

the result turned out nicely:

aha git:(master)  git graph
* 1f2e5c5 5 hours ago: (HEAD, tag: 0.4.7, upstream/master, master) Littles changes for the input of Andrew Kvalheim (thanks) Ziz
* 5b161b3 16 hours ago: (stylesheet) Add option to use a stylesheet instead of inline styles. Andrew Kvalheim
* 36b0a3a 1 year, 6 months ago: (tag: 0.4.6.1, origin/master, origin/HEAD) Small version changes, make clean, merging, etc. Ziz
*   86abaa4 1 year, 6 months ago: Merge branch 'master' of github.com:theZiz/aha Ziz
|\  
| *   d0dc6c1 1 year, 6 months ago: Merge pull request #1 from xtaran/master theZiz
| |\  
* | | ed4f29b 1 year, 6 months ago: Fix several hyphen-used-as-minus-sign issues in the man page Axel Beckert
| |/  
|/|   
* | bf5ed98 1 year, 6 months ago: Honor common compiler and linker flags Axel Beckert
|/  
* 42a7c6f 1 year, 7 months ago: (tag: 0.4.6) Added Feature for not creating a header e.g. for already existing HTML-files (thanks to Nicolas Zagulajew) Ziz
* f718ba6 1 year, 8 months ago: (tag: 0.4.5) - Added Feature for word wrap (thanks to Jussi Leinonen) Ziz
* 21fd441 1 year, 9 months ago: First commit Ziz
* 79e3f97 1 year, 9 months ago: initial commit theZiz
aha git:(master)  exit