Work Log

Building web apps that change how people behave

Page 2


Given the amount of advertising we are exposed to on a daily basis, most people now instinctively resist anything that feels like marketing.

People do not like being sold to.

In our hyper-connected social world, most people now hear about interesting ideas from each other. One way to sidestep the growing resistance to marketing is by finding ways to get people to talk to each other about your business.

Word of mouth is ultimately the most effective and most desirable form of marketing for any business.


My first experience designing a campaign based on helping people talk to each other was for a cafe in 2014.

We had a tiny amount of money to play with and just over a month to prepare.

The first step was to design a website. This was going to be the first glimpse of our business out in the world. We needed something to direct people to when we talked...

Continue reading →

Immutable Arrays

Copy an array…

clone = array => [...array]

Add something to the end of an array…

push = array => [...array, thing]

Remove the last item in an array…

pop = array => array.slice(0,1)

…or the first item…

shift = array => array.slice(1)

or an item at a specific index…

delete = i => array => [...array.slice(0,i), ...array.slice(i+1)]

If you are unsure whether a method mutates or not then checkout

Thank you Luke Jackson.

View →

Switching Between Staging and Production Firebase Deploys In A Create-React-App

When building web applications on firebase, it is always a good idea to push the final application to the brand new firebase project.

Go into your firebase console and setup a new firebase project. Explicitly name this project something-something-PRODUCTION so that there is never any confusion between your original project and this new production one.

Your original project becomes your staging server. A safe place for you to try out new features and test things before you push the changes to your production server.

Your production server is the one you connect your domain to and share with the world.

You can flip between the two by connecting both firebase projects to your web application.

In the command line navigate into your project and type:

firebase use --add

The command line will ask you which project you want to connect to, scroll through the available projects till you...

Continue reading →

Things To Learn Before Redux

With React’s new context API you can go a long way with a plain old react app before things become tedious. I encourage you to learn how to use the new context API before you reach for redux.

I also have tremendous respect for component setState. Learn how to use it before you start with redux. Did you know setState takes a callback? Did you know you can pass setState an updater function? Did you know that you can declare state changes outside of a component?

Using Redux before you understand how to use higher order components can also be a little confusing. Before you start using redux understand higher order components well enough to know when it’s better to use a render prop.

If you’re comfortable with context, you’ve mastered setState batching and you know what a prop-namespace-clash is, and you are still finding you app hard to manage then you are going to love redux.


Continue reading →

React Component Defaults

I’m giving up stateless functional components for a while.

They’re super nice but they’re not worth the refactor when you need a lifecycle method.

You could use recompose, which is also super nice, but completely avoidable.

Sticking to Class Components means I won’t need Recompose or a refactor.

If I’m going with Class Components then I might as well go with Pure Class Components.

React.PureComponent stops components from needlessly re-rendering. PureComponent is not something you use on a special occasion, it’s a sensible default.

The only reason I’d need to use a regular class component is when I want the component to re-render when a nested prop or value in state changes.

Then it’s back to React.Component and a shouldComponentUpdate(). A regular component without a shouldComponentUpdate method is now a red flag for me.

I use Pawel’s amazing snippet generator to create my new...

Continue reading →

Typechecking Non-React Code

When you build a component in React you have the option to explicitly declare the type of props that it can, or must, accept by using the prop-types library.

This may seem like pointless extra work when you’re starting out, but when you begin working with other people declaring your props is a fantastic way to communicate how a component can be used and what it needs to work.

What you probably didn’t know is that Typechecking also make your code run faster. The V8 engine in chrome has something called Ignition, which is an interpreter. If your code consistently runs without type errors then V8 will skip the interpretation process and jump straight to turbo. Break the rules once and all your code will need to be interpreted from that point onwards. Strongly typed code runs in the fast lane.

The ‘prop-types’ library works for react code but it doesn’t work with all the non-react...

Continue reading →

Hot Modules In Create React App

Create React App automatically reloads css style changes but not other code changes.

Adding hot modules to a create-react-app lets you change source code in your app and see the changes without the app reloading.

Below the ReactDOM.render function in src/index.js add the following snippet:

if ( {"./App", () => {
    const NextApp = require("./App").default;

That’s it.

Go to your browser, update some source code and the changes will appear immediately.

Unfortunately, your app will lose internal state with any changes. I haven’t figured out a way to maintain state without ejecting or rewiring the app. To rewire you app checkout Dave Ceddia’s article on the topic.

If you want follow the approach above but you have a component in the index file (like a Routes...

Continue reading →

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 →

Learning Log

Kent C. Dodds tweeted about someone’s learning log today. What a neat idea. Blogs can be a lot of work. A log sounds much more manageable.

I had a look at said log and it was intense. There is no way I could keep something like that up. I’d be logging full time.

Hello Code, a software duo from Australia, has these beautiful monthly blog posts where they sum up key metrics from each of their projects. Visitors, signups, profit, the important essentials without all the fluff.

Applying the Hello Code approach to a learning log might work:

How many hours have you spent coding?

  • 2126 in total since 2015

I calculate this by using rescue time. Rescue time is an app that keeps rack of what apps you use and what websites you visit. Whenever its a coding specific app like an editor or a website like Github, it logs that time and time spent coding. Not perfect but effortless and good enough...

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 →