Learning Log

Making Web Things.

Page 2


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

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.

  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

video.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 →


Bombay Innovation Lingo

A few years ago, I went to a TedX talk at Studio X In Mumbai. One of the speakers was Vishal Gondal, a Tech Entrepreneur from the Gaming Industry. He had a brilliant take on making things happen in a delightfully dysfunctional city. His talk introduced Bombay’s innovation lingo.

I should probably mention that he disqualified ‘Jugaad’ as “an abused word’ right off the blocks. “Jugaad’ means slapping something together off the cuff. It captures the beautifully hotchpotch nature of most things in India. It would be fair to say it gets used a lot.

So, the top six to make the cut were…

  • KAAMCHALAU: The philosophy and failing fast and learning faster.

  • SETTING: Your Hookup. The connection that gets you through the door.

  • JHOL: The special sauce that makes it all work.

  • DHANDA: Business. What you do. Why you put out.

  • TOPI: To con someone. It literally means ‘cap’ or ‘hat’ so I guess a better...

Continue reading →


Flowcharts

Developing a web application usually involves having a great idea, finding someone to design the interface and then getting someone to code it.

Everything can be done by the same person, but usually a small development team consists of three people: The person with the idea and the money, a designer and a coder.

If you come up with a great idea for an app and you want a team to develop it then flowcharts help you communicate your idea effectively.

Flowcharts allow you to map out each choice a users can make when using your application. Visualising this process, and agreeing upon it, will save you enormous amounts of time.

More importantly flow charts are simple to understand.

Flow charts are simple to design:

  • Circles denote the start or end of a function,
  • Squares denote basic information
  • Diamonds are choices, and
  • Triangles split or merge information.

If your application has...

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 →


The Best People in Data Visualisation Today

I went to a talk by David McCandless about his work visualising data.

After the talk, my wife picked up a signed copy of his new book “Knowledge is Beautiful”. I asked him who the best people in data visualisation are today. I asked him to boil it down to the top names so this list is by no means exhaustive.

Nicholas Feltron @feltron

Georgia lupi @giorgialupi

Ben Fry @ben_fry

Edward Tufte @EdwardTufte

Alberto Cairo @albertocairo

Mike Bostok @mbostock

There is also David McCandless (@mccandelish). Doesn’t seem to have a blog on his website but he occasionally writes about data visualisation for the Guradian and on the book’s website: Information is Beautiful.

Continue reading →