Sunday Wombo Combo #4

Tina Ng
4 min readMar 1, 2020

--

I’m actually writing this on a Saturday, for my Sunday will be occupied by a home move (finally no more Airbnb hopping for at least a year). This week I’ve been back on web dev, plus some minor research on game dev. I do hope to return to game dev next week, so that my course instructor won’t begin to wonder if I’m still alive.

The Web Jam Sandwich

Last week I mentioned that I’ve begun fiddling with GatsbyJS, and using it to create a website for curating my No Man’s Sky stories. This week I’ve made more progress during my spare time, by integrating Netlify CMS in my website.

I deployed this website with a method I’m completely alien to: the JAM stack. Basically I make this JAM sandwich with GatsbyJS front end on top, Netlify CMS in the middle, and Github as my file host at the bottom. I don’t fully understand how it all works, but it just works. That’s been a recurring experience I noticed in today’s web development — it just works after I follow some documented commands, and I don’t know why.

I wanted to include Netlify CMS because I like having a front end to write new posts, instead of writing straight into a markdown file and commit from my local environment. After all, I’m not always using my computer in my day-to-day life. Sometimes I want to write something from my work computer. Sometimes I want to write from my phone. Sometimes I want to write from a local library PC when I don’t have my laptop with me. In most of these scenarios, I can’t setup Git, which already barred the entry to the rest of my deployment processes such as installing NPM, GatsbyJS and Netlify.

Plus, if one day I make websites for clients for a living, I’d want to enable the power of letting them edit pages themselves, without having to go through processes that only a developer should touch.

Netlify CMS UI

This week my biggest challenge was figuring out post tags in Netlify CMS. I wanted to use the tag support that came with my chosen GatsbyJS theme to categorise my posts. Supposedly, the “list” widget in Netlify admin config is enough to satisfy GatsbyJS’s requirement to detect tags.

GatsbyJS uses “Frontmatter” format for post meta information. Tags are a list / array.

At first I couldn’t get GatsbyJS to recognise tag list generated by Netlify CMS. I thought it was because Netlify CMS outputs lists in bulletin point format instead of square bracket array format (what GatsbyJS uses out of the box). It was fixed when I realised I used “tag” as the field name, instead of “tags”. That took me two days to figure out.

Now that that’s out of the way, I have a minor issue of using prettier display name for the tags, instead of words with dashes as spaces. It’s minor enough for my personal requirement to ignore, but I feel that if I use this stack to make a website for a client, they’re going to want prettier display of tags, like category names. I know I would.

In other news, I original wrote this section by talking about how I began web development, because I used to spend a lot of time with PHP associated technology before I return to web development now. Things have been very different between beginning and end of the last decade. Stay tuned for a bonus article next week about my story in web development.

MagicaVoxel

Another thing I started having interest in this week, is low poly 3D game development. I probably mentioned that last week when I talked about 3D animation.

A personal friend of mine has been heavily persuading me to make “Minecraft, but better”, which implies voxel, sandbox world, crafting system and real time block manipulation. Probably multiplayer, too, but I’ll let that slide for now.

Naturally that led me to think about world generation and asset creation. Fortunately for voxel worlds, this open source gem will come in very handy: MagicaVoxel.

Mmm voxels

I have yet to find time for messing with MagicaVoxel, but from what I can see, I can build props with it, texture models with it, and import / export everything between MagicaVoxel and Unity with some Unity plugins.

I was going to learn Blender (ugh) to handle the low poly assets I’ve gotten, for simple things like applying textures and making minor tweaks, but there’s a lot of overhead involved in learning Blender as a complete beginner like me. For now perhaps I’ll look into MagicaVoxel, when my requirement is only voxel-based.

This has been a somewhat shorter Wombo Combo, because I accidentally wrote the other half of it that should have been a separate article. Again, stay tuned for said bonus article, and if you ever feel inspired to be any kind of developer, stop by oneleif to get a head start on your journey!

--

--

Tina Ng

Unity, Javascript, PC and 3DS gamer, storyteller, traveler.