Collective #769
Inspirational Website of the Week: WalletCon
We love WalletCon's website design because of its unique grid layout and animated background effect. The typography is spot on and the 3D objects add a lovely touch.
Get inspired
Our Sponsor
Boost your workflow with the handy web design tool—Readymag
Designing client websites in a team? Readymag’s got you covered. With the tool, you can easily create stunning websites, add powerful no-code animations, collaborate smoothly in real time, discuss issues in Comments, and instantly share results with clients.
Try for free
Cyclic Dependency Space Toggles
Roman Komarov introduces a brilliant technique he calls "Cyclic Toggles" that allows for selecting a value from a list in CSS by toggling a single custom property, and explains the logic behind it and its use cases.
Read it
Scrolling between scenes in Three.js
A great video tutorial by Yuri Artiukh on how to recreate the fantastic 3D scene scrolling effect seen on Alireza.com.
Watch it
100+ days of pointless coding with HTML and CSS
Kitasenju Design shares more than 100 fun demos that show what can be done creatively with HTML, CSS and a bit of JavaScript.
Check it out
Rebuilding a comment component with modern CSS
Ahmad Shadeed shows how to building a comment component with modern CSS like flexbox, logical properites, :has, style queries, and subgrid.
Read it
Building a magical AI-powered semantic search from scratch
An end-to-end walkthrough by Maxime Heckel on how to build a semantic search from your own MDX or Markdown based content using Postgres vector similarity search and OpenAI's text embeddings and chat completion APIs.
Read it
TresJS - Images of particles
A fantastic carousel demo made by Francesco Michelini using ThresJS. The images are made of particles and you can see them animate when you click.
Check it out
Example Code Previewer
A minimal code viewer for HTML with support for syntax highlighting, multiple files and Codepen prefill. By Palash Bansal.
Check it out
Positioning anchored popovers
This article by Hidde de Vries dives into the topic of positioning anchored popovers in CSS. It explores the challenges of positioning popovers when they are in the top layer, away from the context of their invoker.
Read it
Blur Vignette effect in CSS
Artur Bień shows how to create a blur vignette effect using pure CSS, achieved through creating an overlay with backdrop-filter and a mask-image consisting of 6 gradients.
Check it out
The gotchas of CSS Nesting
Kilian Valkhof writes how CSS nesting and the use of :is() both have their own potential gotchas when it comes to the way browsers transform nested CSS rules to individual rules, with the latter potentially resulting in vastly more specific CSS selectors.
Check it out
Redditor creates working anime QR codes using Stable Diffusion
Read about a new artistic QR code creation technique using Stable Diffusion AI image-synthesis model.
Read it
The origin private file system
Thomas Steiner discusses the origin private file system (OPFS), a newly introduced storage endpoint that is highly optimized for performance and visible only to the origin of the page, not to the user.
Read it
Aten7 - Toom Archives
A breathtaking interactive web experience crafted by the team of Immersive Garden.
Check it out
Weave
Weave, developed by the team at Weights and Biases, is a new open-source toolkit designed for performant, interactive data exploration.
Check it out
Modern CSS For Dynamic Component-Based Architecture
This great article by Stephanie Eckles discusses the latest features and improvements in CSS, including using CSS reset additions, project architecture with nesting and cascade layers, and theming and branding with custom properties, color-scheme, and accent-color.
Check it out
Sandstorm
Sandstorm is an open source project built by a community of volunteers with the goal of making it really easy to run open source web applications.
Check it out
Google No Longer Automatically Indexes Websites - WTF?
Nate Hoffelder discusses the issue of Google no longer automatically indexing websites, leading to a decrease in traffic to those sites.
Read it
An Introduction To Debugging In Node.Js
This article by Craig Buckler provides tips and techniques for debugging Node.js applications, including using a good code editor, source control systems, bug tracking systems, test-driven development, and more.
Read it
Understanding GPT tokenizers
Simon Willison explains what tokens are and how they work in large language models such as GPT-3/4, LLaMA, and PaLM. He shares a tool for exploring how tokens work and includes examples of tokenization in various languages.
Read it
Brute.Fail: Watch brute force attacks fail in real time
Real time attempts to break into Mike Damm's servers by attackers trying to guess usernames and passwords.
Check it out
Free Online Database Diagram Tool
An online tool called which allows users to create ER diagrams, relational diagrams, schema designs, LDMs, and PDM data models.
Check it out
From our blog
Free AI Generated Images Vol. 1
Our first collection of 120+ free AI generated images for you to use in your projects or draw inspiration from. Prompts included!
Check it out
Our sponsor
Secure a mighty domain for a mini price
Looking for an affordable .com domain? Look no further! Get yours for just $5.98 using our exclusive discount code NEWCOM598. Privacy and security are our top priorities, along with premium products and services tailored for businesses. Enjoy round-the-clock customer support, too. Don't miss out, new customers only.