This is an old revision of the document!

Sosig Counter 1

Okay, let me explain.

A mate and I were having this conversation about how

  • I have too many hobbies;
  • I get distracted very easily;
  • I feel like I get nothing tangible done and mentally suffer from it.

He whipped up his Visual C# and put together this lil accountability tracker, featuring our favourite snack from Greggs, my musical instrument, and a common symbol of love to remind myself positive things in life.

The C# program would sit in his local PC. Everytime I report to him that I have done programming work, he would give sausage roll a tally. If I have done a hobby activity, the ukulele gets a tally. If I remind myself that I am loved, the heart gets a tally.

For the sosig roll and ukulele, if I postpone the activities associated with them for too long, he subtracts a point.

We called it the Sosig Counter.

It was a very ad-hoc, but functional demo to keep me accountable. However we quickly come across its limitations:

  • Data is stored in Windows user profile properties, so it's stuck in my mate's PC, not transferable;
  • He has to recompile a new executable everytime we add or remove an item to track. Not that it's hard, but it's impractical;
  • We could add some sort of CSV export to archive the data, but the desktop nature of this app still makes it impractical for real use.

I proposed turning it into a web app and I'll hand it in as my web dev assignment for the course I'm currently doing. Two birds in one stone.

For the sake of my assignment scope, this initial version of web-based Sosig Counter

  • will not have server architecture;
  • will use HTML localStorage to store data. Server architecture will come after I hand in the assignement;
  • will use JSON as the data format. The whole JSON string is stored as one key value in localStorage and gets parsed around during app operation;

Main ingredients:

Before I came down to this structure, I was over-complicating the whole thing with flatfile database, SQLite and what not, which at the time I was considering integrating server architecture. But then I don't know how to hand the assignment in as a .zip for my instructor to just run off of his computer, and if I have server architecture included, he'd have to be able to run the server himself too. That's way too much effort for the scope of this assignment so I'm sticking with localStorage.

I spent all morning learning the hard way that, in jQuery, .html() is different from .val().

I have to pass a div container containing the json string to JsonEditor, so that it can convert the json to an editable HTML table. At first I wrote the json string to .html(), and JSON.parse() kept complaining that it's got unexpected end of data. The json format was completely valid though, so I feel that something must have happened at jQuery's .html().

After a couple of toilet breaks, tea breaks and other things that made me walk away from my laptop, I finally noticed that in JsonEditor, it parses json string from an element's val(), not html(). It somehow occurred to me then, that, I was supposed to insert the json to .val(), not .html().

  if (typeof(Storage) !== "undefined") {
      jsonEditorInit('sosigTable', 'sosigData', 'sosigResult', 'json_to_table_btn', 'table_to_json_btn');
    } else {
      var data = '[{"Image":"demo","Name":"demo","Count":0}]';
      localStorage.setItem('sosigData', data)
      jsonEditorInit('sosigTable', 'sosigData', 'sosigResult', 'json_to_table_btn', 'table_to_json_btn');
  } else {
    window.location = "404.html";

And that's my whole morning spent… Time for a Minecraft break.

  • blog/sosig_counter_1.1565615711.txt.gz
  • Last modified: 2019/08/12 15:15
  • by rovina