Collective #775
Inspirational Website of the Week: Ectogasm
Gotta love this design! It has so much personality and a unqiue vintage touch, the perfect fit for the brand it represents. Amazing work by Thom Aufresne with lots of lovely micro interactions.
Get inspired
This content is sponsored via BuySellAds
Get 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 out
Help Design the Inaugural State of HTML Survey!
Lea Verou writes about the launch of a new survey called "State of HTML 2023" aimed at gathering unbiased data on the practices of front-end developers, focusing on HTML and its related technologies, and encouraging community participation in shaping the survey through discussions and voting.
Read it
Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?
A comprehensive guide by Harry Roberts on Google's Core Web Vitals initiative, explaining its role in search rankings, how it affects SEO, and providing tips on optimizing website performance for better rankings.
Read it
Aligning the Size and Position of DOM and Three.js Objects
A comprehensive guide on how to synchronize DOM elements and Three.js objects, discussing three approaches: matching DOM size, matching camera's z-value, and matching object size, along with bonus information on applying rounded corners using fragment shaders. By Misaki Nakano.
Read it
DocuSeal: Open Source Document Signing
An open-source alternative to DocuSign and PandaDoc that allows users to create, fill, and sign digital documents with various features like a PDF form builder, multiple submitters, automated emails and more.
Check it out
Free Vector Illustrations For Your Projects
Free, hand-drawn vector illustrations ideal for websites, web applications, mobile applications, marketing materials, printouts, social media posts and more. By Greg Dlubacz.
Check it out
A glitch in the SEO matrix
A super interesting article about an intriguing glitch in SEO where a specific keyword related to open-source software for big data management gained significant search volume due to a popular exam question.
Read it
Scroll driven animations in CSS are a joy to play around with!
Brecht De Ruyte's introduction and exploration of scroll-driven animations in CSS, particularly focusing on how animations can be triggered and controlled based on user scroll, and the possibilities and creative potential it offers for web developers.
Read it
CSS View Transitions
Adam Argyle experiments with CSS view transitions and animations, specifically focusing on animating new `node.textContent`, using custom animations for stage enter and exit, with a link to a CodePen and YouTube video demonstrating the animation style.
Check it out
gniP
With gniP you can quickly create heartbeat subdomains to receive POST notifications when a specified interval of ping signals is missed, providing an alternative method for monitoring services that are not publicly accessible or cannot be pinged externally.
Check it out
SVG Gradients: Solving Curved Challenges
Michael Sydney Moore recounts the challenges faced while attempting to transform a Figma design of a radial dial with a linear gradient into code, exploring the complexities of SVG gradients and the solution devised to tackle the problem.
Read it
FBO - dynamic particles
Michal Zalobny made this fantastic demo showcasing physics computed in a fragment shader on 40k+ particles running at 60FPS.
Check it out
How to Use AI to Do Stuff: An Opinionated Guide
Ethan Mollick provides an overview of the current state of artificial intelligence, particularly focusing on Large Language Models (LLMs) and their applications, including writing assistance, image generation, animation, voice cloning, and education.
Check it out
Techniques used on “One Year”
Antoine Galy shares a very insightful thread on some of the techniques used on the “One Year” website at Cosmic Shelter.
Check it out
Sonic Template
A very nice Sonic demo made by Panida Canta with Three.js.
Check it out
Unloop
A co-creative looper that utilizes generative modeling (specifically VampNet) to produce unique variations of a musician's recorded loops, enhancing the traditional looper experience and making it more interactive and enjoyable.
Check it out
From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry
Nils Bolder's retrospective on building a unique card component with images inside a phone frame, the challenges faced during implementation using various CSS approaches, and a modernized solution using CSS features like cascade layers, subgrid, and container queries.
Read it
Formative posts
Eric Bailey shares a compilation of writings by various authors that have influenced his perspective, covering topics such as accessibility, inclusive design, technology, and personal experiences.
Check it out
Coding Randomized Zelda Patterns
A detailed guide by Paul Hebert on creating procedurally generated artwork using JavaScript and SVGs, inspired by the repeating circle motif found in the game "Legends of Zelda: Tears of the Kingdom."
Read it
Flynt 2.0
Flynt 2.0 is an advanced WordPress Starter Theme offering enhanced performance, improved editor experience with Gutenberg support, a cleaner and leaner codebase, and various other features for a seamless developer experience.
Check it out
Neon Toggle Switch
A very cool neon toggle switch made using only CSS by Jon Kantner.
Check it out
Video: Modern CSS Layout is Awesome
Michelle Barker's talk on CSS layout at the Beyond Tellerand conference.
Watch it
From our blog
Grid Flow Animation
A loading and navigation animation where thumbnails "flow" into a grid.
Check it out