Collective #755
Inspirational Website of the Week: Motto
This week's pick is an impressive all-rounder: beautiful scroll animations, smooth page transitions and engaging details.
Get inspired
From Our Sponsor
Developer-friendly eSignature API that scales with your workflows
The signNow API is here to surprise you – always in a good way. We have designed the API to make it quick and easy for developers to build, test, and go live with an eSignature integration in one day instead of months.
Annual Awards 2022
Discover the best of the web in this year's annual awards where only the most exceptional websites and professionals made it to the the winners list.
Check it out
Common Beginner Mistakes with React
In this article, Josh W Comeau highlights the most common mistakes beginners do with React and how to avoid them.
Read it
3D Customization Tool
An amazing 3D customization tool made by Paul Henschel and Anderson Mancini using Three.js, React, Three Fiber, Frame Motion and Valtio.
Check it out
Iconhunt
A search engine with more than 150.000 free, open sources icons. Use them in Notion, Figma or download them with a single click.
Check it out
Creating VS Code Snippets to Speed Up Workflow
Michelle Barker shows how developers can create their own code snippets in VS Code for more efficient coding, with step-by-step instructions and examples.
Read it
Theme Toggles
This useful collection provides a selection of dark and light theme toggles that use SVGs and CSS transitions, and includes React support.
Check it out
Pure CSS Loader Generator
A useful code generator that helps you to create simple CSS spinners. You can choose between four different types of CSS spinners and customize them by adjusting the settings. By Vincent Will.
Check it out
Relative rounded corners
A great design tip by Andy Bell where he shares a formula for creating perfectly sized rounded corners with matching inner and outer radii.
Check it out
Three.js Realism Effects
From SSGI to Motion Blur and TRAA, these effects will enhance your Three.js scene's realism.
Check it out
I doubled-down on RSS
Eric Bailey shares why he believes that RSS is an incredibly powerful, under-appreciated, and under-utilized technology.
Read it
The Web Needs a Native .visually-hidden
Ben Myers explains how a hypothetical native "visually-hidden" would hide elements from sighted users while still allowing them to be accessible to screen readers and other assistive technologies.
Read it
Everything You Need to Know About the Gap After the List Marker
Šime Vidas discusses how to add gaps after custom list markers in CSS, which cannot be done by setting margins and paddings on ::marker pseudo-elements.
Read it
So how does your computer ACTUALLY compute sine?
This interesting video explains how trigonometry and basic linear algebra are used in game development, demonstrating how trig functions are computed visually and exploring how they are calculated behind the scenes.
Watch it
ts-reset
A 'CSS reset' for TypeScript, improving types for common JavaScript API's.
Check it out
Progressive enhancement options for traditional server-rendered sites
Jay Freestone explores the best way to progressively enhance a traditional server-rendered application with client-side JavaScript.
Read it
After Dark Screensavers in CSS
Relive classic 1990s Mac and PC screensavers like Flying Toasters and Aquatic Realm, remade using modern CSS techniques like animations and transforms.
Check it out
I no longer understand prefers-contrast
Kilian Valkhof discusses the confusion surrounding the prefers-contrast media query in CSS, which has been linked to forced-colors in a way that breaks the 'contract' of the prefers-* prefix and renders the query useless on its own, leaving developers unsure of its purpose or how to use it.
Read it
WebGPT
Create your own customized ChatGPT agent for your website using WebGPT.
Check it out
Creating Isometric RPG Game Backgrounds
An enlightening tutorial on how to use Stable Diffusion techniques to create 2D game environments.
Read it
From our blog
Coding Kenta Toshikura’s Glass Effect with Three.js
Learn how to recreate the glass effect seen on Kenta Toshikura's website using postprocessing in Three.js.
Check it out
From Our Sponsor
Create websites with ease
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