Collective #772
Inspirational Website of the Week: Elisava Barcelona School of Design and Engineering
A really good design with great typography and interesting details with a touch of brutalism. Our pick this week.
Get inspired
Our sponsor
Vev — Advanced Websites Your Way
Vev unites the best of code and no-code web creation. Designers can quickly craft interactive sites from a visual canvas, while developers custom code on top for ultimate creative freedom. No more silos — experiment, iterate, and communicate naturally in real time from one space.
Twentieth year of WordPress, Designed
Read about how the Automattic Design team celebrated the WordPress 20th anniversary. Happy Birthday, WordPress!
Read it
A Deep Dive Into SVG Path Commands
An interactive guide to understanding SVG paths and path commands by Nanda Syahrasyad.
Check it out
Water Reflection using Three.js
A new video tutorial by Robin Payot on how to create a water reflection effect in Three.js.
Watch it
Iridescent crystal with raymarching and signed distance fields
Varun Vachhar dives into raymarching and signed distance fields and demonstrates how to spin up a raymarching shader and build an iridescent crystal.
Read it
CSS only floating labels
Stanko Tadić writes about the use of the CSS pseudo-class :placeholder-shown to create floating labels and demonstrates the input's current state without the need for JavaScript, providing code snippets and real-world use cases.
Read it
The React Graph Gallery
The React Graph Gallery displays hundreds of charts made with React, always with explanation and reproduciible code.
Check it out
Design for the web without Figma
David Heinemeier Hansson highlights the benefits of designing for the web directly in HTML and CSS instead of relying on tools like Figma, emphasizing the importance of collaboration between designers and programmers and the creativity that can thrive within constraints.
Read it
Vrite
Vrite Editor is an open-source, minimalistic WYSIWYG Markdown editor.
Check it out
Detect Scroll
Jordan Egstad open-sourced a performant scroll library he uses across all of his websites.
Check it out
Data Oriented Design Resources
An extensive curated list of great data oriented design resources. By Daniele Bartolini.
Check it out
Three.js enhanced CSS slider
Yuri Artiukh shows how to code an enhanced DOM slider that visualizes "encoding files" from the website of Evervault with some interesting Three.js particle techniques.
Watch it
In Defence of DOMContentLoaded
Harry Roberts defends the use of the DOMContentLoaded event as a metric for measuring site speed and user experience, arguing that it provides valuable insights into the runtime behavior of a website, especially for sites that heavily rely on deferred JavaScript or frameworks that use defer.
Check it out
Mofi: Content-aware fill and trim for music
With this tool you can shorten and lengthen a song, making it the perfect length to match a video or performance. You can keep the vibe of the song with seamless transitions.
Check it out
BoardCrafters
A really nice side project by Thomas Saint-Martin built with Three.js and React.
Check it out
Advanced macOS Commands
Saurabh has compiled a useful list of advanced macOS command-line tools, some of which you might not know about.
Check it out
Writedown
A simple and beautiful notes app with cloud sync, markdown and offline support.
Check it out
CSS Anchor Positioning
Jhey Thompkins shows how you can use Anchor Positioning to anchor elements to others with CSS alone.
Check it out
Creating a Blackjack Game with Alpine.js and the Deck of Cards API
Raymond Camden writes how he built a simple Blackjack game using an API that handles card decks.
Read it
Letter Hop
Steve Gardner added more scenes and particle effects to his awesome Letter Hop demo.
Check it out
GSAP On-Scroll Walking Cycle
Ksenia Kondrashova's creation of an animated character walking effect using GSAP.
Check it out
From our blog
Inspirational Websites Roundup #47
A hand-picked collection of the most innovative and aesthetic websites that we've come across in recent weeks.
Check it out
From our blog
On-Scroll SVG Filter Effect
Combining GSAP's Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
Check it out