Friday, March 20, 2020

Lost in a Forest - a Text Adventure update (v3)

Play Lost in a Forest - a Text Adventure

Sometimes, I like to touch up my old projects. Here's such a time with Lost in a Forest - a Text Adventure.

Highlights of this update include:

  • Endings tracker - See how much more of the text adventure you've yet to cover!
  • Rounded layout - Much of the game UI now features smooth, curved edges.
  • Improved contrast - Choice toggle backgrounds are darker so they're easier to read.
  • Refactored JavaScript - The code looks way more nice and efficient than before.
  • Dedicated GitHub repo, available here
  • New gamesbytim link:

I actually wrote the majority of this update shortly after the previous 2016 release. That means for the most part, the game code resembles my style from years ago. I have to admit it was fun to relive the old way I coded and to reflect on how far I've progressed.

Friday, March 13, 2020

How a Lambda School student resolved my PWA update nightmare

As a web game developer, I desire for my projects to work offline. This is possible with progressive web apps (PWAs), which promotes a offline native-like app experience for websites.

To make a PWA, you need a service worker, which, in a nutshell, is a script that tells the browser what files to download and persist for offline use. On the user's initial load of a PWA, this service worker kicks in to ensure the app's fully downloaded. Thus, if the user goes offline and loads the page, the app appears rather than "page cannot be found".

Now what happens when you write an update to the app? In theory, you simply adjust the service worker's list of files, and everyone will see the latest version on next reload online. However, that's not how it works out of the box. On top of that, a misconfigured service worker can cause users to never receive app updates, or worse, unexpectedly break the app. I dealt with these frustrations with my PWA So Many Numbers, which led me to detest PWAs as a whole.

Fortunately, Lambda School student Mark Halls pointed me towards the right direction. When we worked on the PWA Trash Panda, Mark managed to write its service worker in a way that updated the app seamlessly. Flabbergasted, I had to know how it worked, and as a result of our conversation, I've not only resolved all my PWA update problems with So Many Numbers, I can now confidently endorse PWAs as a whole.

To best explain how it all came together, I'll explain the root causes of the update problem and how the adjustments rectified the situation. Although I'll try to explain in layman terms, this will get technical!

Tuesday, March 3, 2020

Projects moved to homepage

Today, I retired the site's Projects page and moved all my project links to the homepage.

Why make this change?

  • The homepage gets way more traction than the projects page. Even though I launched the homepage less than a year ago, it already has 98% of the projects page's total views, which existed since 2011. 
  • Since more people are on the homepage anyway, that's one less click to start playing a project.

In addition to the move, I reformatted how projects are listed.

  • The link to view a project is now the project title, instead of a separate link called View Project.
  • The app icons are slightly bigger on desktop and slightly smaller on mobile.
  • Each project now contains tags, which pinpoint some of the projects' highlights.

Will these adjustments cause more people to try my projects? Guess I'll wait and see!

Note: This is NOT the site overhaul I've eluded to over recent blog posts. That's a much bigger endeavor that'll take time to prepare.

Trash Panda

Note: Trash Panda is part of Lambda School Labs, in which I played a role in. Since I'm not in charge of Trash Panda, I cannot directly provide support regarding bug fixes/improvements.

What is Trash Panda?

Recycling isn't always straightforward. What do those numbers on plastics mean? What should I do with that broken refrigerator? How can I dispose this abstract object I can't tell what it is?

On top of that, recycling regulations differ across cities. Did you know some cities allow you to recycle items that other cities prohibit? The same goes for compost. This leads to a lot of incorrectly recycled items, placing unnecessary impact on the environment.

That's where Trash Panda comes in. Using your location and camera, the web app can identify the item you have and specifically point to you if, how, and where to recycle it. Prefer not to use the camera? You can search in Trash Panda's extensive database, which also offers interesting tidbits about your items to recycle. Trash Panda helps you master the art of recycling so you can rest assured you're doing the environment justice.

Compatibility notes

  • Trash Panda recommends location and camera permissions so it can properly identify how to recycle items in your area and use the image recognition model.
  • Trash Panda is meant for mobile devices due to the nature of how the app is used, particularly the camera. Desktop users will see a splash screen prompting users to load the page on their phone.
  • On iOS, Trash Panda only works on Safari since only Safari can use camera permissions.
  • On Android, you can install Trash Panda on the Google Play Store.

My role in Trash Panda

The Trash Panda team consists of four web developers, four data scientists, and two UX designers. I work as one of the four data scientists.

(That's right; despite this site's portfolio of web-based works, I wanted to try something different. There's a lot of different things to learn in the data science field!)

To build Trash Panda's image recognition model, us data scientists first needed to download multiple thousand images of recyclable products. Then, for each and every image, we had to draw a bounding box that labels the exact item we're trying to identify.

(Example of a bounding box. We want to identify the Nintendo 64, not the soda can.)

Sounds tedious? That's because it is. Thankfully we're computer scientists and know how to automate some things.

  • For downloading, we wrote python scripts that can automatically scrape images from Bing and Google Images. It works well, but we had to be careful about search queries (cork is a wine bottle cap, as well as a name of a city).
  • For drawing bounding boxes, we wrote a large python script that programmatically labels images. Some images, like those with just the item and a transparent background, easily label well with the script. Other images, like a white piece of paper on a white table, not so much. Although our script helped us save lots of time, we still had to manually label thousands of images. 

Once we got all our images downloaded and labeled, we used YOLO, an object detection neural network, to train our model. In a nutshell, the computer gathers information about what a specific item looks like from each labeled image and tries to generalize what it learned as a math algorithm. The training process requires a large amount of GPU power, and as such, we used a cloud computer, AWS SageMaker, to train the model.

Once the training finished, we got a single weights file that contains all the math algorithms. We deployed this file to a server, which end users utilize to determine the recyclable items in their own images.

If you want to learn more about image recognition, this site explains more about the YOLO neural network.

Sunday, March 1, 2020

So Many Numbers! - Main menu redesign, dark mode, and more

So Many Numbers!

Time for another So Many Numbers update, and this one won't disappoint.

In the last feature update, I added a way to customize the operators to use for the game. It was by far the most requested feature, and users called it essential to improve on the game.

Since that update released, however, I noticed that people played the game less. I scratched my head hard on this one. How can adding, and not removing, ways to play a game cause people to not want to play as much?

As it turns out, it's not as much of a mystery as it seems.