aweary

import React from "react";
import useMutableReducer from "./useMutableReducer";

const reducer = (draft, action, state) => {
  switch (action) {
    case "increment":
      draft.count++;
      break;
    case "decrement":
      draft.count--;

ryanflorence

meta
title Mutations with Actions and Form | Remix

import { Link } from "react-router-dom";

Mutations with Actions and <Form>

Data mutations in Remix are built on top of two fundamental web APIs: `` and HTTP. We then use progressive enhancement to enable optimistic UI, loading indicators, and validation feedback--but the programming model is still built on HTML forms.

ryanflorence

/**
 * The Anatomy of a Remix Route
 */
import { parseFormBody, json, redirect } from "@remix-run/data";
import {
  Form,
  useRouteData,
  usePendingFormSubmit,
  preload,
} from "@remix-run/react";

ryanflorence

const path = require("path");
const express = require("express");
const compression = require("compression");
const morgan = require("morgan");
const { createRequestHandler } = require("@remix-run/express");

////////////////////////////////////////////////////////////////////////////////
let app = express();

app.use(compression());

ryanflorence

Turning Off Github Issues

My friend Michael Jackson turned off github issues on one of his smaller projects. It got me thinking...

Maintainers getting burned out is a problem. Not just for the users of a project but the mental health of the maintainer. It's a big deal for both parties. Consumers want great tools, maintainers want to create them, but maintainers don't want to be L1 tech support, that's why they

kentcdodds

The blog post has been written: https://kentcdodds.com/blog/typescript-function-syntaxes

TypeScript Function Syntaxes

I'm trying to create examples of all the different ways to write functions and function type definitions in TypeScript.

One requirement is these examples must work with strict mode (noImplicitAny, etc) enabled.

If I'm missing anything, please add comments below with examples. I'll eventually put this into a blog post.

kentcdodds

// src/count-context.js
import React from 'react'

function countReducer(count, action) {
  const {step = 1} = action
  switch (action.type) {
    case 'INCREMENT': {
      return count + step
    }
    default: {

kentcdodds

Code Coverage

Code coverage is accomplished with Jest thanks to babel-plugin-istanbul. It transforms your code to "instrument" it for coverage. When your tests are finished, Jest reads the coverage data to generate the coverage report.

Reviewing code that has been instrumented for coverage can help understanding how coverage works and how to interpret coverage reports.

getify

function logger(strings,...values) {
   var str = "";
   for (let i = 0; i < strings.length; i++) {
      if (i > 0) {
         if (values[i-1] && typeof values[i-1] == "object") {
            if (values[i-1] instanceof Error) {
               if (values[i-1].stack) {
                  str += values[i-1].stack;
                  continue;
               }

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };