Learning Log

Making Web Things.

Read this first

A Basic Smart Contract

pragma solidity ^0.4.24
contract Campaign {

    address public owner;
    uint public deadline;
    uint public goal;
    uint public fundsRaised;
    bool public refundsSent;

    event LogContribution(address sender, uint amount);
    event LogRefundsSent(address funder, uint amount);
    event LogWithdrawal(address beneficiary, uint amount);

    struct FunderStruct {
        address funder;
        uint amount;
    }

    FunderStruct[] public funderStructs;

    constructor ( uint _duration, uint _goal) public {
        owner = msg.sender;
        deadline = block.number + _duration;
        goal = _goal;
    }

    function isSuccess() public constant returns(bool isIndeed) {
        return (fundsRaised >= goal);
    }

    function hasFailed() public constant returns(bool hasIndeed) {
        return (fundsRaised < goal && block.number > deadline );
    }

    function
...

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 doesitmutate.xyz

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 →


I Recommend…

  • Workflowy for organising stuff.
  • Basecamp for organising stuff in teams.
  • Beeminder for sticking to habits and commitments.
  • Bonsai for invoicing and payments .
  • Clickminded as the best SEO course ever.
  • TinyJPG for image compression.
  • Monochrome palette builder.
  • The Email Game once a day for staying on top of your inbox.
  • Ryan Holiday’s Newsletter for fantastic book recommendations each month.

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.

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 and 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 its back to React.Component and a shouldComponentUpdate(). A regular component without a shouldComponentUpdate method is now a red flag for me.

I used [Pawel’s amzong snippet...

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 (module.hot) {
  module.hot.accept("./App", () => {
    const NextApp = require("./App").default;
    ReactDOM.render(
      <NextApp/>,
      document.getElementById('root')
    );
  });
}

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 →