karol-majewski

<BlossomCarousel
  className="carousel my-12 grid snap-none! auto-cols-max grid-flow-col"
  style={{ "--carousel-height": "477px" } as React.CSSProperties}
>
  <div className="slide">
    <figure className="inline-grid w-fit grid-cols-[min-content] grid-rows-[auto_min-content]">
      <Image
        src="https://placehold.co/351x477/png"
        alt="Placeholder"
        width={351}

karol-majewski

Recreate trim functionality without Radix themes

Exported on 11/25/2025 at 01:52:39 GMT+1 from Cursor (2.1.25)

---

User

Radix UI supports a functionality called trim. Here's a link describing it. How can I recreate exactly the same behavior without using Radix themes?

karol-majewski

Common frustrations

When ctrl + space doesn’t trigger suggestions in Cursor

It’s because of default macOS settings hijacking the shortcut. Go to System Settings → Keyboard → Keyboard Shortcuts and Input Sources. Uncheck the boxes.

When Cursor opens .svg files as images rather than code

Open Command Palette and choose "View: Reopen Editor with Text Editor"

karol-majewski

import { use } from "react";
import type { DeliveryAddress } from "./types";

const cache = new Map<string, Promise<DeliveryAddress>>();

export function useDeliveryAddress(userId: string): DeliveryAddress {
  if (!cache.has(userId)) {
    const promise = fetch(`/api/user/delivery-address/${userId}`).then(
      (response) => {
        if (!response.ok) {

karol-majewski

import { use } from 'react';
import { usePrivy, User } from '@privy-io/react-auth';

const RETRY_INTERVAL = 50; // ms

// Move promise creation outside the component
let authPromise: Promise<User> | null = null;

function createAuthPromise(ready: boolean, authenticated: boolean, user: User | null) {
  return new Promise<User>((resolve, reject) => {

karol-majewski

const cache = new Map<string, Promise<google.maps.places.PlaceResult>>();

export function useAddress(placeId: string) {
  const getPlacesService = useCallback(() => {
    return new google.maps.places.PlacesService(document.createElement("div"));
  }, []);

  // Check if we already have a cached promise for this placeId
  if (!cache.has(placeId)) {
    const placesService = getPlacesService();

karol-majewski

// #region Necessary types
type NonEmptyArray<T> = [head: T, ...T[]];
type Tuple<T> = [T, T];
declare function head<T>(collection: [T, ...T[]]): T;
// #endregion

const cloudflareDNS: NonEmptyArray<string> = ["1.1.1.1"];
const googleDNS: Tuple<string> = ["8.8.8.8", "8.8.4.4"]

// ✅ These Just Work™️

karol-majewski

type PromisifyMethods<T> = {
  [K in keyof T]: T[K] extends AnyFunction ? (...parameters: Parameters<T[K]>) => Promise<ReturnType<T[K]>> : T[K];
};

type AsynchronousStorage = PromisifyMethods<Storage>;

export function promisify(storage: Storage): AsynchronousStorage {
  return new Proxy(storage, {
    get(target, name: string) {
      if (typeof target[name] === 'function') {

karol-majewski

import { FlattenSimpleInterpolation } from 'styled-components';

import { pick } from './objects';

type Stylesheet<K extends string> = Record<K, FlattenSimpleInterpolation>;

/**
 * CSS-in-JS equivalent for `classNames`.
 *
 * @example

karol-majewski

interface Response<T> {
  status: 'success' | 'pending' | 'error';
  data: T | null;
}

/**
 * A promise tracker that will be updated
 * when promise resolves or rejects
 */
const response: Response<unknown> = {