Agrade

About

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

I had some issues with college disciplines, having to do some more than once and doing others in different years than I originally should have. 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 if I said this idea was totally original: a year before I made Agrade, one of my friends had made a small HTML page with inline javascript that would do something similar, but it would only work for Computer Science. I had bigger plans for Agrade: to work not only for other courses but also for other colleges. You might be confused — why would you need to change anything for other colleges? Well, at least I was confused at the time by how different the rules were between each school; some 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 potential (until now, at least).

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

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 was sometimes 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 was 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 did I choose 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 in an analytics tracking code (I was too lazy to install it in the original version)
3. Write about doing so

It seemed like 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?

I threw away Grunt, changed how things were imported, rewrote those prototypes as cleaner classes and installed Parcel. I am not sure if it's the best option for all cases, but as a bundler I just love how easy Parcel is to use. 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, so 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 for colleges, compare them, control what you are studying, review how good a college education is and also receive feedback from both teachers and colleges would be useful. But one step at a time: big plans are worthless without the possibility of realizing 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 them 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 am still not sure how I should finish my posts!

Bye (I guess)