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 bysamwho.dev. Includes posts on Load Balancing, Memory Allocation, Hashing, Retries, Bloom Filters, Numbers, and Queueing.
The Python libraryGreat Tableshas a nice syntax for making well formatted tables with code. I especially like the diagram they have for explaining the components of a table.
Interviewwith Gunnar Gray who is product design lead at Perplexity
Interviewwith the brand design team at Perplexity who worked with design agencySmith & Diction. Found via this tweetby Mike Smith
10 years ago - Uber's TAMby 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 storiesby 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".
Should designers code?It’s important for designers to understand these important concepts: Box model, Flexbox & Grid Positioning, Source order & Variables
Data Visualition tips from Pinterest's Design System along with many resources
μPlot tips to Unclog your rendering pipeline by unlocking some Chrome featuresPerf 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 everywhereA HTML file is all you need. Lot's of useful client side JavaScript examples including charts, Python and SQLite.LCH colors in CSS: what, why, and how?color-mix() allows you to mix colours in CSS using 3 colour spaces: srgb, oklab or hslRelated Links: una.im/color-mix-opacity anddeveloper.chrome.com/docs/css-ui/high-definition-css-color-guide
val.town demo - Hono JS Dialog Show ModalSimple Hono JS val.town Template with client side JavaScript using html HelperOver 90% of new cars are electric in Norway + Our World in Data make beautiful chartsSpeedometer 3.0 - Browser Performance benchmarks by Apple, Google, Mozilla and Microsoft. Includes 4 charting librariesTypewolf Site of the Day. Inspiration for font pairingsDSS Dead Simple Sites.CSS is awesome - CSSCadeJob Clarendon is a stunning typeface that pays homage to job printingI recently signed up to two online courses about intervative web design and UI animations.svg-animations and animations.dev
HTMX Active SearchSearch and highlight textCustom highlight API - Display style and script blocksBuilding websites with Val.town is fast
Notes: Asking ChatGPT to explain code is a great and fun way to learn