Skip to content

Instantly share code, notes, and snippets.

import * as React from 'react';
const useIsFirstRender = (): boolean => {
const isFirst = React.useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
} else {
@gragland
gragland / use-optimistic-mutation-example.ts
Last active July 1, 2024 07:39
useOptimisticMutation for React Query. Optimistically update data in multiple locations with rollback on error.
import axios from 'axios'
import { useOptimisticMutation } from "./useOptimisticMutation.ts"
type Response = boolean
type Error = unknown
type MutationVariables = {itemId: string}
type Items = {id: string; name: string}[]
type Likes = {itemId: string}[]
type History = {type: string}[]
@Thisisjuke
Thisisjuke / ResourceDeletion.tsx
Last active September 25, 2023 08:52
ValidationPanel : a custom Component to handle form submission or action validation using Shadcn <Sheet />
import React from 'react'
import { Button } from '@/modules/design-system/primitives/Button'
import { deleteResourceById } from '@/modules/crud/queries/resource'
import { ValidationPanel } from '@/modules/design-system/components/SidePanel/SidePanel'
export interface ResourceDeletionProps {
resource: any
refetch: () => void
}
@garretmh
garretmh / lib.es5.d.ts
Last active September 4, 2023 17:32
Proposed JSON type definition update
/** A parsed JSON value. */
export type json =
| string
| number
| boolean
| null
| json[]
| { [key: string]: json };
/** A JSON stringify-able value. */
@jacob-ebey
jacob-ebey / image.ts
Last active September 18, 2024 19:12
Remix Image Component
import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";
@codingwithchris
codingwithchris / KEYSTONE-JS-ACCESS-CONTROL.MD
Last active March 16, 2022 09:25
Unpacking Keystone JS Access Control (a security-focused perspective)

Access Control (Creating a Secure and Trusted Application)

Access control is critical to the security of our application. Beyond proper credential encryption, hashing, SALTing etc, access control is the next line of defense in protecting our users data.

Role Based Access Control Methodology (RBAC)

When giving elevated access to a User for a particular part of the system, we use a methodology called RBAC. This means that we create Roles where we assign permissions and apply filter policies. These Roles then get assigned to Users who have their CRUD access to Lists, Records, and Fields determined accordingly.

Our Access Control Philosophy

@sindresorhus
sindresorhus / esm-package.md
Last active November 20, 2024 12:29
Pure ESM package

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.
@ClickerMonkey
ClickerMonkey / types.ts
Last active August 8, 2024 00:25
Typescript Helper Types
// when T is any|unknown, Y is returned, otherwise N
type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;
// when T is never, Y is returned, otherwise N
type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;
// when T is a tuple, Y is returned, otherwise N
// valid tuples = [string], [string, boolean],
// invalid tuples = [], string[], (string | number)[]
@swalkinshaw
swalkinshaw / tutorial.md
Last active November 13, 2023 08:40
Designing a GraphQL API
@b-barry
b-barry / InstallMissingModules.js
Created November 29, 2016 07:37 — forked from Hendrixer/InstallMissingModules.js
list and install npm packages before webpack build
const thenify = require('thenify')
const webpack = require('webpack')
const MemoryFS = require('memory-fs')
const validateNpmPackageName = require('validate-npm-package-name')
class InstallMissingModules {
constructor(options) {
this.options = options
}