Collective #774
Inspirational Website of the Week: Lief Amsterdam
Quirky, vibrant, and full of delightful surprises, Lief Amsterdam is our website of the week! With its stunning color palette, unconventional layouts, and smooth effects, it offers a truly unique browsing experience.
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
Scroll progress animations in CSS
Michelle Barker writes about the implementation of a new specification that allows the creation of scroll-linked animations using CSS, providing examples and instructions on how to use scroll-driven animations on a website.
Check it out
Advanced Positioning in CSS Grid
Master the art of positioning elements on CSS Grid with this practical and in-depth guide where Zoran Jambor explains the workings of grid-row and grid-column as he shows how to recreate an interesting and creative layout from scratch.
Watch it
How React 18 Improves Application Performance
Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance.
Read it
WebGPU: the cross-platform graphics API of tomorrow
François Beaufort explains how to write a simple C++ application using WebGPU, a web graphics API, that can run on both web and specific platforms, providing a cross-platform graphics solution.
Read it
Is Pepito out?
A really nice Three.js app made by Matias Gonzalez that shows if Pépito the cat is out.
Check it out
Draw With WebGL Flowers
A beautiful demo made by Ksenia Kondrashova where you can draw WebGL flowers.
Check it out
Immich
Immich is a self-hosted photo and video backup solution directly from your mobile phone. It's under active development. Made by Alex Tran.
Check it out
Project Cars Tutorial
Learn about Project Cars that was made with Three.js and Pixotronics in this video tutorial by the team of Immersive Studios.
Watch it
Gradient Generator
With this tool you can create advanced CSS gradients.
Check it out
CSS Findings From The Threads App
Ahmad Shadeed shares some interesting CSS findings from the threads app by Meta.
Read it
Pines: An Alpine and Tailwind UI Library
Pines is a library of animations, sliders, tooltips, accordions, modals, and more! It's a set of UI elements that can be copy and pasted into any Alpine and Tailwind projects.
Check it out
Dissolve Effect - React Three Fiber Tutorial
Learn how to build a dissolve shader material to make 3D objects appear and disappear with React Three Fiber and Three.js. By Wawa Sensei.
Watch it
Future CSS Tip: "Supercharged CSS" with anchor positioning
Jhey Thompkins shows how you can anchor an element to multiple elements with anchor positioning and combine it with CSS mask to create some "Supercharged CSS".
Check it out
Web-Check
Get an insight into the inner-workings of a given website: uncover potential attack vectors, analyse server architecture, view security configurations, and learn what technologies a site is using.
Check it out
The Blob Toy
A really cool blob toy made by Saharan.
Check it out
Animated SVG Logo
Anthony Fu shares the process of creating an animated SVG logo using stroke animations and mask support, including references to helpful resources.
Read it
Using emoji on the web
This article discusses various issues and solutions related to using native emoji on the web, including rendering inconsistencies, missing flags on certain platforms, and the use of color fonts to address these problems.
Check it out
Uptime Kuma
Uptime Kuma is an easy-to-use self-hosted monitoring tool.
Check it out
Free Font: Commit Mono
Commit Mono is an anonymous and neutral programming typeface focused on creating a better reading experience. A project by Eigil Nikolajsen.
Check it out
From our blog
Scroll-Based Layout Animations
An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.
Check it out
From our sponsor
Divi: Empowering WordPress Website Creation
Divi stands as the leading choice for crafting WordPress websites, boasting cutting-edge visual builder technology, an extensive array of design possibilities, and user-friendly features that enable users to craft remarkable websites with utmost ease and efficiency.
Try it for free