Category Archives: Thoughts

#GoPaperless with CloudMagic

How to go paperless this World Environment Day with CloudMagic

It’s the World Environment Day today and we’re here to help you go paperless with CloudMagic.

You might wonder, what does an email app have to do with saving paper? Remember, there’s a Card for that.

Trello Card

Say goodbye to post-its and other notes you have in your workstation. Switch to Trello and experience the power of Kanban style of project management. So, what does an email app have to do with Trello? We’ve integrated Trello inside CloudMagic to help you add anything from your email to Trello with just a tap – Read more

Evernote Card

Call it the swiss army knife to help you go paperless, the possibilities are endless once coupled with CloudMagic. The next time you want to take a print out to keep something for posterity, or when you need to print PDF documents received over email, simply use the Evernote Card and save it to Evernote with just a tap – Read more

OneNote Card

Prefer OneNote over Evernote? We have you covered! You can use the OneNote Card to save emails and attached documents to OneNote with just a tap – Read more

CloudMagic Paperless

Evernote has more than 100 million users, OneNote is a widely used digital notebook and Trello is a very popular task management tool. We see forests being saved, thanks to Evernote, OneNote and Trello.

When we shared this blog post idea, one of our developers made an interesting remark: ‘we save trees in another way as well; by not providing an option to print emails using the CloudMagic app’ :D

On a serious note, it is our responsibility to preserve the environment. We’ve done our small part by making such handy integrations happen. Go ahead, make the best use of CloudMagic Cards.

Don’t have CloudMagic on your phone? Download now for your iPhone, iPad and Android.

Android is the new Internet Explorer

Android is the new Internet Explorer

IE’s fragmentation

Web developers have been battling with Internet Explorer for a while now, from IE6 to the new IE11, each version behaves weirder than the previous one. This fragmentation meant maintaining overriding CSS classes in separate IE specific stylesheets and then taking the effort to test on all versions. One big herculean task.

Android’s not too far behind

As I was developing the new CloudMagic website I had to make sure it looked great on mobiles as well, which initially looked like an easy task. Little did I know that Android’s fragmentation battle was up next.

First, I had to get hold of a plethora of devices – the Nexus family (N4, N5, N7, new N7, N10), the Samsung devices (S2, S3, S4, Note, Note 2, 10” & 7” tablets), HTC One, Moto G, just to name a few. My workstation could be easily mistaken for a store in Walmart.

Then I began looking into the specifics of each device. For example:

New Nexus 7 – can’t be shown the tablet layout because it’s height is too small for tablet, and also cannot be shown the phone layout because the width is too large for a phone.

HTC One and Samsung Note 2 – triggered the tablet layout in portrait mode because it’s width in portrait mode is larger than the Nexus 5.

Nexus 10 – worked quite alright in terms of layout, but the animations were jerky.

Clearly, supporting Android’s fragmentation was as bad as supporting IE’s version fragmentation.

Even the code was similar

In spite of all this complexity, I managed to get the website to look presentable on almost all devices. When I relooked the code I saw a striking similarity between the way we conditionally load IE stylesheets and stylesheets with media queries.

To support IE we need

<!-- if [IE lt 9] -->
<link href="ie.css" rel="stylesheet" type="text/css" />
<!-- [endif] -->

And to support all these different resolutions, width, height, dpi etc. etc. we need many media query blocks and conditionally load css stylesheets.

<link href="handheld.css" rel="stylesheet" media="(min-width: 604px) and (max-width: 829px) and (min-height: 600px)" />
 <link href="phone.css" rel="stylesheet" media="(max-width: 603px), (max-height: 599px)" />

@media (max-width: 603px) {

@media (min-width: 603px) and (max-height: 600px) {

You can see how the stylesheets are loaded depending on the version (for IE support) and resolution (for Android support).

With a little help from my friends

Chrome Emulator
By using the Chrome Emulator, I could easily change the width & height of my desktop’s Chrome browser to emulate the device. It’s a great debugging tool. There were couple of final touches which had to be made by previewing it in various devices but this tool did help speed up the process.

Twitter Bootstrap
I thought Twitter’s Bootstrap would help me manage the fragmentation, but I was wrong. Bootstrap added significantly to the page load time, and I realized I was overriding most properties anyway. Maintaining the code was another issue I started having. I then found it easier to write the CSS on my own.

(PS – Don’t get me wrong, I’m an avid Android fan myself, I use the Moto G, but I’m hoping Google does something about the fragmentation soon.)

Feel free to comment with your thoughts below, or follow this discussion on Hacker News.