The previous hosting package ran out and I didn't want to extend it for various reasons. Moving the content from one server to another is, as you probably can imagine, quite a lot of work. Especially if you use your website as a playground for different projects. In addition to that I planned to improve some projects instead of just copy & pasting them over. One of those projects is/was MediaList (now Gajo).
MediaList was previously MusicList or MuLi for short (brilliant, I know) and was a tool to keep track of upcoming CD releases, to prevent you from forgetting them when the release was set to be in December but announced in January already so to speak.
While starting from scratch for this project to get rid of dead weight I realized how old this project actually is. Looking back at it now feels like reading your diary you had when you were a teenager (figuratively spoken, I didn't have one). Sometime around mid-2005 I started hacking together a prototype version, back in the time when I was working a lot on Intranet websites, creating something like Mediabrowser and learning rather complex JavaScript programs to code. Since I got sick of looking at white backgrounds I used a purple background. Cute. Well, even today I prefer the color dark blue/purple or something between those two, it's personally easier on the eye after some time. After quite a few hours of looking on the screen of a CRT display back then was physically painful to your eyes when the majority of the screen was white.
The Prototype
Digging up the oldest screenshot I could find/saved on purpose, it's shortened of course, there's no need for 46/47 lines. The red links were a terrible decision and on screenshots very blurry as you can see. But yep, this is it. Looking back at something this old makes you realize how far you got, as a developer, improving your own abilities as well as how long some projects survive, even if they are personal projects never seeing the public light or are terribly designed in hindsight. Speaking of terrible. Myspace. Do you still remember that social network that was awfully bloated but really successful back then? It came a long way.
After using this prototype for quite some time locally, I remember being happy with it for what it was and wanted to create a multi user environment at some point with a better interface. No idea when that actually was, must have been at the end of 2005/beginning of 2006. But for that I had to rework the protoype from basically the ground apparently.
First Draft Multiuser Environment
The first - let's call it draft - that went actually online on a free webhoster was pretty much more than what the prototype was. I can remember how much time I invested in making columns editable when logged in and the whole table sortable. Whereas the latter made such problems due to changeable column content that I ended up creating a PHP AJAX call to do the sorting from the userdata directly since PHP had several sorting functions. Bless DataTables and alike for their existence these days...
It was the time when jQuery firstly appeared and I didn't want to use it because it adds dependencies and I wanted to learn the JS stuff on my own but PHP as well. I think it was the first "major" project in PHP that I did and directly with logins, a multiuser environment, AJAX calls etc. In short: I really learned a lot from it. The Intranet mediabrowser project mentioned above was written in Perl instead of PHP, I learned PHP quite late for whatever reason.
Since this draft was improved in several ways and extended a lot, users had their own options, too. First time using MySQL back then, while the actual user data was saved in normal text files (legacy code, so to say). I took previously working components to speed up the work I had to do and the focus lied on MySQL and multi users anyway. With this draft I had a public list as well as a private list. The public list of course didn't allow changes or additions but you could share your list with others, in addition it had colouring for upcoming (<=6 weeks) releases in green, already released in red, a link to create an image of your list and an RSS Feed as well to inform you in intervals of 6/4/2/1 week(s)/today, among other options. As you can see on the screenshot it was only in German. To add new entries to the list the little box at the bottom of the screenshot was fading in/out when moving the mouse to the bottom to do so.
Second Draft
The second draft was a big update for the first one, I added a language support with JSON files. Replacing all hard coded strings to be able to add in multiple languages was really a lot of work as I remember. Other major changes were in the frontend. The positioning of the visible elements at the bottom were done with jQuery but failed when the list was large. So I ended up putting in a container to display the list within, the fade-in box was fixed at the bottom.
Just like in the first draft, depending on the user settings, you could add different social networks as columns to your list. Take a look the the Options screen to see them. Accordingly the box at the bottom was wider or smaller. Jeez. That ended up making problems with the fading so I fixed it at the bottom. Although it wasn't really "fixed", you could move it around.
In this screenshot you can see the colors green for upcoming and red for already released in action. The user had the option to set their own colour, these are the defaults that I liked. Back then I thought it'd be a good idea being able to see when other users visited your public list, if you could track it in some way but since there were better, working services I used those instead of creating some form of hit counter. I was honestly too lazy to add something like that, so I added a whos amung us or histats ID option for the user and embedded those in the public list. In opposite to jQuery I thought of this as a form of optional feature and not a dependency that I still dislike today, so being lazy here seemed appropriate. Today I just know when to make compromises when it comes to dependencies.
The usage of more images in the list made it much more readable and "smoother". I liked this version a lot but after some time and minor changes here and there it wasn't really scalable anymore. Special characters like umlauts and alike weren't working anymore with the "normal" text files for whatever reason, making deleting/changing entries with such characters impossible and other problems appeared. I grew impatient of this project but somehow I never was in the mood to deal with all the problems that arised. Considering it was 5/6 years old, the problems aren't too surprising as I used this project to learn things I didn't know before and after using it for so long I knew where problems were but just as it is with software programming. At some point a project might have reached that point where it isn't maintainable in a feasible manner anymore - no matter the way you plan things out. You know you have to redo it again. Either completely or core components to make it work again as it was previously. I even ended up not adding any more releases for some weeks due to the problems.
Rebirth Version
As you can see I am no designer, nor am I a brilliant inventor for project names. My strong suite is working on features that you can't really see on screenshots (even though you can clearly see some improvements on the screens) but notice when you use a project of mine. For example suggestions when typing in artists or album names (granted, jQuery does this easily). The server part was ready to deliver upcoming album release names and dates for artists the user typed in - while typing - if I ever filled in those album releases server side but didn't need to as I was the sole user. Looking back to it that's a blessing for the newest version. Or creating an image from your list for forum signatures or profiles like last.fm with optional fonts without overlapping and other features like this.
A huge improvement in the IT world in recent years, as I see it, is the getting closer of designers and developers. Developers made it much easier for non-programmers to create programs, complex websites with frameworks for such and alike while designers created templates/frameworks like Bootstrap and alike for non-designers to create visually great projects. What's better than using such a framework to re-create the frontend of one of my most precious projects? In fact I began from scratch completely after writing down the features I definitely wanted to insert again for the first released new version. Along the line I removed some of those and added others, all in all the new version is simpler in many aspects but richer in its usefulness and usability.
The best improvements are probably the ability to choose several privacy options how to share your list and that more than just CDs are taken into consideration now: Books, DVDs, Vinyls and Games can be inserted into a list as well and displayed in an order of your choosing. Games first? Books last? CDs as second list after Vinyls? All possible! Privacy options contain: A watchlist for people who "follow" you that you can approve or deny when they request a watchlist addition, public, or private. These options can be used for single entries only or the entire list, whereas the option for the list overrides the single entry option. So you could say you have 10 private entries that only you can see when logged in, 4 public ones that everyone can see, 3 entries that only you and people on your watchlist can see and 3 ones that are only visible to you and your image. Seems complex but is actually quite easy and gives you full control over what other people can see. By default the strictest privacy option is chosen.
Some features are still missing, like an autocompletion/suggestions when typing in names and alike, a helper to create the image with a specific size and some other minor things but for the most part all previous features are in there again. In a visually much more pleasing frontend with new features that only this new version could support. Instead of MySQL, SQLite is now used, simplifying backend things.
Comparing the first screenshot with the last one...there's more than just a subtle change over the last 8-9 years but using both versions is like two completely different projects as the first screenshot basically gives away all features while the last one barely even scratches the surface and is now what I always wanted it to be. :)