New WordPress Plugin: Playing Card Notations

If you run a WordPress blog or site related to card games, like poker, bridge, rummy and the likes, and have the four suites’ unicode characters pasted away somewhere so that you can paste it whenever you are writing a new article where you need to show hands with cards, you need to take a look at my latest WordPress plugin: Playing Card Notations (PCN).

All you need to do, is install the plugin from WordPress’s repository, activate it, and use the shortcode [pcn] with simple text notations. E.g. Four of a kind, Aces can be represented as [pcn]AhAcAdAs[/pcn] by the shortcode [pcn]AhAcAdAs[/pcn].

You can configure display options like font, colour scheme and standard or reverse from the Appearance > Playing Card Notations Settings page in your WordPress admin panel.

Do install it, use it, and let me know of your feedback or feature requests in the comments below.

Link to the plugin’s page on WordPress.org.

Installation

For an automatic installation through WordPress:

  1. Go to the ‘Add New’ plugins screen in your WordPress admin area
  2. Search for ‘Playing Card Notations’
  3. Click ‘Install Now’ and activate the plugin

For a manual installation via FTP:

  1. Upload the addthis folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ screen in your WordPress admin area.

To upload the plugin through WordPress, instead of FTP:

  1. Upload the downloaded zip file on the ‘Add New’ plugins screen (see the ‘Upload’ tab) in your WordPress admin area and activate.

Usage

You can use the shortcodes pcards or pcn to display cards and card hands in your blog’s content. The standard card notations of (A-J, 10 or T, 9-2) followed by suite letter (s for spades, c for clubs, h for hearts and d for diamonds) work.

Uninstall

In the Plugins screen of your WordPress admin area, navigate to Playing Card Notations, click on Deactivate. On the refreshed screen, click on Delete.

Bad UX: Fixing What Isn’t Broken or Over-Designing

One of the key things UX designers and product managers focus on is how to reduce friction for their users while using their products. If there is any UX pattern in our product which causes confusion in the minds of the user, they have to double guess how to use it, or they have to put more thought than necessary into using it, we have failed.

One such product that bothers me a lot is the tap or faucet. (Don Norman wrote about it in his book The Design of Everyday Things)

You use a tap in a very simple way – you turn a knob that sits on top of the device anticlockwise to start the water flow, clockwise to stop it, the water flows out of a spout in the vicinity of the knob, and the flow of water is governed by how much you have turned the knob.
Like this one: shallow-focus-photography-of-gold-faucets-1021872

This is simple, universal, does the job every time as expected, and there really isn’t any reason to make any changes in the fundamental structure of this device. And if I encountered a tap like this everywhere I went throughout my life, I am not going to complain.

Yet, we see the following variations of the tap at various places, where the variations are not just in scale, shape, texture, material, but in how the tap is used:

We are left confused as to which component to turn to use the tap, or which way to turn it, or whether we are turning it in the right axis even, or whether we have to push on the “knob” instead of turning it! Why have tap designers gone to these lengths to confuse us while using such a simple device? Mind you, I am not even talking about faucets where both hot and cold water comes and there are complex knobs to ensure you get the right temperature by mixing both, or sensor-driven taps, where you don’t need to touch the tap to activate it (they come with their own challenges – where exactly do I place my hand so it works? The tap next to mine seems to be working – why isn’t mine working?).

In Software Design

What are some of such scenarios in software & app design where the interface has been over-engineered to the detriment of user experience?

  1. Synthetic scroll: This was a pattern in vogue on blogs and magazine sites a couple of years back. If you used your mouse wheel or trackpad to scroll the page, the scroll speed would be higher than usual. Why? Either because the designer had found a nifty Javascript trick to make it happen, or … I cannot think of any other reason, least of all a user-centric one.
    Scrolling is something the device & browser handle and they handle it very well, and unless your experience involves things like scrollspy and page section navigation, there is no real reason to tamper with this behaviour.
  2. The sticky mastheads on sites, which would disappear when scrolling down, but would pop up again when you scrolled up a bit. Why do we need this interaction at all? Is the screen space so limited that the content isn’t visible when the masthead is perpetually visible? It is a little bit annoying to scroll up to re-read something you had just seen, only to have it hidden behind the masthead, so that you need to scroll just a little bit more.
  3. Form validations that go ‘above & beyond’:
    1. Some form fields take only specific types of inputs, e.g. numbers. But some designers go beyond just filtering unacceptable characters – there are forms where if you press anything other than the 11 keys (10 numbers and the period), the data you have already entered in the field is simply deleted, and you have to re-enter your data!
    2. There are forms where when the page load completes, a script goes through all the input fields to reset them. How is this a problem? Say the page takes some time to load, and the user has already started to input some data, once the page load ‘completes’ (in today’s times of progressive web apps, this could be an arbitrary point in time), the script just removes your inputs.
    3. Fancy input fields which are broken into multiple input fields one character wide. The most common example is the OTP field in many e-commerce apps. Why is this done? To visually denote how long an input is expected. As you input the OTP, the focus keeps moving to the next field, and thus the experience is completed, except when the backspace isn’t coded for. When you press backspace, the previous field should be emptied and put in focus, but at times the developer forgets to code that and it becomes an issue. Going one step forward, when the user manually goes to the respective field to delete the input, the code checks the existing data length, decides that the input is complete, and thus pushes the focus to the next field, without letting the user delete the wrong data.
      1. The special case of this issue that has bothered me for years can be seen on the IPv4 configuration screen on Windows. An IP address consists of 4 one-to-three digit numbers separated by periods. While other systems let you enter it all in one textbox, and you have to type the periods as well (leaving us in total control), Windows’ designers decided to make it fancier – there are four textboxes and the periods are ornamental pieces between them. It’s nifty, except that if you are typing any number less than 100, you fill only two places in a 3-digit field, and you cannot move to the next field except by clicking it using your mouse or trackpad. The tab key takes you to the next group of fields. Pressing a backspace on an empty field doesn’t take you to the previous field either. I’ve seen this behaviour and been annoyed with it for years now, but nothing seems to have changed here over multiple versions.
        windowsip

As you can see in the examples above, designers at times go overboard in over-designing interactions where it’s not needed, breaking away from the expected pattern, thus leaving the user confused or worse still, frustrated. These mistakes are almost always avoidable, simply by falling back on the most used and easily available pattern. This goes for taps as well 🙂

What are some of the examples of over-designing, in software or other products, that you have come across?

Bookmarklet: Add Keyword Search to the Listings on IIMJobs.com

Job hunters from the IIMs and other such colleges often go to this cool site called IIMJobs.com, started by an alumnus of my alma mater. It’s quite a live board, but there is one thing that I sorely miss there – filtering the job listings by keyword. You can select your experience range, your preferred location, and search. You get to see all jobs in your preferred city for your preferred vintage, but you may not be interested in them. And you have to sift through the listings page to find jobs suitable for you.

This got me thinking – what if there was a filter box, where I could type in my preferred phrase and it would filter the listings on the page, keeping only those that you want to see?

So, I spent a Monday morning putting together some code, and here it is – a bookmarklet which, if you save it on your browser’s toolbar and click on it when you are on the IIMJobs listing page, you will get a cool keyword search input box. This will let you filter the listings on the page by keyword – basically it will hide all the listings which do not match your search phrase.

All you have to do is drag the button below to your browser’s toolbar.

<a style="padding: 18px 32px; font-size: 16px; margin-bottom: 40px; background-color: #444; color: #fff;" title="Drag me to your bookmarks/favourites" href='javascript:(function(){$("#searchform").find(".greybtn").closest("div").before("

“),$(“ד).appendTo(“.keywordParent”),$(“.keywordSearch”).keyup(function(e){var%20o=$(“.keywordSearch”).val().toLowerCase();$(“.jobRow”).each(function(e){-1Add Filter @IIMJobs

Do let me know in the comments below if you like it, or if you have any feedback on how to make it better.

WordCamp Mumbai 2016 Day 2 Wrap

Speakers & Volunteers

WordCamp Mumbai 2016 Day 1 Wrap

My favourite talks of day 2 at WordCamp Mumbai 2016, in chronological order:

  1. Naoko Takano (@naokomc) came all the way from Japan (and brought really cool WordPress tattoos for us – you saw a sample in yesterday’s post) to talk about how WordPress became successful in Japan, capturing 78% of the website share. A relevant talk for anyone interested in internationalization and localization.
  2. Michael Eisenwasser (fb/eisenwasser) is the co-founder of BuddyBoss, a company which build products for the BuddyPress ecosystem. Great talk to help us build user engagement using “social tools” on WordPress.
  3. Sakin Shrestha (@sakinshrestha) came all the way from Nepal, where he heads various companies and also manages to host WordCamp Nepal. He introduced the audience to different approaches to developing themes for WordPress, ranging from modifying an existing theme, to building one from scratch, including using frameworks and starter themes.
  4. Darshan Sawardekar (@_dsawardekar) is a Lead Web Engineer at 10up, and a vim enthusiast – to the extent that he is the author of a vim plugin called WordPress.vim. He explained why URLs are important, how pretty URLs/permalinks work in WordPress, what Rewrite rules are, and how we can leverage them to our advantage.
  5. Mahangu Weerasinghe (@MahanguW) is a Happiness Engineer at Automattic, and like Bryce & Sam, I had met him and heard him speak on stage for the first time at WordCamp Mumbai 2015. This time he shared how he, a non-programmer, taught himself to write code on WordPress that lets him do things one step at a time, using action & filter hooks. But beyond just the technique of it, his deeper message was that programming is not only for the math-minded toppers in school – essentially, programming (at least algorithms and high-level programming languages) is language, and similar to any language we speak in with each other – so any person who can communicate well can also code well.

Thus ended my fourth WordCamp and the volunteer stint with it. In the process I had the chance to discuss with great people, some of whom are employees at Automattic, others are business owners in India, some developers, and every one of them a WordPress enthusiast.

Photographs courtesy: Bigul Malayi (@mbigul)

Until the next WordCamp!

WordCamp Mumbai 2016 Day 1 Wrap

On my way to the venue.
On my way to the venue.

The venue was set, the sandwiches, tea, coffee, water was all fixed, the projection on stage, the sound from the laptops, the presenters/clickers were tested, the WiFi worked finally after a couple of hours of tinkering.

47999106-9408-4c1d-9471-f450230a221fAfter around an hour of attendees walking in, collecting their goodie bags, and walking in to the auditorium after getting something to munch on & sip, we were ready for the talks to start.

WordCamp Mumbai 2016 was open!

This is my fourth ever WordCamp. I was an attendee at the first one (Mumbai 2014), a speaker at the next (Mumbai 2015), a sponsor at the next (Pune 2015), and I’m an organizer/volunteer/<localhost> at this one.

I was looking forward to this WordCamp eagerly, for the quality of the planned talks if not for anything else.

And this is the first WordCamp which was duly attended by the whole 13 Llama Studio team.


In the chronological order, here’s my take on what I liked about what went on today:

  1. Shilpa Shah (@IdleGazer, HWS) told us what customers want. It’s been a recurring theme in WordCamps, and rightly so. Developers have been known to not fully understand the importance of dealing with customers with empathy and a kind word. Shilpa delivered the message in her disarming fun way. A great start to a great WordCamp.
  2. Nirav Mehta (@niravmehta, StoreApps) had delivered this session at a WordPress meetup a few weeks ago, which I had missed. Later I heard many good things about it from those who hadn’t. Today I found out what I had missed then. Various insights into the WordPress plugin universe and what an aspiring plugin developer should focus on made this a must go.
  3. Bryce Adams (@bryceadams): I had heard Bryce for the first time in WordCamp Mumbai 2015, and was just blown away with the way he built his case for the famous “decisions over choices” principle. This time he spoke about building Freemium plugins, and how it follows from looking at The Bigger Picture.CdU57xTUAAAsQ9_
  4. Sam Hotchkiss (@HotchkissWeb): Same as Bryce, I had heard Sam last year, and he showed us a very cool picture of the admin panel of the future. This time around, he took us through the best practices for Plugin development. Very thorough, and very enlightening.
    I want this printed, framed, and hung on every developer's desk every where
    I want this printed, framed, and hung on every developer’s desk every where
  5. Karthikraj Magapu (@KarthikMagapu, HWS) in his inimitable style, took Nirav Mehta, Rohan Thakare (@rohanthakare, Wisdm Labs), and yours truly, along with a member from the audience on a panel discussion – the topic being how can growing WordPress based companies get to their first million. As much as it was fun, it was thought-provoking, forcing us to look inwards, and learn from each other. The learning opportunity for me was immense, since both Nirav and Rohan have been in business longer than I, and run larger companies than I.
    The panel at WCMumbai 2016
    Photo courtesy: Harshaja Ajinkya
  6. Rahul Bansal (@rahul286, rtCamp) is the god of scaling, speed, reliability, and taking off from his previous talk at Mumbai 2015, he taught us how to make WooCommerce scalable. Entertaining and educative.
  7. Raghavendra: though I missed a major part of his talk, whatever I heard moved me to the core. As a developer, I have always insisted on the alt tag, and warned against the indiscriminate mixing of alt with title in imgs. Today I got validation for this seemingly pedantic practice. But the alt is only one of the things we developers need to take care of while making the web accessible to those with disabilities. And WordPress is the only platform which focuses on accessibility. Yet another reason to be proud of using WordPress and being in the community.
  8. Kshitij Patil (@thekshitijpatil, kshitijpatil.com) is an entrepreneur who has sold web design services for years. And he shared his techniques and principles with the audience.
  9. Saurabh Shukla (@actual_saurabh, hookrefineandtinker.com) delivered one of the most fun, engaging, and moving talks of the day, where he shared his numerous stints with a development career, the failures & struggles, and finally simplified talent retention through the famous Maslow’s Hierarchy of human needs.

WordCamp Mumbai Day 2 Wrap

A new UI Kit for React-Native

I love Javascript.

And I have come to love ReactJS a lot more than I had loved any other Javascript library, sorry jQuery.

In the last few weeks, I have been learning React Native, while putting together an iOS app for a project of ours. While working with React Native, I realised that there isn’t a default styling/component kit available for creating native mobile applications. The ones that are there are not open source, each coming with a decent enough price tag.

And then I realised that even though React Native uses some form of stylesheets, I cannot simply drop the stylesheets from Twitter Bootstrap and expect it to work.

So I got down to creating usable UI components, with the style borrowed from Bootstrap.

It’s far from finished, but at the time of writing this you can use it to create a text input field with a label, and the six types of buttons provided by Bootstrap. I’ll keep adding more components to the kit as time permits.

Go ahead and use it, share it, give me feedback, and contribute to it if you would like to.

https://github.com/hypnosh/ui-kit-for-react-native

Indian Institute of #NetNeutrality

A lot has been said about #netneutrality in the last few days, from how dear ol’ “altruistic” Zucky has a golden heart and wants to see poor kids in Chandauli access Facebook the Internet for free, and how Airtel just wants every poor child to access “the Internet”, to how the debate is full of metaphors like a fishermen’s net is full of fish in the evening.

So let me take a jump in the net neutrality discussion to talk about three issues that have been bugging me related to this:
1. Idea & IIN
2. The cable TV metaphor, and
3. The toll-free number metaphor.

Idea & IIN

We don’t see the connect between Idea’s IIN ads and net neutrality yet. It isn’t directly related, but it does lay down the groundwork for the idea (pun unintended) that somehow, the mobile operators/ISPs are the magnanimous fellows who are bringing all this wonderful Internet magic to you, and by association, can claim ownership to the content and innovation it brings along.

You’ve seen the IIN ads – where Idea’s Internet Network is the source of education for all the underprivileged, all who have been wronged by unfair selection practices in traditional educational institutions, and all who are mocked by their peers, but have the zeal to learn on their own.

Wow so cool. Except that Idea has nothing to do with it. Like I tweeted a few days ago, it’s like BEST laying claim for the education of your kid who goes to college by bus and becomes a lawyer. There, one more metaphor – take it and go.

Yes, Idea (or any mobile operator/ISP) isn’t providing anything beyond a connection to the Internet. They aren’t providing a platform. They surely aren’t creating the content that’s adding to our education when we decide to educate ourselves. The people in the ads could very well learn the exact same thing, find the exact same information if they were using a Vodafone connection, or were accessing the Internet through a local cable broadband connection.

If anything, Idea and other mobile operators are responsible for impeding said education due to their pathetic network quality and high data prices.

The Cable TV Metaphor

Mobile operator sympathizers have been citing the way cable MSOs operate as the model for internet access, which is, you choose which channels you want to watch and subscribe to those, in addition to a basic access charge, that you pay your MSO or local cable guy. Certain channel groups have tie-ups with certain large MSOs and not with others, so certain channels are available only on the former and not on the latter. Nobody complains there, so why the hue and cry this time?

To start with, that one industry is being run as a racket can not and should not be used to justify attempts to destroy another network and technology. But let’s keep that aside for a while.

TV and the Internet can not be compared. Here is why. In the case of TV, a cable/dish subscription is nothing but a bundle of channels, it’s a one-way medium, and we’re all purely consumers. Add to that, we do not do our daily communication and business over television waves. It’s a pure mass-media system.

The Internet, on the other hand, is not just another media. It’s not a bundle of websites, and not at all a bundle of websites the folks at Airtel / Reliance / Internet.org can decide it to be. It’s like the ocean, where these websites exist, and thrive purely on merit, either of technology, content, or marketing, not because they sign up with particular ISPs so that those ISPs agree to delivery their bytes to end-users. The Internet is not “just a technology”, the Internet is an entity of its own, and you do not get to call it the Internet if you do not let me access certain sites based on tieups your tieup sales team has made.

Secondly, the Internet has always been about choice. I choose to open Vimeo or YouTube at the time I please, and search for the video I want to see, and choose to watch the one I like. Compare this with TV, where the channel decides which content is appropriate for its audiences, and when it should be aired – the only choice we have is to either watch it or watch some other channel altogether.

I am not just a consumer on the Internet. I am also a content creator. Through our websites, blogs, social profiles, we disseminate content.
We are, at the same time, consumers and creators of content.

More importantly, I am not just a consumer on the Internet. I am also a content creator. Through our websites, blogs, social profiles, we disseminate content, of varying levels of intensity and seriousness. In addition to that, people like me make our living through the Internet. We are, at the same time, consumers and creators of content. And with this freedom to create and innovate, the number of web properties increases every day. Can the ISPs play god by deciding which ones of these you and I, or the kids in Chandauli get to see?

The Toll-Free Number Metaphor

We started hearing this when Airtel started feeling the heat of the public backlash. In fact, an email arrived in many mailboxes today from Airtel’s MD & CEO Mr. Gopal Vittal, where he insists that Airtel Zero is nothing but a 1800 service for websites.

Except that it’s not.

I can call a 1800 number from any SIM card or landline phone within the geographic boundaries, and not be charged. To access the “1800 website” I will have to sign up with Airtel Zero’s service on an Airtel SIM card. The metaphor does not go the whole hog Mr. Vittal.

Once again, the Internet is not comprised of a bundle of websites or phone numbers. It’s a place where different forms of media and platforms and properties are being created every hour, and that’s the beauty of it. “Websites” are one type of property on the web, though the dominant ones, but there are other types of properties, and more such will keep coming up as innovation goes on.

…the illusion of choice the mobile operators are talking about, is for the provider of the content, and not you and me, the consumer of the content.

Also, to access a 1800 number, all I do is dial the said number (the transaction with the network begins there), and be assured that the conversation is between the owner of the number and me (unless there’s tapping going on, in which case we have other serious issues to handle). In the case of Airtel Zero or Internet.org, the only way the ISPs can make sure I am not billed for going to their favourite sites is by snooping on my data packets (because my transaction with the ISP begins when I log on, or in the case of mobile internet, it’s an ongoing transaction). This is gross violation of my privacy, and it’s none of their business to be looking at the data I am sending and receiving.

In the end, the illusion of choice the mobile operators are talking about, is for the provider of the content, and not you and me, the consumer of the content. You and I don’t choose whether we get Flipkart for free or Amazon. It’s only the choice of Bansal or Bezos to sign up with these “zero plans” if they want more visitors to their sites. We don’t get any choice if there’s no net neutrality going forward.

If we let the mobile operators/ISPs decide which sites we can and cannot access, and do not insist on net neutrality today, maybe going forward you’ll be charged extra to read this blog, or simply access WordPress.com, or maybe you simply can’t access these, because they’re not part of the bundle that your ISP is offering you.

Do your bit today, visit www.savetheinternet.in, or www.netneutrality.in to know more about the issue and find out what actions you can take to prevent mobile operators and ISPs from taking the Internet hostage.

Disclaimer: I run a firm which makes web properties and runs its entire business on the web.
Disclaimer 2: I am trying to post this blog through the Airtel broadband connection I have at home, which after the miniscule 15GB FUP (which can be exhausted in a mere 5 OSX updates) runs at the awesomely slow speed of 512kbps. I’m frustrated with them over this, but net neutrality is way bigger than petty quibbles over data packs ending prematurely.

(Post’s featured image from FreePress on Flickr under Creative Commons licence)

WordCamp 2015 Mumbai

It’s official.

I’m speaking at the WordCamp 2015 in Mumbai. It’s being held on the 7th and 8th of March 2015, at Manik Sabhagriha Auditorium in Bandra.

The topic of my talk is WordPress as the backbone of a mobile app.

Do try to make it if you’re interested in WordPress, mobile app development, PHP, or programming. It’s one of the most high-power events for software professionals in India, and you can expect to hear and meet inspiring professionals working in the WordPress ecosystem and in software development for the two days of the event. And it’s right next to the Bandra Candy’s if you need more incentive to attend 🙂

See you there.


Update: Prasad is speaking there as well. Now you have two reasons to come attend it 🙂

My 6 Basic WordPress Plugins

wpplugins
I make a living working on WordPress. And this blog is on WordPress. And at the risk of sounding repetitive, I’ve been on WordPress for 4-5 years now. One of the most important things in the install workflow is selecting and installing the plugins you’d need. While the exact set of plugins varies from project to project, and depends on the intended functionality of the site, there are a few basic ones that I make sure to install on every site I deploy. The exhaustive list is too big, but here’s my top six, which you may find useful.

  1. Akismet: Automattic’s own plugin which saves me a lot of time & energy in filtering out the comment spam, done by SEO bots mainly.
  2. Google Analytics: Any GA plugin will do. But most loved by us is the one by Joost de Valk. Why do you need this? You do want to know the details of the traffic you get, don’t you? And then you can export that data, import it into your spreadsheet software, and soar into the dreamy world of pivot-tables.
  3. YARPP: Remember how you forgot to leave Amazon the last time you went there, because you kept clicking on the “the people who bought this also saw this” products? Well, why not use the same tactic for your blog? Increase the stickiness. Increase the meaningful interlinks. Increase SEO juice. There are plenty of related posts plugin, but I favour Yet Another Related Posts Plugin. Why? Is the name not enough?
  4. BWP Google XML Sitemaps: Sitemaps are important. Sitemaps let crawlers know where all your content is. It’s like the related posts for robots. Must for improved search rankings, and findability. Preferred plugin: BWP’s.
  5. Regenerate Thumbnails: How many times during development have you realised you need a new size of an image, and found that WordPress is either giving you too small or too big an image? And then after registering a new thumbnail size, how many times have you wondered if you need to delete and reupload the images already in the library, so that the thumbnails in the new size are created for these images? If you have come across such questions, you need to install this plugin, which regenerates thumbnails for all the images already in the library.
  6. Smushit: Have lots of images making your blog heavy to load? Install this plugin, so that every image you upload is passed through Yahoo!’s smush.it service and losslessly compressed.

Which plugins do you recommend as the bare necessities when installing a fresh WordPress setup? And do you have alternatives to the ones mentioned above?

Share them in the comments.

Cloud, Workflow & Backups

cloud_backup
My system hard disk failed today. BAD_CTX error. The 120GB Intel SSD now declares to everybody who listens that it’s 8MB now.

So my previous Mountain Lion installation has vanished into thin air. But my data is safe, of course because the drive that died did not contain this data – it was stored in a regular 5400rpm WD drive. But the reason I wasn’t overly worried about the data is that my data is backed up. Despite me being me.

We all know that we need backups. We need regular backups. And we need reliable, redundant backups.

If you’re anything like me, you keep forgetting your backup schedule, keep forgetting to connect the external hard disk to your machine at regular intervals (I once went close to 2 months without a Time Machine backup, and the current backlog is close to 4 weeks), and generally find yourself too busy for backup routines.

You can do backups with hard disks, pen drives, optical drives, FTP, and the cloud.

You can set up copy schedules, Time Machine, or set up scripts. Or simply use this technique I’ve been using for the last few months.

I maintain a Time Machine backup, which is automated, except for the fact that I need to plug in the big 2TB hard disk to the laptop and the power source. Which, as I said earlier, happens rarely. But there is a low-cost (free for most cases) method which gives me instant redundancy automatically:

  1. Sign up for a cloud storage service, like Dropbox, Copy, Ubuntu One, SkyDriveOneDrive, or Google Drive.
  2. Install the desktop client for the service, sign in, and create its base folder on your local drive.
  3. Copy or move your entire work folder to this new folder.
  4. Over the next few hours or days, depending on the size of the folder and your internet connection speed, your work will be replicated to your cloud account in the background while you deal with other more important things.

It’s a pretty simple process, but after this, whenever you update any of your files, it’s automatically updated on the cloud as well. Instant backups!

Whether you lose your computer, or your hard disk crashes, or the computer gets damaged or stops functioning, your data is safe up in the cloud. Oh, and the bonus: both Dropbox and Copy also maintain basic file versions.

And you can access it using the web interface of the respective service.

What do I recommend: you can take your pick between the more popular Dropbox and the whoa-I-started-with-15GB Copy.