New features in My Personal Kanban, Kanban Themes and new Card details dialog

I did spent some time adding new feature requested by my Wife. Links, in card details field, are now supported as real HTTP links, which could be opened. I did remodel slightly the Kanban Card dialog to support that.

The other new feature is the possibility of changing look of Kanban.  The feature comes with easy way of adding own styles.

You can get a copy of the software here: http://greggigon.github.io/my-personal-kanban/

The video bellow is a quick overview of the new features.

How to update My Personal Kanban with your own styles

  1. You need to create a css file with styles and copy it into: my-personal-kanban-folder/styles/themes/ folder.  Name doesn’t matter, however you will need to use this name in last step. The default-bright.css and default-dark.css can be used as a starting point for your own styles.
  2. Prepare image capture for the new style and place it in my-personal-kanban-folder/img/themes/ folder. It should be a jpg no bigger than 150px in width with the same name as the css file (you can see that there are default-bright.jpg and default-dark.jpg in that folder already).
  3. Last step is to open the themes.js file from my-personal-kanban-folder/scripts/ folder (it will have a funny name like 5ebce75f.themes.js ) and add entry for your new theme. Name is the property that will be displayed in the Drop down. css is the property that will be used to find the css and jpg file prepared in steps 1 and 2.

If you want me to make the style a permanent member of My Personal Kanban, just make a pull request on GitHub. https://github.com/greggigon/my-personal-kanban

Greg

Post-Redirect-Get pattern with Grails

In this post I would like to share with you a very common pattern used in web application development and how I implemented the pattern in my Grails application. Let’s start with a simple explanation of the pattern and what is it useful for.

Post-Redirect-Get

Post-Redirect-Get refers to the flow or process that web applications follow. When user submits the form in the browser the information is typically send with HTTP POST method to a web server. Application processes the information and sends back the response. Response is sent in a form of redirect to another view. Browser loads new state from web server using GET method.

Post-Redirect-Get pattern

Some of the benefits of using this patterns are:

  • Pressing refresh button in the browser will not cause duplicate form submission. The most annoying dialog box asking you if you want to resubmit your form will be gone.
  • Bookmarking result page would be possible.
  • Pages with forms submissions will be gone from your browser history.
  • Nice and clean separation of the HTTP methods that change state of an object (POST, UPDATE, DELETE) from non-destructive, read-only methods (GET).
  • Easier to test response, as all you need to check is the redirection. Typically when form is submitted successfully it will redirect to different page then failed submission. To test the behavior it is enough to test the redirection.

With the pattern in mind and the benefits let us try to look at the concrete FooBar example.

Grails example

I assume you know what Grails is. I’ve created a project and created domain object called Foo. The only property it has is a String, Bar that cannot be blank.

package post.redirect.pattern
class Foo {
  String bar
  static constraints = {
    bar blank: false
  }
}

Foo controller with two methods responsible for creation of new object.

class FooController {
…
def create() {
  def instance = new Foo(params)
  if (flash.model){
    instance = flash.model
  }
  [fooInstance: instance]
}
def save() {
  def fooInstance = new Foo(params)
  if (!fooInstance.save(flush: true)) {
    flash.model = fooInstance
    redirect(action: "create")
    return
  }
  flash.message = "Hooray, you did it!"
  redirect(action: "show", id: fooInstance.id)
}
…
}

When user submits the form and the object is invalid, the browser is redirected back to the form instead of rendering the form with error messages.

There is an extra check to see if user arrived on this page after unsuccessful form submission.

I used flash to store invalid object between pages, so the user could get feedback on what is wrong with provided values.

If you want to try on another example, the easiest way is to create a domain class and generate the scaffolding for it. You can try the browser behavior on generated code.Try refreshing the page after form submission (valid and invalid), try to navigate between pages using Back and Forwards buttons of your browser, try to bookmark the submitted page.

Later, go and modify the code, replace renders with redirects and see browser behavior after that.

Summary

This is all there is to it. It’s rather simple and easy to follow pattern with number of benefits. Grails makes it a doodle to implements,. Have fun redirecting.

Greg

Unit testing Grails controllers with duplicate form submission check functionality

I’ve been doing some Grail 2.0.1 development recently. I like the maturity of framework and the ease of doing things.

One of the things Grails comes with is a simple way of avoiding duplicate form submission. Have a look at the code bellow:

def myControllerMethod(){
  withForm{
    render “theGoodStuff”
  } .invalidToken {
    render “theBadStuff”
  }
}

That’s the controller bit. In your view you need to enable use of that feature by passing useToken parameter to form tag:

<g:form action=”myControllerMethod” useToken=”true”></g:form>

It looks very simple and elegant. However when we would like to test the controller we need to make sure we match the token when calling the method.

Documentation on testing Grails application and this particular functionality contains the way of doing so, however I found it not working with Grails 2.0.1.  Not much was blogged about it so I looked through the mailing lists. I found one trail and a bug report for this issue.

Anyway, to make it work, the piece of documentation from Grails, version 1.4.x explains how to do it, and it works.

In controller test method we need to place this code:

…
def token = SynchronizerTokensHolder.store(session)
params[SynchronizerTokensHolder.TOKEN_URI] = '/myController/myControllerMethod’
params[SynchronizerTokensHolder.TOKEN_KEY] = token.generateToken(params[SynchronizerTokensHolder.TOKEN_URI])

controller.myControllerMethod()
…

Happy testing. Greg

Useful links:

http://grails.1312388.n4.nabble.com/grails-2-0-testing-controller-with-withForm-invalid-notation-td4316150.html
http://jira.grails.org/browse/GRAILS-8504
http://grails.org/doc/1.4.x/guide/9.%20Testing.html
http://grails.org

When done is DONE (or not)

Not too long ago I had a conversation with one of the senior member of the management team of project I’m working on. I had some ideas on how can we do things faster by improving our testing (not developer testing but end-to-end, QA and regression testing). After few minutes of conversation I was asked a very basic question: “What is the definition of DONE on our project?” I was just going to open my mouth and jump out with an answer like: “Well, it takes us usually 3 days to develop piece of functionality”, but I stopped. I actually wasn’t sure. We spend few more minutes discussing some other issues but when I left I felt that this question is still on the back of my mind, trying to desperately find the answer.

After number of attempts I decided to rephrase the question. What is the Goal of the project? Couldn’t find a simple answer. So I asked even more general question. What is the goal of the company? I recalled books by Eliyahu M. Goldratt, “The Goal” and “The Race”. “The goal of the company is to make money in the present as well as in the future”. The goal is to win the race for customers.

My team works on creating and maintaining the software that produces the data for other systems within the company. Those systems are used to deal with clients, to provide them with reports, to sell them information, to protect client interests. This means that our project indirectly contributes towards company’s goal.

All the other teams and projects that are receiving data from us are our customers. We should make all the effort to deliver the necessary features to the consumers in a timely manner as they will be use to generate the revenue.

That’s it. This is my understanding of DONE.

In other words:

  • It’s NOT DONE when BA finalizes the requirements and forms them as stories that got accepted by all stakeholders
  • It’s NOT DONE when developer finishes coding the solution and fixes all the bugs
  • It’s NOT DONE when QAs, BAs finish testing and approve the deliverables
  • It’s NOT DONE when Downstream systems receive the data and confirm it’s quality
  • It’s DONE when client receives the service that he or she requested thanks to the piece of software my team delivered. That’s when it’s DONE!

I think there is an important aspect to touch on. It is the effort of the entire team before DONE could be announced. No one should silo himself into a specific role and take responsibility for the specified area only. Developers should help with delivery of tools for release and testing automation, BAs should help with testing, QAs should help to form requirements, etc.

So, next time when you think you’re DONE, think again. Perhaps you are not really there yet but you could help someone else to make it happen.

Wish you all many happy DONEs in the future. Greg

Little creative fingers

We all have heard about creativity but did we ever take a moment to think about it for a while. What it really is or what it means? How to be better at it?

Creativity

Definitions of creativity are actually rather simple. Wikipedia states that Creativity is the ability to improve, adding value. Google quotes Princeton University’s website saying that it’s “The ability to create”.

Creativity is a mental process, involving discovery of new ideas, or new view on the old ideas. The process is powered by our conscious and unconscious mind.

With today’s modern psychology and cognitive science, creativity is still rather unknown field. There are number of theories on the process, but all of them can’t explain it precisely.

Graham Wallas presented his theory about creative thinking in 1926. He is dividing creative process into following steps:

  1. Preparation – work on a problem that involves understanding it and exploring different views on it
  2. Incubation – where the problem is injected into unconscious mind
  3. Intimation – it happens when one get the feeling that idea is going to emerge soon
  4. Illumination – where the creative idea bursts into conscious mind
  5. Verification – when the idea is consciously verified, elaborated and applied

My own findings

I started with reading some book on the topic and browsing the Internet. Then I saw TED talk by creativity and innovation expert, Sir Ken Robinson. He inspired me to observe my 3 years old daughter when she was playing. They say that small persons mind is like a sponge. It soaks in all the new encounters.

Things I noticed

A lot of my daughter’s new toys emerged from an item of everyday use, used in a completely new way (laundry basket became a boat, toilet paper roll became a telescope, etc.). She has a great skill to take an item, turn it around, look at it from different angle and than decide what new toy it will be.

My daughter is very good girl and she is hardly ever destructive  (I only assume that boys are more talented in this area). She grabs things that are around her and puts them together. New creation is inspected and either accepted as new toy or discarded (sometimes put together in different way).

Kids have more simple/different way of looking at things. This is what makes them so creative. When “Little Prince” saw picture of a hat, he said it was a picture of giant snake that swallowed elephant (perhaps he was right).

Thinking about the way my daughter creates new toys I came to conclusion that creative adult thinking is very similar most of the times. We look at the things from a different angle, look at it upside down, take tools that we have never used to do different sometimes odd job (using shoe as a hammer).

Putting things together is less physical, more mental. It involves taking pieces of information, knowledge, experience, and combine them together to produce something new. A book, real life observations, notes and mind maps turned into this article.

Recall any music interview that you might hear. Musicians typically mention who is their inspiration. Normally they mention another musician/music style etc. You can recognize in their music, tunes from other musicians, same musical patterns, instruments, etc. This is being creative by combining all the bits together in a new way.

Creativity and software development

Above description of creative processes are sounding very familiar to what I’ve been doing everyday creating software. All my experience from working with other people, technical knowledge I have, domain knowledge I acquired and everything else I know influences the code that I write.

I found that knowledge of different languages and patterns that are present in those, helped me to bring new ideas, become more creative at what I was doing. C# experience helped me to introduce some new patterns to Java. Dynamic and functional languages gave different view on type safety and state. Tools that I typically used in one technology, gave new light to a better use of tools in other technology.

I also found that being brave enough to try new things, use of different tools, led me to a new discovery. For example, swapping build tool to brand new, helped defragment not fully automated release process.

Summary

Everyone can be creative however it doesn’t mean that it is simple. More information you have (including domain, technical knowledge and everyday life things) is helpful. More willing you are to try new and different things the better.

Try to stay open to information but be careful, as it is easy to get overflowed with it in the age of Internet. Be open to new things and listen to other’s ideas, don’t shut them down immediately.

Handfull of links (somehow references)

Books:

Internet:

How to use simulators during web development

Ski SimulatorThis is probably two topics that I would like to combine into one, as they are related in the context I will be writing about.

In one of the previous articles I wrote about the story wall that we evolved on our project. Christian in his article, described the way we worked not in pairs but in threesomes. Two developers and a QA. This was the way that involved iterative, small-steps, story delivery with constant showcasing to QA. QA was able to instantly check the correctness of a functionality, business logic, even a site layout and provide feedback to devs about it.

As any application (at least majority of them) our application has multiple points of integration to other systems. Database, web services, file system etc. One of the integration points was delivered some time ago and never tested, we were ready for a problems and bugs.

It would be very unwise to stop development because the part of the system needs fixing or some rework carried. We decided that we will shield our selfs with the layer of wrappers around third party systems , that we called Anti Corruption Layer.

The Layer gives as a constant API controlled by ourselves but it doesn’t mean that we can continue our way of working and constantly showcase all the acceptance criteria to our QAs and BAs.

We decided to bring on simulators on a board and hooking them into our anti corruption layer. This is how we achieved it:

Control

It would be very painful to switch simulator on or off using configuration in one of the file. Knowledge about the environment was not sufficient enough as we don’t want simulators to be on or off all the time. What we decided was to create a class called SimulatorDecider that will use two variables to determine if the Simulator should be on or off: current environment and a browser cookie.

The environment variable allowed us to switch simulators off regardless of the cookie, in any environment other than DEV or TEST.

Cookie in web browser is very simple to set and to remove. We created a little page called Cookie Monster that has a simple on/off buttons for setting and removing the Simulator cookie.
The approach gives a possibility to control and switch on/off different parts of the system by using different cookies for each parts.

Simulator

We have a bunch of wrappers around the integration points. The one that we are interested in, the one that we would like to simulate, we decorate with Configurable object and inject SimulatorDecider into it. This is how it works:


interface IFoo
{
  ReturnType DoStuff(ParameterType type);
}

public class Foo : IFoo
{
  public ReturnType DoStuff(ParameterType type)
  {
    // Doing some real stuff that is very important
  }
}

public class SimulatedFoo : IFoo
{
  public ReturnType DoStuff(ParameterType type)
  {
    // Doing some other stuff that is only SIMULATED
  }
}

public class ConfigurableFoo : IFoo
{
  private SimulatorDecider _simulatorDecider;

  public SimulatedFoo(SimulatorDecider simulatorDecider, IFoo realFoo, IFoo simulatedFoo)
  {
    _simulatorDecider = simulatorDecider;
  }
  public ReturnType DoStuff(ParameterType type)
  {
    if (_simulatorDecider.ShouldSimulate())
    {
      return _simulatedFoo.DoStuff(type);
    }
    return _realFoo.DoStuff(type);
  }
}

Because we are using dependency injection container (Yadic) we don’t need to worry about dependencies.
It is also possible to not code SimulatedFoo as separate type and just inline simulated behavior within the configurable type. We made this decision on a base of how complex the simulated behavior should be.

Hope you find this useful when you stuck on integration pice that you don’t know how to carry on 🙂
Comments are welcome as always 🙂

Greg

What is your favorite development platform, survey results

Not to long ago I posted an article on my favorite environment for software development. There was also a survey in that post asking about your favorite environment. The results are below.

Clearly, Linux is a winner. Here are some comments you guys added to a survey.

Can’t believe people are still using text editors to code… Visual studio rocks!

Well, not sure about this comment 🙂

Well, Ubuntu. For the package system, for the standard package archives and for the PPAs. And for everything else about it being good enough.

Windows 7, mainly because ive been using windows for, well ever. I find it really intuitive and i just know the tools really well. Windows 7 is really nice too.

Obviously I long for the day that will never come when I can develop my .net applications in intellij, deploy to a cut down windows vm for compilation and testing against iis… Anyway dreaming aside I pick mac osx for reasons you said and also because I have one and nothing beats dev on a native machine…

Mac is quite reasonable. Windows just feels clunky.

I need to be able to navigate to files and find things quickly, let alone use apps. Windows explorer/cmd is crap. Linux and Mac OS both work quickly and the command-line is effective. Mac OS X, however, just requires less of my time to maintain it than Linux. All three work similar from within an app like Eclipse.

Could be interpreted as a fan oy phrase, but for dev there is no better option than Linux…

I prefer Max because when I develop I am not just programming. Sometimes I need to check some screencast and last time that I used Linux (last year) I was not able to check all of them. Also I need a good mail and contact manager, I tried Thunderbird and Evolution. But none of them where satisfying my need.
Also i use my computer to develop and for personal use (creating video, music viewing videos). Linux is poor on that side.

I still have to fall back to Windows when working with clients who insist on using Outlook for calendaring and those horrible built-in surveys. Some aspects of my MacBook are pleasant, but I detest the keyboard layout – no home/end/pgup/pgdown and, worst of all, no visible # key 😦

We all got a favorite environment, but what is the actual one that you use every day at work? I’m using Visual Studio as there is no real aternative to .NET development. Fortunatelly ReSharper makes it usable 🙂

Thanks for your answers guys, Greg

Windows, Mac or Linux? Flavours of development environments

After a few months of using Mac as a playground and development machine I took a little step back to remind myself of all different environments/systems/platforms I was using in my short development carrier. I know what you think, that I will say Mac is the best. But it actually it isn’t. At least not for me. Why?

Linux

I used Linux in my early days of development. I was coding on practically knitted together pice of hardware with free operating system. I was using Mandrake and Suse, switching between them constantly . After few years I switched to Ubuntu. Using Linux as development platform was harsh and raw when I started. After few ups and downs I got to grips with it and it server well as platform for PHP, Java and Ruby development. With Ubuntu it was extremely easy to install new software and be up to date. I never managed to crash it (no blue screens of death).

There was one quite big issue with it though, lack of .Net development environment. I have to mention as well problems with file formats in the every day office life.

Windows

The only environment that I could develop on targeting Windows environment as runtime. With .Net and C# Windows became bearable and useful. I didn’t have problems with office documents compatibility anymore. It was possible to set it up with Unix like command line tools and possible to script and automate a lot of build/setup tasks. There was one very big flow in the setup. After few days of usage, somehow Windows manage always to crap itself with plenty of junk and gets very slow. The most common solution for that problem was … reinstall.

Mac

Very shiny and friendly. I love the 4 fingers swam and expose. It has Unix/Linux command line out of the box so I don’t have to install anything for that. Comes with a bunch of tools for development. Unfortunately most of them are for Mac development.

Once you would like to get a latest version of Java, Ruby or Python, it is impossible to simply change or upgrade the version as parts of the system (some OSX applications) depends on specific version. So … I was in a hassle to build it up for what I wanted it to be. Now when it’s ready, it rocks. It would be very cool if some of the task that needs to be done in order to make it work I had to google and spent some time on it.

So … for me the best platform is …. LINUX, TADAAA. Simple and to the point on installing different environments. Huge community with plenty of tips, easy to find. With OpenOffice.org and Google Docs pain of documents incompatibility disappears.

I guess for me the winner is the one that gets me up and running in no time and is very easy and Agile when I want/need the change.

What’s your favorite Platform? What do you like and what dislike. Please take a moment to answer this short survey or just post a comment 🙂 I will post the results and survey findings in next few weeks.

Survey closed

Greg

Revolution – Evolution of a story wall

Everyone who knows or was close to Agile Software Development knows something about Story Wall. If by any chance you don’t, here goes.

Tell me the Story

Story is software requirement/feature/pice of functionality that is presented in story telling way. For example:
‘Given that I am a new user,
When I arrive at xxx site home page and I click Register button
I will see the registration form so I can register and use the awesome site’

This is just one way of story formating and wording. As many people and teams as there are, wording can take different shape.

For the purpose of the Wall we would normally have stories written on a index card in a bit shorter form with reference to more verbose version. The more verbose version contains acceptance criteria (we are using Mingle most of the time for that purpose).

The Wall

The wall is a physical place where we stick our story cards. Wall is a visual dashboard. It gives every team member current state of an iteration.

Wall is usually split into columns that indicates what is the current state of the story. A wall will usually have columns like:

  • In Analysis
  • Ready for Development
  • In Development
  • Ready for QA
  • In QA
  • Ready for Sign-off
  • Finished
  • Blocked (the infamous one)

This is a very typical wall setup. I worked with this shape of wall on many projects I was on. It is quite good, gives all important feedback through entire life cycle of a story.

Story wall

It is very important to point out the fact that story wall maps to a development process. The columns on a wall are direct map to the way we work. As you might already know it is essential to bend and improve the process in order to achieve best results possible.

A very short break through the mentioned story wall. When Story got analyzed it moves into ready for development. Developer picks it up and works on it. When work on it is finished it is ready for being QA. If there are any bugs or hidden “features” it goes back to Development and so on. Once QA is happy with the story it is ready for Sign-Off. In any point in time if something stop story from being Developed/QAed/Analyzed it goes into blocked. Once the story is showcased it officially finished.

In perfect world this sounds good, but … as software development world is one of the most imperfect, it doesn’t. For example, if stories are in development, QAs might have nothing to do. If stories are developed in “high rate” the QA column will pile up. Once story is in QA, devs are picking new story and start their work on it. When bug is discovered on previous one it is raised as bug, or story is moved back to ready for development.

Evolution

In our current project, we have identified some issues and decided to change, improve our way of working from the very beginning. As process changed so did our story wall.

Once all the stories for iteration have been analyzed they are landing in Ready for Development. The team has 6 developers, as we are pairing, we are 3 pairs working on 3 stories at the time. This makes THREE streams of work that could be started at any time. We decided that we will create THREE vertical slots for that THREE pairs. This means that it is impossible to have four stories worked on at any given point in time.

Next, we decided to eliminate QA column. It doesn’t mean that there is no QA, it means that QAs are involved in testing from very beginning. While the story is worked on, every single bit of new functionality is presented to QA to check it out. Developers are getting immediate feedback and very often tips for things that they could miss. In a mean time QAs are testing on their test environment and preparing automated tests.

We have the luxury of heaving one QA per DEV pair. This makes little teams of THREE. When development is finished there is very little for QA to test as it was already done. At the end newly created automated tests are fired up just to confirm that all is done.

As it is a team effort (a DEV pair plus QA) to FINISH the story, DEVS are helping in testing and in development of automated tests when needed. The story goes than into Ready for Sign-Off.

It involved discipline to make sure that only one story is worked on at the time, until entirely finished and being ready for presentation to business sponsor.

The THREE musketeers are responsible for the story to be finished and to improve the process.

Story wall

Revolution

How did this process change affect our project. Short summary.

  • We have completed all the required scope for release, in given time (a little ahead of time)
  • Number of recorded bugs: 1 (fixed few minutes after it was reported)
  • Team morale, GREAT

We are very happy with this setup. What YOU think about it?

Cheers, Greg and the Team

The secreat art of learning or … help me, I'm bored

Android

I just picked up new Development exercise. I decided to learn some programming for Android devices. I’m missing a truly great app for my Android handset that I could get for iPhone or desktop app, TweetDeck. This is my driver and my goal.

I spent some time to get to know the platform and the architecture. Reading some very good documentation that Google Android team put together. I downloaded SDK and some tools. Got it setup (turned out to be a trivial task).

So, what do I do now. I know Java, but that’s only 10% of what I need to know to develop for Android. SDK is the next bit. Plus there are some tips and tricks on how to develop for mobile devices.

I opened one of the tutorials on Android page and after a 10 minutes of reading and following on my computer I got bored. I realized that I enjoy to learn most by pairing on a problem with someone who knows more or at least know some. I don’t really have anyone to pair with me on my new task. I figured there has to be a better way of learning then.

Question is … what it is?

Guys, any help? How should I tackle it, so it is not boring as hell?

Cheerios, Greg