Thomas Emil Hansen recently wrote How do I write a user macro with “sections” and “panels” using the 4.0 HTML template?

With Confluence 4, the storage format has changed from traditional wiki markup to an XML based storage format. This means that all those old wiki-markup based user macros are now overdue some TLC. Luckily, there’s always the “Insert Wiki Markup” dropdown in the Confluence editor to fall back on.

To convert your macro…

1. Create a new page and use the “Insert Wiki Markup” function to add your wiki markup:

   {section}
     {column}
       $body
     {column}
     {column:width=300px}
       {panel}
         *Contents:*
         {toc:maxLevel=3}
       {panel}
     {column}
   {section}
   

2. Save the page
3. From the Tools menu, select View Storage Format. This will give you:

   <ac:macro ac:name="section">
       <ac:rich-text-body>
           <ac:macro ac:name="column">
               <ac:rich-text-body>
                   <p>$body</p>
               </ac:rich-text-body>
           </ac:macro>
           <ac:macro ac:name="column">
               <ac:parameter ac:name="width">300px</ac:parameter>
               <ac:rich-text-body>
                   <ac:macro ac:name="panel">
                       <ac:rich-text-body>
                           <p><strong>Contents:</strong></p>
                           <ac:macro ac:name="toc">
                               <ac:parameter ac:name="maxLevel">3</ac:parameter>
                           </ac:macro>
                       </ac:rich-text-body>
                   </ac:macro>
               </ac:rich-text-body>
           </ac:macro>
       </ac:rich-text-body>
   </ac:macro>
   

4. Paste this into your user macro rather than the old-fangled wiki markup.
5. Repeat this procedure for all user macros you wish to convert.

From a recent comment on Atlassian Answers, Norman Hills asked “Is it possible to reverse the order in which comments appear?”

This is straightforward if done client-side, so I’ve written it up here.

If you just want to reverse the order for good, browse to Confluence Admin | Look & Feel | Custom HTML

Add this to At the end of the HEAD:

<script>
  AJS.toInit(function(){
    $comments = AJS.$('#page-comments');
    $comments.children().each(function(i,li){$comments.prepend(li)});
  });
</script>

Job done.

For extra points

If you want to be able to reverse the order, then it’s slightly more effort.

Browse to Confluence Admin | Look & Feel | Custom HTML

Add this to At the end of the HEAD:

<script>
  function reverseCommentOrder(){
    $comments = AJS.$('#page-comments');
    $comments.children().each(function(i,li){$comments.prepend(li)});
  }

  AJS.toInit(function(){
    // reverse the comment order
    reverseCommentOrder();

    // add a link to reverse the order
    AJS.$('#comments-section-title').append('<a id="page-comments-reverse" href="#">(Reverse Order)</a>');
    AJS.$('#page-comments-reverse').css({ 'color':'#999','font-size':'0.65em'})
                                   .click(function(e){
      reverseCommentOrder();
      e.preventDefault();
    });
  });
</script>

That’s all. Have fun.

Want to use some “hot” new web fonts to pimp your Confluence wiki?

It’s really straightforward. This post describes a method by which you can change all the headings to use web fonts hosted by Google.

Site-wide web fonts

Using Rokkitt font

Browse to Confluence Administration | Look and Feel | Custom HTML

In At end of the HEAD paste:

<!-- Fonts for headings -->
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700'
      rel='stylesheet' type='text/css'>
<style>
#com-atlassian-confluence h1,
#com-atlassian-confluence h2,
#com-atlassian-confluence h3,
#com-atlassian-confluence h4,
#com-atlassian-confluence h5,
#com-atlassian-confluence h6 {
	font-family: 'Rokkitt', serif;
	font-weight : bold;
}
</style>

Please note that adding inline styles is not big or clever, but it is quick and easy for the purpose of this blogpost.

This results in a layout similar to the screenshot below:

Using Leckerli One font

Was that too corporate? Then lets have some handwriting…

Browse to Confluence Administration | Look and Feel | Custom HTML

In At end of the HEAD paste:

<!-- Fonts for headings -->
<link href='http://fonts.googleapis.com/css?family=Leckerli+One:400'
      rel='stylesheet' type='text/css'>
<style>
#com-atlassian-confluence h1,
#com-atlassian-confluence h2,
#com-atlassian-confluence h3,
#com-atlassian-confluence h4,
#com-atlassian-confluence h5,
#com-atlassian-confluence h6 {
	font-family: 'Leckerli One', cursive;
}
</style>

Now, you’ll get something like this:

I’m not sure that this is a good look, but never mind.

Web fonts for a single space

Want to just mess up the fonts in a single space?

Then, duplicate the content of the Google hosted stylesheet — for example http://fonts.googleapis.com/css?family=Leckerli+One:400 and add to the space stylesheet…

Browse to Browse | Space Admin | Look and Feel | Stylesheet.

Click on Edit and paste in:

/* Duplicated from http://fonts.googleapis.com/css?family=Leckerli+One:400 */
@font-face {
  font-family: 'Leckerli One';
  font-style: normal;
  font-weight: normal;
  src: local('LeckerliOne'), url('http://themes.googleusercontent.com/static/fonts/leckerlione/v2/S2Y_iLrItTu8kIJTkS7DrKRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}

/* Targetting Confluence heading  */
#com-atlassian-confluence h1,
#com-atlassian-confluence h2,
#com-atlassian-confluence h3,
#com-atlassian-confluence h4,
#com-atlassian-confluence h5,
#com-atlassian-confluence h6 {
	font-family: 'Leckerli One', cursive;
}

This will only affect the space in which you add the CSS and will override the global styles.

I’m not sure whether the URL for the font will remain constant in the long term though, so you may have to repeat this process.

Be careful

There are plenty of web font services and many, many fonts to choose from. With great power comes great responsibility, so be careful.

This is the second book by Luke Wroblewski that I’ve bought. His previous Web Form Design: Filling in the Blanks is a book that I’d still recommend to anyone who’s likely to write a <form> tag. However the speed of change in browsing habits has been extraordinary since that book was published in 2008.

This leads us nicely onto his current book — Mobile First. Elaborating on a very concise blogpost from November 2009, it is such a simple idea that almost anyone in your organisation can easily grasp (with minimal persuasion).

Embracing constraints (rather than fighting them) will ultimately get you to better designs

The rise of mobile has lead to very different usage patterns and this book succinctly documents the current state of affairs. For example, Luke describes mobile users’ engagement with content on a mobile device as being —

one eyeball, one thumb

This forces you to remove distractions and simplify the interface to the task at hand — even in distraction free environments, this is helpful.

He quotes usage data from Read it later showing when people are reading saved articles.

• Desktop – builds til noon & falls off after work
• Mobile – 4 peaks – breakfast, commute/start of work, end of work/commute, couch time/prime time/bed time
• iPad – small peak at breakfast, but mostly evening-bed time.

He firmly agrees with Rachel Hinman from Nokia’s analogy –

the desktop is “diving” while mobile is “snorkeling”

My experience would also extent this to rock climbing vs. bouldering too.

There are sections on navigation; touch-target sizing; the familiar topic of form design (use smart defaults); input labeling (top aligned labels are good, labels within text fields sometimes not so); input masks; and responsive design.

I was particularly taken by the chapter on “Organization” (partially for the inclusion of a favourite xkcd comic). This aligns well with the positive changes I’ve noticed in successive versions of mobile applications (e.g. from LinkedIn or Facebook). The first generation of these applications started with a list or grid of navigation options. Subsequent versions of these companies apps emphasize content to be of primary importance so navigational options have become much smarter.

Reading this slender volume suggests that Luke really practices what he preaches. He has embraced the A Book Apart constraints and fitted so much that is currently so very relevant into such a small package.

Here’s a quick and simple timesaver…

1. Open the current Finder folder in Terminal

Setup

Download “> cd to …“, copy it to your Applications folder, and then from the applications folder drag it into the Finder toolbar.

Usage

To use, just click the “> …” button on the toolbar

2. Open the current Terminal directory in a new Terminal tab

Setup

First, we’ll need to add some AppleScript to ~/.profile

# Open a new tab on Terminal with the current  directory
# See: http://elsethenif.wordpress.com/2009/06/11/open-a-new-tab-on-terminal-with-the-same-path-on-mac-os-x/
function nt {
        osascript -e "
                tell application \"System Events\" to tell process \"Terminal\" to keystroke \"t\" using command down
                tell application \"Terminal\" to do script \"cd \\\"$(PWD)\\\"\" in selected tab of the front window
        " > /dev/null 2>&1
}

Usage

In terminal, now type:

nt

3. Open the current Terminal directory in Finder

To get back to the Finder window, type…

open .

And finally…

To wrap it up, a demo video:

When writing plugins using the Atlassian SDK, sometimes the builds take a little while and you go off doing other things. Maybe you’ll get diverted and lose a few minutes.

It would be nice to have some kind of feedback/notification to let you know when the build is a success, fails or just when Tomcat is finally up and running.

On OS X, Growl is my first choice for notifications, so this post shows you how to hook together the Atlassian SDK (well, maven really) with Growl

You will need:

• Atlassian SDK of course
• Growl — a notification system
• growlnotify — a command-line tool to post Growl notifications
• Some pretty icon images

Install all of the above.

The Atlassian SDK acts as a wrapper for maven functionality. It uses a copy of maven 2.1.0 located at:

/path/to/atlassian-plugin-sdk-3.x/apache-maven/bin/mvn

This path appears to be hard coded into a lot of the atlas- prefixed commands, so we have to get a bit hacky and move the original mvn file elsewhere and swap in a new mvn wrapper command.

cd /path/to/atlassian-plugin-sdk-3.x/apache-maven/bin/
mv mvn mvn.DIST

The new mvn file should look something like this:

#!/bin/bash

# See: http://blank.jasonwhaley.com/2009/02/growl-maven-integration.html

mvn.DIST $* | awk '
{
print;
if($0 ~ ".*BUILD ERROR.*")       system( "echo \"Build failed : (\" | growlnotify \"Maven\" --name maven --image /Users/david/Pictures/mvn-growl/fail.png > /dev/null 2>&1"  )
if($0 ~ ".*BUILD SUCCESSFUL.*")  system( "echo \"Build completed successfully : D\" | growlnotify \"Maven\" --name maven --image /Users/david/Pictures/mvn-growl/success.png > /dev/null 2>&1" )
if($0 ~ ".*CTRL-C.*")            system( "echo \"localhost is now available : D\" | growlnotify \"Maven\" --name maven --image /Users/david/Pictures/mvn-growl/atlassian-charlie.png > /dev/null 2>&1" )
}
END {
}'

Note that we’ve got some hard coded image paths here. Store them wherever suits best and update the mvn script.

Add execute permissions

chmod +x mvn

That’s about it really.

Next time you successfully build from maven, you should get this:

A build failure should give this:

When you type atlas-run and Tomcat is ready, you should get this:

I know, this is not exactly a life changer, but it is a really handy way to get some feedback on build progress — particularly for when localhost is ready.

If you have a more elegant solution, let me know.

—

Note:

Here are the icons used:

• RubiksIcons by memoryboy (I just converted them to PNG)
• The Charlie figure was mangled from the Atlassian website
• Growling polar bear (while featured on the home page) by lincolnblues

via: Collossal

In Webtrends, events that happens after the page loads can be tracked using dcsMultiTrack.

This takes the following form:

dcsMultiTrack( key1, value1, key2, value2, key3, value3, ... );

But what if you don’t know how many key/value pairs you’ll be sending into dcsMultiTrack? How do you call it then?

Take advantage of the JavaScript apply function. Create an array of key/value pairs and then apply that array to the dcsMultiTrack function:

var webtrendsArgs = [
	'DCSext.w_event_type', 'Video Started',
	'DCSext.w_video_id', 'xxxx-yyyy-zzzz-1234',
	'DCSext.w_video_name', 'Kitten Video'
	];

dcsMultiTrack.apply(this, webtrendsArgs);

This is equivalent to:

dcsMultiTrack(
	'DCSext.w_event_type', 'Video Started',
	'DCSext.w_video_id', 'xxxx-yyyy-zzzz-1234',
	'DCSext.w_video_name', 'Kitten Video'
);

If needed, you can add the key/value pairs to webtrendsArgs array incrementally and when complete, apply this to dcsMultiTrack at the end.

Source: StackOverflow

I recently spotted this fantastic Guardian article by Oliver Jeffers on how to draw penguins.

Oliver is an illustrator and the author of Lost and Found — one of my favourite childrens book — brilliantly adapted for TV. Here’s the trailer.

I’ve been accessing a Red Hat box via Mac Screen Sharing. All was good until it started just displaying a white screen. I assumed it was the fault of the Red Hat server, but couldn’t fix it at that end.

It turns out that there’s some kind of bug in 64-bit Screen Sharing on Snow Leopard (and maybe Lion too?), so here’s the work around:

1. In Finder, go to /System/Library/CoreServices/Screen Sharing.app
2. Right click & “Get Info” on the application
3. Check the box “Open in 32-bit mode”.

By the way, I’m currently running Mac OS X 10.6.8

More info