Do your Time Machine backups really work?

The real time machine!As a Apple fanboy I have been one to explore and make use of most of the features apple products have to provide. Specifically this time I am talking about Time Machine on my MacBook Pro. A little experience I had over the weekend trying to get Lion (Apparently the most advanced desktop OS in the world… Will talk about this sometime later) on to my MBP.

First to my rant on installing Lion. So I download the whole 3.66GB over couple of days through Mac app store and then happily clicked open the install to realize that I was one of the dishonorable one’s who had to re-partition the disk to be able to get the glorious Lion on! I had Master Boot Record partitions on my disk and for OSX to install it requires a GUID partition table. So guess what.. now I have to get the whole 500GB HDD emptied out, then just change the partiton scheme, then get all the data back on and then install lion! Didn’t sound the least bit fun, but I had to pledge my loyalty to Apple (not really… Just being a geeky hipster). But I had Time Machine with me, why did I have to worry?? you’re soon gonna find out.

I have been using Time Machine to backup couple of my drives since the beginning. So I didn’t have to worry about the “important” stuff which is already backed up. So I went ahead and backed up the other data on to another HDD I had and I was all set. Ran another Time Machine backup for one last time and then went ahead with the repartitioning. So I had to boot from Snow Leopard on the disk so I can erase all my partitions to create the same set of partitions on GUID scheme. Once done, went right into “Restore from Time Machine backup” to get my “important” stuff back into the drive. The restore started as I sat there experiencing the time travelling magic. After sometime I realized that I was stuck in time (so to speak). The restore had frozen and did not progress any further. Waited for ages with no progress and tried many times with absolutely no luck. Clearly I was in a panik state and felt like I had lost my identity. While I was behaving like Tom Hanks in Cast Away, I dugg deeper to find out that my Time Machine HDD had errors on the directory structure making some parts of the data unreadable. Disk Utility could not repair the errors. So I went to the Mac disk guru Disk Warrior which managed to recover most of my data from the Time Machine backup. Went through few more hoops before I could get back to Snow Leopard to the state where I exactly was. Then installed Lion which actually took only 30 mins. So the whole disaster had cost me a whole weekend, loss of many hours of sleep, a panic attack, loss of data which I feel every now and then and a blog post.

Now the funny part is I had been backing up on Time Machine for 2 years without realizing that my disk was actually broken. And this came to my attention at the worst possible time! You would think that an advanced tool like Time Machine would make sure your backup disk is intact when making a backup, but clearly it doesn’t. This I feel is a important feature that Apple needs to include in Time Machine. To my dismay I found quite a few users who had disk problems on their Time Machine backup disk during my research in getting out of this mess. I would urge all Time  Machine users to make sure to run a Verification with Disk Utility every time you run a backup. I know I will :-/

All in all even having gone through all this I still feel that Time Machine is a wonderful service to have on your Mac. Even having gone through all the trouble I was still able to get my MBP right back to where it was only because of Time Machine.

Image from : http://murphymac.com/time-machine-some-details/

Advertisements

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.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) {
      app.@com.mycompany.MyGwtApp::mouseScrollHandler(DD)
          ( 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.

Multitasking on iOS4 – iPhone

[tweetmeme source=”@hiraash” only_single=false]I was just too excited when the iOS4 was out, not just because of all the features but because the iphone dev team released the unlock for baseband 5.12.x. Yes I had upgraded my baseband by mistake during the firmware upgrade of 3.1.3 and lost my unlock. I was using a iPod out of my iPhone 3G for months. Since in this part of the world we wont have the luxury of getting a iPhone 4 for sometime, I’m going to have to use the 3G with iOS4 on it.  So I had to jailbreak it before I can get the unlock and features like multitasking.

So one of the most desired and spoken feature of the iOS4 is multitasking. I have always wanted to have proper multitasking on the iPhone since I was used to Windows Mobile Phones that already had it. When I first started using the iOS4 and the multitasking feature, it turned out to be a sheer disappointment.

Why?

  1. When it comes to multitasking the first thing you would expect is to be able to tell the app to close or keep running in the background when you exit it. Apple seemed have completely missed this part.
  2. First when I tried it, every time I exit a app it seemed to show up in the open app list that comes up at the bottom on the double tap of the home button. But when I go back into a 3rd party app, it seemed to start over again losing its previous state. Yes the app actually needs to support multitasking before it could be used with the iOS4 multitasking feature. So this means I have to wait for all my app vendors to give me an update.
  3. After using the phone for sometime, since I open a bunch of apps, they all show up in the opened app list creating a clutter in the view. Now I have to scroll around to find that app I need to switch to. This actually will be solved if problem 1 was solved.
  4. I really expected they would build it in such way that I could scroll through the running apps just like you would scroll through the open pages of iPhone safari browser. I guess this was just personal 🙂Safari multi page view

Even-though I was disappointed, I have to say, having some level of multitasking on the iPhone is really cool. It helps when using with the native iPhone apps. Eventually when 3rd party app vendors start updating their apps, multitasking may become much more useful.

How to rotate Text in Flex/AS3 without Embedding

[tweetmeme source=”@hiraash” only_single=false]Rotating text in AS3 or Flex is not magic. Its a pretty straight forward and easy thing to do. Any control that holds the text will be an extension of a DisplayObject and will have the property rotation to which you can set the angle you want the text/object to be rotated to. But the drawback is this only works if the font of the text you are using is embedded and is within or accessible to the SWF. If not you would see the text dissapear when the rotation property is changed to anything other than 0.

So how can you rotate a text without embedding? the answer actually depends on what environment you and your users are in.

Flash Text Engine (FTE) and Text Layout Framework (TLF)

Prior to Flash Player 10, if text needed to be rotated there was no option other than embedding the text. In FP10, Adobe built in the Flash Text Engine (FTE) that enables Flash alone (without flex) to do quite a bunch of stuff with text. This article in InsideRIA well explains the FTE. To actually use these capabilities of FTE Adobe also built the Text Layout Framework (TLF) which provides a set of API’s. A detailed article on the capabilities and usage of the framework can be found here. Also here is a demo app that demonstrates most of the feature of the TLF. The TLF comes built into Flex 4. Any prior version of Flex will required the TLF library to make use of the FTE.

So basically if you want to rotate text without embedding it, you will need to force the application to use FP10. So lets talk about how this can actually be done.

Rotating Text in Flex 4

Like I stated before the TLF ships in Gumbo (Flex 4) and is utilized by many components to bring the rich text capabilities into them. The starndard text components such as TextArea, TextInput and TextField would still have the issue. The components you need to be using are the spark.components.* which utilize the TLF to handle text. The below example shows how text behaves on both mx and spark components during rotation in Flex 4.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:sp="spark.components.*" layout="absolute">
    <mx:VBox width="100%" height="100%" horizontalAlign="center">
        <mx:HSlider id="slider" value="0" minimum="0" maximum="359"
            change="box.rotation=slider.value"/>
        <mx:VBox id="box">
            <sp:Label text="This is a Spark Label"/>
            <sp:TextArea text="This is a Spark TextArea"/>
            <mx:TextArea text="This is a Normal TextArea"/>
            <mx:Label text="This is a Normal Label"/>
        </mx:VBox>
    </mx:VBox>
</mx:Application>

As you move the slider you would see the text components rotate and the mx component text disappear but the spark components would continue to show the text and even let you edit.

Rotating Text in Flex 3.3

This is not as simple as getting it done in Flex 4 but is possible with a price to pay. You will need to download the TLF. The TLF bundle contants examples of how to display text using the TLF. Below is a simple example of how you can use TLF to display a line of text and rotate it. This uses the HelloWorld.as that comes in the TLF (/textlayout_framework/examples/actionscript/)

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" >
    <mx:VBox width="100%" height="100%" horizontalAlign="center">
        <mx:HSlider id="angle" minimum="0" maximum="359"
            change="box.rotation=angle.value"/>
        <mx:Canvas id="box" addedToStage="load();" x="100"
            width="50%" height="100%"/>
        <mx:Script>
            <![CDATA[
            import mx.core.UIComponent;
            import flash.text.engine.TextLine;
            import flash.text.engine.TextBlock;
            import flash.text.engine.TextElement;
            import flash.text.engine.ElementFormat;
            private function load () : void {
                var sp :Sprite = new HelloWorld();
                var ui:UIComponent = new UIComponent();
                ui.addChild( sp);
                this.box.addChild( ui );
            }
            ]]>
        </mx:Script>
    </mx:VBox>
</mx:Application>

As you may see this rotates the text just fine without having to embed the text. But like I said this comes with a price to pay. The quality of the rotated text will be quite bad. This is due to no support for anti-aliasing in FTE. However FTE does support different techniques to make the text look better which I wont be covering in this post. To really see this, you will need to open up the HelloWorld.as and change the font size from 48 to 12. Then compile and run to experience the difference. Smaller text shows the lack of quality when rotating.

All in all the best solution for rotated text without having to embed is the spark components in Gumbo. Looking forward to use more of it.

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.