2022-css-day_oh-snap VS examples

/* Based on Jhey Thompkins CodePen: https://codepen.io/jh3y/pen/mdxggmO * and Adam Argyle git repo: https://github.com/argyleink/2022-css-day_oh-snap */ .thumbnails { display: flex; overflow-x: auto; border-radius: var(--spacing-2); gap: var(--spacing-4); background: var(--colour-dark); overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: var(--spacing-4); scroll-padding: var(--spacing-4); } .thumbnails::-webkit-scrollbar { background: transparent; } .thumbnails::-webkit-scrollbar-thumb { background: var(--colour-alt); border-radius: var(--spacing-2); } .thumbnails::-webkit-scrollbar-track { background: var(--colour-dark); border-radius: var(--spacing-2); } .thumbnail { @media (width > 48rem) { outline: none; height: auto; display: grid; place-items: center; transition: flex 0.2s; flex: calc(0.2 + (var(--lerp, 0) * 0.8)); position: relative; } } .thumbnails > :not(.overscroller) { scroll-snap-align: center; scroll-snap-stop: always; } .thumbnail:nth-child(2) { scroll-snap-align: start; } .thumbnail:nth-last-child(2) { scroll-snap-align: end; } .overscroller { display: block; inline-size: 15vw; flex: 0 0 auto; } .thumbnail-item { width: 40vw; height: auto; aspect-ratio: 16 / 10; border-radius: var(--spacing-1); @media (width > 48rem) { display: inline-block; border-style: none; width: 125px; transition: transform 0.2s; transform-origin: 50% 100%; position: relative; transform: translateY(calc(var(--lerp) * -50%)); } @media (width > 64rem) { width: 144px; } @media (width > 80rem) { width: 196px; } } .thumbnail-item:hover { border: var(--spacing-px-2) solid var(--colour-light); } @media (width > 48rem) { .overscroller { display: none; } .thumbnails { position: absolute; top: 0; left: 0; overflow-x: unset; display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-2); } } .thumbnails:hover, .thumbnails:focus-within { @media (width > 48rem) { --show: 1; height: var(--spacing-24); } } [aria-current='true'] .thumbnail-item { outline: var(--spacing-px-2) solid var(--colour-brand); } @media (width > 48rem) { .thumbnail .thumbnail-item { transition: outline 0.2s; outline: var(--colour-brand) var(--spacing-px) solid; } :is(.thumbnails:hover, .thumbnails:focus-within) .thumbnail-item { width: var(--max-width-full); } :is(.thumbnail:hover, .thumbnail:focus-visible) { --lerp: var(--lerp-0); z-index: 5; } .thumbnail:has(+ :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail { --lerp: var(--lerp-1); z-index: 4; } .thumbnail:has(+ .thumbnail + :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail + .thumbnail { --lerp: var(--lerp-2); z-index: 3; } .thumbnail:has(+ .thumbnail + .thumbnail + :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail + .thumbnail + .thumbnail { --lerp: var(--lerp-3); z-index: 2; } .thumbnail:has(+ .thumbnail + .thumbnail + .thumbnail + :is(.thumbnail:hover, .thumbnail:focus-visible)), :is(.thumbnail:hover, .thumbnail:focus-visible) + .thumbnail + .thumbnail + .thumbnail + .thumbnail { --lerp: var(--lerp-4); z-index: 1; } } a { color: var(--colour-alt); } picture { display: flex; } img { background-position: center center; background-repeat: no-repeat; }

Real time data update: Remix supports Server Sent Events e.g. https://github.com/remix-run/examples/tree/main/_official-realtime-app https://github.com/remix-run/remix/discussions/2622

Check out the official Xata template in this Remix example.

Combobox example (from remix but the code is the same - remix is just react-router running on the server rather than the browser)

Setting up Chakra UI was relatively simple. I followed their instructions for the most part. I also found this example to be really helpful. My process for this went like this: I looked at the instructions in Chakra UI docs for the client, server and root files, and compared them with the existing code in starchart. Then, I also referenced them against the example code.

import { error } from '@sveltejs/kit'; import { createReadStream, statSync } from 'node:fs'; import type { Readable } from 'node:stream'; import { PassThrough } from 'node:stream'; import { join } from 'path'; import sharp from 'sharp'; import type { RequestHandler } from './$types'; async function metadata( source: string ): Promise<{ format?: string; width?: number; error?: string }> { try { const image = sharp(source); const { format, width } = await image.metadata(); if (format) { return { format, width }; } } catch (error: unknown) { console.error(`Error reading image metadata: ${source}: ${error}`); } return { error: `Error reading image metadata: ${source}` }; } function resize(imageStream: Readable, width: number, format: string): ReturnType { let sharpTransforms; switch (format) { case 'jpeg': sharpTransforms = sharp().resize(width).jpeg({ mozjpeg: true }); break; case 'avif': sharpTransforms = sharp().resize(width).avif({ quality: 80 }); break; case 'webp': sharpTransforms = sharp().resize(width).webp({ quality: 80 }); break; default: sharpTransforms = sharp(); } const passthroughStream = new PassThrough(); imageStream.pipe(sharpTransforms).pipe(passthroughStream); // @ts-expect-error respond with passthrough stream return new Response(passthroughStream as unknown); } // Based on: https://github.com/remix-run/examples/blob/main/image-resize/app/routes/assets/resize/%24.ts export const GET: RequestHandler = async function get({ params, url, setHeaders }) { try { const { filename } = params; const srcPath = join('src/assets', filename); const fileStat = statSync(srcPath); if (!fileStat) { throw error(404, 'Not found'); } const metadataPromise = metadata(srcPath); const readStream = createReadStream(srcPath); const { format, width } = await metadataPromise; if (!format || !readStream || !width) { throw error(404, 'Not found'); } const { searchParams } = url; const outputWidthString = searchParams.get('w'); const outputWidth = outputWidthString ? Math.min(parseInt(outputWidthString, 10), width) : width; const outputFormat = searchParams.get('format') ?? format; setHeaders({ 'Content-Type': `image/${outputFormat}`, 'Content-Disposition': `filename= ${filename.split('.')[0]}.${outputFormat}`, 'Cache-Control': 'public, max-age=31536000, immutable' }); return resize(readStream, outputWidth, outputFormat); } catch (err: unknown) { const httpError = err as { status: number; message: string }; if (httpError.status && httpError.message) { throw error(httpError.status, httpError.message); } const { pathname } = url; const message = `Error in load function for path "${pathname}": ${err as string}`; console.error(message); throw error(500, message); } };