marcel0llEN | PT




Agrade is a small web app that I developed originally back in 2014 while in college. My college's web system for student wasn't that great at the time(it still isn't) and we had no way to easily see dependencies between disciplines and to see a graduation percentage of completition.

I had some issues with college disciplines, having to do some more than once and doing others in different years that I orginally should. As you can see, knowing what I had completed and what I still needed to complete was important to me back then.

I would be lying that this idea was totally original, one of my friends a year before I did Agrade had made a small html page with inline javascript that would do something similar to agrade, but would only work for Computer Sciene. I had bigger plans for Agrade, to work not only for other courses but also to other colleges. You might be confused, why would you need to change anything different for other colleges, well at least I was confused at the time by how different were the rules between each school, some of it would even have different rules across multiple campuses. So the plan was to create something generic, that could be configured and used everywhere.

Time passed, I had more things to do and the project started to gather dust never seeing the light of its potencial(until now at least)

Wouldn't it be wonderful to have a platform that you could not only plan your college years, but could also compare your disciplines with every other course in earth(maybe also mars one day)?

Completition viewer

Old stack

Originally the app was built using Bootstrap 3(oh man bootstrap 4 took a loooooooong time to come out), jQuery and old style javascript. Do you remember it? Writing functions that were actually prototypes for other objects in what sometimes was called Prototype oriented programming. OH!!!! HOW I LOVED THOSE TIMES!!!

function Todo(description, completion) {
  this.description = description
  this.completion = completion

Todo.prototype.isDone = function () {
  return this.completion

Thankfully we have now some sugar and we can write our classes with a little more... class!

Another tech that was HOT at the time were task runners and I used Grunt, a long and nasty configuration file just to make the project work.

Bonus tech: bower. Why? I am not sure... didn't npm have the packages at the time? Why I chose to use two package management systems?


New stack

This week I decided to do three things about agrade:

  1. Link it to my current webpage and blog
  2. Put a analytics tracker code (I was too lazy to install it at the original version)
  3. Write about doing so

It seemed an easy task, until I tried to run it.

Yes you guessed right. It did not work.

I wasn't at my best moment so I got really pissed that it wasn't working and decided to update the entire codebase. Why not?

Threw away grunt, changed how things were imported, rewrote those prototypes in cleaner classes and installed Parcel. I am not sure if its the best option for all cases, but as bundler I just love how easy it is to use parcel. One install, one parcel index.html and 95% of the job of the old setup was done. DONE! The other 5% was some static files that I needed, o I installed a parcel plugin, moved some files around and BAM! Working!


Plans for the future

I truly believe that a centralized app to search about colleges, compare them, control what you are studying, to review how good a college education is and also to receive feedback from both teachers and colleges would be useful. But one step at a time, big plans are worthless without the possibility to realize them.

So this is my lean(er) To Do list:

Use some modern css library (or none at all, css grid should take care of Agrade's needs)

Remove jQuery, it has served its time. Use react / vue / riot or maybe even web components(I have to look into it again)

Data mine new colleges for its courses and disciplines (Brazilian ones first)

Allow people to register on the site and persist their info

I still not sure how I should finish my posts!

Bye (I guess)

Do you have questions? Just wanna chat? Send me an email: