pomber

const MINUTE = 60,
  HOUR = MINUTE * 60,
  DAY = HOUR * 24,
  YEAR = DAY * 365;

function getTimeAgo(date) {
  const secondsAgo = Math.round((+new Date() - date) / 1000);

  if (secondsAgo < MINUTE) {
    return secondsAgo + "s";

pomber

function Code() {
  const ref = React.useRef()
  React.useEffect(() => {
    const handler = e => {
      const selected = document.getSelection().toString().trim()
      ref.current.querySelectorAll("span:not(:has(*))").forEach(element => {
        if (element.textContent === selected) {
          element.classList.add("selected")
        } else {
          element.classList.remove("selected")

pomber

function Code() {
  const ref = React.useRef()
  React.useEffect(() => {
    const handler = e => {
      const selected = document.getSelection().toString().trim()
      ref.current.querySelectorAll("span:not(:has(*))").forEach(element => {
        if (element.textContent === selected) {
          element.classList.add("selected")
        } else {
          element.classList.remove("selected")

pomber

pomber

import { bundleMDX } from "mdx-bundler";
import { getMDXComponent } from "mdx-bundler/client";
import React from "react";

export async function getServerSideProps() {
  const mdxSource = `
# Hello
~~~js
console.log(1);
~~~`;

pomber

This MDX file

import { MyComponent } from "my-component"

<MyComponent foo={[1, 2, 3]} />

Generates this mdxJsxFlowElement node in the MDAST:

pomber

{
  "stuff": "...",
  "scripts": {
    "postinstall": "run-p install:api install:web",
    "install:api": "cd api && npm install",
    "install:web": "cd web && npm install",

    "start": "run-p start:api start:web",
    "start:api": "npm run start --prefix api",
    "start:web": "npm run start --prefix web",

pomber

function slowmo(rate = 10) {
  window._raf = window.requestAnimationFrame
  window.requestAnimationFrame = f => window._raf(t => f(t/rate))
  Date._now = Date.now
  Date.now = () => Date._now() / rate
  performance._now = performance.now
  performance.now = () => performance._now()/rate
}

slowmo()

pomber

function lazyWithPreload(factory) {
  const Component = React.lazy(factory);
  Component.preload = factory;
  return Component;
}

const StockChart = lazyWithPreload(() => import("./StockChart"));

// somewhere in your component 
...

pomber

function commitAllWork(fiber) {
  fiber.effects.forEach(f => {
    commitWork(f);
  });
  fiber.stateNode._rootContainerFiber = fiber;
  nextUnitOfWork = null;
  pendingCommit = null;
}

function commitWork(fiber) {