Skip to content

Instantly share code, notes, and snippets.

View mwarger's full-sized avatar
😎
coooode

Mat Warger mwarger

😎
coooode
View GitHub Profile
@KristofferEriksson
KristofferEriksson / useGesture.ts
Created February 7, 2024 10:27
A custom React Typescript hook for advanced touch gestures in UI
import { useEffect, useRef } from "react";
type GestureType =
| "swipeUp"
| "swipeDown"
| "swipeLeft"
| "swipeRight"
| "tap"
| "pinch"
| "zoom";
@wiseman
wiseman / agent.py
Last active March 30, 2024 12:51
Langchain example: self-debugging
from io import StringIO
import sys
from typing import Dict, Optional
from langchain.agents import load_tools
from langchain.agents import initialize_agent
from langchain.agents.tools import Tool
from langchain.llms import OpenAI
@g-todorov
g-todorov / ChildComponent.tsx
Created December 16, 2022 08:28
xstate-typed-children-machines
import React from "react";
import { Text } from "react-native";
import { useActor } from "@xstate/react";
import { ChildMachineActor } from "../machines/childMachine";
interface Props {
actor: ChildMachineActor;
}
export function ChildComponent({ actor }: Props) {
@martin-fv
martin-fv / PostList.stories.tsx
Last active April 5, 2024 19:41
Storybook mocking and Supertest with tRPC v10
import { Meta } from "@storybook/react/types-6-0";
import { PostList } from "../PostList";
import { getTRPCMock } from "../getTrpcMock";
export default {
title: "Components/PostList",
component: PostList,
} as Meta;
export const PostListPage = () => {
@nandorojo
nandorojo / README.md
Last active December 23, 2022 23:03
Expo + Next.js Query Param state

Expo + Next.js Query Params State 🦦

A typical use-case on web for maintaining React State is your URL's query parameters. It lets users refresh pages & share links without losing their spot in your app.

URL-as-state is especially useful on Next.js, since next/router will re-render your page with shallow navigation.

This gist lets you leverage the power of URL-as-state, while providing a fallback to React state for usage in React Native apps.

It's essentially a replacement for useState.

@qoomon
qoomon / youtube_clean_watch_later_videos.js
Last active April 15, 2024 07:25
Clean YouTube Watch Later Videos
// Version 2.0.1
// This script will remove all videos from watch later list
//
// Usage
//
// #1 go to https://www.youtube.com/playlist?list=WL
// #2 run following script in your browser console
(async function() {
const playlistName = document.querySelector('.metadata-wrapper #container #text')?.textContent || document.querySelector('#text')?.textContent
@jaredpalmer
jaredpalmer / MarkdownPage.tsx
Created February 17, 2021 13:52
Get headers from MDX in Next.js
import {MDXProvider} from '@mdx-js/react';
import {MDXComponents} from 'components/MDX/MDXComponents';
import {Toc} from 'components/Toc/Toc';
import * as React from 'react';
export interface MarkdownProps<Frontmatter> {
meta: Frontmatter;
children?: React.ReactNode;
}
@LeZuse
LeZuse / 00_README.md
Last active June 19, 2024 07:17
Install node on Apple Silicon M1 both ARM and x86 (Rosetta)

Node.js on Apple Silicon

Node Version Manager (https://github.com/nvm-sh/nvm) works perfectly across native node installations as well as emulated Rosetta installations. The trick I am using here is to install one LTS version of node under Rosetta and another stable version as native binary.

TODO

  • find a way how to run the same node version on both platforms
@disco0
disco0 / index.d.ts
Last active January 31, 2022 02:51
TypeScript 4.1 - Template Literal Utility Types
// Copied with additions from querySelector template literal types example
type Split<S extends string, D extends string> = S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
type SplitUnion<S extends string, D extends string> = Split<S, D>[number];
type TakeLast<V> = V extends [] ? never : V extends [string] ? V[0] : V extends [string, ...infer R] ? TakeLast<R> : never;
type TrimLeft<V extends string> = V extends ` ${infer R}` ? TrimLeft<R> : V;
type TrimRight<V extends string> = V extends `${infer R} ` ? TrimRight<R> : V;
type Trim<V extends string> = TrimLeft<TrimRight<V>>;
@tannerlinsley
tannerlinsley / README.md
Last active April 12, 2024 17:04
Replacing Create React App with the Next.js CLI

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why