BitmapCake!

I was trying to set several cookies using the Python Bottle micro framework and ended up getting a 500 server error along with the above message. So I searched Google to find a solution for this, but I couldn't find any webpage that would help me. Then I opened the Bottle's documentation and read the cookies section, and there was another sub section under cookies, called Signed Cookies.

There I found that response.set_cookie() accepts a third parameter to encrypt the stored cookie. Although it's mentioned in the documentation that the cookie is still readable by the user, it was not directly readable, meaning it had an encryption. Apparently, the error was solved by using this third parameter, but when I try to read the cookie, it was encrypted. But I wanted to have a non-encrypted cookie.

But if I tried to use the response.set_cookie() without the “secret” parameter, it always gave me this error. TypeError: Secret key missing for non-string Cookie. Since I was not ready to keep the cookie encrypted, I tried to find the error in my code and found that I cannot have non-string cookies without the encryption. The third parameter was not needed if it's a string. But if the cookie value is something other than a string, say an Integer, it had to be encrypted with the secret key parameter.

Here is a section of the original code.

            response.set_cookie("session_key", login_user[0]["session_key"])
            response.set_cookie("loggedIn", 1)  #this gives the error.
            response.set_cookie("first_name", login_user[0]["first_name"])
            response.set_cookie("last_name", login_user[0]["last_name"])
            response.set_cookie("username", username)

If you notice the second line, it is an integer value. So it has to have the “secret” parameter. But If I pass the “secret” parameter, the values will be encrypted. Then I changed the integer to a string by wrapping it with quotes as shown below, and it solved my problem.

           response.set_cookie("loggedIn", “1”)

I hope this will be useful to someone in the future because I didn't find any tutorial to help me with this when I had this problem. So I'm sharing my experience. If you think this is a bad practice, or if you know any better solution than this, please feel free to leave a comment and let others know it :)

Undoubtedly, every web developer would admit that Jquery Chosen plugin is a big time saver for them.  It's not only saving the time, but it takes out the whole pain of modifying and converting those ugly html select boxes into more usable elements. It is even simpler to use because all you have to do is tell the plugin to do the hard work for you, because this plugin wants only a simple select box to do its magic, be it either a single select or a multiple select.

Here I'm going to share something useful I came across recently with this plugin. I hope this will be useful for someone in future :) Most of the times, I used Chosen to display a static dropdown list only. It can be done with a few lines of Javascript easily. But this time, I was using the plugin in a small single page app written using Jquery. When the user adds a new item, the options in the select box has to be repopulated with the new one included.





I went through the Chosen's documentation expecting to see some hints to get this done. Luckily I found this section.

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

$("#form_field").trigger("chosen:updated");

So this is what I wanted. And here is how I did this using Jquery. I appended the new item to the options list and triggered the chosen:updated as they have mentioned in the documentation.

var NewTopic = $('<option value="'+data.topic_id+'">'+data.topic_name+'</option>');
$('#choose-topics').append(NewTopic);
$('#choose-topics').trigger("chosen:updated");

This is a simple thing, but chances are there that someone might miss this specific part while reading the docs. That's why I wrote my own blog post too :)

Please do not forget to leave a comment if this blog post was useful to you. Also please share this with your friends in Google+, Facebook or Twitter if you think this will be useful to them.

When I was using Windows, I used Cyberduck to connect to the Amazon s3 to manage my buckets easily.  But now, I'm moved to Ubuntu, and I wanted to have a good s3 client similar to the CyberDuck. So while I was looking for the best alternative, I found DragonDisk which was a great tool  to manage the s3 buckets as in CyberDuck. It has a similar interface to the CyberDuck, so I think it will not be a problem for you to shift from CyberDuck to DragonDisk. So I thought I should write this in my blog so it would be useful for others as well.

Here I'm showing how to install it. If you want further assistance on the software like how to use, please visit the DragonDisk website :) But it's fairly easy to use. Install, add your S3 details, and connect!

Step 01: First Download the release that matches with your Ubuntu installation from this link.

http://www.dragondisk.com/download-amazon-s3-client-google-cloud-storage-client.html

Step 02: It will download a .deb package. Once the download is complete, double click on it to run the installer. (it will open your Ubuntu Software Center to complete the installation.)

Step 03: Click on the Install Button.

Step 04: Finish! Now you can launch the DragonDisk either by using the Unity Launcher or the Terminal.

Press the “Super Key” and type in “DragonDisk” to locate it from the launcher. If you want to start it using the terminal, Open the terminal and type “dragondisk” without quotes and press enter.



This is how the Software looks once you open it.


To create a new account, Go to File->Accounts..

This will open a new window, click on New Button and enter your account details there. You can select the Cloud service provider you are connecting using the dropdown given.

Please let me know if this article was helpful to you. Also please do not forget to share this with your friends in Facebook, Google+ if you think this will be useful to them.

Gmail notifications css style.

I am working on an interesting project these days. There is this page where I have to display loading messages, success notifications etc. So I decided to make that notification box somewhat similar to the Gmail's notifications box.  The main reason I wanted to make this similar to the Gmail's one is because its so easy to read, and the notifications are not disturbing the user. They look pretty cool, and simple.

I guess you might already have seen these notifications in Gmail so many times? If not check the image above.

Today I'm going to show you how you can create this notification style using css. It's a very simple thing. Let's Start. Here is the css, and there's nothing to explain. :)

.notify-outer {
    left: 0;
    top: 0;
    margin: 0;
    font-family: arial, sans-serif;
    font-weight: bold;
    visibility: hidden;
    z-index: 8;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%;
}

.notify -msg-box {
    position: relative;
    display: inline-block;
    visibility: hidden;
    font-size: 80%;
    padding: 6px 10px;
    background-color: #f9edbe;
    border: 1px solid #f0c36d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    top: -15px;
}

Here is how to use it. You will have to make changes according to your requirements. I change the text of the span #msg dynamically using Jquery. So I have made the notifications hidden by default.

<div class="notify-outer ">
    <div class="notify -msg-box">
       <span id="msg" style="display:none;"></span>
    </div>
</div>

Please feel free to share your thoughts on this. If you think this will be useful to your friends, please consider sharing this post over Google+, Facebook, Twitter etc.