Author Archive


Leave a Comment

Introducing: LongAway

Based after the work done in the last 24 hour coding race  experiment I made at september, now I want to present you a real website: LongAway.

This new site is all about create routes in a map and sharing them with your friends. It’s easy, fast and web friendly: it works without flash, no browser has being hurt during the creation of this site. You can create a new route and have it posted in your own site in few minutes.

In comparison with the old web experiment, the site has being largely simplified, stylized and has got (a lot of) bugs fixed that could not be present in a real product. This is how the site looks now:

But this is not all, my friends. A new and really useful feature has being added to the site in the form of embeddable maps. Now, you can get a piece of code from LongAway, paste it in your own site and share the route with your users!

Here you have a real route embedded directly in this wordpress blog. You can zoom, change the map type, move over it, etc:

The site still lacks some big features and personalization of the embeddable maps, but I feel that it is usable right now and so, it officially enters in public beta status. Feel free to contact me to report/complaint about any bugs you find and all the new features that would be useful to have implemented.

Enjoy it!

Leave a Comment

listedPlan adds more control over your lists, removes ads, gets social

Some of you have noted the change: listedPlan has improved again its list management interface and is slowly working its way towards the planned objective of being the better and easier web list on the internet.

For those that have not checked their lists in a while, the big improvements are:

New feature: easy item reorder

You can now control which items go first and which ones you can left hanging to the bottom. This video shows how easy is to reorder the items while working with the list:

Interface tweaks

We have moved the edition controls to the left of the items, so  they don’t jump around whatever you go up and down over your items while doing changes. Less clutter!

You can now use the ESC key to go out of the edition mode as well. Try it!

No ads!

For a cleaner list, in this update we have removed the advertisements that used to show in the right part of the screen. That makes the list a lot cleaner, avoids distractions and makes the site usable from devices with narrow screens. listedPlan in your mobile phone!

Be social

Each list now sports a “facebook Like” button, so you can show your progress with the list to your friends in the popular social network. You can also follow us in listedPlan’s new facebook page.

Leave a Comment

Random notes about text encoding

Where one of the first references that come into my mind is this great post by Joel Spolsky I have just felt the necessity of writing down some little pieces of information that relate to that weird little computing world that is the text encoding. Humbly, here my 5 cents.:

General notes

  • If you are doing a web application, the way to go is Unicode (i.e. UTF-8). Use it everywhere from the very beginning in every text that can be human typed and don’t look back to easier local encodings (ISO-8859-1). You’re audience is the world, we’re not playing in the backyard anymore and, believe me, upgrading later can lead to incredible problems.
  • If you are a beginner, start reading the article mentioned in the introduction paragraph. It’s a an eye-opener of the subject that will make you understand the subtle complexity of the text encoding problem.
  • Test your application for input characters that you don’t usually type and do it in all your target browsers.
    Some troubling examples include: ampersands (&), single quotes (‘), double quotes (“), less and great than simbols (< >), some accented letters (á ò û ŝ) and languages not based on latin simbols (汉语/漢語 or  لا أتكلم العربي for example).

About javascript and sending stuff over the Internet

  • With UTF8 forms, the browser makes some great work by encoding data automatically before sending it  – by GET, POST, … – to the web server. If you are sending data with javascript instead (hey AJAX!) you will notice that it is not automatically encoded. The working solution is to use the encodeURIComponent() function.

Leave a Comment

New welcome page for listedPlan

After the cleanup in the interface controls last time, we though that the welcome page also needed some cosmetic care. That’s the  one that the users see the first time they enter in and we wanted to give a better first impression and clean up all the extra stuff that was appearing on it.

New welcome page

The new design is simpler and to the point. It gives clear options for the users to do next and brings in some example lists from inside so they can click and see what a listedplan list looks like even before registering as new users.

Leave a Comment

A cleaner list

The user interface for listedPlan has being improved again in this development iteration.

The target this time was to make it cleaner an hide every piece of managing interface when it’s not being used to leave just you and your list. The result is a more usable interface that will make your list simpler and more beautiful, while maintaining the usability.

In the new interface, the edit icon that was right after each item, has being removed and now is only shown (accompanied with a new “delete” option) when you rollover with the mouse. See it by yourself:

listedPlan's new interface

If you have any thoughts about the new interface, prefer the old one or have some suggestions for the future, add a comment here and say it loud!

Leave a Comment

Thoughts after a 24 hour web coding race

Time has passed after my experiment in fast web development and I think to have learned some lessons from it. These are some of the ones that I have being able to identify:

  • The fast-paced development combined with the freedom of something new greatly increases the excitement and enjoyment of development. Every step in the right direction makes you feel like your’re really doing something now.
  • The race against the clock, somehow makes that even the smaller task gains significance.
  • Documentation is a necessary step and always to be done in the first stages. Unfortunately, it will take you some time to use some new technology  but a learn-by-example strategy can help with it.
  • Is not bad code that makes you loose time, but wrong specifications and planning. Take the changes I made in the way you enter new places as an example of this, from a “click in the map” approach to a “search for it” one.
  • So, learn when to change the original plan and how to do it in the middle of the project. You can think that you’re loosing a lot of code and regret for the time wasted, but that’s better than getting stuck with an unusable result.
  • Having a hard deadline, make 20% of the features integrated and working correctly, is far better than having all of them in place but none in an acceptable state.

I think that’s all. For me, the experience, is completely valuable and really worth to be repeated and explored in other occasions.

Leave a Comment

The 24h coding updates!

Hour 0

It’s 17:00 in my clock so it’s time to start doing the new web site. I will be updating this post during the next 24 hours with development news.

Hour 1

The first hour has passed fast by doing some paper planning and drawings of screens. I have also decided to spend some time studying the google maps API.

Then, a new subversion structure for the project has being creted with the temporary name “triplan” (playing with the words trip + planner). So that’ll be the name for now.

I have taken the skeleton used for listedPlan and remove the parts that I feel are of no use. The remains are a page switcher, the user system and some libs that could be of use in triplan (jQuery, some PEAR code…)

AfterEdit: some of the paper drawings made in those moments:

Hour 2

I have being able to load a simple google map window in the page and the user accounts system seems to be working after being imported from listedPlan. Here is a screenshot:

Hour 3

Reading the google maps API documentation and reference.

Hour 5

Y have found a nice js library that builds over the google maps API and allows the use of editable polyLines in the same way than “My Maps” in google maps does. The cons. is that I had to switch to google maps API version 2 (deprecated, but will work for almost 3 years more). Here’s a new screenshot of the map with editable polylines:

I will now try to attach to some events fired by the creation of points in that line in order to add them to a route list.

Hour 6

After playing with the editable polyLine control, I have realized that it’s not powerful enough to add and edit points in a route, so I have changed direction again. I will go with a simpler interface that limits the clicks on the maps, and uses it as a data display.

25% of the time has now passed, but I know the google maps api much better and feel confident about the next hours can see some fast advancements. After all, the user is going to interact with a list of points in a map, and that’s something I have made before 😉

So, I have now added a new searchbox following one of the google maps examples. It makes geocoding of the wanted location and puts a marker in the map. Pretty cool for such a little code.

Hour 9

A list of places and the map are now merged and work well together.

When the user searches for places, they are saved in his personal list and the map is updated to show a line that connects all those places together. And, if the user decides to remove a place from the list, it’s also removed from the route shown in the map.

The old good screenshot will put some light on this. As you can see, I’m using the art and css from listedplan now:

Hour 16

Its 9:13 on friday and I have being sleeping for 5 hours after seeing me too too tired for doing any good work at 4:00 yesterday night. I hope this extra rest make the 8 hours left be extra-productive.

Anyway, my last advances where about adding multi-route support for the site (just the backend, nothing really visible) and linking some info (regular text) for each location.

The next step should be something like show that info in a way consistent with the rest of the interface and make it editable.

Hour 19

The info text for locations is working. Although I have added the initial texts by hand in the DB, the edition of them seems to work correctly and the interface is consistent. Mandatory screenshot:

Hour 21

Location texts are working completely. The problem now is that there’s only 3 hours left and I’m not sure if I should add any more features, having into account that the site is still missing graphical design changes, proper testing and the usual last minute bug fixing.

So, the web will, almost for sure, launch with the current feature set.

Hour 23

The last 60 minutes of this 24 hour marathon are about to being! In the previous two hours, I have being doing a lot of design improvements and fixing some errors that I have being finding with unformal tests.

For this last hour, my plan is to finish the desing, do some fast tests and install the site in some public accessible place! Too much for so few minutes, I better hurry up! Screenshot please:

Hour 24: end

It’s 16:52 and I’m uploading the files to my web host. Meanwhile, I have svn tagged the code, created the domain, DB and table structure inside.

As soon as the file upload ends and I make some configuration changes for the new location of the code, the site will be available to the public at the address:

I will write some kind of final thoughts later, but no fixes in the code after the time limit; so, this is rest time for me. Enjoy!

Comments (1)

The 24 hour coding marathon

Tomorrow I will do an experiment that I have being thinking of for all this week: I’ll create and launch a new website in just 24 hours.

I will write down some simple rules:

  1. I have to create and launch a new website in just 24 hours of real time. That comprises from the initial design to the moment of putting it online to the public. So, it will start tomorrow 10/Sep/2010 at 17:00 (UTC+1) and will end at 11/Sep/2010 at 16:59 (UTC+1) and I will post updates in this blog in real time.
  2. The theme will be “A travel planning website“.
  3. The site must fulfill the chosen theme and/or objective.
  4. The site must be feature complete and cannot have any serious bug that limits its intended functionality. No dead features or “not yet implemented” messages can be shown.
  5. There’s not a fifth rule. Enjoy!

I will be running this death race with the intention of testing if a nice new website can be released with such big constraints and well, to prove myself that I am able to do it!

For inspiration, I have previously read (something like 30 minutes before writing this post…) the following resources. All of them are about fast game development, so I’ll try to take the better of it to the website dimension:

See you tomorrow!

Leave a Comment

listedPlan vastly improves interface

We have being working lately to improve listedPlan and make it the simpler and easier TODO list in the net.

So, the time to launch has arrived and a new AJAX driven interface sees the daylight. The new interface is lighter, faster and easier to use; all of this to make you just think in your list at hand, without the interface getting in your way.

That’s the new big thing, but we have also made some other subtle design changes to the site that will improve the overall experience in listedPlan. Now, go into the site and take a look to the easier way to create your lists!

Leave a Comment