/** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; export default async function(req: Request) { return new Response( renderToString( Tahir's TIL

Tahir's TIL

Today I Learned - Design, web and data applications

Just signed up for the trial of{" "} practical-ui.com{" "} to help me design with best practices in mind.

Evil Martians have posted multiple indepth{" "} posts on OKLCH{" "} and also created a OKLCH colour picker. One of the posts links to this useful color palette generator, {" "} Huetone, for good accessibility. Their website design is also incredibly fun!

Really useful and fun interactive introductions to computer science topics by samwho.dev. Includes posts on Load Balancing, Memory Allocation, Hashing, Retries, Bloom Filters, Numbers, and Queueing.

The Python library Great Tables has a nice syntax for making well formatted tables with code. I especially like the diagram they have for explaining the components of a table.

Interview with Gunnar Gray who is product design lead at Perplexity

Interview with the brand design team at Perplexity who worked with design agency Smith & Diction. Found via this tweet by Mike Smith

10 years ago - Uber's TAM by Bill Gurley

Crafting data colors and staying on brand The Observable 10 color palette as a case study in how to create color schemes that tell your stories by Observable

A brief interlude on color spaces{" "} from stripe.com

I just updated the colour scheme for this website using{" "} contrast-ratio.com, originally created by{" "} Lea Verou but now under a new home. {" "} I wanted to find a good background and font colour to use for this website. For the background colour I am using hsl(50, 100%, 96%) which converts to #fcfff0 and more importantly{" "} hsl(51, 100%, 96%) which{" "} I need to dig into why next. For the font colour #000000 it was shown as hsla(200,0%,0%,.7) {" "} which I simply adjusted by increasing 0.7 to 0.9 to get hsla(200,0%,0%,.9).{" "} The contrast ratio has a score of 16.89 and "Passes AAA level for any size text and AA for user interface components and graphical objects".

Visualizing algorithms for rate limiting

pure css charts with fall back

Should designers code? It’s important for designers to understand these important concepts: Box model, Flexbox & Grid Positioning, Source order & Variables

component.gallery

Data Visualition tips from Pinterest's Design System {" "} along with many{" "} resources

μPlot tips to Unclog your rendering pipeline by unlocking some Chrome features Perf benchmarks by μPlot. A fast, memory-efficient Canvas 2D-based chart for plotting

Stacked Area Graphs Are Not Your Friend. Show how to use small multiples instead. declarative arrows for the web. ⤵ Draw perfect arrows between points and shapes. By the the creator of tldraw. 58 bytes of CSS to look great nearly everywhere A HTML file is all you need. Lot's of useful client side JavaScript examples including charts, Python and SQLite.

Matthew Strom - Generating Color Palettes

LCH colors in CSS: what, why, and how?

color-mix() allows you to mix colours in CSS using 3 colour spaces: srgb, oklab or hsl Related Links: una.im/color-mix-opacity {" "} and developer.chrome.com/docs/css-ui/high-definition-css-color-guide

val.town demo - Hono JS Dialog Show Modal Simple Hono JS val.town Template with client side JavaScript using html Helper Over 90% of new cars are electric in Norway + Our World in Data make beautiful charts Speedometer 3.0 - Browser Performance benchmarks by Apple, Google, Mozilla and Microsoft. Includes 4 charting libraries Typewolf Site of the Day. Inspiration for font pairings DSS Dead Simple Sites. CSS is awesome - CSSCade Job Clarendon is a stunning typeface that pays homage to job printing

I recently signed up to two online courses about intervative web design and UI animations. svg-animations and{" "} animations.dev

HTMX Active Search Search and highlight text Custom highlight API - Display style and script blocks Building websites with Val.town is fast

Notes: Asking ChatGPT to explain code is a great and fun way to learn

, ), { headers: { "Content-Type": "text/html", }, }, ); } const itemStyle = { padding: "10px", color: "hsla(200,0%,0%,.85)", // backgroundColor: "#ff748d", backgroundColor: "hsl(51,100%,96%)", // background: "colorMix(in srgb, blue, white 80%)", borderTop: "2px solid hsl(51,100%,80%)", borderRadius: "2px", textDecoration: "none", // boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", }; const linkStyle = { color: "hsla(200,0%,0%,.75)", // backgroundColor: "#ff748d", backgroundColor: "hsl(51,100%,92%)", // background: "colorMix(in srgb, blue, white 80%)", borderLeft: "2px solid hsl(51,100%,92%)", borderRight: "2px solid hsl(51,100%,92%)", // borderRadius: "2px", textDecoration: "underline", // boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", };

tahirsTil