danReynolds

import 'package:flutter/material.dart';

class FState<T extends Widget> extends StatefulWidget {
  final T scoped;
  final Widget Function(T widget, void Function(VoidCallback)) Function()
      builder;

  const FState(this.scoped, this.builder, {super.key});

  @override

danReynolds

class ViewController<T> extends ComputableSubscriber<T> {
  ViewController({
    super.initialValue,
    super.broadcast,
  });

  T get model {
    return get();
  }
}

danReynolds

import { ZodTypeAny, z } from "zod";
import {
  DeploymentOptions,
  FunctionBuilder,
  https,
} from "firebase-functions/v1";
import { assert, validate } from "./validate.js";
import Logger from "./logger.js";

const logger = new Logger("Precheck");

danReynolds

extension ColorExtensions on Color {
  String toHex() =>
      '#${(value & 0xFFFFFF).toRadixString(16).padLeft(6, '0').toUpperCase()}';

  bool get isDark {
    return ThemeData.estimateBrightnessForColor(this) == Brightness.dark;
  }

  Color darken([int percent = 10]) {
    assert(1 <= percent && percent <= 100);

danReynolds

Let's examine how the Apollo cache layers optimistic data, primarily from the performTransaction API:

https://github.com/apollographql/apollo-client/blob/master/src/cache/inmemory/inMemoryCache.ts#L255

When executing a transaction like writing an optimistic mutation result, it will first call `addLayer` on its optimisticData.

This will create a new layer which as it is instantiated, calls the `perform` function that was passed to it. It stores a reference to the layer that instantiated it as its parent.

Perform is called with the newly instantiated layer. It sets both the data reference and optimisticData reference equal to the new layer instance, so that any changes to data or optimisticData that occur during the transaction are set onto the new layer and not its parent and not the root entity store.

danReynolds

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

danReynolds

## First update to a Component with useQuery

1. useBaseQuery

useBaseQuery is a React hook that sets up a QueryData object from which data is delivered from a query to the component. On first render, it memoizes
the options for the query, variables etc then calls execute on its internal QueryData object to start the process.

2. QueryData

`execute` receives the query parameters, variables etc from the useBaseQuery hook, and if not set up, sets up a watchQuery for the given query arguments in `initializeObservableQuery`.

danReynolds

# Types for Query Hooks:
 
Custom TS typings for GraphQL queries in `.graphql` files:
https://github.com/Shopify/graphql-tools-web/tree/master/packages/graphql-typescript-definitions
 
Benefit is that you get more robust typing of query usages, as well as automatic type inferencing vs explicit specification for `useQuery`, `useMutation` using their hooks extensions: https://github.com/Shopify/quilt/tree/master/packages/react-graphql. Adds some additional hooks like `createAsyncQuery` for a lazy-loaded query document.
 
Chose to use `.graphql` files not co-located with components.
 
# Dynamic fixtures

danReynolds

# Moving from Ava to Jest

---

## Pros and Cons

Benefits:

- Locally it has sped up tests from about 40-50 seconds for Ava, to 8-10 for jest
- On Travis it has cut test runs down about 9-10 minutes

danReynolds

Shortcuts

• Move pane left: ctrl+b {
• Move pane right: ctrl+b }
• Toggle pane full screen: ctrl+b z
• Kill session: ctrl+b :kill-session
• new window: ctrl+b c
• switch windows: ctrl+b number
• synchronize panes: ctrl+b :setw synchronize-panes
• kill current pane: ctrl+b x