Collective #756
![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_WOTW.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/Kintone-1.png?x72856)
Power up your Form Submissions
Add access controls, business process management and communication to your form submission results.
Find out more![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_spa.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_fonts.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_typedesign.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_nesting.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_svg.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_illusion.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_target.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_host.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_js.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_sibling.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_clock.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_shiny.jpg?x72856)
Shiny Button
Alex Widua coded this super cool shiny button that shows a reflection from your camera input.
Check it out![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_unplugin.jpg?x72856)
Unplugin
Unified plugin system for build tools. It currently supports Vite, Rollup, Webpack and esbuild.
Check it out![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_mac.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_closedAI.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_bookmark.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_halp.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_chat.jpg?x72856)
Visual ChatGPT
Visual ChatGPT connects ChatGPT and a series of Visual Foundation Models to enable sending and receiving images during chatting.
Check it out![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_table.jpg?x72856)
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![Collective 756 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/C756_clip.jpg?x72856)
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![Collective 754 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2023/03/Divi_soulmate.jpg?x72856)
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