Skip to content

Instantly share code, notes, and snippets.

@sladg
sladg / Autocomplete.tsx
Last active September 9, 2024 07:58
FloatingUI - codesandbox copy
import "./styles.css";
import { forwardRef, useRef, useState } from "react";
import {
autoUpdate,
size,
flip,
useId,
useDismiss,
useFloating,
useInteractions,
// PS. Tailwind classes used for wrapper.
import { FC, useEffect, useState } from 'react'
import { FieldContainer } from '@keystone-ui/fields'
import { Field } from '@keystone-6/fields-document/views'
enum EditorState {
Loading,
Ready,
}
@sladg
sladg / useReptchaEnterpise.ts
Last active May 31, 2024 17:48
No-dependency implementation of Google's Recaptcha Enterprise.
<!--
// inside _app.tsx
import Script from 'next/script';
// inside custom App component.
<Script src="https://www.google.com/recaptcha/enterprise.js?render=explicit" />
-->
import { useEffect, useState } from 'react';
@sladg
sladg / next-fs-patcher.js
Created November 20, 2023 14:54
Code to put on top of `server.js` to alter behaviour of Next's internal caching
const fs = require('fs')
const path = require('path')
const { patchFs } = require('@aleung/fs-monkey')
const resolveToTmp = (pathLike) => {
const isCacheDir = pathLike.includes('.next/cache')
if (!isCacheDir) return pathLike
const endPath = pathLike.split('.next/cache/')[1]
console.log('patcher.js: resolveToTmp', endPath)
@sladg
sladg / AmazingDiv.tsx
Created July 27, 2022 14:12
Div wrapper with improved functions for mobile and desktop
import React, { PropsWithChildren, useEffect, useRef, CSSProperties } from 'react'
import { logger } from 'utils/logger'
export type CustomMouseEvent = React.MouseEvent<HTMLDivElement, MouseEvent>
export type CustomTouchEvent = React.TouchEvent<HTMLDivElement>
const MOUSE_MOVE_DELTA = 20
const TOUCH_MOVE_DELTA = 30
const HOLD_TRESHOLD = 500
const DUPLICATE_TRESHOLD = 80
@sladg
sladg / generate-prisma-stack.sh
Last active June 1, 2023 21:50
Generate Prisma layer for Lambda functions in AWS. Tested on Linux and MacOS with Postgres as target.
# 1 - generate node_modules layer,
# 2 - reference layer in CDK code,
# 3 - profit.
#!/bin/sh
set -e
LAMBDA_FOLDER=nodejs
PRISMA_CLI_BINARY_TARGETS=rhel-openssl-1.0.x
@sladg
sladg / Shopify GTM integration
Created March 29, 2023 10:08
Free way how to connect your GTM onto Shopify without additional plugins or apps.
// use "{{ 'analytics-head.js' | asset_url | script_tag }}" inside your liquid files. Namely `theme.liquid`.
var layerName = 'customDataLayer'
var gtmId = 'GTM-XXXXXX'
// ------------------------------
// Load GTM in head, initialize dataLayer.
;(function (w, d, s, l, i) {
console.log('Initializing GTM ...')
w[l] = w[l] || []
@sladg
sladg / PotreeConverter from source
Last active February 26, 2023 22:26
Build PotreeConverter via Conda. Compatible with Linux (use fork for MacOS)
# meta.yaml (use conda build ./path-to-directory-with-this-file
package:
name: potreeconverter
version: 2.1.1
source:
git_url: https://github.com/potree/PotreeConverter.git
git_rev: 2.1.1
@sladg
sladg / CloudCompare from source
Created February 26, 2023 22:07
Build CloudCompare with Conda (Qt5, GDAL, PDAL support). Compiles from source, CLI works.
# meta.yaml (use conda build ./path-to-directory-with-this-file
package:
name: cloudcompare
version: v2.12.4
source:
git_url: https://github.com/CloudCompare/CloudCompare.git
git_rev: v2.12.4
build:
@sladg
sladg / useScroll.ts
Created July 27, 2022 14:03
Simple util function for handling scrolls in react-virtual
import { MutableRefObject, useCallback, useRef } from 'react'
interface UseScrollToProps {
parentRef: MutableRefObject<HTMLDivElement>
}
// https://gist.github.com/gre/1650294
const easeInOutQuint = t => {
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t
}