[Tool] Year in Pixels

Project URL: https://year-in-pixels.glitch.me/

Hello all,

This is the first app I’ve built with Glitch. I wanted to test out Glitch by building a small tool to see if it fits my needs during development; and it really did.

This tool was made to keep track of your mood during all year using pixels. You can load this page every day and select how you’re feeling. The tool will keep track of your mood and give you some visualization about how you’ve felt during the year.

The idea for this tool is not new at all, but I’ve never seen this format online before.

You can import/export your calendar too, in case you’re using different browsers or computers.

There’s a small “Quote of the day” section that uses an external API.

Make sure to click “Demo data” to see how it would look with a full year of moods.

Tecnology

Nothing fancy, I wanted to keep things as simple as possible to be able to develop this during a Friday.

  • Node.js
  • jQuery
  • Chartist.js
  • IcoFont
  • Google Fonts

I’m not very proud of the code, there are a lot of things I’ve could built better but hey, for a 4-6 hour app I think it’s good enough.

Thanks for passing by and let me know your thoughts.

6 Likes

This is rad! Thank you for making and sharing!

Feedback:

  • This looks like an awesome project to feel great about doing on a Friday!
  • The interface is useful, intuitive, and inviting. The aesthetic feels encouraging and hopeful.
  • Lots of really clear, pretty small functions you map to the problem. Your client.js file feels rather familiar, as if you approach things similarly to people I work with and pair with.
  • The import/export/demo data is a sweet feature.

Questions:

  • Did you already have the application completely designed before you started working on it today?
  • How much time did you spend designing this first on paper or with requirements vs. implementing it?
  • How much abstraction or refactoring did you do on this?

Cheers!

2 Likes

@ryanorsinger, thanks a lot for your comments, I really appreciate your input. I’m glad you liked the import/export and demo features and the tool in general.

Answering your questions:

  • Did you already have the application completely designed before you started working on it today?

    • I did not. I have a folder on my desktop with little tools I want to develop, this was the first one. My only inspiration was this image.
  • How much time did you spend designing this first on paper or with requirements vs. implementing it?

    • I don’t use paper as I would like to. For this little app I only use the image above, but the solution was already in my mind when I started the implementation, meaning the data structure for moods + calendar. I probably spent a week thinking about it, Friday to have an MVP and an hour or two to make it publishable (today).
  • How much abstraction or refactoring did you do on this?

    • I was refactoring at the same time as I was coding. The modularization by function is how I like to write jQuery. I renamed a couple of functions before publishing it here.
3 Likes

Such a great idea, and very nicely done!

1 Like

Buenas tardes… ¿Qué ha pasado con la página? Ya no podré seguir teniendo guardado mi registro? Me encantaría tener grabado lo que tenía hasta este año. Llevaba desde 2020 ayudándome muchísimo.

1 Like

intentar otra vez. si no funciona, entonces intente esto Glitch :・゚✧.

1 Like

this is a cool idea i like

2 Likes

Me too! This is cool!

1 Like


Otro año más que no entiendo como solucionar este cambio. Por favor, ayuda porque lleva años ayudandome.

Hi! I was using it too, I have updated it using node 20 en I exported it as static HTML so I am not relying on node requirements or something like that a of hosting service for the core functionality.
You can find it here:

2 Likes