Skip to content

Instantly share code, notes, and snippets.

@corysimmons
corysimmons / vscodethemes.json
Created February 9, 2024 03:53
Theme data from vscodethemes.com
View vscodethemes.json
This file has been truncated, but you can view the full file.
{
"1984": {
"slug": "vscode-theme-1984",
"description": "🎶I'm gonna show you where it's dark, but have no fear 🎶",
"vscUid": "juanmnl.vscode-theme-1984",
"vscExtensionId": "0f087222-4e48-423c-be9b-5cae196de4bc",
"installs": 38694,
"trendingDaily": 0.005171165580721895,
"trendingWeekly": 0.444720239942083,
"trendingMonthly": 2.0969076429827282,
@corysimmons
corysimmons / vscodethemes_hrefs.json
Created February 9, 2024 03:23
vscodethemes.com json for all those themes
View vscodethemes_hrefs.json
[
"https://vscodethemes.com/e/ms-vscode.cpptools-themes.json",
"https://vscodethemes.com/e/github.github-vscode-theme.json",
"https://vscodethemes.com/e/ms-vscode.powershell.json",
"https://vscodethemes.com/e/zhuangtongfa.material-theme.json",
"https://vscodethemes.com/e/dracula-theme.theme-dracula.json",
"https://vscodethemes.com/e/akamud.vscode-theme-onedark.json",
"https://vscodethemes.com/e/equinusocio.vsc-community-material-theme.json",
"https://vscodethemes.com/e/equinusocio.vsc-material-theme.json",
"https://vscodethemes.com/e/johnpapa.winteriscoming.json",
@corysimmons
corysimmons / page.tsx
Created January 29, 2024 04:07
Just a hook to replace SWR and react-query in Next.js server components (Next.js' new `fetch` automatically handles caching and stuff). https://nextjs.org/docs/app/api-reference/functions/fetch
View page.tsx
'use server';
import { useServerFetch } from '../hooks/useServerFetch';
export default async function Page() {
const { loading, error, data } = useServerFetch<any>('/api/123');
if (loading) return <h1>loading</h1>;
if (error) return <h1>{error.message}</h1>;
return <h1>{JSON.stringify(data)}</h1>;
}
@corysimmons
corysimmons / page.tsx
Created January 29, 2024 04:07
Just a hook to replace SWR and react-query in Next.js server components (Next.js' new `fetch` automatically handles caching and stuff).
View page.tsx
'use server';
import { useServerFetch } from '../hooks/useServerFetch';
export default async function Page() {
const { loading, error, data } = useServerFetch<any>('/api/123');
if (loading) return <h1>loading</h1>;
if (error) return <h1>{error.message}</h1>;
return <h1>{JSON.stringify(data)}</h1>;
}
@corysimmons
corysimmons / page.tsx
Created January 26, 2024 17:22
Next.js app router Wavesurfer.js + Tone.js to apply effects and scrub a timeline both in realtime.
View page.tsx
'use client'
import React, { useRef, useState, useEffect } from 'react';
import { useWavesurfer } from '@wavesurfer/react';
import * as Tone from 'tone';
export default function Page() {
const containerRef = useRef<HTMLDivElement>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
const [playing, setPlaying] = useState(false);
const pitchShift = useRef<Tone.PitchShift | null>(null);
@corysimmons
corysimmons / Example.tsx
Created January 8, 2024 10:05
Horizontally draggable React component
View Example.tsx
// Usage
<div style={{ width: "calc(100vw - 200px)" }}> // Fixed width container
<DraggableScrollContainer className="styled-scrollbars"> // Style those huge/ugly scrollbars to be aesthetic
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
View SwiftUIViewModule.swift
import ExpoModulesCore
import SwiftUI
public class SwiftuiViewModule: Module {
public func definition() -> ModuleDefinition {
Name("SwiftuiForm")
View(SwiftuiView.self) {
Prop("name") { (view, name: String) in
view.name = name
}
@corysimmons
corysimmons / JetpackComposeView.kt
Created October 24, 2023 19:17 — forked from andrew-levy/JetpackComposeView.kt
JetpackComposeViewModule
View JetpackComposeView.kt
package expo.modules.jetpackcomposeview
import android.content.Context
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
View water.fragment.glsl
// Created with NodeToy | Three.js r149
// <node_builder>
// uniforms
uniform float _time;
// attributes
// varys
varying vec2 nodeVary0;
@corysimmons
corysimmons / useHotkey.ts
Last active January 28, 2023 14:08
A simple hook for adding hotkeys to your React app. Piggybacks on keyboardJS for a nicer interface.
View useHotkey.ts
import keyboardJS from 'keyboardjs'
import { useEffect } from 'react'
export default function useHotkey(key: string | string[], callback: () => void) {
useEffect(() => {
keyboardJS.bind(key, callback)
return () => keyboardJS.unbind(key, callback)
}, [key, callback])
}