Josh Pitzalis

Freelance Web Developer

Read this first

Reducing Food Miles

The Blockchain for Social Impact Coalition is running a 6-week competition to ideate and prototype blockchain-based solutions to global social and environmental challenges.

Our idea is to build a web application that helps reduce the distance food needs to travel before it can be consumed.

There will be a form to add producers to the system, a map to search for local producers you can subscribe to, and a dashboard that lets you see your current subscriptions and past payments.

For consumers, the app lets you buy a monthly subscription to locally grown produce.

For producers, the app provides a predictable income throughout the year. The app calculates the minimum number of monthly subscribers needed to make the operation worthwhile. A consumer must pay for two months in advance to subscribe and the app then holds this payment in escrow till the minimum number of subscribers is met

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

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 →


Technical SEO for Developers

seo.png

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 →


Now I am…

  • Working on an app to help people put their money where their mouth is. It’s called Realsies.
  • Recording a Skillshare course on React + Firebase.
  • Building the next version of Ezether: A peer-to-peer Etherium Exchange.
  • Available from Jan 5th 2017 onwards.



Past projects…

  1. Realsies: An app to help people put their money where their mouth is.
  2. Tamuro: An audio chat application to talk about things that interest you with two random strangers.
  3. A job board for an NGO in the states.
  4. Ezether: A peer-to-peer Etherium Exchange.
  5. Prolifiko: A personal writing coach web app.
  6. Temple Tree: An online store for a tiger reserve.
  7. Beeminder Redesign: A productivity app that charges you money if you don’t get things done.
  8. Sewing New Futures: An online clothing store that employs and empowers women in forced prostitution.
  9. Treehouse Clothing: An online t-shirt store.
  10. Vape Empire: An online store

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…

Collect

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 →


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 | Case Study

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 →