dan gaearon

## minification.md

      
              1 file
            
          
              83 forks
            
          
              75 comments
            
          
              372 stars
            
          
                gaearon
                / minification.md
            
            
              Last active
              March 4, 2024 12:45
            
              
                How to Set Up Minification
              
          
    In production, it is recommended to minify any JavaScript code that is included with your application. Minification can help your website load several times faster, especially as the size of your JavaScript source code grows.
Here's one way to set it up:

Install Node.js
Run npm init -y in your project folder (don't skip this step!)
Run npm install terser

Now, to minify a file called like_button.js, run in the terminal:

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>

## 16.3-blogpost-signatures.js
class Example extends React.Component<
  Props,
  State,
  Snapshot
> {
  static getDerivedStateFromProps(
    nextProps: Props,
    prevState: State
  ): $Shape<State> | null {
    // ...

## reduce-store-time-travel.js
/**
 * Stores are just seed + reduce function.
 * Notice they are plain objects and don't own the state.
 */
const countUpStore = {
  seed: {
    counter: 0
  },

  reduce(state, action) {

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>

## quiz.md

      
              1 file
            
          
              7 forks
            
          
              14 comments
            
          
              47 stars
            
          
                gaearon
                / quiz.md
            
            
              Last active
              January 11, 2024 16:56
            
          
    A top-level App component returns <Button /> from its render() method.


What is the relationship between <Button /> and this in that Button’s render()?


Does rendering <Button><Icon /></Button> guarantee that an Icon mounts?


Can the App change anything in the Button output? What and how?


## snake.html
<div id="canvas"></div>
<style>
#canvas {
  width: 500px;
  height: 300px;
  border: 5px solid black;
  position: relative;
  box-sizing: content-box;
}

## sroll_on_drag.js
  configureDragDrop(registerType) {
    var imageThreshold = Math.max(120, window.innerHeight / 4),
        sectionThreshold = Math.max(140, window.innerHeight / 4),
        currentDY = 0,
        frame;

    function makeScrollingHandler(threshold) {
      function getScrollDY(clientY) {
        var speed;
        if (clientY < threshold) {

## minesweeper.html
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <div id="canvas"></div>
  <button id="restart">Restart</button>
  <script src="minesweeper.js"></script>
  <style>
    * {

## node_hot_reload.js
const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }
  }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute</title>
	</head>
	<body>

	<h2>Add React in One Minute</h2>
	<p>This page demonstrates using React with no build tooling.</p>
	class Example extends React.Component<
	Props,
	State,
	Snapshot
	> {
	static getDerivedStateFromProps(
	nextProps: Props,
	prevState: State
	): $Shape<State> \| null {
	// ...
	/**
	* Stores are just seed + reduce function.
	* Notice they are plain objects and don't own the state.
	*/
	const countUpStore = {
	seed: {
	counter: 0
	},

	reduce(state, action) {
	<div id="canvas"></div>
	<style>
	#canvas {
	width: 500px;
	height: 300px;
	border: 5px solid black;
	position: relative;
	box-sizing: content-box;
	}
	configureDragDrop(registerType) {
	var imageThreshold = Math.max(120, window.innerHeight / 4),
	sectionThreshold = Math.max(140, window.innerHeight / 4),
	currentDY = 0,
	frame;

	function makeScrollingHandler(threshold) {
	function getScrollDY(clientY) {
	var speed;
	if (clientY < threshold) {
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="canvas"></div>
	<button id="restart">Restart</button>
	<script src="minesweeper.js"></script>
	<style>
	* {
	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}