Sunday, December 30, 2012

Backup and Restore using MySQL Workbench


Not so recently, I installed MySQL Workbench on my local system for a personal project. I had installed it a long time ago and it seems that after Oracle's acquisition of MySQL, they have made quite a few changes to the setup. Especially the bundle that you can install now contains examples and MySQL server and the MySQL workbench.

One nice feature about this new bundle is that you don't need to install additional software if you already have MySQL workbench installed. Earlier, you had to install MySQL admin to do a backup and restore of your system. Now its a bit more simplified since everything is accessible from within MySQL workbench itself.

In this post, I am just going to show the steps involved in using the new MySQL workbench (the one that I have is MySQL Workbench 4.2.44 CE) to take a backup of your database in a simple text file and then later use the same text file to restore your database to a prior state.

My MySQL database is on my local system, uses the standard port 3306 and is at its default install state at the moment. The screenshot of the homepage looks like this.



In order to take a backup of your database, you need to focus on the Server Administration section of Workbench and select your MySQL server from the list of servers displayed.

Once you do that, you are taken to a page where it shows you details about the health of the server and the different operations that you can perform on the this instance of your MySQL server.



Since you want to take a backup, you need to select the option that is circled in red that lets you import and export data.

Lets first export our data. Its pretty easy, select the database and then the tables from that database of which you want to take a backup.



For small projects, its convenient to take a backup in a single file. This file will contain all the sql statements that can be used to backup all the data and structure of you schema. Most of the times, you might want to take a backup of only the data, but not the schema. If you are taking a backup of the schema, it just means that when you use the file to restore, it will try to recreate the tables if the they don't already exist. However, if you don't want this extra detail to be present in your backup file, and only want backup of the data, an option in the advanced tab lets you do that.



Once  you are done mixing and matching all the options, click on the Export progress tab and then click on Start Export.



That's as easy as it gets to take a backup of your MySQL database.

Restoration is an equally easy process. Just select the file that you want to use as the restoration file and click on start import. And you are good to go.



Pretty neat, although I do believe a few more changes to the interface could make some things more obvious.

Hope this helps!


Happy Programming :)
Signing Off 

Ryan

Thursday, December 20, 2012

Git : Editing A Previous Commit

When you work with Git, making branches is a very common task and when you are flooded with ideas, you  may be in a hurry and sometimes make mistakes. The most common example of making mistakes when committing in git is - the commit message. Sometimes, just after committing, you would realize that you forgot to mention something crucial.

Sometimes, it may also happen that when you create your commit, you might accidentally forget to add a particular file to the commit. Even this is a likely scenario since git does not automatically add new directories under version control when you add them through your local file system. So if you did a git add . during your first commit and then created lots of subdirectories and files, they will not be added automatically just because you had done an initial "git add .".

Well, there is one small source of relief - and that is - you can easily amend the last commit in git and fix these tiny issues. For example, let us say that you just committed with a very nonsensical and convoluted message. like this

git commit -m "I was so drunk when I wrote this shit".

And then, the next morning when you wake up, you do a git log and you see this message pop up on your screen and jump out of your seat. Well, if you have not pushed your changes upstream, i.e. the commit still resides only on your local repository, it would really serve a noble purpose if you actually make the message more sensible. Here's how you can do that.

git commit --amend -m "This commit has all the equations that prove the String Theory"

The above command will simply edit the commit message of the latest commit.

However, if you have done something more grave, like missed out on files that were supposed to be added in the previous commit, then you can simply add them using the git add . command then use the git commit with the --amend option in the same way as shown above. Basically what you did was that you rebuilt the tree that represents the files of this commit, discarded the previous commit and created a new one in its place. You can say so because when you amend a commit, it results in a new commit checksum.

Hope this helps!

Signing Off
Ryan

Wednesday, December 19, 2012

Timer Chaining in JavaScript

Only recently, I was working on a project where I had to implement a feature that is usually implemented using gif. What I had to do was to cause 4 images -  lets say 1, A, B, C overlayed on each other to display sequentially. And then, after the first set of 4 images have been displayed, have a similar sequence repeat, but with only the first image changed, i.e. 2, A, B, C. And then the third set - 3, A, B, C.

Now, since the sample that I had to replicate was made in gif, I presume that creating such an image using an image editing software is pretty easy. My task was to replicate this effect using pure javascript. Moreover, since it was only in the development phase, I had to design for flexibility, since requirements can change at any moment of time. Thankfully, for me, designing for flexibility is a huge turn on. Albeit inititally difficulty, the immense amout of satisfaction that you gain out of it when you see the requirements change and be able to tell your clients that you can implement the changes in like 10 seconds is totally worth the time and energy that you put in during the initial development phases.

For my experiment, the flexibility that I had to incorporate was to be able to change the duration for which each of the 4 images can be displayed if the requirements changed. Had it been a gif file, it wold have been an easy task, just change the time in the application and then it would be ready. Show the client, and if its not what he/she wants, then redo the same.

I wanted to achieve something similar in JavasScript. However instead of a tool I wanted to create a system wherein you can programmatically configure the time duration for each image and then automatically have the effect ripple throughout all the sequences of images.

Also, instead of restricting the system to that of 4 images, I wanted it to be extensible such that it would be able to incorporate any number of images that could be overlaid on top of each other. Also, I wanted the system to behave in a way that incorporates a slightly different functionality - not be restricted to images being overlaid.

So, ultimately, after thinking about all the flexibility that I wanted to incorporate into the system, it turned out that what I wanted to create was a system of timers such that each timer could be chained to each other yet they would be oblivious to characteristics of the next timer. Also, these timers would have a feature that would let them bind the timer ending function for the next timer without knowing what the function does. And the beauty would be that each of these functions can be chained to an infinite level.
So, how did i proceed to make such a system.

First things first.
I designed the system as a phase based system. Since I had 4 images in my sequence, I created a object that saved the properties of 4 phases and references to the functions that would be invoked on the terimination of each function. I called this object a phasedTimeout object, which is essentially nothing but a nested object.

The first thing that I did was - created an object that contains all the values for which i want each of the phases to execute.

var settings = {
  duration1:2000, //Millisecond duration for the first timer
  duration2:300, //Millisecond duration for the second timer.
  duration3:300, //Millisecond duration for the third timer.
  duration4:300, //Millisecond duration for the fourth timer.
 };


In the next part, I define the different phases, and the functions that can be executed at the end of each phase.

var phaseTimeouts =  {
  'phase1':
   {
    duration:settings.duration1,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase2':
   {
    duration:settings.duration2,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase3':
   {
    duration:settings.duration3,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase4':
   {
    duration:settings.duration4,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
 }


And then, finally on window loading, ( because it was part of my requirement to do all of this only after the images on the page have loaded), i created a function that chains together the different phases.

var timeOutSetter = function(){
  
   //Call the terminating function of the previous phase
   phaseTimeouts['phase'+currentPhaseId].end(currentPhaseId);
   
   //If there is anything left in phaseTimeouts array
   //create a new timer and update the new timerId
   var nextPhaseKey = 'phase'+(currentPhaseId+1);
   if(phaseTimeouts[nextPhaseKey]){
    currentPhaseId++;
    console.log('Entering Next Phase : ' + nextPhaseKey);
    currentTimerId = setTimeout(timeOutSetter,phaseTimeouts[nextPhaseKey].duration);
   }
  };


The above function does nothing but chains the different timers together by using the settings from the phaseTimeouts object. The variable phaseTimeouts is a misnomer since it captures more than just the timeout, and can perhaps be used to bind extra functionality.

For my experiment, I toggled the visibility of different images inside the 'end' function of each of the phases. But the fact that  you can have any number of phases and that each phase has a different function that handles the phase end that is independent of each other makes it all the more useful.

Below is the piece of code in its entirety


$(function(){

 var settings = {
  duration1:2000, //Millisecond duration for the first timer
  duration2:300, //Millisecond duration for the second timer.
  duration3:300, //Millisecond duration for the third timer.
  duration4:300, //Millisecond duration for the fourth timer.
 };
 
 var phaseTimeouts =  {
  'phase1':
   {
    duration:settings.duration1,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase2':
   {
    duration:settings.duration2,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase3':
   {
    duration:settings.duration3,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
  ,
  'phase4':
   {
    duration:settings.duration4,
    end : function(currentPhaseId){
     console.log('Ending phase : '+ currentPhaseId);
    }
   }
 }
 
 //Once all the contents of the window finishes loading, start the slideshow
 $(window).load(function(){
  
  var currentPhaseId = 1;
  var currentTimerId = 0;
  
  var timeOutSetter = function(){
  
   //Call the terminating function of the previous phase
   phaseTimeouts['phase'+currentPhaseId].end(currentPhaseId);
   
   //If there is anything left in phaseTimeouts array
   //create a new timer and update the new timerId
   var nextPhaseKey = 'phase'+(currentPhaseId+1);
   if(phaseTimeouts[nextPhaseKey]){
    currentPhaseId++;
    console.log('Entering Next Phase : ' + nextPhaseKey);
    currentTimerId = setTimeout(timeOutSetter,phaseTimeouts[nextPhaseKey].duration);
   }
  };
  
  var currentTimerId = setTimeout(timeOutSetter,phaseTimeouts['phase1'].duration);
  
 });
 
});


Decoupled designs can be so addictive, is'int it?

Signing Off
Ryan


Thursday, December 13, 2012

Git : Status Of Working And Staged Files

I just came to know about this very neat feature of the git status command.

Basically, the status command gives you the the names of the files which you are tracking but have certain changes in them relative to your last commit.

Now, Git has 3 places in which it keeps the code - the commit area, the stage area/index and the working directory.

Lets take a few scenarios to explain the usefulness of this command




Scenario 1
Lets say that you have a file called Sample_File.txt in the working directory to which you made a few changes. But you have not staged it yet. So, the state of the file in the three repositories can be described as  (latest commit == staged)  != (working).

To know which files have been modified in the working directory, in a very shorthand form, use git status with the -s option. Here's what I got when I ran it on my system.








Notice that the M is in Red, and there is a little bit space to its left, which means, that the file is modified in your working directory. (The extra space is explained in scenario 2)
The status code M stands for 'Modified'. There are many other one letter status codes that you can take a peek at over here.



Scenario 2
Lets say that you have a file in your working directory, that has some changes but you staged it after making these changes.
In this case the state of the file in the three repositories can be described as  (latest commit)! = (staged  == working )

Now if you run git status -s, this is what you get







Notice that the M is in Green, but this time there no space to its left, which means, that the file is in a modified state in your staged directory. You can however notice that there is some extra space between the M and the file name this time. (Will be clarified in Scenario 3)



Scenario 3
Lets say that your made changes to your file, staged it and then edited it again. 

In this case the state of the file in the three repositories can be described as  (latest commit ! = staged  != working )





Now you can see clearly that you have 2 M's. One in red indicating the state of your file in the staged area and one in green indicating the state of your file in the working directory.



Its quite common that throughout your workflow, you would find yourself moving between the above scenarios sequentially. (Scenario 1 -> Scenario 2 -> Scenario 3) . The above set of commands should be able to help you keep track of what files were changed where.




References
The git manual reference

Signing Off 
Ryan

Wednesday, December 12, 2012

Using Google Drive As A Web Host

Okey, another one of my experiments. I came to know a few days ago that Google officially announced how you can now use your Google Drive account as a web host.

So, I decided to make use of this awesome new feature and tried to create and host my profile on Google Drive itself. In this post, I am simply going to tell you what you need to do to get up and running with Google Drive as your web host in its simplest form.

Things that you need to do to setup Google Drive as your web host


  1. Go to Google Drive
    Of course, you gotta have a Google account to begin in the first place and then just type in drive.google.com

  2. Create a public folder
    This is important. If you want to use Google Drive as a web host, you need to keep your files in a public directory. Create a new folder and then simply choose the 'share' button and give it public access. Lets assume my folder is called 'ryan'

  3. Dumping your static files
    Lets say that your site has a lot of html pages, css stylesheets, jQuery, javascript, images - the usual stuff. Just add all your files in the same directory structure in which they are present in your local system to the public folder that you just created. So, all my files are dumped into the public folder called 'ryan' in my google drive.

  4. Naming convention
    Ensure that at least one file in the public folder is named as index.html. This will act as the landing page for your site.

  5. What to publish
    Now comes an important step. In order to share your site, you need to share a link to the public folder. Initially I thought that you would need to share the link to the index.html but that did not work as expected.
    So what you need to do is,  note the google drive file-id of your public folder. To do that, just open your public folder in google drive. By default it lists all the files in that folder. In the url at the top, you will see that it contains a long string of garbled aphanumeric characters after the last slash. That is your folder id. Copy it.

  6. Creating a url to publish
    Now all you need is a url that points to your folder. To create your url, simply append the file id to the following string - http://googledrive.com/host/

    For eg. The raw link to my profile on google drive is http://googledrive.com/host/0B87xZT3F0rDcZlVONVRVY3QtZFE



And that pretty much does it. Clicking on the above URL serves the index.html page of your public folder. 


Other Tips

  1. If you want to use a neat little name instead of the long string of garbled alphanumeric characters that appear at the end of the url, go to Gdriv.es and convert your folder id custom name. That's what I did for my profile, and now it looks like this - http://gdriv.es/ryansukale. Much more neat i'd say.
  2. Sometimes its just easier to download Google Drive for the desktop, edit your files right in your local machine and then watch them automatically get uploaded.
  3. When multiple pages are interlinked, I have observed that the url in the address bar remains the same. So, I guess bookmarking will be an issue in this case.


Signing Off 

Ryan

Monday, December 10, 2012

Handling Page Unload Using JavaScript

Recently for one of my projects, I was working on trying to implement some functionality wherein if the user tried to leave web page by any other means other than submitting a form, (s)he would be prompted for confirmation. It was part of one of the research experiment surveys that I was designing. So, if the user left the page, we would simply discard the user's responses as invalid because partial responses are of no use to do any meaningful analysis.

Apparently, there are plenty of ways in which a user can close a webpage - the back button, the close button, or maybe some other gestures that I might be unaware of that are present in some of the newer web-browsing applications/devices.

What I found interesting was that there is a very simple and convenient way to check when a page is being 'unloaded' from a browser window. Javascript lets you bind a neat little handler to the 'window.onbeforeunload' property which tells the runtime that a web page is going to be unloaded.

Being a jQuery fanatic, I usually tend to use jQuery for all such stuff, since it makes maintenance a far easier task than writing pure JavaScript. So, my jQuery instincts told me to use the new on method to bind an event handler to the event. And it did work pretty good. All I did was this -

window.onbeforeunload = function(){ return "Are you sure 
you want to leave the page?"; };

Oh, I am sure that message looks familiar on many marketing sites. You can be assured that I am not creating one more such website. In fact, even the message that I displayed was  something completely different. This is just meant to be a sample.

Easy peasy, and that works. Now, the issue comes when the user actually submits the form. The issue is that this function fires if the user leaves the page in any way, which does make a lot of sense, because after all, the user is leaving the page.

However, what I did not want was for the function to fire when the user submitted the form. So, what did I do? I just created a submit handler for my form and then tried to unbind the event handler using the off function of jQuery.

Neat as it may sound, that did not work. I am still not sure why. However after going through a couple of posts wondering what I had done wrong, it dawned on me that a better way to handle this feature was to both bind and unbind an event handler for this function directly using pure JavaScript.

So, this is what i eventually ended up doing
 //For binding
 window.onbeforeunload = confirmExit;
 function confirmExit()
 {
  return "Are you sure you want to leave this page?";
 }
 
 //For unbinding
 $('#myForm').submit(function(event){
  window.onbeforeunload = null;
 });

And that's pretty much all it took to create a page that warns the user before (s)he accidentally (or intentionally) attempts to leave a web page.

Also, after completing my piece of code, i stumbled across this jQuery unload function, that I beieve pretty much does the same thing.

Signing Off
Ryan

Change Image Resolution in Powerpoint

Recently for one of my projects a teammate had created a simple Powerpoint presentation , the slides of which we later decided to use as a mockup for a website.

We wanted to make a video using these slides emulating the user interaction with the pages. I believe that the video authoring tool that was being used required images in order to create a video. Now, I haven't worked on any video authoring tool before, but then, of course I am supposed to be knowing a lot more about tech than I actually do now.

So, I said that I would try to export the slides as images and that they could be used by my teammate who was making the video.

I was making use of Microsoft Powerpoint 2010, which is a very good piece of software. Hopefully many of you would agree if you are using it. Well, if you don't agree, I am never in a mood to argue about Microsoft software.

One neat feature that Powerpoint has is that it lets you save your slides in the form of jpeg images. Just go to File->Save as->, and select the file type to be jpeg images.

The interesting thing is that the images exported are not of such a high quality. So, when my teammate added them into the video, most of the text got blurred.

Well, there is a crazy way to increase the resolution of the images when you are saving a Powerpoint presentation as a set of images. I could  not find any options from the UI, but it can be done by adding a registry entry.

  1. Simply type in regedit in the command prompt or in the run manager or in your start menu.
  2. Expand the registry to HKEY_CURRENT_USER\Software\Microsoft\Office\14.0\PowerPoint\Options
  3. Add a new registry key from Edit->New DWORD Value
  4. Name the new key ExportBitmapResolution and set its (Decimal) value to anything among these - 50, 96, 100, 150, 200, 250, 300. Maybe you can try other values and see if tha works out well for you.
  5. Open Powerpoint again, and then try to save your file as a set of jpeg images. This time your pictures will be of a different resolution depending upon what decimal value you provided for the new registry key.


I am not registry expert but if you have some other version of Microsoft Windows or having some other issues, check out the official documentation at their site here and figure them out.

Signing Off 
Ryan