Hikka Hack – Startups in Sri Lanka

Hikka Hack

We had been wanting to do another hackathon for a while now. The Colombo Hackathon last year was evidence that such events are needed and it created the startup culture that is much anticipated by our young entrepreneurs. This time it was initiated by Prajeeth as part of Venture Engine. Sanath, Mafaz and Jeevan were all involved. Myself and Chandika got involved as well in organising and hosting the event. However Jeevan couldn’t make it for the weekend since he was out of town.

It was called the Hikka Hack this time since it was at the exotic Hikkaduwa beaches of Sri Lanka. We managed to get Citrus Leisure onboard and the event accommodated 11 teams at the Citrus Leisure hotel.


Unlike the Colombo Hackathon this time we got only teams to apply (and not individuals) for the event. The teams who applied had to have an idea of what they were going to work on during the weekend and also had to provide sufficient information about themselves when applying. All this had to be formulated since we were able have only 10 teams of each having 3 members due to limitations in accommodating at the hotel. Of course the teams who were selected were able to enjoy the facilities free of charge.

We also had Your Story working with us on selecting one team from India who was sponsored to be part of Hikka Hack.We had 3 applications from  India and Burma who directly applied to Hikka Hack as well.

The Selection

Selecting only 10 teams out of 45 teams was not a walk in the park specially due to most of the applied teams having valid and interesting ideas/products. So we had a selection round on the 29th of  May at Orion City. During the selections we did short interviews with the teams to select the 10 teams we were going to take. Understanding a team and their idea/business/product in just 5 mins was surely not the best method to filter them, however we were short on time and the teams had to bring their best pitch if they wanted to be a part of exciting and exotic weekend  full of startup energy!

After a full round of interviews and another round of pitching by selected teams we ended up with 10 good teams for Hikka hack. One team that was selected by Your Story from India was also prepped to arrive at Hikka Hack on the weekend.

The Hikka Hack

The event was on the 1st and 2nd June weekend. The teams arrived at Citrus Leisure on 1st of June on a coach that was arranged to take them from Orion City. There began a intense weekend full of energy and awesomeness. I had my doubts as to how many would be actually hacking as opposed to kicking back on the beach sipping martinis. It was great to see all the  participants working away engaging with mentors and other teams to give life to their idea. We had many mentors visit over the weekend while some stayed over and had a good time with us. There were talks conducted by the mentors on topics realting to startups. Quite a few teams came on the 1st of June with one thing on their mind and ended up with something completely different by the end of the event. Ideas have to evolve and pivot if necessary to become a great product. I think this is a great lesson all the teams embraced. Another strong attitude that developed was the importance of revenue in a product. Even-though these startups were at their earliest stage, it was great to see how the importance of revenue was taken seriously by most of them.

At the Beach

The pictures of the event can be seen on the Colombo Hackathon facebook page

The weekend was full of hacking and conceptualising to build products that can kick off and get funded. On Sunday evening the final pitches started and each team had 10 mins to pitch to the panel. The energy and the excitement in the room was invigorating. After 2 hours of pitching it was time to decide. The decision was not difficult since the scoring was done on a rigid structure and we used google forms which calculated and sorted the score. So we had the teams in order with scores running extremely close to each other. It was very tight competition. Following is the summary of the first six teams and their products.

  1. Try b4 Buy – This is a Indian team that built a fully functional mobile application that can visualise 3D models of furniture and home-ware in a room.
  2. Omni Channel – A talented team which can build entertaining video demos to communicate your idea just in 2 mins.
  3. Timely – A crowdsourced social app for tracking trains and managing travel time.
  4. Seedz – A community driven marketplace for gardeners.
  5. U-Grow Organics – A online organic vegetable store that delivers 100% organic vegetables.
  6. Lets Eat! – An on the go food ordering site that will save you the waiting time at take-away restaurants.

The first three teams were awarded with prizes that included entry to Venture Engine, Cash prize for the first two teams by Creately and SLASSCOM, Creately licenses for online and desktop products, Office space for 6 months for the 1st team at Orion City and Web hosting packages by ITC Asian Holdings.

All in all it was another great event for the local Startup community and I am truly honoured to have been part of it. Looking forward for many more such events that will create great startups that concur the world.


Why Real-time Collaboration? – Creately

After a prolonged wait we have finally taken up the time to implement Real-time Collaboration for Creately. Right now the feature is in Beta and can be used by anyone who wishes to take it for a spin. The real question is why did we not do it all this time? and why have we finally done it?

For those who dont know what im talking about, real-time collaboration is the concept of being able to edit a document/file at the same time from multiple different computers while seeing changes from each editor in real-time.

It’s true that the buzz around real-time collaboration was really a while before. But thats all about the coolness of being able to work with people located in a different parts of the world at the same time on the same document and see the changes happen like magic. It was a big deal for application developers to get this working in their tools and specially when it is a cloud app. We felt the same way back when we started Creately. We had to have it because it was cool and it can create lots of buzz. But we were blocked by many factors.

What does the user really want?

From the early days we have prioritized the road map of the product based on what our users wanted. This is one of the key success factors of Creately. We payed lots of attention to support requests, discussion forums and user votes on features. This almost always decided what went into each release of Creately. Real-time collaboration as a feature did have lots of attention as well from our users. But it was not always the burning problem. Smooth collaboration was a burning problem but that didn’t always mean real-time is required. We learnt this as we started improving the collaboration features. Users wanted to be able to easily share to edit or view, to easily embed and interactively view the diagram, to be able to discuss and notify users on changes and work together. We built features that enabled all of these. Real-time collaboration always seemed like that “cool” feature and didn’t convince us a as a burning problem over most other requirements in the diagraming space.

Revenue does matter!

Thats right, you know it! Real-time collaboration as a feature didn’t make revenue sense as much as most other development we have done around Creately. Series of the initiatives we did were to deliver Creately to bug tracking and wiki platforms like Confluence, JIRA and FogBugz and also build a desktop version of Creately. It would only make sense to hit the numbers while building and delivering great products. This added on to the delays.

Why now?

Creately is doing GREAT! While things are going well we wanted to get this feature out, a long lasted wish. But most importantly as we improved collaboration features we realized always something was missing. Collaborating in real-time is not about seeing the changes and feeling the magic (so to speak), but getting something done fast and getting it done easy. The real utility in words doesn’t seem a big deal, but when you are really using it you feel the difference. It makes life just so much easier.

Lets think back. When we didn’t have cloud applications it was all emails going around with attached files. Soon you had multiple versions going around with different users edits on them. This was solved by collaborating online. You had one file that was being changed. But still you had to go back and forth after making the change to communicate with the team. This can lead to lots of time wastage if you are not communicating well. With real-time you are seeing what’s happening and ideas are communicated well and all in one session you get to create and communicate what you want. You really dont have to worry much. To feel the difference, it has to be experienced.

We are glad we did this and we have lots more planned for this year. Stay tuned!

Values of both worlds: Online and Desktop

Re-blogging a post I wrote on Creately Blog. If you didn’t already know Creately is a Collaborative online diagram software.

We have been focused during the past year in delivering Creately to you in various different forms. As you may already know, currently the most discussed topic here at Creately is the Creately Desktop edition. Yet another effort in getting Creately to all of you, who just NEED it on your desktop!

When building Creately Desktop, we have been careful to only add value to all the loved features and not to lose any of that coolness. What I’m trying to say is that, any tool online or locally installed, they all have their pros and cons. But Creately Desktop uniquely combines some of these key advantages of both worlds to give you the ultimate experience when it comes to working with your diagrams.

Advantages of Desktop tools

Everything is saved locally

Yup, all your work is in your hard drive and ready to be accessed anytime you want it. Its pretty much the same in an online tool but most people seem to like it this way =). So Creately Desktop makes sure to do this for you.

Online can be slow sometimes

When you are using an online tool, most of the time it needs to go half way around the world to make sure what you want is done and this can make your experience may be a bit slow. Creately Desktop has its brains and body on your local computer and works as fast as you do.

You don’t need internet

Hey its not always that you have internet and there may be times when you don’t have access to internet. So when you need to see that diagram you worked on last week, Creately Desktop can just pick it off your hard drive for you and you can continue doing your magic. Not only diagrams that you created but also diagrams created by someone else will be available on your hard drive when it is shared with you. This is possible since Creately Desktop makes sure to get all the work on your Creately Online account to your local hard drive whenever you have internet.

Advantages of Online tools

Working together (Sharing)

True that sharing with people becomes very easy when your work is on the cloud and anyone around the world can see it as you grant them access. Hey but Creately Desktop lets you do this just like an online tool. As your work is saved in your local hard drive, it is also transferred to your Creately Online account so that you can collaborate with anyone you wish. The experience is just like an online tool when it comes to sharing.


You want to embed your diagram or give a link to someone of your diagram so that they can just see it as it changes over time. Consider it done! You can just do this the same way you would do it on Creately Online. Just make sure you have internet =).


One of the coolest thing about an online tools is that you don’t need anything but a browser to access your work. So when you don’t have your computer next to you and you want to check out that diagram you drew couple of days back, all you are going to need is a browser when it comes to Creately. This is again possible because Creately Desktop always syncs your work to your Creately Online account. This way you can, at any time see or get crazy on your diagrams when you don’t have your computer around.

What do you think?

Like I said, we have been hard at work making sure you have the best diagraming experience not just in drawing but in everything else. Give it a try, and let us know what you think. Tell us what else we can do to make this experience worthwhile. Happy Diagramming!

Image from : http://devcentral.f5.com/

Mouse wheel and Trackpad scroll for GWT Applications

The last post I did about mouse wheel scroll for Flash applications came in handy in a GWT application I was working recently. The solution is a embeddable viewer for Creately diagrams. The player lets you view large diagrams by letting you zoom and pan around. Panning naturally works by dragging but what makes it amazingly smooth and easy is the mouse/trackpad scroll (specially on a Mac). Give it a try here.

All I had to do is use JSNI on GWT to access Javascript scroll events and manage them accordingly within GWT. Here I have used the same JS that was used in the previous post with minor tweaks. Originally taken from FlexAmphetamine. Follow these steps to get it working on your GWT application.

1) Create the JS file that will capture the events for you.

Create the scrollsupport.js and place it under the build folder /war/{modulename}/. Note that when you build the GWT application this folder will be cleaned and you will lose the file. So make sure the keep a copy somewhere else in the source OR move it to the root and change the XML accordingly in the next step.

function setupScrolling( objectID ) {
  var containerObj = document.getElementById(objectID);
  if ( containerObj ) {
    var eventListenerObject = containerObj;
    var isWebkit = false;

    if (navigator && navigator.vendor) {
      isWebkit = navigator.vendor.match("Apple") || navigator.vendor.match("Google"); }

    // some events will need to point to the containing object tag
    if (isWebkit && containerObj.parentNode.tagName.toLowerCase() == "object") {
      eventListenerObject = containerObj.parentNode; }

    var scrollHandler = function(event) {
      var xDelta = 0;
      var yDelta = 0;

      if (!event) // IE special case
        event = window.event;

      if (event.wheelDelta) { // IE/Webkit/Opera
        if (event.wheelDeltaX) { // horizontal scrolling is supported in Webkit
          // Webkit can scroll two directions simultaneously
          xDelta = event.wheelDeltaX;
          yDelta = event.wheelDeltaY;
        } else { // fallback to standard scrolling interface
          yDelta = event.wheelDelta; }

        // you'll have to play with these,
        //browsers on Windows and OS X handle them differently
        xDelta /= 120;
        yDelta /= 120;

        if (window.opera) { // Opera special case
          yDelta = -yDelta; }// Opera doesn't support hscroll; vscroll is also buggy
      } else if (event.detail) { // Firefox (Mozilla)
        yDelta = -event.detail/1.5;

        if (event.axis) { // hscroll supported in FF3.1+
          if (event.axis == event.HORIZONTAL_AXIS) {
            // FF can only scroll one dirction at a time
            xDelta = yDelta;
            yDelta = 0; } }

      try {
        scrollEvent(xDelta, yDelta);
      } catch(e) {};

      if (event.preventDefault)
      event.returnValue = false;

    if (window.addEventListener && eventListenerObject) { // not IE
      eventListenerObject.addEventListener('mouseover', function(e) {
        if (isWebkit) {
          window.onmousewheel = scrollHandler;
        } else {
          window.addEventListener("DOMMouseScroll", scrollHandler, false); }
      }, false);
    } else { // IE
      containerObj.onmouseover = function(e) {
        document.onmousewheel = scrollHandler; };
  } else { /* No scroll */ }

2) Include the JS file in the module xml file to be loaded prior to anything else.

Include the following line in the {modulename}.gwt.xml file.

<script src="scrollsupport.js"></script>

3) Add code in the application EntryPoint class to handle the scroll events

public class MyGwtApp implements EntryPoint {
  private static String MAIN_CONTAINER = "appContainer";

   * This is the entry point method.
  public void onModuleLoad() {
    // Code for the application
    this.setScrollHandler( this, MAIN_CONTAINER );
    // Code for the application

/* ************************************************* *
 *  Mac scroll functionality
 * ************************************************* */  

  private void mouseScrollHandler ( double deltaX, double deltaY ) {
    // use the scroll delta values to do scroll actions.

  public native void setScrollHandler( MyGwtApp app, String objectID ) /*-{
    $wnd.scrollEvent = function (xDelta,yDelta) {
          ( Number(xDelta), Number(yDelta) );
    $wnd.setupScrolling( objectID );

See it work in Creately Diagram Viewer

You may notice that in this specific case I have inverted the scroll function to give the natural feeling of dragging on the canvas.

This is just a quick and dirty way to get the mouse wheel/trackpad scroll working on GWT Apps. I’m sure this can be done in a much nicer way which I havent had the time to explore. However I look forward to play around more with GWT to build more cooler HTML apps.

Image from: PtiBlog

Finally! Touchpad and Mouse wheel scrolling for your Flash application

[tweetmeme source=”@hiraash” only_single=false]Scrolling is a feature that has been around us since the time of window based operating systems. Eventually when the scroll enabled mice and touch-pads were available, the scrolling experience became better. Today with mac’s magic mouse and touch pads, scrolling around and navigating in a window has become a unbelievably seamless experience. Sadly still today’s browsers and Flash Player are not fully capable of providing these capabilities to the application developers.

Until today Flex or Flash Player mouse events do not contain a deltaX property or any other method of identifying a horizontal mouse scroll. Simply put there is no current way of identifying horizontal mouse scroll within Flash Player. Getting out of flash, even Javascript doesn’t have a standard way to capture mouse based scrolling. This solution from FlexAmphetamine is by far the best one I have come across. Works pretty well but in limited environments.

So I took this solution and put it together with flex to enable scrolling for your flash based applications. All I have done is captured the js events and forced a scroll on any scrollable control within the application. Attached is the actionscript class that does this. By simply attaching this class to your project you can get Mac mouse/touchpad based scrolling working on you flash application. The test application is also within the source zip. Tested on Mac Firefox 3.6/Safari 5/Chrome 5.

See it work on Creately now.
Download the source

Image from: gadgetsreport.com

How to decide on using a third party component/service

[tweetmeme source=”@hiraash” only_single=false]When you are building a software solution to solve a particular problem, you would be very focused on solving the problem and solving it well. However time to time you have to involve in aspects of software development that doesn’t have anything to do with the problem you are solving. These are systems and components of systems that completes your solution.

May it be a payment system for your online greeting card service, or a spell checker component for your realtime note editor, you would rather look for something that’s already built and working well rather than building it yourself from scratch. This way you can focus on your “core competency”.

This is generally how everyone thinks. So did we here at Creately, during a recent experience when we chose to use a third party solution to complete a product that we were working on. In the rush and excitement of getting the product out we signed up with the 3rd party service not considering some important factors that we should have. Even-though the intention was to avoid reinventing the wheel and by doing so to save time and effort, the out come was us spending double the time and effort in getting the solution to work. Lesson learnt the hard way.

So I thought I would put down some points on what I would do in future when I have such need. The flow chart explains the basic thinking, and the factors involved in making the decision can be found below.

How to decide on choosing a 3rd party solution.

Picking the most suitable solution

      • How well is my requirement met? Does the solution meet all the feature and functionality requirements I have? Does the solution meet the integration requirements I have?
      • Is the component build for me? Even if the solution meets all my functionality and feature requirements, one thing I have to watch out for is, if it does more than what I need. Will it complicate my product? or my users experience? or my integration process?
      • Is the integration and setup process straight forward? Time and effort required to setup and integrate?
      • What is the financial commitment?
      • Considering all factors above, compare the time, effort and cost involved in building the ideal solution against using the selected solution.

Assessing if the solution can be used to solve the problem

      • Can I use the existing features in the solution to make it do what I want it to do?
      • Can the solution be customized to fit my requirements?
      • What is the time and effort involved in customizing the solution for my need?
      • What is the financial cost involved in customizing the solution for my need?
      • Considering all factors above in A and B, compare the time, effort and cost involved in building the ideal solution against using the selected solution.

How we Converted our Online App into a Plugin – Creately

[tweetmeme source=”@hiraash” only_single=false] Re-blogging a post that I wrote on the Creately blog. @charan Thanks for cleaning it up!

Here at Cinergix, we are committed to delivering Creately to all of  you who have the burning need to put that great idea into a nice picture. Over time we have heard and felt the love from everyone who’s been using Creately.  Our desire to reach out to you gave birth to the idea of a Creately Plugin – an architecture that would allow us to integrate Creately to different platforms so you can continue to use Creately right within the platforms you work in every single day. And Creately for FogBugz is just the first in many more to come.

The Approach

Taking the current version of Creately that was built as a SAAS service and turning it into a portable component that works on any platform was quite a lot of fun and somewhat challenging. When we designed the Creately Plugin we had to make sure it could be easily reused and quickly integrated into any platform out there. This way Creately can be made available on your favorite wikis, blogs, case management and productivity tools in the near future with minimal rework.

Creately SWF & Wrapper

Basically, there are two parts to converting an online application like Creately to support a plugin infrastrusture. The first is the the actual application, Creately, that can be compiled in 2 different modes. The Online SWF Mode for SAAS delivery and the Plugin SWF Mode for integrating into plugin platforms.

The second component, the Plugin Wrapper, is responsible for integrating the application into the platform that hosts the plugin. This Plugin Wrapper needs to be built specifically for the platform that it is hosted on, using the platform’s API’s. Platforms like FogBugz have detailed documentation on how a plugin can be built for it. In the case of FogBugz, we also had the folks at FogCreek helping us get the best diagramming plugin out to you guys. Thanks, we couldn’t have done it without you guys.

Deconstructing the Application

So we started with the most important component, the Creately SWF, the flex code that runs in the Flash Player in your browser. We worked in a layer of separation to enable us to compile the Creately SWF to run in different modes. Based on the mode, the Creately front end functionality and the backend interaction would work completely differently. The mode is specified in a configuration file that is used when compiling Creately.

The Online Mode SWF uses Remote Objects to connect and interact with the Creately backend services (Jupiter Service). The Plugin Mode SWF would expect a set of http endpoints to be available for it to communicate, to send and receive the required data. The Plugin Wrapper would expose these endpoints required by the Plugin Mode SWF and are configured in the configuration file.

This way by simply switching the configuration file and compiling, the Creately swf can be used to either generate Creately to run as a SaaS service or as a FogBugz plugin or a plugin for a completely new platform. This method not only enables us to easily build Creately plugins for more platforms but also lets us deliver all the cool new features we build into Creately to all distributions of Creately. Its great to be able to do this without ever splitting our code base.

You think thats cool? Well then you are going to like what I have to say next. This very approach will enable us to build a desktop version of Creately for you in the future. :-) How about that?

Tell us what you think and how much you like the idea of Creately on your desktop. Also, if there’s another platform out there you’d love to see Creately on drop leave us a note here.