Guess Who Took Him Home

You don't have to guess, I'll tell ya, looks like Catherine took him home.

You remember who left that little pooper there, don't ya?

Yeah, Natsumi did.

You remember why?

I'll let you go back and find out for yourself. Okay, okay, or you can visit this link and view Take Him Home.

I bet you're wondering when the inevitable is going to happen. Well, me too. I haven't quite written it myself, so I look forward to resolving that moment as much as you might look forward to finding out.

I have tossed some ideas around in my head and it's coming together. But, I'm afraid making the webcomic art has taken a backseat. So I'm a little worried once I'm done with this thread of comics, I won't have anything if I don't hustle and start putting something together, or you know, stretching content, which I might have to do.

Website Stuff

You remember I was talking a lot about static site generation and this thing called Gatsby last week?

Now, keep in mind it's still very much a work-in-progress. It's missing a lot of things, but as far as a proof of concept goes, it's coming along, and it's online. Yup, it's live. Not ready for primetime, but it's live on the web right here:

Dear Kamiko

So here's what's going on:

I call this Milestone 1 and it includes this:

• Get GatsbyJS up and running
• Convert the data from Wordpress format over to a new format -- in this case all of the HTML files are now Markdown files. All of the files exist offline and they're organized into a file folder structure. Gone is the whole Wordpress upload folder thing. Now the comic images can live together with the text of the blog post and other metadata.
• Get it to display on the new site. All of the markdown files and images are queryable offline via GraphQL, which, thanks to Gatsby's GraphiQL web interface, it makes building queries easier than MySQL. You can really explore the data and immediately see the output of a query you put together using the web tool. It's fantastic and I like it so far. I've come across some limitations, but I've been able to overcome them.
• Get some core functionality up and running. Since I'm all about learning, I opted to start from scratch and build the site with the parts I think are necessary. Luckily Gatsby has a lot of plugins to handle things such as processing images, video, twitter posts, instagram posts, markdown files, and much much more, because I'm gonna need all of them to rebuild the site. If you browse through the comics you'll see that a great deal of them work. Animated GIFs and even GIFs don't work with Gatsby. They've been left by the wayside -- too slow. Too old. A lot of The Rabbit and the Moon was "optimized" by turning those pages into GIFs. They're now PNGs, and due to Gatsby's image plugin, they're actually exported when the site is built as WEBP (and it's true of this site too.)

Coding for the Future

So, as I said, GIFs aren't supported in Gatsby. The reasoning is that they're big. No way to compress them. And you know it's a format that's existed since Compuserve, so maybe it's time for something modern to take its place.

This is a big problem for This Mortal Coil. Some of the Rabbit and the Moon pages are done as animated GIFs.

It's my belief that since the comic exists in a digital format, it shouldn't have to adhere to the rules of traditional print media. Pages can be animated.

Hell, I believe one day pages can be interactive. I just haven't gotten there... yet. But if you'd like to see something I have in mind, check out the Shrine.

So, About Animated GIFs and Other Problems

In this day and age, make them MP4 files it seems. I think WEBP also can do animation, but Gatsby doesn't seem to support that at all out of the box (at least not with gatsby-plugin-image). I ended up taking some time recutting all of the animated pages as MP4s using Blender's built in video editor. I have all of the source content for Rabbit and the Moon so I pulled the image sequences into Blender and had it spit out the MP4s. Filesize-wise they're better compressed than animated GIFs -- and yes, the "movies" are still in a traditional graphic novel size format -- in my case 1140 px by 1608 px, and they do run on the new Dear Kamiko website. If you want to use Blender to make MP4s keep in mind that your height and width pixel dimensions for export have to be even even numbers.

Wordpress Metadata Migration

Another issue I've had to deal with is Wordpress metadata -- publish date, slug, title, excerpts, descriptions, blah, blah, blah. All of the posts (like this one) that used to live on Wordpress have now been exported out to my harddrive as Markdown files. I tried to pull as much of that metadata as I could because I can still use it when I query it for the new site.

Markdown

If you're not familiar with Markdown (.md files), they're files that use a very simple syntax for describing the parts of a document. You write body text (such as this paragraph) as, well, just that. No need to surround it with the paragraph tag as in html.

In fact, I notice a lot of programming and files are moving away from the concepts in html and xml. The issue with these files is that they're heavy with tags to enclose data. It makes it cumbersome to write documents and highly and unncessarily technical. Markdown is light on that. What tags it does use are simple to address the need for different sized headers, bold, italic, building tables, links, etc. I've gotten used to it since Github uses markdown for all of it's wiki pages, issue tracker, and README file.

It really does feel more second nature to me to write in Markdown now than say even using Gutenberg blocks, which I thought, up until 4 weeks ago, was a thing I was going to harness for this website.

Scheduling and Continuous Deployment

This brings up yet another issue. Authoring and scheduling content. I don't necessarily have a means of scheduling anymore once the new site becomes the main site. The nice thing is I can make a new folder on my computer and write a blog post and assign a comic image and I'm done. I push it up to Github and then a my entire website is generated and spit out into the web without any intervention from me -- BTW, that's the continuous deployment part. I don't have to manually rebuild my website. I just update the project and a service watches for a change and makes a new build. Granted, I need to make sure that whatever change I made works on my local machine before I push it live. But if there's ever a bug, it also means I can fix it locally and then push it live. Of course, there could be that off case where Gatsby has a bug and something is broken on live but maybe not on my local computer. Although, the Gatsby developers say that with their new release, it shouldn't be an issue (or maybe I made that up, I don't know).

As for resolving the scheduling issue: I've read you can use a cron job via a Github Action and have it merge a branch into the main truck of the project and by doing so it can kick off a new website build. So, that's something I'm looking into down the line.

I realize a lot of this will be very engineering jargon-y, but... yeah.

It's all Code

That's potentially a fourth downside. If you're interested in building a faster, streamlined site, this is no joke. You're letting go of the 5-minute Wordpress install (as if it ever was 5 minutes, LOL). It's all javascript using React.js. There's a lot of command line interface stuff. You'll have to deal with Node.js and package files. And, a lot of technical jargon when it comes to understanding how modern web automation works.

I'm able to wrap my head around it, because I do this for work. Some of these things with Node.js, React.js, Gatsby come naturally to me because I've seen how they work code-wise.

If you are curious and want to know more and need me to explain it as plainly as possible, I'm more than happy to walk you through the basics, but you may also find yourself doing a lot of googling and watching youtube videos to learn -- it's essentially what I'm doing.

It is, as I said, no joke, and a lot to take on. My hope is that the output will be a more streamlined, and WAY FASTER website than what Wordpress has to offer.

Play with the "Dear Kamiko" demo above. The pages, I hope, load in super fast. It takes the images a little longer, but within an instant you're looking at a page. No more waiting for Wordpress to chug along and do its thing. Nada. You can click through pages to your heart's content. Animated GIFs are videos and should play -- probably better on the desktop site. I'm still working on the UX.

Anyhow, have a great weekend, see you again next week!