Forked from stevekrouse/linkInBioTemplate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<div style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
<div style={itemStyle}>
Just signed up for the trial of{" "}
<a style={linkStyle} href="https://www.practical-ui.com/">practical-ui.com</a>{" "}
to help me design with best practices in mind.
</div>
<div style={itemStyle}>
Evil Martians have posted multiple indepth{" "}
<a style={linkStyle} href="https://evilmartians.com/chronicles?skills=oklch">posts on OKLCH</a>{" "}
and also created a OKLCH colour picker. One of the posts links to this useful color palette generator,
{" "}
<a style={linkStyle} href="https://huetone.ardov.me/">Huetone</a>, for good accessibility. Their website
design is also incredibly fun!
</div>
<div style={itemStyle}>
Really useful and fun interactive introductions to computer science topics by
<a style={linkStyle} href="https://samwho.dev">samwho.dev</a>. Includes posts on Load Balancing, Memory
Allocation, Hashing, Retries, Bloom Filters, Numbers, and Queueing.
</div>
<div style={itemStyle}>
The Python library
<a style={linkStyle} href="https://github.com/posit-dev/great-tables">Great Tables</a>
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.
</div>
<div style={itemStyle}>
<a style={linkStyle} href="https://spaces.is/loversmagazine/interviews/gunnar-gray">Interview</a>
with Gunnar Gray who is product design lead at Perplexity
</div>
<div style={itemStyle}>
<a
style={linkStyle}
href="https://offmenu.substack.com/p/perplexity-the-ai-brand-everyone?triedRedirect=true"
>
Interview
</a>
with the brand design team at Perplexity who worked with design agency
<a style={linkStyle} href="https://smith-diction.com">Smith & Diction</a>. Found via this tweet
<a style={linkStyle} href="https://x.com/mikesmith187/status/1795860561940324830">by Mike Smith</a>
</div>
<div style={itemStyle}>
10 years ago - Uber's TAM
<a
style={linkStyle}
href="https://abovethecrowd.com/2014/07/11/how-to-miss-by-a-mile-an-alternative-look-at-ubers-potential-market-size/"
>
by Bill Gurley
</a>
</div>
<div style={itemStyle}>
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
<a style={linkStyle} href="https://observablehq.com/blog/crafting-data-colors">by Observable</a>
</div>
<div style={itemStyle}>
<a style={linkStyle} href="https://arc.net/l/quote/hfdxolze">A brief interlude on color spaces</a>{" "}
from stripe.com
</div>
<div style={itemStyle}>
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{" "}
<a style={linkStyle} href="https://lea.verou.me/blog/2023/03/contrast-ratio-new-home/">
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>
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
June 2, 2024