Day: November 9, 2014

JQuery: Button to cycle through select options

I wanted an html drop-down list to automatically appear as a simple button that changes color on every click as it cycles through the option values of the (hidden) select element.

The code sample is in this jsfiddle. It uses JQuery.

For each relevant select element, it styles the associated label so it looks like a button, hides the select element and handles clicks on the label button by cycling through the select options.

The display text of each option is used as a tooltip (‘title’ attribute) of the button which also serves as a css selector to color the button according to currently selected option.

The beauty of this is that the selected values of the hidden drop-downs can be submitted by regular form submit and that the form is fully functional if JavaScript is turned off.

The button styling requires CSS3, so IE8 is not suitable. I have tested this successfully in Firefox 33 and IE11.

Design and code visualization

As a team lead at work and for my own good, I want to improve how I visualize system architecture, software design and code structure.

There seem to be at least two angles to this:

  • Show ideas
  • Show (software) reality

For me, ideas often develop top-down, starting from overview level, and require putting something I have in mind on paper or whiteboard, often as a mix of bullet points, sketchy diagram fragments, boxes, ad-hoc dividers and increasingly chaotic arrows.

In the past I have used scans of my paper scribblings or photos of whiteboards to capture the results. But of course, those “snapshots” are not very workable nor professional.

So for idea visualization, I need a flexible yet intuitive mindmapping and/or diagram tool. It should be easy to install or require no installation at all, stylistically appealing but clear, and of course be free/libre open source (i.e. no Visio, please).

I looked at tools like Dia, some online services like LucidChart, and other allegedly free alternatives, and have settled on Pencil Project for now. It is very basic, but seems to provide all I need for now. The cross-platform availability is excellent, it can even be installed as a Firefox extension.

On the other hand, depicting the reality of existing systems and code bases usually requires some sort of generation process that analyzes the real structure, e.g. a network layout, the content of a Java package, an Apache Camel route, etc. and turns it into a renderable file.

For Java source code, I found PlantUML quite interesting, with its javadoc integration and quick dependency diagram support.

I might follow up with more detailed posts about how I use the tools mentioned above. One aspect I have not looked into yet, is how I can embed the visualizations within AsciiDoc.