Skip to content

Instantly share code, notes, and snippets.

@JLarky
JLarky / index.ts
Created Feb 12, 2021
Pulumi: create AWS cognito user pool to use with AWS amplify including some lambda triggers with permissions and stuff for `lambdaConfig` to work
View index.ts
import * as pulumi from "@pulumi/pulumi";
import * as aws from "@pulumi/aws";
import * as awsx from "@pulumi/awsx";
import * as cloud from "@pulumi/cloud";
import type { CognitoUserPoolTriggerEvent } from "aws-lambda";
const config = new pulumi.Config();
const project = "my";
const stack = pulumi.getStack();
@JLarky
JLarky / README.md
Last active Feb 11, 2021
How to restore the great suspender tab urls: run this script, copy current url and paste it right back. Uses `npm install -g clipboard-cli` (irony isn't lost on me).
View README.md

This should work on any OS but I only tested linux and mac os. You have to have Deno and Node.js installed

npm install -g clipboard-cli

deno run --allow-run https://gist.githubusercontent.com/JLarky/0385d22305c86ed5ca05b254a1e902ac/raw/e39402436dc04fbd52f19d1642ea828ef102d540/clipboard.ts

Once the script is running each time that you copy chrome-extension://klbibkeccnjlkjkiokjodocebajanakg/suspended.html (for example chrome-extension://klbibkeccnjlkjkiokjodocebajanakg/suspended.html#ttl=%D0%92%D1%85%D0%BE%D0%B4%D1%8F%D1%89%D0%B8%D0%B5%20(186)%20-%20airelain%40gmail.com%20-%20Gmail&pos=0&uri=https://mail.google.com/mail/u/0/#inbox) URL into clipboard it will be replaced with original URL that you had suspended (you can see it in &uri=...).

Here in the video you can see that it's pretty easy to use:

@JLarky
JLarky / create_jwt_key.rb
Created Nov 6, 2020
Create JWT key with ruby
View create_jwt_key.rb
require 'jwt'
DEFAULT_LIFESPAN = 5*60
puts "Creating new key...\n\n"
rsa_private = OpenSSL::PKey::RSA.generate 2048
rsa_public = rsa_private.public_key
puts rsa_public
View useCallbackOnce.ts
import React from 'react';
function useCallbackOnce(callback: () => void) {
const once = React.useRef(false);
return React.useCallback(() => {
if (!once.current) {
once.current = true;
callback();
}
}, [callback]);
@JLarky
JLarky / LinkifyIt.tsx
Last active Sep 10, 2020
Example of automatically detecting links (http and email) in text and turning it into react components. Note I think linkifyjs detects less accurately than linkify-it and react-linkify is slightly over engineered and looked stale at the moment.
View LinkifyIt.tsx
import { Match } from 'linkify-it';
import React from 'react';
import { parseString } from '../vendor/linkify/linkify';
const decorateComponent = (match: Match, i: number) => (
<a
key={i}
href={match.url}
target="_blank"
@JLarky
JLarky / useEventsListener.ts
Last active Sep 5, 2020
use-event-listener for eventemitter3; unfortunately it has `any` for event arguments
View useEventsListener.ts
import EventEmitter from 'eventemitter3';
import React from 'react';
export function useEventsListener<T extends string>(
eventEmitter: EventEmitter,
eventsList: readonly T[],
eventsListener: (event: T, args: ...any[]) => void
) {
// deep compare array
// eslint-disable-next-line react-hooks/exhaustive-deps
@JLarky
JLarky / context.tsx
Created Aug 25, 2020
Ultimate example of react context hook with nice type-safe (TypeScript) wrappers and reduced boilerplate by using `ReturnType`
View context.tsx
import React from "react";
import { useImmer } from "use-immer";
function useProviderValue() {
const [moved, setMoved] = React.useState(false);
const [point, setPoint] = useImmer<{
x: number;
y: number;
}>({ x: 0, y: 0 }); // using immer to illustrate that you can easily derive setPoint type instead of writing types for Context manually
const value = React.useMemo(
@JLarky
JLarky / example.ts
Created Aug 11, 2020
Expose tailwind color palette to be able to access tailwind config from javascript/browser
View example.ts
import { theme } from './tailwind.static';
console.log(theme.extend.colors.gray[500]);
@JLarky
JLarky / progressRing.ts
Last active Aug 14, 2020
React component to show progress ring based on @twitter/CountdownCircle @twitter/ProgressCircle https://css-tricks.com/building-progress-ring-quickly/; see also https://github.com/kevinsqi/react-circular-progressbar
View progressRing.ts
const CharCount: React.FC<{
count: number;
warningLength: number;
maxLength: number;
}> = React.memo(({ count, warningLength, maxLength }) => {
const progress = Math.min(100, (count * 100) / maxLength);
return count > warningLength ? (
<ProgressRing
progress={progress}
View deno.nix
{ stdenv, fetchurl, unzip }:
# this is more stupid version of https://github.com/denoland/deno_install/blob/master/install.sh
# Run this to get last version:
# curl -sSf https://github.com/denoland/deno/releases | grep denoland/deno/releases/downloa | grep -e x86_64-apple-darwin -e x86_64-unknown-linux-gnu | head -2
# based on https://qiita.com/kimagure/items/de2a4ff45dd8fe8be4b1
stdenv.mkDerivation rec {
name = "deno-${version}";