Simplify optimistic rendering with redux-optimist library

Image for post
Image for post
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:







  2. Follow along to set up Redux, or skip ahead to step 3 if you have your own preferred Redux setup. …


Learn SCSS features with simple create-react-app

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

2. Rename to

3. In , on line 3 change to

4. Take a look at , then replace the code in 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 and save to reload.” bold for mobile devices. This is a good opportunity to show you how to import another .scss file. This helps us separate responsibilities and keep our scss organized. …


A really quick tutorial

Image for post
Image for post

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
npm i request-promise
npm i…


An easy follow-along tutorial

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

Image for post
Image for post

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 google-translate
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.

Image for post
Image for post
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 made without your authorization. …


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.

Image for post
Image for post

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 available on a public API. …


A tutorial to build your first app on the decentralized web

Image for post
Image for post
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


Image for post
Image for post

I’ve been learning React.js for the past three weeks and I wanted to share some of the funny/interesting moments and pieces of code that I had to write or helped write to make things work. There are definitely better ways to achieve what we needed to do, but these were some pretty fun solutions that we came up with and wanted to share.

We’ll start off light with some css manipulation, here’s some simple css:

.gryffindor {background-color: #7f0909;color: #ffc500;}.slytherin {background-color: #0d6217;color: #aaaaaa;}.hufflepuff {background-color: #eee117;color: #000000;}.ravenclaw {background-color: #000a90;color…


A step by step tutorial

Image for post
Image for post

This will be strictly instructional, follow this step by step guide to quickly build your backend.

  1. In your terminal: - Or add this flag if you have Postgres installed and would like to use it: - If you choose to use Postgres, remember to turn Postgres on when you launch your server.
  2. In your terminal: , then find and uncomment , then add this line of code on the next line:

3. In your terminal:, …


Image for post
Image for post

Not if, but when

Majority of analysts agree that driverless cars would be in use across the globe by 2025 whether we like it or not. Historically, once humans have a technology, we will use it. The transition, however, will not be instantaneous because the total number of cars and trucks on the road is two billion and climbing. The capacity for car/truck production is about 100 million a year. So if tomorrow all production cars were autonomous, it would take 15 years to replace the fleet, assuming the fleet stayed the same size. …

About

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