postmortem - building kradeelav.com
Aug. 20th, 2020 02:17 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
kradeelavpostmortem
my spring/summer project was to build kradeelav.com as a creative base - it's effectively finished, other than moving into a permanent maintenance/update cycle.
Thought it'd be interesting to make a write up of why, how, and the process - proud of how this digital floating nest turned out, and looking forward to next year, I'm hoping that a peek into the process gives a sense of 'oh that wasn't so hard!' for other creatives interested in opting out of social media.
why hand code / have a personal site?
for me? biggest reason was having a public archive of my fandom / origi / kink artwork given socmed sites (and deviantart, my previous 10+ year gallery) are no longer as reliable or usable as they used to be, and/or are increasingly censoring nudity (I suspect dA in particular will probably shutter in the next 5 years, and Weebly's TOS 'no nsfw' change on December 2019 was a wake-up call).
Just as important - this meatbag emphatically did (and do) not want 'a portfolio site' meant to show shiny ~*hiring bait*~ projects - (have a different site using my dayjob handle for that). kradeelav.com is more of a personal ... expression of the self? like old websites of the 00's. A wink-nod to my muse as an inside-joke on some pages, link pages to shit I find interesting, easter egg "treasure box" items on some nearly completely hidden pages... a love letter to dialup days and never knowing what surprise you're going to stumble on.
(some mobile examples of said nods - the 404 and about page, respectively. No templating, any visual tricks such as highlighting for emphasis are used with either images or simple CSS hacks.)
"Marketing" is a negative-priority, sincerity is everything.
code base & technicals
Strangely; found out it is *impossible* to build a site that visually feels authentically '00's old school' with services like weebly/wix/squarespace; the code's already unhelpfully spaghetti, bloated, slow, too "mobile responsive" for its own good, too glaringly polished. Where's the crunch of pixelated text? a site with no hamburger menu? Weebly was useful for the first training wheel year while I was still trying to figure out why I wanted the site, but it was time to go full-hand-code.
On that note - easily the biggest roadblock was 'how do you start building a mobile responsive site with hand-coded CSS and without using bootstrap/javascript/other libraries or dependencies?'
my workaround: elegantly trimming width percentages. One line of code.
Having been trained as a designer, I figured there couldn't be much to screw up on as long as you kept the main column of content to a reasonable width. Keep the menu top-right, content to the middle-left in a column, with some padding to the right. a class of
and likewise adding
- and yet, it's 90% to a truly responsive site with one line of code.eat that, bootstrap
in hindsight i'm more than a little miffed that of the 10+ help articles I ran through for mocking up the HTML/CSS base alone, it's considered dis-favorable to borderline impossible to be mobile-friendly without elaborate dependencies. the hell happened to simplicity?
Picked bluehost for hosting/domain given an explicit 'we've been hosting nsfw sites for ages' policy, cost, and tried-and-true reliability. So far, I've been pleased. Their daily/weekly/monthly backups (that i'll mention later on in a bug I just solved) saved my ass, actually.
site architecture & appearance
All pages were modeled after old JP art sites that are, personally, still the 'truest' expression of home pages for artists. The individual taste bleeds through on every page, there's a place to show polished pieces versus a sketchbook versus offline (often nsfw) works, and likewise also to support other similar artists. I took the page naming conventions from this style of sites, too - all words within 4 or 5 characters, and a nod to any international viewer in case of one of these JP sites linked back to mine.
(selection of a few above - Jo Chen's grunge feeling very different than that old FE site that's been around for ages.)
Aesthetic mindset was ... looking for something that contrasted well with a black background (always looks good in a kink/leather context), but not your standard white/light grey text - old pulp novels had an excellent combo of off-cream, yellow, and off-black that spoke of a different tactile era without feeling ironically "retro", and it's a set of colors i've been vibing with on my design board.
Onto pages -
> TOP (splash/home/'here be nsfw' page, already shown)
Second easiest to build by far, once when the background-image bugs were solved. I still want to hand-letter the title text at some point, to match my zine covers; it'll be one of the first things to do when I inevitably get bored and start picking at edits again here. (I have an idea of treating it like a game-start screen where it hints at you to 'press' the title again, and a bunch of stickers are "stuck" on top of the images, each one of them a link to a smaller project or image of mine - playing up on that professional/shadow side dichotomy. )
> ABOUT
(general explanation of handle & faq home)
Easiest page to code, surprisingly hard to nail down that tone-tension between explaining the handle with my list of projects made with it, but not in a hiring sense? There's some paid indie projects that I'm proud of, that I'm not proud of, everything in between - but more to the point, it's more the kind of space I want 'kradeelav' to occupy. Not strictly leather/kink related projects, not strictly fandom, but a purposefully, permanently murky "off brand" area in-between.
FAQ was lifted from my pre-existing very helpful tumblr FAQ, and the 'Treasure Box' being reserved for those long form articles useful and impersonal enough to store on the site itself, rather than here (which is more my semi-private diary).
> GALLERY
(selection of best works / works that would most likely interest specific FE or Hellsing fans wandering onto the site)
By far the hardest page to code, and I had to cheat with a bit of homebrew javascript (despite having zero pre-existing javascript knowlage) to get the click-on-a-thumbnail-larger-image-pops-up thing working. Thumbnails were always something I loved about JP art sites as it always gave you a hint of context, a naughty tease of peeking at the image, and being curious enough to click
The problem? every. god. damn. responsive "simple""" "lightbox" gallery was an unholy abomination of spaghetti code and always took the lazy route of badly trendy whole-image-as-a-thumbnail shtick. One guide/suggestion was suggesting to use code coordinates to "crop" the single unsized image and feed that into javascript - what the fuck! JUST TAKE A GOD DAMN CROP OF A PICTURE WITH PHOTOSHOP, i'm sure bandwidth minds the thumbnail images less than how much freaking time you'd waste painstakingly doing elucidate geometry proofs on each and every image!
Finally, i stumbled on a guide that did what I was wanting, just with hyperlinks. Once given that hint as far as the script goes, it was a relatively simple matter to replace the links with images.
Still worth it whenever a developer marvels to me at how fast this site runs.
> LOGS (SFW log subdomain / R18 log subdomain)
( sketchbook / archive dump for all of those doodles not on the gallery page )
Funnily enough, it took after I moved off of weebly to notice I was starting to fall in the habit of only posting "twitter quality sketches" (eg high quality finished illusts), and only shared WIP's and inside jokes on private discord groups. I ... wanted to change that; this isn't how I wanted to operate - it was so far away from the whole mindset of the dA days where you had fun posting your rawest, messiest, worst, sleeziest shit as well as the best.
Solution? Re-post everything as far back as the sketches in cold storage from the 08 and 09' dA days (something I needed to do regardless, given how fragile dA is now). Made a tag that was just zihark. went hog wild. There was a period when I was debating even the choice of splitting off the R18 one - the only reason why it's a separate log unto itself is so I don't feel hesitant in posting gunplay/explicit/uniform kink/naziexploitation work specifically. If folks want (or don't want) to see it, well, it's a separate log, properly labeled as the nasty bucket. Their choice.
Code-wise - for about five seconds I considered learning how to hand code a xhml RSS style page; that... was going to prove to be way too much of a hassle, so it's only here that I relented and technically made a separate wordpress site for each subdomain. Given wordpress is open source ... and *relatively* low-code footprint, and also has a pleasant surprise in several plug-ins letting you auto-post to tumblr/twitter (so I don't ever have to visit those sites again!!! yesss!!!) it was worth it. Easy enough to choose the simplest possible theme to mimic this JP art site where it's literally the menu at the top, optional description of images, and the images. That's *it*.
Glad I chose the separate sub-domains rather than one wordpress site to rule them all - the 5.5 update broke my 'log' subdomain specifically, leaving the other ones live - so it was a simple matter to nuke the wordpress files there in cpanel, and restore from a month-old backup (I had only posted one new artwork that previous month).
> OFFLINE
(zine / published book list)
Like how JP artists listed doujins, it was a simple matter deciding I needed a place to list zines that's not itch.io (in case if that one goes down too). itch.io apparently has a plug-in where theoretically I can make my site itself a shopping cart with almost zero aesthetic changes; however I don't feel confident enough security-wise to pull that in here, so for now, i link there for the 'BUY' option.
Always was fond of Ao3 tags and how they in some ways described a story better than a mere elevator sentence pitch could do, so shamelessly yanked those for the zines too. (useful for content warnings too. fairly sure I was already softblocked from a zine convention application given the A(A)CAB tags. good riddance.)
> BKM
( links list to friends, artists who I enjoy, orgs who I support, etc.)
By far my favorite page while touring around JP fandom art circles back in the day - like thumbnails, banners were always those visual sneak peaks to other artists and what they may have to offer. Given that I've purposefully unfollowed everyone on social media, it feels like it's a respectful balance of acknowledging genuine friend connections as well as artists who I admire, while minimizing risk that antis would purposefully go after my follow list (they can and have done this in campaigns); this would simply take too much time.
(Nice thing about this site is it strictly caters to people who are outside the whole anti culture).
> IRON CROWN
(ironcrown.kradeelav.com)
IC had been hosted on Hiveworks (former publisher) for years, but as it turned out, I needed to migrate the back-end over to my site for a few reasons. Setting it up as another subdomain / spoke felt the most natural option (and future "flagship" projects will likely follow the same pattern), and it allowed me to take advantage of a new wordpress theme that was going to save an immense amount of time uploading/recreating pages versus keeping it faithful to the old IC look.
No ads, easy crossposting, and a solid cold storage place - whenever I come back to the comic, I know it's at least in safe hands.
conclusion
The site's been live as-is for a few months now, and other than the minor hiccup with the 5.5 update wipeout, everything's performed flawlessly. I'll end this with an insight I posted elsewhere, that may very well be the last socmed message I write:
feel weird about posting art to socmed lately. it's the difference between inviting *over* a friend to see a sketchbook vs having it taken out of your hands and thrown in a contextless slurry of misery to be forgotten in 2 min. Automatic this. Data mining that. Wheres the human?
I miss the human terribly. Webring sites with sprites galore not optimized to shit for engagement. Clicking the banner to be greeted by a way different personality. Gravitating hard to those sites n zines recently cause the tactile context is baked in with dodging censor twats.
Anyway. Moving. Drawing some stuff for contests. Sending out first batch of print zines this week. (store will open after). Not really on socmed these days (personal site logs, yes) though my best thoughts go with you all.
Do what you would be proud and happy about in ten years.
my spring/summer project was to build kradeelav.com as a creative base - it's effectively finished, other than moving into a permanent maintenance/update cycle.
Thought it'd be interesting to make a write up of why, how, and the process - proud of how this digital floating nest turned out, and looking forward to next year, I'm hoping that a peek into the process gives a sense of 'oh that wasn't so hard!' for other creatives interested in opting out of social media.
why hand code / have a personal site?
for me? biggest reason was having a public archive of my fandom / origi / kink artwork given socmed sites (and deviantart, my previous 10+ year gallery) are no longer as reliable or usable as they used to be, and/or are increasingly censoring nudity (I suspect dA in particular will probably shutter in the next 5 years, and Weebly's TOS 'no nsfw' change on December 2019 was a wake-up call).
Just as important - this meatbag emphatically did (and do) not want 'a portfolio site' meant to show shiny ~*hiring bait*~ projects - (have a different site using my dayjob handle for that). kradeelav.com is more of a personal ... expression of the self? like old websites of the 00's. A wink-nod to my muse as an inside-joke on some pages, link pages to shit I find interesting, easter egg "treasure box" items on some nearly completely hidden pages... a love letter to dialup days and never knowing what surprise you're going to stumble on.
(some mobile examples of said nods - the 404 and about page, respectively. No templating, any visual tricks such as highlighting for emphasis are used with either images or simple CSS hacks.)
"Marketing" is a negative-priority, sincerity is everything.
code base & technicals
Strangely; found out it is *impossible* to build a site that visually feels authentically '00's old school' with services like weebly/wix/squarespace; the code's already unhelpfully spaghetti, bloated, slow, too "mobile responsive" for its own good, too glaringly polished. Where's the crunch of pixelated text? a site with no hamburger menu? Weebly was useful for the first training wheel year while I was still trying to figure out why I wanted the site, but it was time to go full-hand-code.
On that note - easily the biggest roadblock was 'how do you start building a mobile responsive site with hand-coded CSS and without using bootstrap/javascript/other libraries or dependencies?'
my workaround: elegantly trimming width percentages. One line of code.
Having been trained as a designer, I figured there couldn't be much to screw up on as long as you kept the main column of content to a reasonable width. Keep the menu top-right, content to the middle-left in a column, with some padding to the right. a class of
#content [ width: 60%; ]was all that was needed to keep the breathable space for desktop/phone, and likewise adding
<meta name="viewport" content="width=device-width, initial-scale=1">to the headers kept the text a consistent size. Let the desktop and mobile tablets/phone do the resizing work for you, as far as being mobile responsive. Picture simply spinning around an 8.5 x 11in piece of paper either landscape or portrait; the proportions aren't that much different. it's not perfect, most notably the splash image on TOP gets cut off on phones particularly (but imo not in an unpleasing way), see below - - and yet, it's 90% to a truly responsive site with one line of code.
in hindsight i'm more than a little miffed that of the 10+ help articles I ran through for mocking up the HTML/CSS base alone, it's considered dis-favorable to borderline impossible to be mobile-friendly without elaborate dependencies. the hell happened to simplicity?
Picked bluehost for hosting/domain given an explicit 'we've been hosting nsfw sites for ages' policy, cost, and tried-and-true reliability. So far, I've been pleased. Their daily/weekly/monthly backups (that i'll mention later on in a bug I just solved) saved my ass, actually.
site architecture & appearance
All pages were modeled after old JP art sites that are, personally, still the 'truest' expression of home pages for artists. The individual taste bleeds through on every page, there's a place to show polished pieces versus a sketchbook versus offline (often nsfw) works, and likewise also to support other similar artists. I took the page naming conventions from this style of sites, too - all words within 4 or 5 characters, and a nod to any international viewer in case of one of these JP sites linked back to mine.
(selection of a few above - Jo Chen's grunge feeling very different than that old FE site that's been around for ages.)
Aesthetic mindset was ... looking for something that contrasted well with a black background (always looks good in a kink/leather context), but not your standard white/light grey text - old pulp novels had an excellent combo of off-cream, yellow, and off-black that spoke of a different tactile era without feeling ironically "retro", and it's a set of colors i've been vibing with on my design board.
Onto pages -
> TOP (splash/home/'here be nsfw' page, already shown)
Second easiest to build by far, once when the background-image bugs were solved. I still want to hand-letter the title text at some point, to match my zine covers; it'll be one of the first things to do when I inevitably get bored and start picking at edits again here. (I have an idea of treating it like a game-start screen where it hints at you to 'press' the title again, and a bunch of stickers are "stuck" on top of the images, each one of them a link to a smaller project or image of mine - playing up on that professional/shadow side dichotomy. )
> ABOUT
(general explanation of handle & faq home)
Easiest page to code, surprisingly hard to nail down that tone-tension between explaining the handle with my list of projects made with it, but not in a hiring sense? There's some paid indie projects that I'm proud of, that I'm not proud of, everything in between - but more to the point, it's more the kind of space I want 'kradeelav' to occupy. Not strictly leather/kink related projects, not strictly fandom, but a purposefully, permanently murky "off brand" area in-between.
FAQ was lifted from my pre-existing very helpful tumblr FAQ, and the 'Treasure Box' being reserved for those long form articles useful and impersonal enough to store on the site itself, rather than here (which is more my semi-private diary).
> GALLERY
(selection of best works / works that would most likely interest specific FE or Hellsing fans wandering onto the site)
By far the hardest page to code, and I had to cheat with a bit of homebrew javascript (despite having zero pre-existing javascript knowlage) to get the click-on-a-thumbnail-larger-image-pops-up thing working. Thumbnails were always something I loved about JP art sites as it always gave you a hint of context, a naughty tease of peeking at the image, and being curious enough to click
The problem? every. god. damn. responsive "simple""" "lightbox" gallery was an unholy abomination of spaghetti code and always took the lazy route of badly trendy whole-image-as-a-thumbnail shtick. One guide/suggestion was suggesting to use code coordinates to "crop" the single unsized image and feed that into javascript - what the fuck! JUST TAKE A GOD DAMN CROP OF A PICTURE WITH PHOTOSHOP, i'm sure bandwidth minds the thumbnail images less than how much freaking time you'd waste painstakingly doing elucidate geometry proofs on each and every image!
Finally, i stumbled on a guide that did what I was wanting, just with hyperlinks. Once given that hint as far as the script goes, it was a relatively simple matter to replace the links with images.
> LOGS (SFW log subdomain / R18 log subdomain)
( sketchbook / archive dump for all of those doodles not on the gallery page )
Funnily enough, it took after I moved off of weebly to notice I was starting to fall in the habit of only posting "twitter quality sketches" (eg high quality finished illusts), and only shared WIP's and inside jokes on private discord groups. I ... wanted to change that; this isn't how I wanted to operate - it was so far away from the whole mindset of the dA days where you had fun posting your rawest, messiest, worst, sleeziest shit as well as the best.
Solution? Re-post everything as far back as the sketches in cold storage from the 08 and 09' dA days (something I needed to do regardless, given how fragile dA is now). Made a tag that was just zihark. went hog wild. There was a period when I was debating even the choice of splitting off the R18 one - the only reason why it's a separate log unto itself is so I don't feel hesitant in posting gunplay/explicit/uniform kink/naziexploitation work specifically. If folks want (or don't want) to see it, well, it's a separate log, properly labeled as the nasty bucket. Their choice.
Code-wise - for about five seconds I considered learning how to hand code a xhml RSS style page; that... was going to prove to be way too much of a hassle, so it's only here that I relented and technically made a separate wordpress site for each subdomain. Given wordpress is open source ... and *relatively* low-code footprint, and also has a pleasant surprise in several plug-ins letting you auto-post to tumblr/twitter (so I don't ever have to visit those sites again!!! yesss!!!) it was worth it. Easy enough to choose the simplest possible theme to mimic this JP art site where it's literally the menu at the top, optional description of images, and the images. That's *it*.
Glad I chose the separate sub-domains rather than one wordpress site to rule them all - the 5.5 update broke my 'log' subdomain specifically, leaving the other ones live - so it was a simple matter to nuke the wordpress files there in cpanel, and restore from a month-old backup (I had only posted one new artwork that previous month).
> OFFLINE
(zine / published book list)
Like how JP artists listed doujins, it was a simple matter deciding I needed a place to list zines that's not itch.io (in case if that one goes down too). itch.io apparently has a plug-in where theoretically I can make my site itself a shopping cart with almost zero aesthetic changes; however I don't feel confident enough security-wise to pull that in here, so for now, i link there for the 'BUY' option.
Always was fond of Ao3 tags and how they in some ways described a story better than a mere elevator sentence pitch could do, so shamelessly yanked those for the zines too. (useful for content warnings too. fairly sure I was already softblocked from a zine convention application given the A(A)CAB tags. good riddance.)
> BKM
( links list to friends, artists who I enjoy, orgs who I support, etc.)
By far my favorite page while touring around JP fandom art circles back in the day - like thumbnails, banners were always those visual sneak peaks to other artists and what they may have to offer. Given that I've purposefully unfollowed everyone on social media, it feels like it's a respectful balance of acknowledging genuine friend connections as well as artists who I admire, while minimizing risk that antis would purposefully go after my follow list (they can and have done this in campaigns); this would simply take too much time.
(Nice thing about this site is it strictly caters to people who are outside the whole anti culture).
> IRON CROWN
(ironcrown.kradeelav.com)
IC had been hosted on Hiveworks (former publisher) for years, but as it turned out, I needed to migrate the back-end over to my site for a few reasons. Setting it up as another subdomain / spoke felt the most natural option (and future "flagship" projects will likely follow the same pattern), and it allowed me to take advantage of a new wordpress theme that was going to save an immense amount of time uploading/recreating pages versus keeping it faithful to the old IC look.
No ads, easy crossposting, and a solid cold storage place - whenever I come back to the comic, I know it's at least in safe hands.
conclusion
The site's been live as-is for a few months now, and other than the minor hiccup with the 5.5 update wipeout, everything's performed flawlessly. I'll end this with an insight I posted elsewhere, that may very well be the last socmed message I write:
feel weird about posting art to socmed lately. it's the difference between inviting *over* a friend to see a sketchbook vs having it taken out of your hands and thrown in a contextless slurry of misery to be forgotten in 2 min. Automatic this. Data mining that. Wheres the human?
I miss the human terribly. Webring sites with sprites galore not optimized to shit for engagement. Clicking the banner to be greeted by a way different personality. Gravitating hard to those sites n zines recently cause the tactile context is baked in with dodging censor twats.
Anyway. Moving. Drawing some stuff for contests. Sending out first batch of print zines this week. (store will open after). Not really on socmed these days (personal site logs, yes) though my best thoughts go with you all.
Do what you would be proud and happy about in ten years.
Great info
Date: 2020-08-20 11:49 pm (UTC)Re: Great info
Date: 2020-09-23 06:59 pm (UTC)(no subject)
Date: 2020-08-21 05:08 am (UTC)i always think if i were to remake my art website, it'd be made in dreamweaver (since I can't be bothered to truly learn to handcode), and i'd just be fiddling with frames (taboo!), tables, and display width for everything that requires responsiveness. basically stuck in late 90s-early 2000s internet lol, but maybe worse because I never did get a good handle on css or div layers.
handmade thumbnails were always a bit of a chore, but seeing a whole pile of them fill out in a grid ovet time was so satisfying! I would probably make them bigger than the 50x50 pixels i used to constrain them to though! (and probably should increase full image height sizes past 500px max lol)
i took most of that stuff down in the past because i was an oversharer and thought i was going into a field of healthcare where I definitely would be censored and censured for poor representation of the profession. this was also part of the reason i ultimately quit pursuing the field. the desire for unapologetic OC shennanigans too strongk.
(man, latest firefox mobile has cookie problems so I can't login to any websites half the time. having to switch to chrome sometimes is killin me)
(no subject)
Date: 2021-01-03 03:45 am (UTC)(and oh big mood with the firefox mobile problems and the cookie logins. really starting to see the whole 'developers only test on the latest chrome browser' time-marches-on vibe recently. )
(no subject)
Date: 2020-08-22 07:13 pm (UTC)(no subject)
Date: 2020-10-08 09:30 pm (UTC)(no subject)
Date: 2020-08-31 12:00 am (UTC)