Jacob Groß kurtextrem

`assert()` (sometimes called `invariant()`)

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

Profile	download (kb/s)	upload (kb/s)	latency (ms)
Native	0	0	0
GPRS	50	20	500
56K Dial-up	50	30	120
Mobile EDGE	240	200	840
2G Regular	250	50	300
2G Good	450	150	150
3G Slow	780	330	200

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production
- Create React App
- Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

Gradient shadow in pure CSS

HTML

<button>Let's Go !</button>

	// Step 1: Define the Branded Type
	type LowercaseString = string & { __brand: "LowercaseString" };

	// Step 2: Type Guard Function
	function toLowercaseString(s: string): LowercaseString {
	return s.toLowerCase() as LowercaseString;
	}

	// Step 3: Override Type Definitions
	type RemoveToLowerCase<T> = Omit<T, "toLowerCase">;

	<!DOCTYPE html>
	<head>
	<meta name="view-transition" content="same-origin">
	</head>
	<body>
	<style>
	h1 {
	view-transition-name: hero;
	}

	//
	// See: https://kentcdodds.com/blog/profile-a-react-app-for-performance#build-and-measure-the-production-app
	// See: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
	const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');

	module.exports = {
	webpack: (config, options) => {

	//
	// Use profiler-enabled React builds

	<?php

	require_once __DIR__.'/relative/path/to/PrettierPHPFixer/File';

	return PhpCsFixer\Config::create()
	->registerCustomFixers([
	(new PrettierPHPFixer()),
	])
	->setRules([
	'Prettier/php' => true,

	/**
	* Copyright 2018 Google Inc. All Rights Reserved.
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	* http://www.apache.org/licenses/LICENSE-2.0
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and

Jacob Groß kurtextrem

assert() (sometimes called invariant())

Profiling in production

Gradient shadow in pure CSS

HTML

`assert()` (sometimes called `invariant()`)