Manuel Beaudru 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

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

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

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

	{
	"workbench.editor.customLabels.patterns": {
	"/app//page.tsx": "${dirname}/page.${extname}",
	"/app//layout.tsx": "${dirname}/layout.${extname}"
	},
	}

	{
	"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. */

	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;

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

	import React from "react";

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

	export default TodoItem;

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

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