I built a genetics simulation in Phaser 3, React, and Redux. I’ve already written about how to get Phaser and React working together and how I got the isometric perspective in Phaser 3, so I wanted to explain the actual simulation part of the simulation. You can run the simulation on SpaceGarden.xyz, itch.io, or view the source code on Github.

Initially, two flowers are placed on the plane at the northern and most southern tiles. These have random genotypes, but you can change these two parent flowers genotype by adjusting the Punnett table below the game screen. There are two…

Now that I got a tolerable front end set up in part 3, I was ready to put this blog out there. Or at least figure out how to. There are a lot of options for deploying a Strapi app, in fact, having very little knowledge of this world, I found it a bit overwhelming.

I tried Render, attempting to avoid the big players AWS and Azure, where my dollars will likely only go to wipe Jeff Bezos and Bill Gate’s butts, respectfully (respectfully). I also chose Render because there’s a simple guide for Strapi with SQlite and uploads on…

Now that I got my images onto Strapi with their corresponding iNaturalist data in part 2, I’m ready to fix up the frontend.

With my images being served, I noticed they weren’t quite as pretty as I remember. Comparing to the image I have on my hard drive, the difference is pretty clear. The first thing I did was adjust my Gatsby config to increase default JPG quality.

Before JPG quality increase on left, notice the chunks. White square to highlight compression

I still wasn’t satisfied by upping the JPEG default quality, especially in some of the noisier images. It’s a website about photos, so the image quality needs to be a priority. For…

Now that I’ve gotten my photo blog project set up in part 1, I can start building my Strapi backend.

The first thing is to create a new Collection content-type within Strapi. For each Photo, I know I’ll need a title, image, content, and tags for grouping photos in ways that iNaturalist data might not have. Each photo will also need an iNaturalist ID to make the api call with, and a JSON object to store the data that is returned. …

I’m building a photo blog for my wildlife photography and I want to integrate with iNaturalist to pull data from there (the location, date, species and taxonomy information). I’m not much of a backend dev (tables tend to already be on the ground so why would I drop one?) so it looks like Strapi is a solid choice. I’ve worked with TypeScript a bit now and really like it, and I’m not married to Gatsby, but it’s got some great tools to solve a lot of problems.

Oh look, a tutorial: Build a static blog using Gatsby (Typescript) and Strapi

Peace–seeking, game-playing video shaman GoldVision ’s most recent video Animal Crossing — Wasps, asks a couple of hard questions. I attempt to answer one of those questions, Should I Donate These Wasps?

I think it can be useful to understand what options are available. The options for wasps that are currently in your possession:

  • Donate To The Museum
  • Sell To Nook
  • Sell to ???
  • Keep them where they are
  • Release them

I’d say the single best option would be to donate the wasp to Nook, who (spoilers) then gives it to Blathers who then houses the wasp in the much…

Edit: Phaser 3.50 now supports isometric tilemaps. You should probably use that.

Full Repo: https://github.com/nodes777/flower-game-phaser3/tree/isoView

I’ve been working on a casual flower genetics game, in the Phaser 3 engine. I’d always imagined it having a psuedo 3D effect, and after building it to this point, I wanted to try to finally get the visuals in a workable place.

First we’ll make sure we have some assets that work in the isometric perspective. I’m a Patreon backer and big fan of SpriteStack. So that’ll be my tool of choice. If you’re interested in how this art technique works, I recommend reading…

One day I woke up and wanted to be a good developer, by writing tests for my flower game. Unfortunately, writing tests for components you’ve already made can be a little boring. Switching into test driven development can be a little more difficult than starting out with TDD.

So I needed some motivation. I had seen badges on other GitHub projects that display whether the build is passing, the license, dependencies and all kinds of fun stuff. But what I really wanted was a badge that would display my code coverage and update as I added my tests.

Shields.io Github page with many badges
Shields.io Github page with many badges

Shields.io looks…

After getting my Phaser set up working with React, I knew I needed to be smart about how my web app would grow and implement a testing framework.

I chose Jest as my testing engine since Jest seems to be the preferred testing framework for React apps (create-react-app ships with it). However, despite the claim on the homepage that most JavaScript projects should require zero config, I did need to tweek my package.json and resolve some dependency issues. If you’re using Phaser and React you might have a few of these too. End repo can be seen: https://github.com/nodes777/phaser3-react-template

First lets…

First of all don’t. Unless you have a very good reason too. Native elements always provide an accessible experience and will save you the headache of implementing these features yourself.

That being said, sometimes you need to extend native functionality. I wanted to include a preview of a color being selected as a small square. However, you can’t nest elements inside the <option> element, and I didn’t want to change the color of the text either (designers can be hard to work with, especially when they’re also me).

Final project can be seen on Codesandbox.io

Selecting an allele in a custom select component from the keyboard

Additionally, and more practically, I…

Taylor Nodell

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store