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.
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
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.
create-react-app scraping-demo cd scraping-demo…
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).
create-react-app google-translate-demo cd google-translate-demo npm i…
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.
By using Gaia Storage, the decentralized way of storing information:
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…
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’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;…
This will be strictly instructional, follow this step by step guide to quickly build your backend.
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.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
, …
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. …
Software Engineer