Collective #756
Inspirational Website of the Week: Lightship
Lightship is an exceptional website that has been carefully crafted to create a cohesive and visually appealing user experience. Our pick this week.
Get inspired
From Our Sponsor
Power up your Form Submissions
Add access controls, business process management and communication to your form submission results.
Find out more
SPA view transitions land in Chrome 111
Exciting times! SPA view transitions have now landed in Chrome. The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states.
Check it out
Modern Font Stacks
Discover the best modern font stacks organized by typeface classification for every modern operating system with this useful CSS resource.
Check it out
Type Design Resources
A growing, public, collaborative collection of type design resources. Everything from learning the basics to running your own foundry.
Check it out
CSS Nesting
Adam Argyle shows how to get started with the most popular CSS preprocessor feature which is now built into the language: nesting style rules.
Read it
Copy-Paste SVG Shapes
A beautiful the collection of 120+ basic SVG shapes for your upcoming project. Simply click on a shape to copy its SVG code to your clipboard. By Monika Michalczyk.
Check it out
Could we make the web more immersive using a simple optical illusion?
The article discusses an exploration of implementing an amazing optical illusion technique created by Johnny Lee, which enables the creation of a virtual reality display through 3D eye tracking using a webcam and using the screen as a virtual window that can change based on the angle at which it is viewed and the distance from the eyes.
Check it out
Beautiful and mind-bending effects with WebGL Render Targets
Maxime Heckel delves into using WebGL Render Targets with the render loop to create scenes with optical illusions and post-processing effects.
Read it
Self-Hosted SaaS Alternatives: Replacing Paid Tools With FOSS Tools
In a world where every service wants to put you on a subscription forever, is now the time to start self-hosting your apps instead? Ernie Smith looks at the landscape.
Check it out
All JavaScript and TypeScript Features of the last 3 years
This article goes through almost all of the changes of the last 3 years (and some from earlier) in JavaScript / ECMAScript and TypeScript.
Read it
Selecting previous siblings with CSS :has()
Selecting a previous sibling was for long impossible, but is now a breeze with the has() pseudo-class. An article by Tobias Ahlin.
Read it
Creating a Clock with the New CSS sin() and cos() Trigonometry Functions
Mads Stoumann shows how to use CSS trigonometry functions to create a pure CSS clock.
Check it out
Shiny Button
Alex Widua coded this super cool shiny button that shows a reflection from your camera input.
Check it out
Unplugin
Unified plugin system for build tools. It currently supports Vite, Rollup, Webpack and esbuild.
Check it out
Macintosh Simulator
This incredible 3D Macintosh simulator has been built with WebGL and runs Macintosh OS on top of WebAssembly. By Mark Shenouda.
Check it out
OpenAI becomes ClosedAI
An excellent parody site that highlights the problematic surrounding OpenAI's questionable change in direction and making GPT-4 only available to paying customers.
Check it out
Make Bookmarklets
Make-Bookmarklets.com is a user-friendly bookmarklet generator that allows you to effortlessly create and test bookmarklets right in your browser.
Check it out
Halp: A CLI tool to get help with CLI tools
Halp aims to help find the correct arguments for command-line tools by checking the predefined list of commonly used options/flags. Additionally, it provides a prompt for quick access to the manual page or cheat sheet of the given command.
Check it out
Visual ChatGPT
Visual ChatGPT connects ChatGPT and a series of Visual Foundation Models to enable sending and receiving images during chatting.
Check it out
Progressively Enhancing a Table with a Web Component
Raymond Camden shows how to build a web component that enhances a regular HTML table by adding an event handler for sorting columns.
Read it
From our blog
Fullscreen Clip Animation
Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.
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