Collective #784
Inspirational Website of the Week: Setaprint
There is just something magical about the design of Setaprint! The flowing ink cloud and the wonderful typography animations harmonize perfectly with the content. Our pick this week.
Get inspiredGet a Free Web Database and Create Infographics with JavaScript
Get a free Kintone Web Database, and learn how to build Heatmaps from it using JavaScript.
Check it outState of HTML 2023
A new survey called "State of HTML" which aims to track the evolution of HTML and its related technologies in the web development world, helping browser vendors prioritize their roadmaps and improve compatibility.
Check it outNue: Frontend troublesolver
A minimalistic JavaScript library and frontend development toolset that aims to simplify web development, offering alternatives to popular frameworks like React, Vue, and Next.js, with an emphasis on speed, small bundle sizes, and a developer-friendly experience.
Check it outResponsive type scales with composable CSS utilities
Tobias Ahlin shows how to create responsive and fluid typography using CSS calc(), clamp(), and CSS variables, explaining the complex calculations involved and providing utility classes for easily implementing adaptable type scales within specific size ranges.
Read itSeaGOAT
SeaGOAT is a local code search engine that uses vector embeddings for semantic codebase searches.
Check it outThe Design System Ecosystem
This article by Brad Frost discusses the complexities of creating a mature design system in a large organization, breaking it down into optional layers and components, such as design tokens, icons, UI components, and reference websites, to support the creation of user interfaces at scale.
Read itHyperDX
HyperDX is an open-source tool for engineers to centralize and correlate various telemetry data, such as logs, metrics, traces, and session replays, as an alternative to Datadog and New Relic, aiming to make troubleshooting production issues faster and more accessible.
Check it outActive Theory Experiment: Inception
An amazing experiment made by the folks of Active Theory where you can see the world bending like in the movie Inception.
Check it outRealistic glass backdrop
A really cool thread by Artur Bień on how to achieve a realistic glass backdrop effect with CSS using blur and a CSS mask.
Check it outWindows 95
An ongoing Windows 95 operating system experiment by Gabrielle Wee. It's an attempt to get as close as possible to Windows 95 using primarily CSS and HTML, with some JavaScript.
Check it outShadcn-vue
Beautifully designed components built with Radix Vue and Tailwind CSS. Many examples to browse and obtain the code from.
Check it outSilly Co Valley
Fairpixels has created "SillyCoValley," a fun fast-paced startup simulation game where players become the founder of a tech startup with a $40k seed round and 120 days to build a successful product, but beware of running out of funds before demo day.
Check it outThe ups and downs of text-wrap: balance and a polyfill
Steffen Bewersdorff writes about "text-wrap: balance", a CSS property that automatically aligns text lines for responsive layouts, discusses its technical limitations, browser support, use cases, and provides a lightweight polyfill for unsupported browsers, while cautioning against its overuse and mentions its sibling property, "text-wrap: pretty".
Read itArray Labs: 3D Mapping Earth from Space
Packy McCormick writes about Array Labs, a startup aiming to create a daily-refreshed, high-resolution 3D map of Earth using a distributed network of small radar imaging satellites, highlighting the potential applications and challenges in the Earth observation market.
Read itInk and Water simulation
A stunning demo that is a fluid simulation experiment using frame buffer objects and custom shaders. Made by Karim Maaloul.
Check it outVizro
Vizro is a toolkit for rapidly creating custom data visualization applications with simple configuration and optional high-code extensions, combining low-code and high-code approaches for flexibility and scalability.
Check it outFigma Guide to Handoff
Streamline your handoff process with a step-by-step guide for prepping Figma design files, including file organization, documentation, and collaboration tips.
Check it out38TB of data accidentally exposed by Microsoft AI researchers
Wiz Research found a data exposure incident on Microsoft’s AI GitHub repository, including over 30,000 internal Microsoft Teams messages – all caused by one misconfigured SAS token.
Read itInspirational Websites Roundup #50
A fresh, hand-picked selection of websites highlighting outstanding web designs.
Check it outSome Ideas for Fullscreen Image Slideshow Animations
A collection of ideas for slideshow animations on fullscreen images.
Check it out