Jayd Saucedo


In my last post, back in January, I wrote about how I needed a task management tool to keep track of all the different things that I needed to do. So I made a TODO web application. The thing is, I never really used it because it didn't really organize my tasks very well. It wasn't as intuitive as I thought it should be. I hinted at the end of that post that I was reading about different ways to organize tasks and I found a method I really liked. It's called the matrix management system and it basically involves categorizing your tasks into a set number of priority categories. It's not as simple as "high", "medium", and "low" priority though. You organize your tasks based on what you need to do with them. My categories are "critical and immediate", these are tasks that are important and due now, "critical and not immediate", these are tasks that are important and you should start planning now, "not critical or immediate", these are tasks that may be delegated or done during dead time, and then there's an "uncategorized" category that acts as the default.

This system of categories was the inspiration for my new web application, 4sqr:

You can access 4sqr here

4sqr is a combination of javascript, php, and of course html and css. It uses jquery to simplify the javascript cross browser compatibility and a library called sortable to allow for the dragging and dropping of items into different categories. My goal for 4sqr was to make it as sleek and intuitive as possible. Different "4sqrs" can be created and switched to seamlessly without refreshing the page or waiting. Same with creating new task items, with a click of a button a new task is made and inserted into the uncategorized box. Editing a name is as easy as double clicking on the text on an item, and deleting an item or a 4sqr is as easy as clicking delete. All the database changes are done in the background using AJAX. It is cross browser compatible, tested using Firefox, Chrome, and IE9. It has a user system that allows for people besides me to use it! So if you want to start using it then knock yourself out, I'll do my best to preserve the database when I start adding new features.

I actually learned a lot about javascript while writing this. I've usually never bothered with custom callback functions and the like, but in this I used them all over the place and this really made the code compact. There is nothing too special about the code, I added some error handling so the code is about 500 lines long. I plan to do a lot more error handling in the future and add a lot more features. I had some issues with cross browser compatibility, surprisingly IE wasn't the major issue. Firefox doesn't handle certain events properly. I did my best to suppress certain symptoms of this bug but you might notice that you aren't able to use your mouse in the input box when editing the text on an item. Luckily I plan to completely change how you edit names in the future and this bug will no longer be relevant.

I have the following features planned:

I'll probably think of more features if I continue to develop this and actually use this regularly. The funny thing is, now that I'm out of school for the summer I finally had the time to make this, but now I don't have nearly as much of a use for it. Maybe once I get the mobile version working people will want to use it.