Git hooks are great for running tests before commit or push. After making new file pre-commit (or pre-push) inside .git/hooks/ folder and in it list of tasks. You have to make it executable with chmod +x pre-commit. By default, create-react-app executes test with --watch flag which will hang and prevent hook to finish. Disable it by adding --coverage flag to npm test command.

To run both unit and integration test prior to commit use:

#!/bin/sh

npm test -- --coverage && npm run e2e
RESULT=$?
[ $RESULT -ne 0 ] && exit 1
exit 0
`

Change your remote’s URL with the git remote set-url command.

git remote set-url origin git@github.com:USERNAME/REPOSITORY.git

Passing props to deeply nested components in react has been challenging, especially if the app is small and it does not justify having dedicated state management (redux). But as of react 16.3, there is a Context API that helps pass props to children without “props drilling”. First we need a context const MyContext = React.createContext() and create a provider component where state is going to live:

class MyProvider extends React.Component {
  state = {
    name: 'Dario'
  }
  render() {
    return (
      <MyContext.Provider value={this.state.name}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

Now we can wrap our app or parent component inside MyProvider cpomponent and evety child, regardless how deeply nested, could access value that was passed in MyProvider component.

class App extends React.Component {
  render() {
    return (
      <MyProvider>
        <div>
          <Header />
          <Menu />
        </div>
      </MyProvider>
    );
  }
}

Now we crate consumer - component which will use date from provider.

class Header extends React.Component {
  render() {
    return (
      <div>
        <MyContext.Consumer>
          {(context) => (
            <p>Name: {context.state.name}</p>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

Some packages after local instillation provide custom command (i.e. karma, browserify…) and some don’t. To list all available commands, navigate to node_modules/.bin and list directory contents files ls. All listed packaged can be executed from npm package.

To uninstall and remove from package.json and node_modules run npm rm <package>. Sometimes it can happened that node package in not needed anymore, and we might remove it from package.json. To make sure this package is also removed from node_modules as well, run npm prune

To uninstall global package, run npm rm -g <package>

To get list of installed packages in current folder runnpm ls or npm ls -g to list globally installed packages. 

To view only portion of the list, i.e. to display max depth of the dependency tree, there is a useful flag --depth=<number> . 
Whole command looks like this: npm ls --depth=0 or npm ls --depth=1 -g

Note: If some packages are not registered in npm registry, there will be marked with “extraneous”

After initiating new module (with npm init -y) you get default package.json file with mostly empty fields. Setting default values in global configuration can be useful time saver. 

npm set <key> <value> [-g|--global]

For example setting authors name:

npm set init-author-name "Dario Fuzinato" -g

Now every time new package.json is being initiated, author name will be set to it. Here is a list of properties you can change:

  • init-author-name
  • init-author-email
  • init-author-url
  • init-license
  • init-version

Note: All settings are stored in .npmrc file in your root folder ~/.npmrc

As I was making major changes to one project, I’ve -f pushed only to be rejected. After few stubborn attempts I cared to read the error message on console: remote: GitLab: You are not allowed to force push code to a protected branch on this project. Indeed, it seems that GitLab is protecting master branch from force pushing (as well as deleting it).

Protection can be disabled/added via Settings > Repository > Protected Branches

It seems that parsing JSON into Elm’s model is not that easy. For start, the package that comes with elm does not let you map more than 8 fields in an object (v 0.18), so they recommend using external package elm-decode-pipeline. My main issue was parsing optional nested model inside the main model. Parent model looks like this:

type alias Meetup =
    { name : String
    , time: String
    , url: Maybe String
    , coordinates : Maybe Coordinates
    ...
    }

and optional (Coordinates) model:

type alias Coordinates =
    { latitude : String
    , longitude : String 
    }

Decoding values

In order to properly decode optional values, we need a decoder for both Model and Coordinates model. They look as following:

meetupDecoder : Decode.Decoder Meetup
meetupDecoder =
    decode Meetup
        |> required "name" Decode.string
        |> required "time" Decode.string
        |> optional "url" (Decode.map Just Decode.string) Nothing
        |> optional "coordinates" (Decode.map Just coordinatesDecoder) Nothing
        ...
        
        
coordinatesDecoder : Decode.Decoder Coordinates
coordinatesDecoder =
    decode Coordinates
        |> required "latitude" Decode.string
        |> required "longitude" Decode.string
 

Retrieving coordinate values

When rendering, we need to retrieve keys for coordinate, but they are wrapped in Just elm wrapper. Parsing function would do the trick:

getMaybeCoord : Maybe Coordinates -> Coordinates
getMaybeCoord ma =
    case ma of
        Just a ->
            a

        Nothing ->
            Coordinates "" ""

and using it in view would look something like this 1:

div [] [ text ((getMaybeCoord meetup.coordinates).latitude ++ " " ++ (getMaybeCoord meetup.coordinates).latitude) ]
  1. Would be better to extract parsing of coordinated to another function, but for my demo it would suffice 

An identity function, (also called an identity relation or identity map ) is a function that always returns the same value that was used as its argument. In equations, the function is given by f(x) = x.