mbeaudru

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    // "incremental": true,                         /* Enable incremental compilation */
    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */

mbeaudru

Github saved replies saves you time by storing markdown snippets and easily retrieve them from the menu bar.

I use them regularly to quickly inject a markdown table in my PR descriptions, use nice alert syntax or even specify conventional comment type

Create saved replies

Go to saved replies github settings page

mbeaudru

import React, { Component, PropTypes } from 'react';
import styled from 'styled-components';

class Checkbox extends Component {
  render() {
    return (
      <Styled
        onClick={() => this.props.onChange(!this.props.checked)}
      >
        <input

mbeaudru

Whether you're trying to give back to the open source community or collaborating on your own projects, knowing how to properly fork and generate pull requests is essential. Unfortunately, it's quite easy to make mistakes or not know what you should do when you're initially learning the process. I know that I certainly had considerable initial trouble with it, and I found a lot of the information on GitHub and around the internet to be rather piecemeal and incomplete - part of the process described here, another there, common hangups in a different place, and so on.

In an attempt to coallate this information for myself and others, this short tutorial is what I've found to be fairly standard procedure for creating a fork, doing your work, issuing a pull request, and merging that pull request back into the original project.

Creating a Fork

Just head over to the GitHub page and click the "Fork" button. It's just that simple. Once you've done that, you can use your favorite git client to clone your repo or j

mbeaudru

How to create minimal TypeScript project

• mkdir minimal-ts && cd minimal-ts
• yarn init --yes to init project and create a package.json
• yarn add typescript -D to add the tsc
• Add tsc script into the package.json
• yarn tsc --init to generate the tsconfig.json file
• Created index.ts file with an hello world arrow-function
• yarn tsc to generate the index.js transpiled file

mbeaudru

import { useReducer, useEffect } from 'react';
import Cookies from 'js-cookie';
import SpotifyWebApi from 'spotify-web-api-js';
import qs from 'query-string';

const INVALIDATE_TOKEN = 'INVALIDATE_TOKEN';
const USE_TOKEN = 'USE_TOKEN';
const SPOTIFY_ACCESS_TOKEN_COOKIE = 'spotify-access-token';

const CLEAR_URL_ON_TOKEN_VALID = true;

mbeaudru

window.__testCleanup = () => {
  const unregisterSW = () => {
    return navigator.serviceWorker.getRegistrations()
    .then((registrations) => {
      const unregisterPromise = registrations.map((registration) => {
        return registration.unregister();
      });
      return Promise.all(unregisterPromise);
    });
  };

mbeaudru

Yarn PnP identified pain-points

Webpack v4 only

pnp-webpack-plugin currently only supports webpack v4, so we have two options for projects (like the current storybook) to work with PnP:

• make a PR on the pnp-webpack-plugin to add support for webpack < v4
• update the projects relying on webpack < v4

.babelrc

mbeaudru

import React from "react";

function TodoItem({ todo, onClick }) {
  const { label } = todo;
  return <li onClick={onClick}>{label}</li>;
}

export default TodoItem;

mbeaudru

import React, { Component, Fragment } from "react";
import PropTypes from "prop-types";

class TodosController extends Component {
  state = {
    todos: [
      {
        id: 1,
        label: "First item"
      },