Collective #689
Publikováno: 25.11.2021
Modern CSS Reset * SVGcode * Stunning 3D scenes with R3F * Caffeine
The post Collective #689 appeared first on Codrops.

Inspirational Website of the Week: Baillat Studio
A slick and bold design with sharp typography and interesting layouts. Our pick this week.

Black Friday is Coming
Over $1,000,000 worth of free prizes, free bonus gifts, dozens of exclusive discounts and perks from our partners, and our biggest discount ever on Divi memberships and upgrades (plus tons of discounts in the Divi Marketplace)!

How JavaScript engines achieve great performance
Robin Heggelund Hansen takes a closer look at a few techniques that different JavaScript engines use to achieve good runtime performance.

Expo Map
An amazing interactive WebGL 3D replica of the expo site in Dubai.

Modern CSS Reset
A tour of Josh W Comeau’s custom CSS reset.

Tiny UI Toggle
Toggle the state of a UI element to easily create components e.g. collapse, accordion, tabs, dropdown, dialog/modal.

Parallax Powered by CSS Custom Properties
A great tutorial by Jhey Tompkins on how to use custom properties to control a parallax effect.

emojimix
A fun tool that lets you combine two emojis into one.

SVGcode: a PWA to convert raster images to SVG vector graphics
Learn about SVGcode, a Progressive Web App that lets you convert raster images like JPG, PNG, GIF, WebP, AVIF, etc. to vector graphics in SVG format.

How to build stunning 3D scenes with React Three Fiber
This article shows you how to create breathtaking 3D animations using React Three Fiber (R3F).

Dynamic Color Manipulation with CSS Relative Colors
Jim Nielsen explains why he’s so excited about dynamic color manipulation with CSS relative colors.

AppFlowy.IO
AppFlowy is an open source alternative to Notion where you are in charge of your
data and customizations.

BgRem
An AI powered video background removal tool.

Cross-fading any two DOM elements is currently impossible
A really interesting article by Jake Archibald on a tricky problem: cross-fading two elements.

State of CSS 2021
Philip Jägenstedt gives an overview of the State of CSS 2021 survey results and how they will influence priorities in 2022.

Tamagui
In case you didn’t know about it: Universal React design systems that optimize for native and web.

Caffeine
A very basic REST service for JSON data – enough for prototyping and MVPs.

How not to write property tests in JavaScript
James Sinclair explores the question “how do we keep ourselves from over-specifying or writing unnecessary tests?”

Backgrounds
In this “Learn CSS!” module you’ll learn how you can style backgrounds of boxes using CSS.

Let’s not send developers to the accessibility tree tool
Christian Heilmann’s overview of accessibility information in the browser that can be used and understood by developers.

Marvin
Marvin is a fun Slackbot that doesn’t like any of your ideas.

Letting users tick a ‘none’ checkbox
Learn how adding a ‘none’ option to checkboxes can solve several issues.

Puzzle Panda
Puzzle Panda lets you play jigsaw puzzles online for free. With touch support.

Blog Page Accessibility Deep Dive
Abbey Perini performs an accessibility audit to her portfolio and shares her insight in this series of articles.

Ripple Effect on a Texture with Three.js
A coding session that deconstructs the ripple effect seen on homunculus.jp.
The post Collective #689 appeared first on Codrops.