Josh Pitzalis

Compile-Time Clarity

Page 3


React setState takes an updater function

If you increment a count in state using a state update function 3 times then the final count will be 3.

state = {count: 0}

this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))
this.setState( previousState => ({count: previousState.count++}))

this.state.count = 3

If you increment state 3 times just using a regular object then the changes will get batched together. Something that often gets overlooked is that setState  is asynchronous. State may not change immediately on calling setState because react batches state changes for performance.

state = {count: 0}

this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})
this.setState( { count: this.state.count++})

this.state.count = 1

The rule is if you need to reference current state then use an updater function, if you...

Continue reading →


Getting Truffle to Work With React

Truffle is a handy tool that helps you compile and deploy smart contracts. I ran into a bunch of gotchas the first time I tried setting a project up with truffle and react, so I’m going to walk your through the basics.

Truffle has made it simple to build Dapps with different frontend frameworks by creating pre-configured boilerplates projects called truffle boxes. To create a react truffle box create an empty folder and navigate into it in the command line, then type truffle unbox react.

Before you can use your truffle box you have to compile and deploy the example smart contract that comes with the boilerplate. To do this, type truffle develop in the command line and this will start a truffle development console. Inside the console type compile, wait for it to finish compiling and then type migrate.

The ‘develop’ command will create a test blockchain for you to use while you are...

Continue reading →


React + Firestore : Deploying Your Application

firestore.png

  1. To get setup please refer to part 1 : React + Firestore : Get Setup In Five Steps.

  2. Please refer to part 2 for the basics of reading and writing to the database in React + Firestore: CRUD.


Initialise A Firebase Project

To be able to deploy a project to firebase hosting you will need to have firebase-tools installed on your computer. To do this open up your terminal and type npm install -g firebase-tools

When firebase-tools is finished installing, navigate to your the folder with the react project you want to deploy. Then type firebase init into the terminal.

You will be asked which firebase features you would like to include. We are going to use the example project in React + Firestore: CRUD](https://joshpitzalis.svbtle.com/crud) so we are going to select Firestore and Hosting. Use teh arrow keys to move up and down and then the space bar to select a feature. Press enter to...

Continue reading →


React + Firestore : Authentication

react_firebase.png

  1. To get setup please refer to part 1 : React + Firestore : Get Setup In Five Steps.

  2. Please refer to part 2 for the basics of reading and writing to the database in React + Firestore: CRUD.

  3. Please refer to part 3 for how to deploy your application in React + Firestore : Deploying Your Application.


Authentication Setup

  • To set up authentication in the firebase console go to the authentication section under DEVELOP in the left-hand pane (1), clicking on the ‘sign-in method’ tab (2), find the provider you want (3) and enabling it (4), before saving your settings (5).

auth.png

We’re going to use Google to sign in because you already have a google account and you’ve connected it by being logged into the firebase console.

Other 3rd party logins require setting up an app on the respective social platform and then entering some keys here. This is a bit of a detour so I recommend checking out...

Continue reading →


React + Firestore : CRUD

react_firebase.png

One of the biggest barriers to learning React used to be the overwhelming amount of tooling involved. Beginners were forced to make important decisions about things they don’t understand before they could create anything.

React solved this problem in 2016 by releasing something called Create React App. Now there is an official way to create single-page React applications with zero configuration. If you chose to use create-react-app then you don’t have to make any other decisions.

I believe firebase is create-react-app for the backend. It lets you start building full-stack applications without having to get lost in a wormhole of build tools and server-side boilerplate. Using only Firebase and React you can build and deploy a full-stack project set up in a weekend.

To get setup please refer to React + Firestore : Get Setup In Five Steps.


Read From The Firestone

Lets manually add...

Continue reading →


React + Firestore : Get Setup In Five Steps

Firebase and React Logos

One of the biggest barriers to learning React used to be the overwhelming amount of tooling involved. Beginners were forced to make important decisions about things they don’t understand before they could create anything.

React solved this problem in 2016 by releasing something called Create React App. Now there is an official way to create single-page React applications with zero configuration. If you chose to use create-react-app then you don’t have to make any other decisions.

I believe firebase is create-react-app for the backend. It lets you start building full-stack applications without having to get lost in a wormhole of build tools and server-side boilerplate. Using only Firebase and React you can have a full-stack project setup in minutes.

  • Install create-react-app from your terminal npm install -g create-react-app and then use it to set up a React starter project
    ...

Continue reading →


Choose A Text Editor That Is Easy To Learn And Stick To It.

In 2015, I read some great advice on the Recurse centre’s user guide:

Choose a text editor that is easy to learn and stick to it. If you’re not sure which one to choose, Sublime Text is powerful, intuitive, and available on Mac, Windows and Linux.

I picked Atom.

At the time, every single online tutorial I could find used Sublime so I switched for a while, thinking I made a mistake.

Atom had this cool new integration with Github that would highlight lines of code in different colours depending on whether or not you had committed changes yet.

I was sold.

But then Atom could be slow at times so I thought about switching back to Sublime.

Eventually I was spending more time trying pick the perfect set of tools than I was coding. It wasn’t just the time I spent trying things out, it was also all the time I wasted wondering if I made the right decision or not.

Avoid the mistake...

Continue reading →


Computer Shoulders

This November I’m learning how to surf.

Today was day one.

If I’ve learned anything today, it’s that surfing is fantastic for people who spends all day hunched over a computer screen.

It’s not the surfing; it’s all the paddling out to get to the waves. You lie down on your board, lift your chest up and work all those unused muscles behind your shoulders.

The session this morning was exciting. I didn’t know what to expect. I’ve never been on a surfboard before. The surf school taught us how to ‘pop-up’ onto the board.

Then I went back in the afternoon. Practiced everything I learned.

Then I went back again in the evening.

I had one long beautiful ride all the way into the beach, and I did it standing up. It was incredible.

I thought it was going to take me weeks to be able to catch a wave.

I’m super impressed with day one.

I will be spending 20 hours surfing this month...

Continue reading →


596 Hours Learning to Code

Total Days 365

Total Earned $6,675

I try and focus on one thing each year. First it was meditation, then it was swing dancing, one year I read a book a week, last year I tried to start a business a month.

One year ago today, I decided to learn how to code.

I set myself the challenge to make $10,000 dollars learning how to code in 365 days or less. I made $6,675 building websites and developing software this year.

I realise this is not very much money to make in one year.

On the other hand, I didn’t know what HTML was when I started and coding boot camps cost upward of $10,000 for the same experience.

In total, I spent 596 hours learning how to build web applications.

The learning came in bursts, it was not evenly spread through the year.

Screen Shot 2015-11-04 at 11.04.14.png

The huge spike in the summer came from being accepted into a coding boot camp in London called Founders and Coders.

All of this was...

Continue reading →


HTTP Basics

noun_20804_cc.png

HTTP is how computers talk to each other. It stands for Hyper Text Transfer Protocol, and is an agreed upon method that defines how computers transfer information between one another. Whenever you use a browser (like chrome or firefox) to view a website you are using the HTTP protocol.

This post will show you how to make the contents of one file (a simple.txt file) display inside a completely different file without having to reload the page.

1. First create a file named “name.txt”

Fill it with Lorem Ipsum and save it in a folder.

2. Set up an HTML file.

The easiest way to do this is to go to example.com and copy the source code. In the body, remove the contents of the paragraph tag and give it an id of ‘response’. Then save the file in the same folder as the name.txt file

<p id="response"></p>

3. Create a new HTTP object

Create a <script></script> tag at the bottom of the html...

Continue reading →