What exactly do i put here?
A highly flexible learning platform POC that supports any type of content or test—text, quizzes, drawing, and more—via dynamic component loading. No redeployment needed; just build and link new components seamlessly
Generate a diamond painting pattern from any image. A WASM experiment, viewable on an infinite canvas
Add comments anywhere on your website, just like the commenting feature in Figma or the Vercel Toolbar
Ever find yourself needing to slow down how often something happens in your React app? That’s where the useDebounce hook comes in. It’s perfect for things like search bars, where you don’t want to trigger a search every time someone types a letter.
import { useEffect, useState } from 'react';
export function useDebounce<T extends any>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
A custom upload handler for Remix that allows you to upload files directly to S3. It utilizes streaming for efficient file transfers and includes a filter function to customize filenames during upload.
If you’re working with Remix and need to upload files directly to S3, this S3 handler has got you covered.
handler.server.ts contains the S3 upload handler for Remix. It streams file uploads directly to S3 using a custom filter.
import { writeAsyncIterableToWritable, type UploadHandler, type UploadHandlerPart } from '@remix-run/node';
import * as aws from './s3.server';
const uploadStreamToS3 = async (filename: string, data: any, opts: aws.s3.UploadStreamOpts) => {
const stream = aws.s3.uploadStream(filename, opts);
await writeAsyncIterableToWritable(data, stream.write);
return await stream.promise;
};
type Filter = (part: Omit<UploadHandlerPart, 'data'>) => string | undefined;
export const s3UploadHandler = (filter: Filter): UploadHandler => {
return async ({ data, ...part }) => {
const filename = filter(part);
if (!filename) return undefined;
return await uploadStreamToS3(filename, data);
};
};
s3.server.ts sets up the S3 client and manages the streaming of files to an S3 bucket.
import { PassThrough } from 'node:stream';
import { S3Client } from '@aws-sdk/client-s3';
import { Upload } from '@aws-sdk/lib-storage';
const client = new S3Client({
credentials: {
accountId: process.env.AWS_ACCOUNT_ID,
accessKeyId: process.env.AWS_ACCESS_KEY_ID,
secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
},
region: process.env.AWS_REGION,
});
export const uploadStream = (filename: string) => {
const pass = new PassThrough();
return {
write: pass,
promise: new Promise<string>(async (resolve, reject) => {
try {
await new Upload({
client,
params: {
Bucket: process.env.AWS_S3_BUCKET,
Key: filename,
Body: pass,
},
}).done();
resolve(filename);
} catch (err) {
reject(err);
}
}),
};
};
import path from 'node:path';
import {
unstable_composeUploadHandlers as composeUploadHandlers,
unstable_createMemoryUploadHandler as createMemoryUploadHandler,
unstable_parseMultipartFormData as parseMultipartFormData,
type ActionFunctionArgs,
} from '@remix-run/node';
import { s3UploadHandler } from './handler.server';
export async function action({ request }: ActionFunctionArgs) {
const now = Date.now();
const uploadHandler = composeUploadHandlers(
s3UploadHandler(({ name, filename }) => {
switch (name) {
case 'picture':
return `users/${now}${path.extname(filename!)}`;
default:
return undefined;
}
}),
createMemoryUploadHandler(),
);
const formData = await parseMultipartFormData(request, uploadHandler);
const body = {
fullName: formData.get('fullName'),
pictureUrl: formData.get('picture'),
};
// Do something
}
Free the scrollbar!
This is just a simple class that i use a lot to remove scrollbar from a component.
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
Create a new map with only what you need
Sometimes, you only need a few specific key-value pairs from a map in Go. The Pick function helps you do just that. It creates a new map with only the keys you want.
func Pick[M ~map[K]V, K comparable, V any](m M, keys []K) M {
dest := make(M, len(keys))
if len(m) == 0 || len(keys) == 0 {
return dest
}
for _, key := range keys {
if val, ok := m[key]; ok {
dest[key] = val
}
}
return dest
}
func main() {
user := map[string]any{"fullName": "John Doe", "age": 10}
userWithoutAge := Pick(user, []string{"fullName"}) // {"fullName": "John Doe"}
}
A function to merge multiple maps
Need to combine multiple maps in Go? The MergeMaps function makes it easy to merge them into a single map.
func MergeMaps[M ~map[K]V, K comparable, V any](m ...M) M {
if len(m) <= 1 {
return m[0]
}
dest := make(M)
for _, v := range m {
if v == nil {
continue
}
for k, v := range v {
dest[k] = v
}
}
return dest
}
func main() {
base := map[string]string{"fullName": "John Doe"}
profile := map[string]string{"occupation": "Painter"}
user := MergeMaps(base, profile) // {"firstName": "John", "occupation": "Painter"}
}