sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

lopezjurip

import React, { useReducer, useContext, Dispatch } from "react";
import "./styles.css";

// Local types, example: box, product, venue, etc
type MyItem = {
  id: number;
  name: string;
};

// Reducer types

Webreaper

# Docker compose to set up containers for all services you need:
# VPN
#   Sonarr, Radarr, Lidarr, Qbittorrent
# Non-VPN
#   Plex, get_iplayer
# Before running docker-compose, you should pre-create all of the following folders.
# Folders for Docker State:
#  /volume1/dockerdata.             - root where this docker-compose.yml should live
#  /volume1/dockerdata/plex         - Plex config and DB
#  /volume1/dockerdata/sonarr       - Sonarr config and DB

parties

bash notes

ffmpeg

• timelapse video

  # setpts multiplier: smaller is faster
  ffmpeg -i input.mp4 -filter:v "setpts=0.5*PTS" -an output.mp4

• compress

danieldietrich

THIS README IS OUTDATED AND UNMAINTAINED - PLEASE DON'T RELY ON THIS

The easiest way to bundle a simple TypeScript web application

Packaging JavaScript applications can be a bit overwhelming. The popular project uglifyjs does not support ES6, it is cumbersome to configure the allmighty Webpack, bundlers like Parcel and Microbundle still have bugs or do not compile to ESM bundles that work in a browser. It is hard to figure out the best way to bundle an application.

Here I give a small example, how we achieve the goal using the

• TypeScript compiler
• rollup.js bundler

RienNeVaPlus

/**
 * Easing functions
 *
 * https://gist.github.com/gre/1650294
 * http://easings.net
 */
// no easing, no acceleration
export function easeLinear(t){ return t }
// accelerating from zero velocity
export function easeInQuad(t){ return t*t }

croaky

import * as React from 'react'
// routing, etc.

import { Reset } from '~/ui/shared/Reset'

export class App extends React.Component {
  public render() {
    return (
      <div>
        <title>Dashboard</title>

bvaughn

Related discussion on bvaughn/react-window/issues/85.

Overview

The specific API feature this Gist is exploring is the itemData prop. This prop provides a way for a component to pass "contextual" list data to an item renderer without adding the overhead of using context. In most cases, a single value is passed (e.g. an array/list) like so:

function ComponentThatRendersAListOfItems({ itemsArray, ...rest }) {
  render() {
    // Pass items array to the item renderer component as itemData:
 return (

bvaughn

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.

bvaughn

This API was removed in React 17

---

Interaction tracing with React

React recently introduced an experimental profiler API. After discussing this API with several teams at Facebook, one common piece of feedback was that the performance information would be more useful if it could be associated with the events that caused the application to render (e.g. button click, XHR response). Tracing these events (or "interactions") would enable more powerful tooling to be built around the timing information, capable of answering questions like "What caused this really slow commit?" or "How long does it typically take for this interaction to update the DOM?".

With version 16.4.3, React added experimental support for this tracing by way of a new NPM package, scheduler. However the public API for this package is not yet finalized and will likely change with upcoming minor releases, so it should be used with caution.