Josh Pitzalis

Making the Web Stuffs

Page 3

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 →

Technical SEO for Developers


SEO stands for search engine optimization. At its best, SEO is about developing a better user experience and providing useful, compelling content. The industry may not be perfect, but this post will show what you can do to make it better.

Search engine optimization began when a group of geeks figured out how search engines work and tried to reverse engineer the technology. As a result, the industry has a bad reputation. Too many people think the best way to market their website is to game search engines.

There is also a good side to SEO. Much of what search engines do nowadays wouldn’t be possible without it. A good search engine optimizer will focus on improving the end user experience. Things like making sure a site loads as fast as possible, fixing broken links and make sure people can find the website with the keywords that people actually use when they search for it.

There are...

Continue reading →

Everything I Know About Designing Interfaces

Till now this was just a disconnected collection of notes, bookmarks, articles and general principles. They would float around in the back of my mind every time I worked on a project. I am putting this together so that I can consolidate and share what I know.

There will be no examples of my work. I am not going to pretend I was doing this stuff all along. This is more like the framework I would like to follow for my next design project.

Here goes…


Gather all your bits before you start.

Bits are forces that shape projects.

Most bits are usually concerns. Jobs to do. Problems to avoid.

Other bits are your competition.

Some bits are just related websites. Websites that people use when they use yours (like trip advisor if you run a hostel).

When redesigning a website the old website will have a bunch of bits. The layout of the interface, the colour palette, the logo, these...

Continue reading →

How To Stop Reading Slowly

This post outlines how I doubled my reading speed in less than a month.
Every book I read in preparation for this project focused on the same three points:

  • Increase the speed that your eye travels across the page,
  • Decrease the number of time it fixates on each line and
  • Stop vocalising what you read in your head.

You will need a book, a metronome (just google for one online), a timer, a pen and some paper.

Start with Your Baseline

Count the number of words on five lines of text. Divide the number by five for an average number of words per line. Read for exactly one minute. Count the number of lines and multiply this by the average number of words per line. This is your current reading speed.

The speed reading protocol I followed lasted ten minutes. It’s taken from Tim Ferriss’ blog and it is free for everyone to read here.

  • 2 min at 1 line per second (which means setting...

Continue reading →

When Pandas Attack

Ankur is a music producer. The Guardian described his music as ‘Downtempo music makes for a welcome break from manic city life’. He is putting the finishing touches on his first album.

He has no plans for the release. I wanted to help. I am no marketing expert, but any plan is better than no plan.

We had two weeks and no money.

We started with an idea for a sticker that people could use to cover the apple logo onto their MacBooks. Something we could give people to say thank you for helping with the launch.

The idea was to narrow in on 100 people we knew and ask them to sign up to our Thunderclap page. Thunderclap is an online platform that works much like Kickstarter. Instead of supporting projects with money you donate your social influence.

We had no logo for the sticker. No album cover. No write up for the Thunderclap page. Ankur still hadn’t finished his album.

I started...

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 →


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 →