Web

Leave-a-Note

Screenshot of Leave-a-Note Plugin Site

Leave-a-Note is a WordPress Plugin for post comments that I developed from a different site I had already created before (link below). The original idea was to create a bulletin board where people can leave a short message, and track the movement of the messages on the screen in real-time. I decided against using comet or other types of pseudo-duplex techniques due to the strain it would put on my server, so real-time updating was out the window.(However, with HTML5′s web socket technology, I may upgrade this app in the future to make it truly real-time.) Instead, I decided to use AJAX and a database to store the position of the notes, and let them update on refresh.

Screenshot of Post-it Site

When you leave a new message, the note is given a randomly generated position and placed on the board. When you click down on the note, the current (old) position is stored via AJAX, and when you click up, the current (new) position is also stored. The two positions are compared, and if they are different, the new position is sent and stored in the database. Now, anyone who visits the site will see the new position. When several people are moving the notes around on the page, you can refresh and see the progress happening.

The next challenge came in translating this idea into a WordPress plugin. The most difficult aspect was to make it scalable enough to work across the ridiculously wide variety of WordPress builds that are out in the wild. I ended up re-writing most of the code, and tightening it up considerably. In addition to rebuilding the function of the site, I also created a backend menu so that people with no knowledge of code could customize some features of the note fairly simply. And of course, the design of the note itself is easily customizable through CSS alone.

The current version of the plugin is more or less the same as the Post-it site, but future builds will include new features, such as snapping to a grid, easier controls for deciding which posts utilize the plugin, and the possibility of adding media (like photos, and html5 video elements) to the notes.