Wednesday, May 27, 2020

Introducing the new Games by Tim beta



Since 2011, I've ran Games by Tim on Blogger, Google's free blogging service. Back then, I hardly knew anything about web development. Now with seven years of web dev experience and an extensive portfolio of web projects, it's about time I remodel this site to something more modern, more flexible, and more representative of my abilities. Introducing the new Games by Tim!


The new Games by Tim is:

Fast
Thanks to modern web techniques like code minification, link preloading, and image lazy loading, the new site feels quicker to browse and navigate.

Responsive
The new site scales seamlessly, whether you're on an smartphone or a 30 inch monitor. There's no more separate mobile site, and desktops get blessed with larger images and font sizes.

Optimized
Each project gets a dedicated page, rather than a blog post. In addition, links and blog posts are now properly structured and formatted without Blogger workarounds, potentially boosting search engine optimization (SEO).

Sleek
Vector graphics, animations*, and gaussian blur** spruce up the new site's appearance. And of course there's a dark mode too!


* Animations are disabled if you've enabled "reduce motion" on your device.
** Gaussian blur does not currently work on Firefox. Firefox will instead use slight transparency for the time being.

The tech stack


The new site's hand-coded with Gatsby, a static site generator designed to build fast, modern blogs. Gatsby incorporates React, a JavaScript framework used to build user interfaces.

For writing blog posts, the new site uses Forestry. Typically, the blog editor you use is tied to a specific platform (ex: the Blogger editor can only be used on Blogger sites). Editors like Forestry on the other hand can be used for multiple platforms, especially custom-made sites. This type of editor is known as a headless CMS.

Whenever I submit blog posts, Forestry converts my writing to markdown files. Gatsby then reads markdown files to dynamically build new webpages with the blog posts. The resulting "compiled" webpages are uploaded to Netlify, a static web hosting service.

Since Gatsby-built sites are static, meaning the content does not change based on who visits the site, I don't need to pay extra for hosting services. This offers a significant advantage over alternate platforms like Wordpress and Squarespace.

What's left to do

As the new site's still in beta, there's still several steps I need to work on before taking it to production. These include:
  • Transferring all existing blog posts to the new site
  • Adding a new commenting platform (existing comments sadly won't survive the transition)
  • Adding contact info
  • Writing redirects from the old site's project links to the new format
  • Further optimizing for SEO
  • (If feasible) adding an email subscribe option to get notified about new blog posts (subscribers of the old site would need to resubscribe)
  • Making adjustments to the site based on user testing and feedback

In the meantime, I plan to dual-post new blog posts to the old site and new site. Note that timestamps will slightly differ for these posts due to the time it takes to reformat posts from Forestry to Blogger.

Any feedback?

Now's the best time to provide feedback as I'm still working out the new site's kinks. Feel free to share your thoughts in the comments below.

I look forward to working with the new Games by Tim, and I hope you'll enjoy the refreshed experience.

Saturday, May 23, 2020

Source files for Vista Point artworks released

Curious how I made the two Vista Point artworks (V1, V2) on this site? Now you can find out, because today I'm releasing the source PowerPoint files for both artworks!

The two artworks are licensed under the Creative Commons Attribution 4.0 International license. Enjoy!

Thursday, May 7, 2020

Escape a Tower version 2.6.1 - I can read the text now!



Today's Escape a Tower update addresses a major accessibility issue: text contrast.

Naturally, it's hard to read something when the text color's close to the background color. As it turns out, there's a contrast test known as the Web Content Assessibility Guidelines (WCAG), and a lot of Escape a Tower's text didn't pass even the minimum tests.

I've therefore darkened the majority of Escape a Tower's test to pass WCAG AA for normal text. Have a look for yourself.

Old text (does not pass any contrast tests)

New text (Passes WCAG AA for normal text)

Although I can read the old text just fine, I was surprised to find out not everyone may feel the same. I hope the improved contrast enables more people to experience the game.

In addition, this update runs the source code through a formatter for better code readability and changes the link from the GitHub pages URL to tower.gamesbytim.com.

Wednesday, May 6, 2020

Homepage tweaks

I recently updated my homepage, which now features a photo of me and a short blurb about myself front and center.

Old / New

Why make this change?

A portfolio site reviewer (yes, I'm preparing for the job search) got confused about my goals based off the previous homepage. For instance, am I into game development, web development, data engineering, or perhaps something else?

To clear up the ambiguity, I replaced the top banner with a personal statement that better describes my ambitions. The new statement clarifies that I'm not all about dedicated games, but rather software as a whole with gamification where it helps.

The photo of me address two issues. For one, it adds a more personal flair to the site. It also fixes the image that appears when linking Games by Tim in sites like Facebook or Slack. Previously, it'd show the So Many Numbers app icon since that's the first image on the homepage. Now it'll show my photo, which is more appropriate.

In addition, I've made minor adjustments to font sizes and capitalization.

Tuesday, May 5, 2020

Data science: Analyzing the top 1000 marathon times

And now for something different: data science! Here you'll find a write-up that explores a dataset of top marathon times. Originally published September 26, 2019 on a different site, I'm porting the post here for prosperity's sake.



When we hear about marathons, we often focus on the top elite runners. For instance, the top three marathon runners (men/women) as of 2017 were:



While this info is great to have, it doesn’t tell a complete story about top marathon runners as a whole. For instance, how close are other elite runners’ times compared to the top three? What other countries, if any, hold promising elite marathon runners?

That’s where it’s useful to analyze not just 3, but the top 1,000 marathon runners (men and women). I will use the Top Running Times dataset from Kaggle to conduct the report.

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: lostforest.gamesbytim.com

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.

Sunday, February 9, 2020

Slight refinements to the Games by Tim logo

Today, I made some minor adjustments to the site's iconic cursor logo. Notice the rounded cursor edges.

 
Old/New

Also, since the logo's redone on Inkscape instead of PowerPoint, there's now an SVG variant, shown below. This was my main reason to redo the logo, in preparation for a site overhaul.

Friday, February 7, 2020

Wheel of Fortune Wheel Demo Survey Analysis


Now that the wheel demo's been out for a couple weeks, I've received a decent amount of responses from you guys about how to improve the wheel. Below is a summary of the feedback and how I plan to respond to it.

  • About a third of you used touch to spin the wheel.
    Although the Wheel of Fortune project is designed for keyboard/mouse, that's a nontrivial amount of touch users. I'll definitely need to keep touch-friendliness in mind, particularly in tablets (as they can project to a projector) as I continue to develop Wheel of Fortune for Web.

  • On average, you guys thought it was a bit too difficult to max the strength meter.
    Although I liked the challenge, I can see why some of you would find it too hard. That's why I've decided to strike a balance. Although I toned down the meter's exponential speed (so it moves at a more constant pace), I slightly lowered the time it takes for the meter to move from 0 to 100%. This should help users achieve max strength quicker while making the final strength appear more predictable.

  • About half of you said that the wheel physics felt off, especially at max speeds.
    After giving the wheel a few more spins, I can agree with the consensus. You see, the wheel as it currently stands can spin at up to 10 rotations. Problem is, 10 rotations is a lot, and in order to ensure that you can see the wheel slow down nicely, I overcompensated with the wheel's rate of speed decrease.

    To resolve the overcompensation, I plan to reduce the max wheel rotations to 5 or 6 (not fully decided yet). I initially thought this decrease would make the max speeds not look as appealing, but then I realized as it currently is, I couldn't tell the difference between 60% and 100% strength anyway. I will also adjust the rate of speed decrease accordingly and perhaps make the wheel slowly speed up as it starts spinning for visual effect (as someone suggested that).

I'd like to thank all of you who participated in the survey, and if you haven't sent your thoughts yet, there's still time to do soI will close the wheel demo survey sometime after February 10.

Friday, January 24, 2020

Wheel of Fortune for PowerPoint v4.1.2 - Updated Wheel Values


It has come to my attention that the actual show received new wheel values as of April 2019, albeit a minor one.

Thus, this Wheel of Fortune for PowerPoint update (v4.1.2) takes in the new wheel values.



Try the Web wheel demo!

As mentioned before, I'm working on a Web-based successor to Wheel of Fortune for PowerPoint. Right now, you can test the new wheel, which contains numerous improvements over the PowerPoint counterpart. Click here to try the wheel (and complete the survey if you wish).

Monday, January 20, 2020

Wheel of Fortune for Web - Wheel Demo



Here you'll find a tech demo of the wheel I intend to use for Wheel of Fortune for Web, the upcoming replacement for Wheel of Fortune for PowerPoint.

Wheel of Fortune for PowerPoint's wheel took two clicks - one to spin, and one to stop. This wheel needs just one click, and hold it to charge the new strength meter!

Advantages over the PowerPoint wheel
  • More sense of control over the wheel (although the outcome's still completely random)
  • Has inertia - will slow down as it spins
  • Uses the crypto-random API to securely determine where the wheel stops
  • Can programmatically tell what value the wheel landed at

Take the survey!

For the first time in the site's history, I'm trying out a survey to gauge how to further improve the wheel. Click here for the survey.

The survey closed February 11, 2020.

To Do
  • Add multiple wheel types to choose from
  • Add the wheel's second layer (wild card, Mystery wedge, etc)
  • Add sound effects to the wheel

Note that I'm long ways away from releasing Wheel of Fortune for Web. I'm just sharing these types of demos in the meantime.

License

Wheel of Fortune for Web - Wheel Demo is licensed under the GPL-3.0.

“Wheel of Fortune” is a registered trademark of Califon Productions, Inc, which was not involved in the production of, and does not endorse, this product. For more information about the game show, visit www.wheeloffortune.com.

Wheel wedges created by MarioGS/wheelgenius, used with permission.

Tuesday, January 14, 2020

Addressing the So Many Numbers blank screen bug

UPDATE (Mar 13): Read the follow-up post here.

I've received reports that players couldn't load So Many Numbers after I pushed a minor update last week. All they get is a blank screen, no matter how many times they refresh.


It turns out the cause of this blank screen is more complicated than I thought, What's worse, I may not fully be able to patch what I call the "blank screen of death." Allow me to explain.

(Warning: technical jargon ahead! Skip to "What you should do" if you just want to know what to do if you're affected.)

Why the blank screen of death happens

For starters, last week's update on its own did NOT cause the blank screen of death. All I did there was change some text.

What really triggers it is how the game reacts to an update. Whenever you load So Many Numbers, it caches a copy of the game to your device so you can play offline. Whenever I push an update, the game has to recreate the cache so it can load the updated version offline.

That's where things get awry.

Sunday, January 12, 2020

Dark Mode for the win

Ever since Dark Mode arrived in macOS Mojave, I knew it marked the future of UI design. Now that iOS, Windows 10, and all major browsers also support dark mode, it's time for my projects to embrace the dark side!

You may wonder, haven't you tried a dark theme before? That's true, but the user had to manually toggle it for his or herself. Now that browsers can detect whether you're on light or dark mode, webpages have the ability to automatically enable dark themes. A win, win for everyone!

Here's how I intend to handle dark mode on my future dark-enabled projects:

  • By default, set the theme to light or dark based on the systemwide theme.
  • The user can toggle light or dark themes via a button on the project. This means the user can use the project's dark theme while on their system's light mode, and vice versa.
  • If the browser does not support dark mode, use the light theme by default. The theme toggle should still work, though.
  • If JavaScript is disabled, use the light theme by default, and hide the theme toggle if possible since the toggle won't work.

To practice dark mode, I edited my GitHub homepage, a basic landing page with links to my projects.



I hope to one day enable full dark mode support on my other games, such as I am Thinking of a Number and So Many Numbers. In the distant future, I may add a dark theme to the Games by Tim site as well.