DEV Community: Robert Chen

Learn redux-optimist

Robert Chen — Sat, 14 Dec 2019 19:50:13 +0000

Simplify optimistic rendering with redux-optimist library

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 pokemon 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

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

a. open src/index.js

b. create action file, in your terminal: touch src/pokemonActions.js && open src/pokemonActions.js

c. create reducer file, in your terminal: touch src/reducer.js && open src/reducer.js

d. open src/App.js

e. open src/App.css

3) Let’s install redux-optimist now, in your terminal:
yarn add redux-optimist

4) I suggest commiting here, that way you can see your git diff before implementing redux-optimist and after redux-optimist:
git add . && git commit -m "feat(redux): finished setting up redux"

5) Modify our pokemonActions.js to create new actions and pass some responsibility to the redux-optimist library:

6) Create a middleware folder and create this file getRaichu.js inside the folder, in your terminal: mkdir src/middleware && touch src/middleware/getRaichu.js && open src/middleware/getRaichu.js

7) Import and use the getRaichu.js middleware in our index.js:

8) Modify our reducer.js to work with the new actions and middleware:

9) Now in your terminal, yarn start and open up your console. I’ve placed a couple console.log to help observe the procedure of our action, middleware, and reducer.

You’ll notice that the object in GET_RAICHU_BEGIN is a mock Raichu where I only supplied the name and image, then when the request succeeds, GET_RAICHU_COMPLETE sends the full object returned from the API to update our store.

10) Now let’s imitate a failed request by commenting out the fetch request on line 32 in getRaichu.js and commenting in line 33.

This time you will see that we optimistically render Raichu until the request comes back as a fail. The store will automatically revert back to Pikachu. At this time we also capture the error from the failed request and display it to the user. So moral of the story, don’t evolve your Pikachu :)

Here are screenshots of the git diff from our usual redux to implementing redux-optimist:

That’s it for optimistic rendering with the redux-optimist library! Hope this was helpful!

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

How to SCSS

Robert Chen — Mon, 01 Jul 2019 04:23:29 +0000

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 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. In terminal:

touch /src/_mobile.scss
open /src/_mobile.scss

6) In _mobile.scss:

7) Add @import 'mobile'; to the top of App.scss

8) We can even make functions in scss, add the following code to App.scss before your element selectors:

9) In App.scss, within .App-link selector, add @include grow(2em), it should look like this:

Try changing the 2em argument.

10) To show you how to use classes in scss, let’s add a ul tag and an ol tag in our jsx. In App.js, within <header> and after <a> tag:

11) Now back to App.scss, under the grow function, we’re going to write a class:

12) Let’s use our %list-item class. Within .App-header selector, under .App-link selector, add the following code:

13) In our %list-item class, let’s multiply padding: 0.5em by 2.

Weird, that’s not a thing in normal css, but try it yourself and rejoice! These are the basic superpowers that you gain from using scss. There are even more powerful features, but let’s wrap for now. Enjoy your newfound abilities!

In case you want to see the final code for this tutorial, here is App.js:

Here is App.scss:

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

How to Scrape a Static Website

Robert Chen — Sun, 23 Jun 2019 22:04:42 +0000

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

2) We’re going to start by using request-promise to get the HTML from https://pokedex.org/ into a console log.

In App.js:

3) Sometimes you may come across a CORS error blocking you from fetching. For demonstration purposes, try fetching pokemon.com

rp("https://www.pokemon.com/us/pokedex/")

You should see an error like this in the console:

4) You can get around CORS by using https://cors-anywhere.herokuapp.com. Simply add that URL before your desired fetch URL like so:

rp("https://cors-anywhere.herokuapp.com/https://www.pokemon.com/us/pokedex/")

Now you should be able to see the HTML from pokemon.com show in your console.

5) But we won’t have to use cors-anywhere for rp("https://pokedex.org/"), so let’s proceed

6) Now that we have the HTML, let’s use the cheerio library to help us grab the exact data that we want from desired element tags. In this example, we’ll grab all the names of the pokemon then display them in a list.

In App.js:

7) You should see a list of all the pokemon names display onto your screen:

It’s that simple! You scraped those names from the HTML without having to directly access any backend. Now try scraping the examples on http://toscrape.com/ for practice. Enjoy your new abilities!

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

How to Use Google Translate API

Robert Chen — Sun, 16 Jun 2019 19:07:12 +0000

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 google-translate
npm i react-cookies

2) Get ready to create your API key and hide the key so that it doesn’t get pushed onto the internet. In terminal:



touch .env
open .env

3) Sign into Google API Console with your Gmail then create your API key:

4) After creating the key, DO NOT share it with anyone and ABSOLUTELY DO NOT push that key to GitHub or anywhere online. Any fees accrued using that key will be charged to your account. I know someone who knows someone who owes Amazon $50,000+ because he unknowingly pushed his key to GitHub for only 3 days and someone went on a shopping spree with his key. With that said, now I’ll show you how to safely use and protect your key.

5) In terminal:



open .gitignore

6) Add .env to line 25, this tells GitHub to ignore pushing your .env file online.

7) Create .env on the top level of the app, Copy your key from Google Console and replace the string “PASTE YOUR KEY HERE”:

8) In terminal:



mkdir src/utils
touch src/utils/googleTranslate.js
open src/utils/googleTranslate.js

9) We use your API key through the variable that we created in .env so that your actual key is safe from the public’s eye. In googleTranslate.js:

If you already have a server running, restart it so that process.env.BLAH_BLAH_BLAH captures the most recent change.

10) Preparation is done, we can now build the app. In terminal:



open App.js

11) We’re going to create a simple select field and translate some text with the google-translate library that’s now connected to your Google Translate API key. In App.js:

12) Run the app. In terminal:



npm start

Change the language, refresh the page and verify that it loads with the language you last selected.

Congrats! Now that you’ve seen how to set up Google Translate API and use the google-translate + react-cookies libraries, let’s clean up. Go back to Google Console and delete your API key, that’ll guarantee no one else can use your key without your knowledge.

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

How to use Gaia Storage with Blockstack

Robert Chen — Fri, 31 May 2019 20:33:16 +0000

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 made without your authorization.
A hacker would need to compromise 51% of the blockchain in order to access your data. This would require more computing power than any known entity possesses.
You own your own data, your information will be safe and no one can access it, not me, not Blockstack, not even the president.

Prerequisites: Knowledge of setting up your own API. We’ll also be using React.js.

Coming from part two of this three-part tutorial series, this is what App.js looked like:

We’re going to add a form in JSX and some handler methods to use our API. We’ll, do the same for Gaia Storage but in the Blockstack way. Skip to step 6 if you only want to see the final code.

1) We’ll be adding a few placeholders to your app’s state:

2) Within the App class, we’ll add the changeHandler, submitHandler, and submitGaiaHandler functions for the forms (be sure to add the superhero attribute to your backend for the fetch PATCH request):

3) Within the App class, we’ll add a function to retrieve data from Gaia Storage:

4) Call getGaiaUser() function in componentDidMount():

5) In render(), we’ll add the JSX for our new forms:

6) At the end of this process, App.js should look like this:

7) Let’s sprinkle some CSS on this in App.css and make it a little easier on the eyes:

8) Test the two different forms, open console to see the data that is returned upon submitting each form.

9) You should see encrypted information if you click the link that Gaia Storage returns on App.js:134:

Congratulations for making it to the end of this tutorial! You have now successfully implemented Blockstack authentication, connected Blockstack to a public API, and securely transferred data to Gaia Storage.

There is still lots to learn, but you now have the fundamentals to start building decentralized and hybrid apps. Remember you can always dive into the Blockstack documentation or reach out to the community on Slack if you get stuck.

Thank you for following along through all of the tutorials, reach out if you have any questions. Wish you the best in your blockchain endeavors!

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

How to Connect Blockstack to your Backend API

Robert Chen — Mon, 20 May 2019 20:05:49 +0000

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

Coming from part one of this three-part tutorial series, this is what App.js looked like:

We’re going to add two methods that’ll connect Blockstack to your API. Skip to step 6 if you only want to see the final code.

1) We’ll be adding the following placeholders to your app’s state:

2) Within the App class, we’ll add this function which does the following:

3) Within the App class, we’ll add another function that takes the username from Blockstack and creates a new user object in your API:

4) Call getUsers() function in componentDidMount(), add this line to the existing code:

this.getUsers();

5) In render(), we’ll add a welcome greeting above the Sign Out button in order to see that all is working correctly:

6) At the end of this process, App.js should look like this:

7) Let’s quickly center the greeting div by adding this snippet to App.css:

.hello {
  margin: auto;
}

8) Sign in, then verify that the user object is getting created in your back end:

9) Sign out and sign back in to verify that the user object does not get duplicated if it already exists.

You can now connect Blockstack authentication with your own custom back end and build the user object however you’d like. Have fun with it!

In the final part of this tutorial, I’ll show you How to Use Gaia Storage with Blockstack

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

How To Build Your First Blockchain App on Blockstack

Robert Chen — Thu, 16 May 2019 19:45:33 +0000

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

I was able to publish this on App.co in less than a week

After integrating Blockstack, you have the option to either send the unique username that a user creates from Blockstack to your own API and build the user object that way, or use Gaia Storage, Blockstack’s decentralized backend provider. You can also opt to have a combination of both, where private user information like phone numbers and addresses are encrypted and stored in Gaia Storage but public information like comments or posts are stored in a public API.

This blog post is meant to simplify and abstract as much as possible. If you would like deep dive video tutorials, check out Tech Rally on YouTube (this is where I learned about Blockstack).

For now, we’ll cover getting Blockstack Sign In/Sign Out authentication set up. Let’s get started!

1) Install Blockstack Browser

2) Create your Blockstack ID (be sure to save your Secret Recovery Key somewhere safe)
In your terminal:

npm init react-app blockstack-tutorial
cd blockstack-tutorial
npm install --save blockstack@19.0.0-alpha.2
npm install react-app-rewired --save-dev
mkdir src/utils
touch src/utils/constants.js
open src/utils/constants.js

If npm install gives you a problem, try yarn add:

yarn add blockstack@19.0.0-alpha.2
yarn add react-app-rewired --save-dev

4) constants.js:

import { AppConfig } from 'blockstack'
export const appConfig = new AppConfig(['store_write', 'publish_data'])

5) In your terminal:

touch config-overrides.js
open config-overrides.js

6) config-overrides.js:

7) In your terminal:

open package.json

8) package.json:

9) In your terminal:

open src/App.js

10) App.js:

11) In your terminal:

open src/index.js

12) index.js:

13) In your terminal:

open src/App.css

14) App.css:

15) In your terminal:

npm start

yarn start

That’s it! Simple, but powerful —you are now connected to Blockstack.

In part two of this series, I’ll show you How to Connect Blockstack to your Backend API

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

Launch a Rails database in under 5 minutes

Robert Chen — Thu, 03 Jan 2019 20:57:23 +0000

A step by step tutorial

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

1) In your terminal: rails new APP-NAME --api

Or add this flag if you have Postgres installed and would like to use it: rails new APP-NAME --database=postgresql —-api
If you choose to use Postgres, remember to turn Postgres on when you launch your server.

2) In your terminal: cd APP-NAME && open Gemfile, then find and uncomment gem 'rack-cors', then add this line of code on the next line: gem 'active_model_serializers'

3) In your terminal: bundle && open config/initializers/cors.rb, then uncomment the following code and use * for origins:

4) In your terminal: open config/routes.rb, then add namespacing and resources:

# resources :posts, only: [:index, :create] is an example for when you have more models.

5) In your terminal: rails g model User username password_digest

Replace User with the model that you need.
Replace username with the attributes that you need.
We’re going to keep User as our example model going forward.

6) In your terminal: open app/models/user.rb, then add your relationships:

7) In your terminal: rails g controller api/v1/Users

Replace Users with the controller that you need.

8) In your terminal: open app/controllers/api/v1/users_controller.rb, then add methods:

9) In your terminal: rails g serializer User

Replace User with the model that you need.

10) In your terminal: open app/serializers/user_serializer.rb, then add attributes and relationships to other models:

Uncomment has_many :posts after creating your other model(s).

11) In your terminal: rails db:create && rails db:migrate

12) Test this by running rails c in your terminal then User.create(username: 'bob')

Ctrl + D to quit.

13) Launch! Type rails s in your terminal then go to [http://localhost:3000/api/v1/users](http://localhost:3000/api/v1/users) in your browser.

Ctrl + C to quit.
If not localhost:3000, your terminal will tell you:

// rails s
=> Booting Puma
=> Rails 5.2.2 application starting in development
=> Run `rails server -h` for more startup options
Puma starting in single mode…
* Version 3.12.0 (ruby 2.3.4-p301), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000

Repeat steps 4–10 for your other models and that’s it, you’re done (with your backend).

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com

Introduction to XCode for iOS

Robert Chen — Mon, 03 Dec 2018 00:39:46 +0000

A step by step tutorial

Photo by Yura Fresh on Unsplash

Always wanted to build an app? Didn’t know how? Me neither, until I took some online courses and found that it’s not that hard (to build a simple app). You can too, follow this guide and get familiarized with XCode.

I’m currently a Flatiron School student in their Immersive Web Dev Program and learning Swift on Sundays with App Brewery through Udemy so I know very well that learning how to develop can be intimidating. In this post, there won’t be any coding. We’ll focus on getting you set up and familiar with the numerous XCode panels.

Let’s get you situated!

Install the latest version of XCode here .
You will need at least the second to latest version of macOS to use the latest version of XCode. Update your Mac here if necessary.

To avoid confusion

The following steps are demonstrated with XCode 10 running on macOS Mojave. Depending on how far into the future you are, the interface may or may not look exactly the same.

Rules

Anything circled in green means click.
Two green circles means double click.
Green arrow means click and drag.
Anything circled in yellow means take a look.
Description text always refers to the image above.

Create new project

For ‘Organization Name’ you could just put your name.

For ‘Organization Identifier’ Apple wants a reverse domain identifier. That’s having ‘com.’ in the front instead of at the end like how we’re used to seeing it.

You want to choose Swift because C++ is getting phased out for iOS development.

We’re not doing any tests for the purposes of this app so uncheck all the boxes.

Pause. Let’s take a look at some stuff.

The files that end with ‘.swift’ are your code files.

The files that end with ‘.storyboard’ are your design files.

The ‘Assets.xcassets’ folder contains all your media files.

You can change the device that’s shown in your preview which directly affects the dimensions of the app that you build. I changed it from iPhone 8 to iPhone XR, but you can choose any device and still be able to follow along just fine.

Let’s close the view panel because you want to give yourself as much space to work with as possible.

We’ll start designing your app now!

Choose the font that calls to you most.

Zoom out a little if you don’t see the whole device.

Recenter your label.

Reopen the view panel.

Choose your background color. I used the color pencil option with Apple’s pre-made color selection, but you can choose any color through any method that you want. Take a minute to click around and play with the color panel.

Let’s add an image

You will need various sizes of the same image for different devices, but there’s a great website called appicon.co that can take care of resizing images for you.

Type the image name to locate your image.

In the view panel, drag your image to be above your label so that it layers behind the label.

In the preview screen, drag your image to where your label is.

Now that we have a chalkboard behind your text, let’s change the text color to white.

Sometimes your image will be distorted by default (not in this case), you can change the behavior of your image through the ‘Content Mode’ attribute.

When you want very specific positions for your images or labels (provided by a client or design team), you can use the ruler panel to input the desired location.

Time out.

I know you want to go from 0 to 100, but that’s it for this post. Take some time to familiarize yourself with all the panels we went through. It’s a lot of panels to look at and remember but…

Congrats on taking your first step in becoming an iOS developer!