Collective #693
Publikováno: 30.12.2021
Typejuice * PrinceJS * CSS in 2022 * React Native Skia * Smoothly Reverting CSS Animations
The post Collective #693 appeared first on Codrops.

Inspirational Website of the Week: Plus X Virtual Showroom
Sharp, bold and slick. This website sets their own unique style and provides a fresh and fast experience.

Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.

The story of the fight to archive the internet
Learn why the founder of the Internet Archive says his project is under threat.

The CSS :has() selector is way more than a “Parent Selector”
Bramus on the new and powerful :has() selector.

Array Grouping in JavaScript
Learn about the new array.groupBy() and array.groupByToMap() methods that let you group an array by a certain criteria.

Chrome Users Beware: Manifest V3 is Deceitful and Threatening
Like FLoC and Privacy Sandbox before it, Google Chrome’s Manifest V3 is another example of the inherent conflict of interest that comes from Google controlling both the dominant web browser and one of the largest internet advertising networks.

Fuite
Fuite is a tool for finding memory leaks in web apps. By Nolan Lawson.

Defining the web3 stack
Nader Dabit identifies the building blocks of the web3 technology stack in an introductory guide.

Is It Time for the JavaScript Temporal API?
Craig Buckler’s introduction to the Temporal API, a proposal that is already in stage 3 of approval.

Globe Lib
Shu Ding’s thread where he explains how he made a tiny globe library called Cobe with WebGL and shaders.

#Playground
A beautiful and playful 3D world made by Achmat Fauzi.

WebGPU Sketch Dojo
A collection of experiments with the emerging WebGPU API. Created by Georgi Nikolov.

Consistent, Fluidly Scaling Type and Spacing
Andy Bell on using a sizing scale and fluid type for making a website better.

How to Draw S-Curved Arrows Between Boxes / Rectangles
Alexander Wang shares how he went about drawing arrows between blocks for mind maps, flowcharts, etc.

Smoothly Reverting CSS Animations
A great technique on how to revert a CSS transition when hover is over. By Nikola Đuza.

React Native Skia (alpha)
React Native Skia brings the Skia Graphics Library to React Native.

CSS in 2022
Bramus shares this great list of personal predictions for CSS in 2022.

PrinceJS
An amazing “Prince of Persia” reimplementation written in HTML5/JavaScript. Check out the GitHub repo.

Glitch Image Generator
Generate and save unique glitchy images. Made by Adam Fuhrer.

Typejuice
Typejuice is a documentation generator for TypeScript Declaration Files inspired by godoc.

Lynn Fisher
Lynn Fisher’s epic annual portfolio refresh! Try resizing your browser.

Wrapping text inside an SVG using CSS
Jay Freestone explains how to use two SVGs and `shape-outside` to wrap text inside a shape.

Mix
Mix is an expressive way to effortlessly build design systems in Flutter.

Alternate Column Scroll Animation
A grid layout with columns that scroll in opposite directions and a content preview animation for the image.

Three.js Animation with K-d (Christmas) Tree Algorithm
In this coding tutorial, you’ll learn how to recreate the animation seen on the website of ONE-OFF in Three.js using the K-d tree algorithm.

Adding a Persistence Effect to Three.js Scenes
Learn how to enhance your Three.js scenes with postprocessing via framebuffers.
The post Collective #693 appeared first on Codrops.