Categories
July 14th, 2016
MalCat 2.0
Anime Relations: Donyatsu
I recently had the displeasure of looking over the source code for MalCat, a CSS generator I wrote a few months ago. MalCat was the first real coding project I worked on (no, CSS itself doesn't count), and the code was so horrifically bad that even a newbie such as myself could tell that it needed to be redone from the ground up. I spent the last six days completely rewriting the project, and now that MalCat 2.0 is available, I thought I'd write a bit about how it works.
What is a CSS generator, anyway?
One of the features that makes MAL remotely interesting is that it allows us users to customize our list designs with CSS (short for Cascading Style Sheets), a language for styling webpages. MAL's taste in design is... pretty bad, so being able to style our own lists is a nice feature to have. Users played around with custom list styles for years, and then one guy came up with a brilliant idea for his list -
Every series in my list is gonna have its image next to it!
Sounds great! Images are a perfect way to spice up a design - they add interest beyond the capabilities of plain shapes and text. However, that guy soon ran into a problem. To add an image to a series with CSS, you need to use a line of code that looks something like this:
which sets the image in the url as background for "element." That's not to hard, but when your list has more than about ten entries, it gets a little tedious to write all of those lines:
What happens if your list has several hundred series in it? What happens if you add a series, or if the link to the image changes? You'll need to manually add and update all of those lines, which is more trouble then it's worth. After a while, people came up with two solutions:
A shared CSS file
Think about it - if everyone's image CSS is going to be the same, then there's no reason for everyone to have to write that CSS over and over again. @Shishio-kun maintains and hosts a few CSS files that look like the above, but have lines for every series on MyAnimeList. That way, whenever someone wants covers on their list, they can just import Shishio's file into their CSS and they're good to go.
There are a few problems with this approach, though; first off, Shishio (or someone else) still needs to manually update that huge CSS file. Secondly, if hundreds of thousands of users are all using the same file on Dropbox or Google Drive, the file could be taken down for going over traffic limits. Finally, not everyone wants to use the same CSS! Some people might want their image to be displayed on some other part of the list than "element." The answer to this is:
The CSS generator
A crucial rule in the coding world is the DRY principle - Don't Repeat Yourself. If you find yourself repeating a step over and over again, then you should write a program that'll do the work for you. With this in mind, let's look at the process for adding images to a list with CSS:
Getting the list/images and writing the CSS are both repetitive tasks, so it's possible to write a program that'll do the work for us. And that's what people did! The first generators were desktop applications by @U531355, @Veriti and @Hahaido. The problem with these was that even though they created CSS files that could be imported into one's list, the program had to be run manually ever so often in order to keep the code up to date.
In order to ensure that users would never have to manually update their CSS, @U531355 created Fellow Writer, the first CSS generator to be hosted online. With online CSS generators, all a user needs to do is import a link to the generator into their CSS. The link doesn't reference a specific file - the CSS is generated every time a user visits their list. That means that cover images will always be up to date.
Fellow Writer was the only online generator for a while until @Syaoran3 wrote MAL-image. MAL-image improved on Fellow Writer in several ways, the most notably of which (imo) is caching. Fellow Writer needs to fetch the user's list every time it's called, which can take anywhere from half a second to up to 30 seconds(!) depending on the size of the list. By storing the generated code locally, MAL-image reduces that time to milliseconds. It also added several features including a generator for favorites.
Then along came Doomcat55! Mainly because I hate "cheating" by using other people's projects, I decided to write my own generator, MalCat. My priorities in writing MalCat were to write a generator that performed reliably for large lists; both Fellow Writer and MAL-image can crash when applied to a list with more than several thousand entries, while MalCat will always work (albeit slowly). I also added a feature for enabling status headers on the modern list layout, something a lot of people had requested.
The problem with MalCat was that while it performed reliably for large lists, it wasn't remarkably fast at serving normal ones, and it didn't implement any caching. Additionally, the code was so noodly and bad that I'd be embarrassed to show it to anyone capable of reading it. That's what gave me the idea to rewrite MalCat - it's now
What is a CSS generator, anyway?
One of the features that makes MAL remotely interesting is that it allows us users to customize our list designs with CSS (short for Cascading Style Sheets), a language for styling webpages. MAL's taste in design is... pretty bad, so being able to style our own lists is a nice feature to have. Users played around with custom list styles for years, and then one guy came up with a brilliant idea for his list -
Every series in my list is gonna have its image next to it!
Sounds great! Images are a perfect way to spice up a design - they add interest beyond the capabilities of plain shapes and text. However, that guy soon ran into a problem. To add an image to a series with CSS, you need to use a line of code that looks something like this:
element { background-image: url(link_to_your_image.png); }element1 { background-image: url(link_to_image1.png); }
element2 { background-image: url(link_to_image2.png); }
element3 { background-image: url(link_to_image3.png); }
element4 { background-image: url(link_to_image4.png); }
...A shared CSS file
Think about it - if everyone's image CSS is going to be the same, then there's no reason for everyone to have to write that CSS over and over again. @Shishio-kun maintains and hosts a few CSS files that look like the above, but have lines for every series on MyAnimeList. That way, whenever someone wants covers on their list, they can just import Shishio's file into their CSS and they're good to go.
There are a few problems with this approach, though; first off, Shishio (or someone else) still needs to manually update that huge CSS file. Secondly, if hundreds of thousands of users are all using the same file on Dropbox or Google Drive, the file could be taken down for going over traffic limits. Finally, not everyone wants to use the same CSS! Some people might want their image to be displayed on some other part of the list than "element." The answer to this is:
The CSS generator
A crucial rule in the coding world is the DRY principle - Don't Repeat Yourself. If you find yourself repeating a step over and over again, then you should write a program that'll do the work for you. With this in mind, let's look at the process for adding images to a list with CSS:
- Get a list of every series that you want CSS for (i.e. your list).
- Get the images for each series.
- Write the CSS for each image.
- Put the CSS in your list.
Getting the list/images and writing the CSS are both repetitive tasks, so it's possible to write a program that'll do the work for us. And that's what people did! The first generators were desktop applications by @U531355, @Veriti and @Hahaido. The problem with these was that even though they created CSS files that could be imported into one's list, the program had to be run manually ever so often in order to keep the code up to date.
In order to ensure that users would never have to manually update their CSS, @U531355 created Fellow Writer, the first CSS generator to be hosted online. With online CSS generators, all a user needs to do is import a link to the generator into their CSS. The link doesn't reference a specific file - the CSS is generated every time a user visits their list. That means that cover images will always be up to date.
Fellow Writer was the only online generator for a while until @Syaoran3 wrote MAL-image. MAL-image improved on Fellow Writer in several ways, the most notably of which (imo) is caching. Fellow Writer needs to fetch the user's list every time it's called, which can take anywhere from half a second to up to 30 seconds(!) depending on the size of the list. By storing the generated code locally, MAL-image reduces that time to milliseconds. It also added several features including a generator for favorites.
Then along came Doomcat55! Mainly because I hate "cheating" by using other people's projects, I decided to write my own generator, MalCat. My priorities in writing MalCat were to write a generator that performed reliably for large lists; both Fellow Writer and MAL-image can crash when applied to a list with more than several thousand entries, while MalCat will always work (albeit slowly). I also added a feature for enabling status headers on the modern list layout, something a lot of people had requested.
The problem with MalCat was that while it performed reliably for large lists, it wasn't remarkably fast at serving normal ones, and it didn't implement any caching. Additionally, the code was so noodly and bad that I'd be embarrassed to show it to anyone capable of reading it. That's what gave me the idea to rewrite MalCat - it's now
- fast; multiple levels of caching are used to ensure that the generator never lags for too long; it's
- reliable on long lists, even if it may take a while (there's really no practical way around that; finally, it's
- user-friendly, right down to the source code. MalCat 2.0 is designed so that users can pick out a preset (or create their own template) and copy/paste it into their list without getting bogged down by extra features.
Posted by Doomcat55 | Jul 14, 2016 2:59 PM | 0 comments
Private Entry
November 1st, 2015
Personal Index
Anime Relations: Bakemonogatari
Posted by Doomcat55 | Nov 1, 2015 10:29 AM | 0 comments
October 21st, 2015
Tutorial Collection
Anime Relations: Bakemonogatari
[list=1][*]Pencil Sketch From Photo (Seaven)
[*]Enchanter Pixels Tutorial Collection: http://myanimelist.net/forum/?topicid=1381038
[*]Shishio's Custom Lists and Profiles
[*]Enchanter Pixels Tutorial Collection: http://myanimelist.net/forum/?topicid=1381038
[*]Shishio's Custom Lists and Profiles
Posted by Doomcat55 | Oct 21, 2015 9:42 PM | 0 comments
October 17th, 2015
CSS Notes
Anime Relations: Guilty Crown
[list=1][*]Edit the hyphen in between "edit" and "more"
[*]Add a border to the entire list table
[*]Add a border to the entire list table
Posted by Doomcat55 | Oct 17, 2015 5:11 PM | 0 comments
Private Entry