Skip to content

Intro

Feed

A collection of short notes, interesting links, and the occasional long form post.

Items

  • Published

    …if anything I want to become what I’ve called an information trillionaire, I’m not going to make that but its a good aspiration to have, just collect more information and be an information trillionaire…

    from https://www.youtube.com/watch?v=W1eEPAUE6nY

  • Published

    canScroll() { return false } wasn’t working on my custom shape. Did this instead.

    const TableComponent = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const containerElement = containerRef.current;

    const handleWheel = (event: WheelEvent) => {
      const isOverCardShape = containerElement?.contains(event.target as Node);

      // to determine if the event should be prevented
      if (isOverCardShape) {
        // event.preventDefault();
        event.stopPropagation();
      }
    };

    containerElement?.addEventListener("wheel", handleWheel, {
      passive: false,
    });

    return () => {
      containerElement?.removeEventListener("wheel", handleWheel);
    };
  }, [containerRef]);

  ...
  • Published
    import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

function MyDatePicker() {
  const [selected, setSelected] = useState<Date>();

  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={
        selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
      }
    />
  );
}

    DayPicker + Radix UI Popover

    "use client";
import React from "react";
import { useState } from "react";
import { DayPicker } from "react-day-picker";
import * as Popover from "@radix-ui/react-popover";
import { format } from "date-fns";
import "react-day-picker/style.css";
import { useRouter } from "next/navigation";

export function MyDatePicker({ displayDate }: { displayDate: string }) {
  const router = useRouter();

  const [selected, setSelected] = useState<Date>();
  const [open, setOpen] = useState(false);

  const handleDateSelect = (date: Date) => {
    setSelected(date);
    const formattedDate = format(date, "yyyy-MM-dd");
    router.push(`/schedule?date=${formattedDate}`);
    setOpen(false);
  };

  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger asChild>
        <button className="display-date">{displayDate}</button>
      </Popover.Trigger>
      <Popover.Content className="PopoverContent">
        <DayPicker
          mode="single"
          selected={selected}
          onDayClick={handleDateSelect}
          footer={
            selected
              ? `Selected: ${selected.toLocaleDateString()}`
              : "Pick a day."
          }
        />
      </Popover.Content>
    </Popover.Root>
  );
}
  • Published

    Astro + Temporal try

    This code demonstrates how to initiate a workflow in Astro using the Temporal client

  • Tools for Thought Rocks: October 2022 - Pol Baladas, Paul Shen

    www.youtube.com