tfayyaz

8 public vals

Joined April 21, 2024

whiteMongoose

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

return new Response(

renderToString(

<html>

<head>

<title>Tahir's TIL</title>

</head>

<body

style={{ padding: "30px", width: "300px", margin: "0 auto", fontFamily: "sans-serif", textAlign: "center" }}

console.log('This will run when the page loads'); // Other inline scripts here

</script>

<h1>Tahir's TIL</h1>

<p>Web, design and data tips</p>

Over 90% of new cars are electric in Norway + Our World in Data make beautiful charts

</a>

href="https://webkit.org/blog/15131/speedometer-3-0-the-best-way-yet-to-measure-browser-performance/"

style={itemStyle}

Speedometer 3.0 - Browser Performance benchmarks by Apple, Google, Mozilla and Microsoft. Includes 4

charting libraries

</a>

Typewolf Site of the Day. Inspiration for font pairings

</a>

<a href="https://deadsimplesites.com/" style={itemStyle}>DSS Dead Simple Sites.</a>

<a href="https://www.csscade.com/" style={itemStyle}>CSS is awesome - CSSCade</a>

Job Clarendon is a stunning typeface that pays homage to job printing

</a>

<a href="https://courses.nan.fyi/login" style={itemStyle}>Interactive SVG Animations Course</a>

<a href="https://htmx.org/examples/active-search/" style={itemStyle}>HTMX Active Search</a>

Search and highlight text

</a>

Custom highlight API - Display style and script blocks

</a>

Building websites with Val.town is fast

</a>

<p>Notes: Asking ChatGPT to explain code is a great and fun way to learn</p>

</div>

</body>

</html>,

{

headers: {

"Content-Type": "text/html",

);

}

const itemStyle = {

padding: "10px",

color: "#222",

// backgroundColor: "#ff748d",

backgroundColor: "rgba(0, 0, 0, 0.02)",

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)",

};

Inspiration for having a blog and TIL/read taken from

To-do:

Buy tahirfayyaz.dev domain from iwantmyname.com
Use SQLlite to store all the posts
Create an editor to post to SQLlite maybe with live preview?
Update site to use HTMX Active Search - https://htmx.org/examples/active-search/

tahirsTil

100

/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

return new Response(

renderToString(

<html>

<head>

<title>Tahir's TIL</title>

</head>

<body

style={{

maxWidth: "70ch",

backgroundColor: "hsl(51,100%,97%)",

color: "hsla(200,0%,0%,.85)",

padding: "3em 1em",

margin: "auto",

lineHeight: "1.75",

fontSize: "1.25em",

fontFamily: "sans-serif",

}}

<h1>Tahir's TIL</h1>

<h3>Today I Learned - Design, web and data applications</h3>

<a style={linkStyle} href="https://arc.net/l/quote/hfdxolze">A brief interlude on color spaces</a> from stripe.com

</div>

I just updated the colour scheme for this website using{" "}

<a style={linkStyle} href="https://contrast-ratio.com">contrast-ratio.com</a>, originally created by{" "}

Lea Verou but now under a new home.

</a>{" "}

I wanted to find a good background and font colour to use for this website. For the background colour I am

using <span>hsl(50, 100%, 96%)</span> which converts to <span>#fcfff0</span> and more importantly{" "}

<span>hsl(51, 100%, 96%)</span> which{" "}

I need to dig into why next. For the font colour #000000 it was shown as <span>hsla(200,0%,0%,.7)</span>

{" "}

which I simply adjusted by increasing 0.7 to 0.9 to get <span>hsla(200,0%,0%,.9)</span>.{" "}

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".

</div>

<a style={linkStyle} href="https://smudge.ai/blog/ratelimit-algorithms">Visualizing algorithms for rate limiting</a>

</div>

pure css charts with fall back

</a>

</div>

href="https://bradfrost.com/blog/post/should-designers-code/"

style={linkStyle}

Should designers code?

</a>

It’s important for designers to understand these

important concepts: Box model, Flexbox & Grid Positioning, Source order & Variables

</div>

<a style={linkStyle} href="https://component.gallery/">component.gallery</a>

</div>

<a style={linkStyle} href="https://gestalt.pinterest.systems/foundations/data_visualization/overview#Resources">Data Visualition tips from Pinterest's

Design System</a> along with many <a style={linkStyle} href="https://gestalt.pinterest.systems/foundations/data_visualization/overview#Resources">resources</a>

</div>

href="https://github.com/leeoniya/uPlot/?tab=readme-ov-file#unclog-your-rendering-pipeline"

style={itemStyle}

μPlot tips to Unclog your rendering pipeline by unlocking some Chrome features

</a>

Perf benchmarks by μPlot. A fast, memory-efficient Canvas 2D-based chart for plotting

</a>

</a>

</div>

href="https://web.archive.org/web/20221208193656/https://everydayanalytics.ca/2014/08/stacked-area-graphs-are-not-your-friend.html"

style={itemStyle}

Stacked Area Graphs Are Not Your Friend. Showcases small multiples instead.

</a>

declarative arrows for the web. ⤵

</a>

Draw perfect arrows between points and shapes. By the the creator of tldraw.

</a>

58 bytes of CSS to look great nearly everywhere

</a>

react_http

Fork

export default (component: Function, url: string) =>

function(req: Request) {

return new Response(

`<html>

import { ${component.name} } from "${url}"

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";

createRoot(document.body).render(jsx(App, {}));

</script>

</html>`,

{

headers: {

"content-type": "text/html",

);

};

react_framer_motion_script

Fork

// JSX can be used in the client val thanks to this magic comment

/** @jsxImportSource https://esm.sh/react **/

// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)

import { motion } from "https://esm.sh/framer-motion";

import React from "https://esm.sh/react";

import ReactDOM from "https://esm.sh/react-dom";

// import "https://esm.sh/tldraw/tldraw.css";

export function App() {

return (

<motion.div

className="box"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

whileHover={{ scale: 1.2 }}

whileTap={{ scale: 1.1 }}

drag="x"

dragConstraints={{ left: -100, right: 100 }}

</>

);

}

// The app will be rendered inside the root div

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

react_framer_motion_client

/**

* @title Running React on the Client

* @description Vals can also be used to host client-side code!

* @preview https://pomdtr-react_example_server.web.val.run

* @include pomdtr/react_example_client

* @resource [React - Quick Start](https://react.dev/learn)

// The server response includes a script referencing the client val

export const server = (req) =>

new Response(

`<html>

<head>

<title>React Example</title>

<style>

body {

--black: #000000;

--ash-black: #222;

--white: #fafafa;

--sky: #00ccff;

--green: #22dddd;

--blue: #1300ff;

--dusk: #6600ff;

--purple: #9900ff;

--pink: #ff0066;

--red: #fe0222;

--orange: #fd7702;

--yellow: #ffbb00;

--background: var(--white);

--accent: var(--blue);

margin: 0;

padding: 0;

background-color: var(--background);

color: var(--accent);

padding-bottom: 100px;

overflow: hidden;

}

#root {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

display: flex;

align-items: center;

justify-content: center;

}

.box {

width: 300px;

height: 300px;

border-radius: 90%;

background: var(--accent);

}

</style>

</head>

<body>

</body>

</html>`,

{

headers: {

"Content-Type": "text/html",

);

react_tldraw_client

Fork

// JSX can be used in the client val thanks to this magic comment

/** @jsxImportSource https://esm.sh/react **/

// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)

import React from "https://esm.sh/react";

import ReactDOM from "https://esm.sh/react-dom";

import { Tldraw } from "https://esm.sh/tldraw";

// import "https://esm.sh/tldraw/tldraw.css";

export function App() {

return (

</div>

</>

);

}

// The app will be rendered inside the root div

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

react_tldraw

/**

* @title Running React on the Client

* @description Vals can also be used to host client-side code!

* @preview https://pomdtr-react_example_server.web.val.run

* @include pomdtr/react_example_client

* @resource [React - Quick Start](https://react.dev/learn)

// The server response includes a script referencing the client val

export const server = (req) =>

new Response(

`<html>

<head>

<title>React Example</title>

<style>

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");

@import url("https://esm.sh/tldraw/tldraw.css");

body {

font-family: "Inter";

}

</style>

</head>

<body>

</body>

</html>`,

{

headers: {

"Content-Type": "text/html",

);

App

// JSX can be used in the client val thanks to this magic comment

/** @jsxImportSource https://esm.sh/react **/

// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)

import React from "https://esm.sh/react";

import ReactDOM from "https://esm.sh/react-dom";

import { Button } from "https://esm.town/v/nbbaier/shadcnButton";

import {

Table,

TableBody,

TableCaption,

TableCell,

TableHead,

TableHeader,

TableRow,

} from "https://esm.town/v/nbbaier/shadcnTable";

const data = [["INV001", "Paid", "Credit Card", "$250.00"], ["INV001", "Paid", "Credit Card", "$250.00"], [

"INV001",

"Paid",

"Credit Card",

"$250.00",

]];

export function App() {

return (

<Table>

<TableCaption>A list of your recent invoices.</TableCaption>

<TableHead className="w-[100px]">Invoice</TableHead>

<TableHead>Status</TableHead>

<TableHead>Method</TableHead>

<TableHead className="text-right">Amount</TableHead>

</TableRow>

</TableHeader>

{data.map(payment => {

return (

<TableCell className="font-medium">{payment[0]}</TableCell>

<TableCell>{payment[1]}</TableCell>

<TableCell>{payment[2]}</TableCell>

<TableCell className="text-right">{payment[3]}</TableCell>

</TableRow>

);

})}

</TableBody>

</Table>

</>

);

}

// The app will be rendered inside the root div

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);