Feed

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

An Autumn Afternoon. A 1962 Japanese drama film directed by Yasujirō Ozu.

en.wikipedia.org

Published: Dec 10, 2024, 5:25 AM

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>
  );
}

Modern date range picker component for React using Tailwind 3 and dayjs.

github.com
Part II: Apocalypse Now? Peter Thiel on Ancient Prophecies and Modern Tech

www.youtube.com
The Curse of Kafka

archive.is
3D force-directed graph component using ThreeJS/WebGL

vasturiano.github.io
Travels

www.michaelcrichton.com
Reading Notes on “Lost Time: Lectures on Proust in a Soviet Prison Camp”

nabeelqu.substack.com
Published

Dec 4, 2024

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
Adaptive fictions

www.thebeliever.net
Calendar Widget Interaction

ui.lndev.me
A markdown-like journal language for plainly writing logs

timeline.markwhen.com

Authenticating users in Astro with Better Auth: A Step-by-Step Guide

www.launchfa.st

Looks easy and promising

---
if (!Astro.locals.user?.id) return Astro.redirect('/signin')
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    {JSON.stringify(Astro.locals.user)}
    <button id="signOutButton">Sign Out</button>
    <script>
      import { authClient } from '@/auth-client'
      document.getElementById('signOutButton')?.addEventListener('click', async () => {
        await authClient.signOut()
        window.location.href = '/signin'
      })
    </script>
  </body>
</html>

Adaptive dotted background pattern

codepen.io

html {
  background-image: radial-gradient(circle at center, transparent, Canvas),
    radial-gradient(
      circle at center,
      color-mix(in oklch, Canvastext 33%, Canvas) 0.8px,
      transparent 1.3px
    );
  background-size:
    200px 200px,
    40px 40px;
  background-repeat: round, space;
}

A unified theory of fucks

aworkinglibrary.com

Good work is the art of giving a fuck about the living.

Items