Glee, built with FlightJS
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 is a really simple tool that lets one log things they’re grateful for.
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.
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:
AnswerFactorywhich removes the answer from local storage, and
Daycomponents 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
AnswerBox, which adds a new
<article>DOM element to which it attaches a new
Answerwith the data from the event,
Calendar, which makes sure there is a
Dayfor the date on which it was added,
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
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: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.