Hi, I’m Rob!

Growing up, I was always interested in computers. I would skip lunch to save up enough allowance to buy computer parts because that costs less than buying a whole computer. Many months later in 2006, I finally had my very own crummy computer that I had scraped together but dang that was the best computer I ever owned.

By 13, I knew I was interested in learning code, but society and my own circle kept telling me “You’re not smart enough”, “You have to be a genius”, or bluntly “You’re too dumb”. …


Making a multiplayer game with React Hooks is hard

Previously I mentioned that I had ported a large chunk of the backend logic to the frontend and some of that code was using recursivesetTimeout to achieve unit movements and attacks. I said I would convert setTimeout to React.useEffect hook. Well I did, and the result is less than splendid.

From a developer point of view, the code is much cleaner and easier to wrap my head around than the previous recursive setTimeout, but from a player’s perspective, this has been disappointing. …


Yes to “single source of truth” until it starts working against you.

Conventions are great and I used to follow them so closely as if they were the undeniable law in programming. However as I grew and encountered more different problems as an engineer in my professional work and in my hobby projects, I found conventions are a great place to start, but each app or sometimes even each feature has its own quirks and nuances where conventions begin to work against what you’re trying to do.

The problem with WaddleWaddle is that there is a lot of code running…


Simplify optimistic rendering with redux-optimist library

Pikachu evolves into Raichu

The redux-optimist library has been extremely helpful to me, and I’d like to share that with you. I’ve designed a simple tutorial where I’ll walk you through how to set up and use the middleware. We’re going to use a sweet Pokémon API as our demo practice. We’ll fetch this Pikachu and optimistically evolve it to Raichu. If the request fails, then we’ll devolve back to Pikachu.

  1. Let’s install the dependencies we need, in your terminal:
    yarn create react-app app-name
    cd app-name
    yarn add react-dom
    yarn add react-router-dom
    yarn add react-redux
    yarn add redux
    yarn add redux-thunk
    yarn add lodash


Learn SCSS features with simple create-react-app

  1. In terminal:
create-react-app scss-demo
cd scss-demo
npm i node-sass
npm start

2. Rename App.css to App.scss

3. In App.js, on line 3 change import './App.css'; to import 'App.scss';

4. Take a look at App.scss, then replace the code in App.scss with this:

Notice in the following scss code that we can:
a) Make variables with the $ symbol
b) Have nested element tags that reflect our HTML hierarchy

This should look exactly like the create-react-app default page like what we’re used to seeing.

5. Let’s say we want to make the “Edit src/App.js…


A really quick tutorial

Prerequisites: Knowledge of React.js will be required for this tutorial.

Let’s say you want to pull data from the frontend of a website because there’s no API available. You inspect the page and see that the data is available in the HTML, so how do you gather that information to be used in your app? It’s rather simple, we’re going to install two libraries and write less than 50 lines of code to demonstrate the scraping of a website. To keep this tutorial simple, we’ll use https://pokedex.org/ as our example.

  1. In terminal:
create-react-app scraping-demo cd scraping-demo…


An easy follow-along tutorial

Prerequisites: Knowledge of React.js will be required for this tutorial.

We’re going to use google-translate library to help connect your app with Google Translate API, the library also provides methods to initiate the translating. We’ll also use react-cookies library to store a user’s chosen language in the browser for the user’s convenience and we’ll store some translated text in a cookie so that the same sentence doesn’t have to be re-translated every time the user loads the app (you have to pay per translation, try to avoid redundant translating).

  1. Let’s get started, in terminal:
create-react-app google-translate-demo cd google-translate-demo npm i…


Final part of a three-part tutorial

In part two, How to Connect Blockstack to your Backend API, I show you how to create a user object in your API after logging in with Blockstack. In this tutorial, we’ll build a form that sends public information to that API and a separate form that sends secret/sensitive information to Gaia Storage.

Blockstack applications use the Gaia storage system to store data on behalf of a user. When the user logs in to an application, the authentication process gives the application the URL of a Gaia hub, which performs writes on behalf of that user. The Gaia hub authenticates writes to a location by requiring a valid authentication token, generated by a private key authorized to write at that location.

By using Gaia Storage, the decentralized way of storing information:

  • Your data is more secure than traditional storage systems, which have one or a few central points of vulnerability.
  • Millions of encrypted copies of your data are spread across the world, constantly verifying each other for changes…


Part two of a three-part tutorial

In part one, How To Build Your First Blockchain App on Blockstack, I show you how to set up Blockstack login/signup. In this tutorial, we’ll connect the unique username that visitors create on Blockstack to your back end.

Prerequisites: Knowledge of setting up your own API will be required. We’ll also be using React.js for this tutorial.

While you would want to send private information such as phone numbers and addresses to Gaia Storage (a decentralized storage system), what I’m about to show you is useful for storing public information like comments or posts where you might want that information…


A tutorial to build your first app on the decentralized web

Blockstack is a network for decentralized applications. This platform leverages a serverless architecture, which helps remove critical points of vulnerability. By eliminating these weak points, which have frequently fallen victim to hacks, Blockstack makes user data more secure.

Prerequisites: Knowledge of React.js will be required for this tutorial.

Blockchain tech can be complicated, but getting started doesn’t have to be. Blockstack’s 3rd party sign in/sign up/authentication makes it easy to get started developing apps and publishing it to a decentralized App store like App.co

Robert Chen

Software Engineer

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