Collective #761

Inspirational Website of the Week: Studiogusto
From the typography to the interactive elements, on Studiogusto everything is carefully crafted to create a seamless and visually stunning web experience. A clear winner this week!
Get inspired
Automated visual component testing – powered by Storybook
Built by Storybook maintainers, Chromatic turns stories into tests. Enabling you to automate checks for visual changes and verify component behavior on each commit. Ready to start? Sign up today with a $500 credit using code "CODROPS".
Get started
AutoFocusDOF: Autofocus DOF component for React Three Fiber
The AutoFocusDOF Component by Anderson Mancini is a tool that simplifies the process of creating a scene with React Three Fiber and post-processing effects for auto-focusing. It uses RayCaster to calculate the distance of objects on Canvas and requires @react-three/postprocessing to function.
Check it out
Introducing npm package provenance
GitHub has announced a new feature for its npm packages called "provenance" that provides a verifiable way to link a package back to its source repository and the specific build instructions used to publish it. This will increase trust in the npm supply chain by giving developers the tools they need to ensure the integrity of their software supply chain.
Read it
Wayyy
With Wayyy you can create various types of surveys to gather feedback from your team or audience. It has features such as response analysis to provide insights and a customizable survey experience with branding options.
Check it out
Build in-browser WordPress experiences with WordPress Playground and WebAssembly
This article by Adam Zieliński and Thomas Nattestad discusses the WordPress Playground, a tech stack that runs a full WordPress-powered by PHP directly in the browser with WebAssembly. The post explores how it works, how it can help WordPress developers, and what it means for the future of WordPress.
Read it
Phind: AI search engine
Phind is an AI-powered search engine optimized for developers and technical questions that provides instant answers with detailed explanations and relevant code snippets from the web. It uses large AI language models to generate answers based on information from multiple sources and is always up to date.
Check it out
Space Elevator
In this beautiful and educational scroll experience you take a trip to space and explore the atmosphere in the world's only space elevator. An amazing creation by Neal Agarwal.
Check it out
Storybook 7.0
Storybook 7.0 is a major release for the popular UI workshop environment. It includes new features such as Vite support, zero-config support for NextJS and SvelteKit, improved type safety, a UI design refresh, an overhaul of the documentation system with MDX2 support, improved interaction testing, and more. The release aims to modernize Storybook and improve its stability in a rapidly-changing frontend ecosystem.
Check it out
Offline Is Just Online With Extreme Latency
Jim Nielsen discusses the concept of "Local-first Software" presented by Peter Van Hardenberg, which proposes a paradigm shift in software development, from cloud-based to device-based, where the cloud is leveraged for data storage, accessibility, and collaboration without being dependent on it, and how this could lead to a more resilient approach to building for the web.
Read it
Animated Drawings
Learn about the Animated Drawings project, which is an implementation of an algorithm for automatically animating children's drawings of the human figure. The project provides a creative tool that allows users to create animations with their own drawn characters by modifying configuration files, and also offers a browser-based demo for quick and easy animation.
Check it out
Extending realities for design & development — an XR Conversation
This article is about extended reality (XR), including virtual and augmented reality, and its potential for mainstream popularity in 2023. It features insights from the 14islands team on how to approach XR projects from a design and development perspective.
Read it
Exploring :has() Again
Michelle Barker revisits the :has() pseudo-class in CSS, demonstrating its ability to select any element in the DOM relative to another, as long as they share a common ancestor, and provides some practical demos.
Read it
KV.JS: Advanced in-memory caching module for JavaScript
KV.JS is an advanced caching module for JavaScript that provides in-memory data storage capabilities, without the need for Redis or Memcached. It can handle multiple data types and supports over 140 functions for various operations.
Check it out
Web Accessibility: A Reference to Creating Inclusive Websites
A comprehensive guide to web accessibility and inclusive web design, covering over 50 points, tips, and advice across ten different categories. The article highlights the importance of ensuring that websites comply with accessibility standards to provide an inclusive online experience for individuals with disabilities, who rely on assistive technology like screen readers to browse the web.
Read it
The Complete Beginners Guide To Autonomous Agents
Learn the basics of autonomous agents, their potential applications, how they work, and their future prospects in this article by Matt Schlicht.
Read it
Web LLM
Web LLM is an innovative project that aims to bring language model chats directly onto web browsers, without requiring server support. It leverages the power of WebGPU to accelerate the process and enable users to build AI assistants with privacy and GPU acceleration.
Check it out
Pattern Club
Joel Rosen created this fantastic place for inspiration: A curated gallery of patterns, textures and visuals by awesome designers and illustrators.
Check it out
UI Interactions & Animations Roundup #31
It's time for a new collection of Dribbble shots featuring trendsetting creative animations and motion designs that will ignite your inspiration.
Check it out
Unleash Your Creative Genius with Divi
Unleash your inner creativity and build stunning websites faster than ever with Divi - the ultimate WordPress page builder. With its intuitive drag-and-drop interface, advanced design options, and lightning-fast performance, Divi empowers developers to customize client sites with ease and speed.
Try it for free for 30 days