I think it’s a good practice to write three things you are grateful for every day. It keeps you focus on the positive. I have this idea from this TED talk. I did it for more than a month some time ago and I’m now restarting this habit.

It happened that I’ve received a small notebook as a freebie form some event just before starting this habit thus I was OK with writing three things I was grateful for every day on paper. But I don’t have it anymore, so now I need some app for that.

And like any programmer*, instead of searching the App Store or on Google, I started to choose front-end frameworks. I decided to give FlightJS a try. I liked the idea that all the interactions happen with events, and there is no other way for components to interacto to each other.

First of all, Flight is a UI library. It is built on top of jQuery and lets you build components that attach to DOM elements, and listen to and trigger events. Flight gives you a really nice way to build resuable components that attach to DOM elements. For instance, you can make a component for a sign up button. You make it listen to all the events you want the sign up button to listen to. You can even make DOM changes on what you attach it to (thus you can make much more complex components), and they’re resuable. In this case, you can make a lot of things act like a sign up button with no extra code.

You plug in your own template library (if you want, I just hardcoded some DOM for this project), your own data management thing, etc.

Glee

Glee is a really simple tool that lets one log things they’re grateful for.

It uses local storage, so it needs no back-end and all data stays on the user’s browser. It currently live at http://vladvelici.github.io/Glee, and the code at https://github.com/vladvelici/Glee.

It is pretty basic. On application load, it checks whether there are some answers in localStorage. If there are, it triggers a previous-answers event with all the answers.

The previous-answers event is listened to by an AnswerBox component which renders all the answers, and by a Calendar componet which renders a Day component for every day in the interval from the first answer to today.

Each answer is rendered using an Answer component. It has a remove button, which when clicked triggers a remove-answer action with the answer ID. The remove-answer event is listened to by:

• the AnswerFactory which removes the answer from local storage, and
• the Day components which decrements the answer count.

This is great, because the calendar functionality was not built when the delete functionality was final and they are totally uncoupled.

Equally, adding an answer is done with a add-new-answer event, which is listened to by

• the AnswerBox, which adds a new <article> DOM element to which it attaches a new Answer with the data from the event,
• the Calendar, which makes sure there is a Day for the date on which it was added,
• the AnswerFactory, which saves the new answer to local storage.

For completeness, the display of answers only for a specific date is simply done with an event show-date triggered by the Day components, on click. The show-date event is listened to by Answer, and they compare their date with the date from the event - if it matches, they set display:block, otherwise display:none. This works fine because all the answers are always rendered in DOM. This is not ideal for an application where the answers will be stored on a back-end, when a server round trip might be required when viewing previous answers.