Re: [TFUI] [ANN] Merb Mind Maps - a tutorial on RSpec, GraphViz & a little Merb

Alan Baljeu <alanbaljeu-/[email protected]> Mon, 16 Feb 2009 06:06:14 -0800 (PST)
Newsgroups gmane.comp.programming.test-first-user-interfaces
Message-ID <[email protected]>
--1UkH5-iitneBTb2o9v6jL72MeyxQXg6Q-flNhEq
Content-Type: text/plain; charset=US-ASCII
Content-Transfer-Encoding: 7bit

I like the concept Phlip, and it's impressive you can achieve that much with so little code.  It also looks like a very useful way of presenting a collection of blog articles.  Very helpful for someone trying to figure out where to go exploring an archive.  So when are you going to substitute this for your blog's tag cloud?



Nevertheless, I must quarrel with your use of the term mind-map.  Did Crispin and Gregory use this term?  When I saw your letter, I was thinking, how could you /possibly/ make a mind map out of a collection of tags?  When I saw the example I immediately thought, "oh! you mean concept graphs".  Because to me, a concept graph is a collection of nodes, each containing a keyword, and linked by lines.  

A mind map is what Tony Buzan invented, and what MindJet implemented  (and many others copied): a radially drawn tree with a central concept fleshed out in increasing detail, with pictures and annotations to illustrate and clarify the concept.

Sorry to be pedantic, but I think it's a valuable distinction.

Alan Baljeu




________________________________
From: Phlip <[email protected]>


Netizens:

Crispin & Gregory's new book, /Agile Testing: A Practical Guide for Testers and 
Agile Teams/, has a kewt "mind map" at the start of each chapter. It inspired me 
to find a way to use the "tag cloud" on a blog to draw a mind map of the posts, 
linked by their tags in common.

The result is this little project:

http://broadcast. oreilly.com/ 2009/02/merb- mind-maps. html

It showcases...

- graph theory - including Minimum Spanning Tree
- GraphViz - to typeset the mind maps
- Merb - a Rails-style website platform
- Ruby - that annoying language that won't go away
- RSpec - a Behavior Driven Development system
- transparent PNG files with ImageMagick drop-shadows
- assert{ 2.0 } - an assertion that reflects its expressions
- assert{ xpath } - the latest version of my assert_xpath system
- TDD for algorithms & graph theory!
- fixture-dependencie s - a Rails fixture clone with more features
- GraphvizR - a lite Ruby gem that wraps GraphViz dot notation
- and even a tiny bit of HAML!

The algorithm itself depends on none of those things, so any blog could use the 
algorithm to present the mind-maps that are already latent within it!

_   


      __________________________________________________________________
Instant Messaging, free SMS, sharing photos and more... Try the new Yahoo! Canada Messenger at http://ca.beta.messenger.yahoo.com/

[Non-text portions of this message have been removed]


--1UkH5-iitneBTb2o9v6jL72MeyxQXg6Q-flNhEq
Content-Type: text/html; charset=US-ASCII
Content-Transfer-Encoding: 7bit



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>




<body style="background-color: #ffffff;">

<!--~-|**|PrettyHtmlStartT|**|-~-->
<div id="ygrp-mlmsg" style="width:655px; position:relative;">
<div id="ygrp-msg" style="width: 470px; margin:0; padding:0 25px 0 0; float:left; z-index:1;">
<!--~-|**|PrettyHtmlEndT|**|-~-->

    <div id="ygrp-text">
            <p>I like the concept Phlip, and it's impressive you can achieve that much with so little code.  It also looks like a very useful way of presenting a collection of blog articles.  Very helpful for someone trying to figure out where to go exploring an archive.  So when are you going to substitute this for your blog's tag cloud?<br>
<br>
Nevertheless, I must quarrel with your use of the term mind-map.  Did Crispin and Gregory use this term?  When I saw your letter, I was thinking, how could you /possibly/ make a mind map out of a collection of tags?  When I saw the example I immediately thought, &quot;oh! you mean concept graphs&quot;.  Because to me, a concept graph is a collection of nodes, each containing a keyword, and linked by lines.  <br>
<br>
A mind map is what Tony Buzan invented, and what MindJet implemented  (and many others copied): a radially drawn tree with a central concept fleshed out in increasing detail, with pictures and annotations to illustrate and clarify the concept.<br>
<br>
Sorry to be pedantic, but I think it's a valuable distinction.<br>
<br>
Alan Baljeu<br>
<br>
____________<wbr>_________<wbr>_________<wbr>__<br>
From: Phlip &lt;<a href="mailto:phlip2005%40gmail.com">phlip2005@gmail.<wbr>com</a>&gt;<br>
<br>
Netizens:<br>
<br>
Crispin &amp; Gregory's new book, /Agile Testing: A Practical Guide for Testers and <br>
Agile Teams/, has a kewt &quot;mind map&quot; at the start of each chapter. It inspired me <br>
to find a way to use the &quot;tag cloud&quot; on a blog to draw a mind map of the posts, <br>
linked by their tags in common.<br>
<br>
The result is this little project:<br>
<br>
<a href="http://broadcast.">http://broadcast.</a> oreilly.com/ 2009/02/merb- mind-maps. html<br>
<br>
It showcases...<br>
<br>
- graph theory - including Minimum Spanning Tree<br>
- GraphViz - to typeset the mind maps<br>
- Merb - a Rails-style website platform<br>
- Ruby - that annoying language that won't go away<br>
- RSpec - a Behavior Driven Development system<br>
- transparent PNG files with ImageMagick drop-shadows<br>
- assert{ 2.0 } - an assertion that reflects its expressions<br>
- assert{ xpath } - the latest version of my assert_xpath system<br>
- TDD for algorithms &amp; graph theory!<br>
- fixture-dependencie s - a Rails fixture clone with more features<br>
- GraphvizR - a lite Ruby gem that wraps GraphViz dot notation<br>
- and even a tiny bit of HAML!<br>
<br>
The algorithm itself depends on none of those things, so any blog could use the <br>
algorithm to present the mind-maps that are already latent within it!<br>
<br>
_   <br>
<br>
____________<wbr>_________<wbr>_________<wbr>_________<wbr>_________<wbr>_________<wbr>_<br>
Instant Messaging, free SMS, sharing photos and more... Try the new Yahoo! Canada Messenger at <a href="http://ca.beta.messenger.yahoo.com/">http://ca.beta.<wbr>messenger.<wbr>yahoo.com/</a><br>
<br>
[Non-text portions of this message have been removed]<br>
<br>
</p>
 

    </div>  

    <!--~-|**|PrettyHtmlStart|**|-~-->
    <div width="1" style="color: white; clear: both;">__._,_.___</div>

             
    <!-- Start the section with Message In topic -->
    <div id="ygrp-actbar" style="clear: both; margini-bottom: 25px; white-space:nowrap; color: #666; text-align: right;">
              <span class="left" style="float: left; white-space:nowrap;">
          <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/message/1029;_ylc=X3oDMTM0ZnBlNmFuBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BG1zZ0lkAzEwMzAEc2VjA2Z0cgRzbGsDdnRwYwRzdGltZQMxMjM0Nzk1OTA2BHRwY0lkAzEwMjk-">
            Messages in this topic          </a> (<span class="bld" style="font-weight:bold;">2</span>)
        </span>
        <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/post;_ylc=X3oDMTJwbmpidThyBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BG1zZ0lkAzEwMzAEc2VjA2Z0cgRzbGsDcnBseQRzdGltZQMxMjM0Nzk1OTA2?act=reply&messageNum=1030">
          <span class="bld" style="font-weight:bold;">
            Reply          </span> (via web post)
        </a>  | 
        <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/post;_ylc=X3oDMTJldjBpc3QyBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA250cGMEc3RpbWUDMTIzNDc5NTkwNg--" class="bld" style="font-weight:bold;">
          Start a new topic        </a>
          </div> 
    <!-------     Start Nav Bar  ------>
    <!-- |**|begin egp html banner|**| -->
    <div id="ygrp-vitnav" style="padding-top: 10px; font-family: Verdana; font-size: 77%; margin: 0;">
                <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/messages;_ylc=X3oDMTJlMTc0dmNkBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA21zZ3MEc3RpbWUDMTIzNDc5NTkwNg--">Messages</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/files;_ylc=X3oDMTJmdGlwZmRjBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2ZpbGVzBHN0aW1lAzEyMzQ3OTU5MDY-">Files</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/photos;_ylc=X3oDMTJlMGM1cnUwBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3Bob3QEc3RpbWUDMTIzNDc5NTkwNg--">Photos</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/links;_ylc=X3oDMTJma2VpaG5yBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2xpbmtzBHN0aW1lAzEyMzQ3OTU5MDY-">Links</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/database;_ylc=X3oDMTJjMTdoOWNjBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2RiBHN0aW1lAzEyMzQ3OTU5MDY-">Database</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/polls;_ylc=X3oDMTJmZW5wYTZmBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3BvbGxzBHN0aW1lAzEyMzQ3OTU5MDY-">Polls</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/members;_ylc=X3oDMTJlbTRxYmxwBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA21icnMEc3RpbWUDMTIzNDc5NTkwNg--">Members</a>  
            |    <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/calendar;_ylc=X3oDMTJkOTkwdXNqBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2NhbARzdGltZQMxMjM0Nzk1OTA2">Calendar</a>  
    </div>  
    <!-- |**|end egp html banner|**| -->

                        <div id="ygrp-grft" style="font-family: Verdana; font-size: 77%; padding: 15px 0;">
          

        </div>
      
                  <div id="ygrp-mkp">
      <div id="hd">MARKETPLACE</div>
      <div id="ads">
                  <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
            <hr noshade="noshade" size="1"><a href="http://us.ard.yahoo.com/SIG=13r9gju63/M=493064.12016295.13271503.10835568/D=groups/S=1705007207:MKP1/Y=YAHOO/EXP=1234803106/L=/B=obTLIUPDhEk-/J=1234795906265443/A=5530388/R=0/SIG=11nuutlas/*http://explore.yahoo.com/groups/kraftmealsmadesimple/">From kitchen basics to easy recipes - join the Group from Kraft Foods
</a>          </div>
                              </div>
    </div>
      
    <!-- yahoo logo -->
    <!-- |**|begin egp html banner|**| -->
    <div id="ygrp-ft" style="font-family: verdana; font-size: 77%; border-top: 1px solid #666; padding: 5px 0;">
      <a href="http://groups.yahoo.com/;_ylc=X3oDMTJkMGEwdTUxBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2dmcARzdGltZQMxMjM0Nzk1OTA2">
      <img src="http://us.i1.yimg.com/us.yimg.com/i/yg/img/logo/ma_grp_160.gif" height="15" width="106" border="0" alt="Yahoo! Groups"></a> <br>
      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces/join;_ylc=X3oDMTJmdm8ya3RkBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA3N0bmdzBHN0aW1lAzEyMzQ3OTU5MDY-">Change settings via the Web</a> (Yahoo! ID required) <br>
      Change settings via email: <a href="mailto:TestFirstUserInterfaces-digest-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=Email Delivery: Digest">Switch delivery to Daily Digest</a> | <a href = "mailto:TestFirstUserInterfaces-traditional-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=Change Delivery Format: Traditional">Switch format to Traditional</a> <br>

      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces;_ylc=X3oDMTJkOG9xMjFtBF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwNmdHIEc2xrA2hwZgRzdGltZQMxMjM0Nzk1OTA2">
        Visit Your Group 
      </a> |
      <a href="http://docs.yahoo.com/info/terms/">
        Yahoo! Groups Terms of Use      </a> |
      <a href="mailto:TestFirstUserInterfaces-unsubscribe-hHKSG33TihhbjbujkaE4pw@public.gmane.org?subject=">
        Unsubscribe      </a> 
    </div>     <!-- |**|end egp html banner|**| -->
  </div> <!-- ygrp-msg -->

  
  <!-- Sponsor -->
  <!-- |**|begin egp html banner|**| -->
  <div id="ygrp-sponsor" style="width:160px; float:right; clear:none; margin:0 0 25px 0; background: white;">
    <!-- Network content -->
    
<!-- Start Recommendations -->
<div id="ygrp-reco">
     </div>
<!-- End Recommendations -->

	    <!-- Start vitality -->
	    <div id="ygrp-vital" style="background-color: #e0ecee; margin-bottom: 20px; padding: 2px 0 8px 8px;">
	      		<div id="vithd" style="font-size: 77%; font-family: Verdana; font-weight: bold; color: #333; text-transform: uppercase;">Recent Activity</div>
		<ul style="list-style-type:none; padding: 0; margin: 2px 0;">
		    
		    
		    
		    
		    
		    
		</ul>
	      	      <a href="http://groups.yahoo.com/group/TestFirstUserInterfaces;_ylc=X3oDMTJlMHZrOW11BF9TAzk3MzU5NzE0BGdycElkAzg3NDQ3MDQEZ3Jwc3BJZAMxNzA1MDA3MjA3BHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTIzNDc5NTkwNg--">
		Visit Your Group	      </a>
	    </div> 
	    	    	      
	    <!-- Network content -->
	    	      <div style="background-color:#EEEEEE; margin-bottom:20px; padding:10px 8px;">    <div id="nc">
              <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">Yahoo! Finance</div> 
<p><a href="http://us.ard.yahoo.com/SIG=13ohjcd8a/M=493064.12016257.12445664.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1234803106/L=/B=orTLIUPDhEk-/J=1234795906265443/A=4507179/R=0/SIG=12de4rskk/*http://us.rd.yahoo.com/evt=50284/*http://finance.yahoo.com/personal-finance">It's Now Personal</a></p> 
<p>Guides, news,</p> 
<p>advice & more.</p>                   </div>
                    <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">Need traffic?</div> 
<p><a href="http://us.ard.yahoo.com/SIG=13ou31kg6/M=493064.12016308.12445700.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1234803106/L=/B=o7TLIUPDhEk-/J=1234795906265443/A=3848644/R=0/SIG=131l83flq/*http://searchmarketing.yahoo.com/arp/srchv2.php?o=US2006&cmp=Yahoo&ctv=Groups5&s=Y&s2=&s3=&b=50">Drive customers</a></p> 
<p>With search ads</p> 
<p>on Yahoo!</p>                  </div>
                    <div class="ad" style="color:#628C2A; font-family:Arial; font-weight:bold;">
                      <div id="hd1">Yahoo! Groups</div> 
<p><a href="http://us.ard.yahoo.com/SIG=13o5k4lbt/M=493064.12662708.12980600.8674578/D=groups/S=1705007207:NC/Y=YAHOO/EXP=1234803106/L=/B=pLTLIUPDhEk-/J=1234795906265443/A=5349275/R=0/SIG=11nhsqmjq/*http://advision.webevents.yahoo.com/EverydayWellness/">Everyday Wellness Zone</a></p> 
<p>Check out featured</p> 
<p>healthy living groups.</p>                  </div>
          </div>
</div>
	    
	  </div> 	  <!-- |**|end egp html banner|**| -->
	  <div style="clear:both; color: #FFF; font-size:1px;">.</div>
	</div> 		  <img src="http://geo.yahoo.com/serv?s=97359714/grpId=8744704/grpspId=1705007207/msgId=1030/stime=1234795906/nc1=4507179/nc2=3848644/nc3=5349275" width="1" height="1"> <br>
	
	<div style="color: white; clear: both;">__,_._,___</div>
	<!--~-|**|PrettyHtmlEnd|**|-~-->
	</body>
	<!--~-|**|PrettyHtmlStart|**|-~-->
	<head>
<style type="text/css">
<!--
#ygrp-mkp{
  border: 1px solid #d8d8d8;
  font-family: Arial;
  margin: 14px 0px;
  padding: 0px 14px;
}
#ygrp-mkp hr{
  border: 1px solid #d8d8d8;
}
#ygrp-mkp #hd{
  color: #628c2a;
  font-size: 85%;
  font-weight: bold;
  line-height: 122%;
  margin: 10px 0px;
}
#ygrp-mkp #ads{
  margin-bottom: 10px;
}
#ygrp-mkp .ad{
  padding: 0 0;
}
#ygrp-mkp .ad a{
  color: #0000ff;
  text-decoration: none;
}
-->
</style>
</head>
	<head>
<style type="text/css">
<!--
#ygrp-sponsor #ygrp-lc{
  font-family: Arial;
}
#ygrp-sponsor #ygrp-lc #hd{
  margin: 10px 0px;
  font-weight: bold;
  font-size: 78%;
  line-height: 122%;
}
#ygrp-sponsor #ygrp-lc .ad{
  margin-bottom: 10px;
  padding: 0 0;
}
-->
</style>
</head>
	<head>
	<style type="text/css">
	<!--
	#ygrp-mlmsg {font-size:13px; font-family: arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
	#ygrp-mlmsg table {font-size:inherit;font:100%;}
	#ygrp-mlmsg select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}
	#ygrp-mlmsg pre, code {font:115% monospace;*font-size:100%;}
	#ygrp-mlmsg * {line-height:1.22em;}
	#ygrp-text{
	    font-family: Georgia;	
	}
	#ygrp-text p{
	    margin: 0 0 1em 0;
	}

	dd.last p a {
          font-family: Verdana;
          font-weight: bold;
	}

	#ygrp-vitnav{
		padding-top: 10px;
		font-family: Verdana;
		font-size: 77%;
		margin: 0;
	}
	#ygrp-vitnav a{
		padding: 0 1px;
	}
	#ygrp-mlmsg #logo{
	  padding-bottom: 10px;
	}

	#ygrp-reco {
	margin-bottom: 20px;
	padding: 0px;
	}
	#ygrp-reco #reco-head {
		font-weight: bold;
		color: #ff7900;
	}

	#reco-category{
        	font-size: 77%;
	}
	#reco-desc{
        	font-size: 77%;
	}

	#ygrp-vital a{
		text-decoration: none;
	}

	#ygrp-vital a:hover{
	  text-decoration: underline;
	}

	#ygrp-sponsor #ov ul{
		padding: 0 0 0 8px;
		margin: 0;
	}
	#ygrp-sponsor #ov li{
		list-style-type: square;
		padding: 6px 0;
		font-size: 77%;
	}
	#ygrp-sponsor #ov li a{
		text-decoration: none;
		font-size: 130%;
	}
	#ygrp-sponsor #nc{
	  background-color: #eee;
	  margin-bottom: 20px;
	  padding: 0 8px;
	}
	#ygrp-sponsor .ad{
		padding: 8px 0;
	}
	#ygrp-sponsor .ad #hd1{
		font-family: Arial;
		font-weight: bold;
		color: #628c2a;
		font-size: 100%;
		line-height: 122%;
	}
	#ygrp-sponsor .ad a{
		text-decoration: none;
	}
	#ygrp-sponsor .ad a:hover{
		text-decoration: underline;
	}
	#ygrp-sponsor .ad p{
		margin: 0;
	}
	o{font-size: 0; }
	.MsoNormal{
	   margin: 0 0 0 0;
	}
	#ygrp-text tt{
	  font-size: 120%;
	}
	blockquote{margin: 0 0 0 4px;}
	.replbq{margin:4}

dd.last p span {
  margin-right: 10px;
  font-family: Verdana;
  font-weight: bold;
}

dd.last p span.yshortcuts {
  margin-right: 0;
}

div.photo-title a,
div.photo-title a:active,
div.photo-title a:hover,
div.photo-title a:visited {
    text-decoration: none;
}

div.file-title a,
div.file-title a:active,
div.file-title a:hover,
div.file-title a:visited {
    text-decoration: none;
}

#ygrp-msg p {
    clear: both;
    padding: 15px 0 3px 0;
    overflow: hidden;
}

#ygrp-msg p span {
    color: #1E66AE;
    font-weight: bold;
}

div#ygrp-mlmsg #ygrp-msg p a span.yshortcuts {
    font-family: Verdana;
    font-size: 10px;
    font-weight: normal;
}

#ygrp-msg p a {
    font-family: Verdana;
    font-size: 10px;
}

#ygrp-mlmsg a {
    color: #1E66AE;
}

div.attach-table div div a {
    text-decoration: none;
}

div.attach-table {
    width: 400px;
}

	-->
	</style>
	</head>
	<!--~-|**|PrettyHtmlEnd|**|-~-->
	</html><!--End group email -->


--1UkH5-iitneBTb2o9v6jL72MeyxQXg6Q-flNhEq--