Tahir's TIL

Today I Learned - Design, web and data applications

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

\n\n

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

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

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

\n Interview\n with Gunnar Gray who is product design lead at Perplexity\n

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

\n 10 years ago - Uber's TAM\n \n by Bill Gurley\n \n

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

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

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

\n \n Visualizing algorithms for rate limiting\n \n

\n \n pure css charts with fall back\n \n

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

\n component.gallery\n

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

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

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

\n \n Matthew Strom - Generating Color Palettes\n \n

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

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

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

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

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

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

\n \n ,\n ),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}\n\nconst itemStyle = {\n padding: \"10px\",\n color: \"hsla(200,0%,0%,.85)\",\n // backgroundColor: \"#ff748d\",\n backgroundColor: \"hsl(51,100%,96%)\",\n // background: \"colorMix(in srgb, blue, white 80%)\",\n borderTop: \"2px solid hsl(51,100%,80%)\",\n borderRadius: \"2px\",\n textDecoration: \"none\",\n // boxShadow: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n};\n\nconst linkStyle = {\n color: \"hsla(200,0%,0%,.75)\",\n // backgroundColor: \"#ff748d\",\n backgroundColor: \"hsl(51,100%,92%)\",\n // background: \"colorMix(in srgb, blue, white 80%)\",\n borderLeft: \"2px solid hsl(51,100%,92%)\",\n borderRight: \"2px solid hsl(51,100%,92%)\",\n // borderRadius: \"2px\",\n textDecoration: \"underline\",\n // boxShadow: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n};","deleted","label",[138],"e9835cd4-27b1-11f0-aecd-569c3dd06744","README.md","e9835d42-27b1-11f0-aecd-569c3dd06744",["D",1715392855124],"Inspiration for having a blog and TIL/read taken from \n\n- https://simonwillison.net/\n- https://bradfrost.com/blog/\n- https://geoffgraham.me/blog/\n- https://matthewstrom.com/\n\nTo-do:\n\n- Buy tahirfayyaz.dev domain from iwantmyname.com\n- Use SQLlite to store all the posts\n- Create an editor to post to SQLlite maybe with live preview?\n- Update site to use HTMX Active Search - https://htmx.org/examples/active-search/ \n- Add dynamic tag to posts to show many years ago it was posted - Make sortable\n\nNew posts:\n\n- exa.ai similarly search\n- https://exa.ai/search?c=all&q=https%3A%2F%2Fstripe.com%2Fblog%2Faccessible-color-systems&filters=%7B%22domainFilterType%22%3A%22exclude%22%2C%22excludeDomains%22%3A%5B%22stripe.com%22%5D%7D",[154],"pulls","branches","envVars",{"_165":22,"_167":22},"connections",{"_165":22,"_166":22},"count","unfilledCount","emptyCount",{"_27":153,"_13":154,"_139":155,"_140":-5,"_141":91,"_142":24,"_143":54,"_55":174,"_88":22,"_146":115,"_148":157,"_150":20,"_151":-5,"_171":175,"_103":176},{"_27":137,"_13":138,"_139":68,"_140":-5,"_141":91,"_142":89,"_143":54,"_55":170,"_88":145,"_146":147,"_148":149,"_150":20,"_151":-5,"_171":172,"_103":173},["D",1717329108866],"children",[],[138],["D",1715392855124],[],[154],["D",1746230552870],{"_11":12,"_37":60},{"_11":12,"_58":-5,"_59":60,"_43":44,"_61":62,"_63":20},{"_88":89,"_13":90,"_27":91,"_92":64,"_93":94,"_95":22,"_96":33,"_97":28,"_98":99,"_100":14,"_101":12},"ctx",{"_34":-5,"_125":214,"_215":216,"_217":218,"_219":20,"_220":20,"_221":20,"_222":54,"_223":-5,"_224":-7,"_225":-7,"_226":22,"_227":20,"_228":20,"_229":-5,"_230":20,"_231":20,"_232":20,"_233":-5},"ENV",{"_185":186,"_187":188,"_189":90,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Remixes1

Remixes
1