Skip to content

Instantly share code, notes, and snippets.

Avatar
🤦‍♂️
Coding

Zander Martineau mrmartineau

🤦‍♂️
Coding
View GitHub Profile
View useFetcherWithPromise.md

Remix's useFetcher doesn't return a Promise for any of its methods (like fetcher.submit()) because Remix doesn't want you to explicitly await anything so they can handle things like cancellation for you. Instead, they recommend adding a useEffect and performing whatever logic you need to after the fetcher is in a particular state.

I found using an effect to run some logic after a submission to be too indirect, and there seem to be plenty of cases where you want to submit a form and then perform some other work on the client (sometimes async, like requesting the user's permission for their location), and I'd rather just do that after a submission in the event handler rather than an effect.

So here's a proof of concept hook that wraps Remix's useFetcher and returns a version of submit that is a promise, and resolves with the data from the action:

function useFetcherWithPromise() {
  let resolveRef = useRef();
  let promiseRef = useRef();
@amerryma
amerryma / TestComponent-nock.test.tsx
Created May 19, 2022
Supabase Mocking (Regular Mocking vs API Nock)
View TestComponent-nock.test.tsx
import '@testing-library/jest-dom'
import { render } from '@testing-library/react'
import { renderHook } from '@testing-library/react-hooks'
import nock from 'nock'
import TestComponent from './TestComponent'
const mockResultData = [
{
@zats
zats / REMAP_M1_KEYS.MD
Last active Jun 13, 2022
Apple M1 MacBook Do Not Disturb Key remapping
View REMAP_M1_KEYS.MD

Following is a sample of LaungAgent that remaps do not disturb key to Siri (I am using Type to Siri)

This is a lightweight solution not relying on external apps.

Setting up

  1. Create ~/Library/LaunchAgents/com.local.KeyRemapping.plist
  2. Edit it to have following content
View esm-package.md

Pure ESM package

The package linked to from 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.
View storybook-webpack5-experimental.md

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

@prologic
prologic / LearnGoIn5mins.md
Last active Aug 10, 2022
Learn Go in ~5mins
View LearnGoIn5mins.md
@ityonemo
ityonemo / test.md
Last active Aug 10, 2022
Zig in 30 minutes
View test.md

A half-hour to learn Zig

This is inspired by https://fasterthanli.me/blog/2020/a-half-hour-to-learn-rust/

Basics

the command zig run my_code.zig will compile and immediately run your Zig program. Each of these cells contains a zig program that you can try to run (some of them contain compile-time errors that you can comment out to play with)

@JamieCurnow
JamieCurnow / firestore.ts
Last active Aug 9, 2022
Using Firestore with Typescript
View firestore.ts
/**
* This Gist is part of a medium article - read here:
* https://jamiecurnow.medium.com/using-firestore-with-typescript-65bd2a602945
*/
// import firstore (obviously)
import { firestore } from "firebase-admin"
// Import or define your types
// import { YourType } from '~/@types'
View react-router-transition-api.md

Route Transition API

Definitions

The goal of the route transition API is to enable suspense-like transition in React Router without using Suspense (much like v1).

On location changes, React Router will continue to send down the old location, activating pending hooks for loading states and optimistic UI, and wait for your Route's preloading hooks to resolve before sending down the new location and updating your app.

This enables you to declare data dependencies on your routes, allowing your route elements to expect data and not need to manage their own loading states.

@Jack-Works
Jack-Works / 2018.js
Last active Jun 15, 2022
cRAzY eSnEXt (*all* proposals mixed in)
View 2018.js
#! Aaaaaaaaaaa this is JS!!!
// https://github.com/tc39/proposal-hashbang
// This file is mixing all new syntaxes in the proposal in one file without considering syntax conflict or correct runtime semantics
// Enjoy!!!
// Created at Nov 23, 2018
for await(const x of (new A // https://github.com/tc39/proposal-pipeline-operator
|> do { // https://github.com/tc39/proposal-do-expressions
case(?) { // https://github.com/tc39/proposal-pattern-matching
when {val}: class {