Sam Iles's Blog

Recently I blogged about my method of to-do lists. I was writing on my index cards this morning and I suddenly realised that I could make a to do list website that functioned exactly as I wanted it to, just like the index cards method.

9.34am (I made a note of the exact time, all further times are rough)

I took to my Moleskine and wrote a page of notes about how the site would work, what features it would offer and a quick UI mock-up. I only spent around 20 minutes doing this.

10.00am

I started work right away. I made a new host on my Mac so I could visit and test the website locally at http://todoapp/ and make the database locally and added the relevant tables (the structure of which I’d made in my notes). I added a few sample tasks to the database so I’d have something to look at when testing. Then I made the files and folders I figured I’d need. (So, /login/ and the relevant files and /todo/ for the main app, with a few files including the main app’s page and the PHP files to post the AJAX content to. Then, a nice CSS file to round everything off.

Ready to code.

10.15am

I opened to main app’s page and started adding in the HTML outline and the divs I figured I’d need. I decided to load the overdue tasks and today’s tasks when the page renders (as they really need to be there ASAP) and load all other days incrementally over AJAX. I figured this’d have the best loading time result (load important content first, then the rest) otherwise I’d have thousands and thousands of lines of code for just the one page. Of course, I will adjust and test this properly when I get the chance.

10.30am

Next up, I wrote the SQL queries and code to get and print out the tasks. This involved crafting the queries so they worked correctly and echoing out the data in a nice way, with all the checkboxes and strikethroughs for completed tasks and etc. Then, I wrote the JavaScript functions which are called when the user clicks on the checkbox, which includes the AJAX call itself and returning the relevant data.

I then went to the PHP pages which receive those AJAX calls. Just a few dozen lines of code (much of it copied from other pages as I’d already written it) and those pages were receiving the data, marking the task as done, getting the tasks all over again and posting them back to the home page. The home page then echoes the data it receives (which is just an updated copy of the tasks) into the relevant div.

Doing it like this, when the user clicks a checkbox, the task is marked as complete in the background, and instantly gets crossed through and moved to the bottom of the list, if applicable. This gives a instantaneous, desktop-app type feel, whereas in reality there’s a lot over data being invisibly sent around in the background.

So, after just one and a half hours, I had an app which got the tasks that are overdue, due today or due tomorrow, formats and displays them nicely and marks tasks as done using a pretty complicated AJAX technique.

11.00am

Next up: adding new tasks.

Again, pretty simple here. I made a text box at the top of each day’s div and set up some jQuery to listen the user hitting return (no buttons here!) and then submit the task via AJAX to addtask.php, and print the data (all the day’s tasks) into the div, to give the impression of it being added in real-time. Add the code to the addtask.php file to do that and we’re good to go.

Simples.

11.30am

Next up: postponing a task.

I thought it would be pleasantly simple to click a task’s little green postpone arrow and have that push the due date back a day. No messy “click Edit Task, change the date, click Save”. So, just click the arrow and push it back a day. Simple, right? Not really. This presented a few challenges.

1) I didn’t want to green arrow showing all the time. It would make the page look ugly if it was full of tiny arrows. I wanted them to be shown only when you hover over the task. (That was relatively simple. Just a little jQuery to do the show/hide on mouseenter/mouseleave, while making sure it was taking into account that much of this data would be loaded over AJAX and therefore unbinded.)

2) With adding a task or completing one, I could send the data, update the database, then regenerate the correct list of tasks and populate the div with this. However, when postponing, I need to update both the div that sent to update (to remove the task from its list) and update the div containing the next day’s tasks (to add the newly postponed task to its list). Eventually, I settled on returning the data for the original div in the AJAX request and then starting a new AJAX request client side to get the updated tasks for the next day. If you know what I mean.

So. I coded that.

Blah, blah, blah. Wirte the code. My plan which I just described worked pretty darn perfectly. I had to go back and recode a few lines as I realised I was hard coding some of the variables in rather than using, well, variables which would have resulted in about five times more code for the same task. Other than that, it was all pretty uneventful.

12.30pm

At this point, three hours in, I had what was essentially a working to-do list app. Users could: create a new task on a day of their choice, mark a task as done and postpone a task, all laid out in the unique day-by-day style I wanted.

But, there were still a few features left to add.

First up: adding tasks with a due date greater than eight days away. Obviously, I couldn’t have a card for each day going on down the page for all infinity (“The Never Loading Page” sounds like a great geek horror movie). Even if I could (infinite scrolling could have been used here), it wouldn’t be very user friendly to ask someone to scroll through 365 cards if they needed to add a to-do that was a year away (“Submit Taxes”, for example). So, I needed a text box at the bottom of the page where the user could enter a task’s name and due date, while making that in keeping with the app’s simplicity. Let’s make that, shall we?

I don’t think I’ll add that right now. I’m going for a quick launch here, and this feature really seems too unneeded right now. I put a little disclaimer to explain that it’ll be ready within the next few days.

So instead I added all the CSS I’d need to make the page look at least a little pretty and did the basic formatting such as adding the user email in the top corner, adding a footer and the rest.

For now, that only leaves adding the functionality to create a new account. Very similar to logging in (and using much of its code) it was only a few lines.

While I was on that, I made the page to log out. Just a tiny three lines of code in a PHP file to do that.

1.00pm

It was around this time I started thinking of a name. I didn’t really think much. I just wanted [a word which conveys happiness/simplicity/peace][To Do] and quickly thought of the word Ananda which, along with being the name of the Buddha’s faithful companion, is also a Buddhist term meaning happiness, bliss and joy. It seemed to suit, so I quickly registered anandatodo.com so it’d be ready ASAP. I’m not claiming it’s necessarily a good name or a wonderful one, but it suits my purpose for now at least.

Next up, a homepage! I really can’t be bothered to make something huge here. In fact, I’m just going to throw some text up. I think video is the only way to showcase this app well, so I want to make a screencast type thing with a nice narration to explain it. After all, there are just a few features and the AJAX just make it look somewhat impressive to the eye, if I say so myself. So, I’ll make a video and that can take centre stage in the homepage. So, for now, I’ll just put up an Alpha type page to briefly explain and invite a few people along, for testing more than anything. I also quickly made a Google Analytics profile and added the tracking code so I’d know who’s visiting.

So, code code coding the homepage.

1.30pm

Then, we’re nearly at the end. All that’s left from here is moving the CSS, JavaScript and images off to the CDN, setting up the server and launching!

Putting stuff on the CDN took a matter of minutes. At this stage, I committed all files to git with the message “FIRST COMMIT IS A GO!” and the site was all done.

Firing up the terminal, I SSHd into my server and created the new virtual host and created a copy of the local database on the server and FTPd up the files. Then I added the domain to my DNS records, which propagated instantly.

Aaaaand…

All done!

I’d only registered the domain name an hour or so before, but it was already live. I made a new account on the actual server and did a little testing just in case some URLs had died in the transfer from local to production, but all was fine.

I updated the Smiles Software homepage to include the newest product.

The site was officially available and complete, with the Smiles Software page updated at 2.30pm

I then quickly wrote this blog post.

And that’s it. Ananda To Do: a super simple to do list application focusing on a day-by-day approach, from idea to launch in just five franticly fun hours.

1) Bookmarking tools
2) Email clients
3) Calendar software
4) To-do lists trackers
5) Music managers

It’s all very well and good writing software and doing stuff, but you really do need an idea to get started. And, for many people, that’s the hardest part. Here are my tips to make it as simple as possible:

Stop trying to think of an idea
In my opinion, brainstorming or sitting around thinking of what to do are poison for ideas. By their very nature, you’re forcing out ideas and they will probably end up being to “over-thought” and pretty much just bad.

I know it seems counter-intuitive to say “don’t think of ideas” when you need to think of an idea, but hear me out.

Let it happen…
All the ideas for everything I’ve made (with one exception) have happened because I needed or wanted to use a product which didn’t exist or, if it did exist, wasn’t good enough or wasn’t what I wanted. I am certain that they are the best ideas.

Take Deverous. That idea came about because I decided that any of the existing solutions for software project management weren’t good enough. The few that did exist were just bug trackers, and project management software was horribly unsuitable for software projects. So, I thought a hybrid of the two would be good and I set about making it.

Think of the difference: if you come up with a software project while staring into the sky chances are it will be useless; if you come up with a software project while desperately trying to find one that does what you need, then at least one person needs it.

Don’t try to make money
I think that focusing on making money from software when building it is nearly always bad. Of course, you may make an app thinking “I’ll sell this for ninety-nine cents on the App Store”, and that’s fine. The problem comes when money is your goal and the reason you’re making something. If you aren’t writing software because you want to write software and something people will loose, you’re app won’t be any good. You’ll always be thinking about how decisions will affect the money you’re making rather than the users.

You’ll just end up failing quicker and not making money anyway.

Failure is fine
When I’m writing software, I never expect millions or even hundreds of people to be using it. I write software mostly for me and then tend to make it public. It just so happens that I make money from all that. It never matters to me if the product sucks or is never seen by anyone, because I’ll still have done it, enjoyed making it and be using it myself.

All that learning, all that fun, all that use really can’t be failure anyway…

Filter
You may be at the other end of the scale – too many ideas.

Over the last few years, I’ve filled many notebooks and such with software ideas. Just turning my head to my whiteboard, I have two ideas I’ve put up in the last few days. All in all, I must’ve come up with around 100 ideas for apps and websites I could have made. Some are good, some are not so good. Some I decide I want to make right away (Deverous), some I think about for months (Rejuncture) and the other 95 stay tucked away in the notebook. Who knows, maybe the next Facebook is one of those unmade ideas…

If I tries to do them all – or even a few – of them, I would be totally spreading myself too thin and I’d never get anything done. You really need to learn to filter well if you want to get anything done.