Collective #689

Original Source: https://tympanus.net/codrops/collective/collective-689/

Inspirational Website of the Week: Baillat Studio

A slick and bold design with sharp typography and interesting layouts. Our pick this week.

Get inspired

Our Sponsor
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)!

Check it out

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.

Read it

Expo Map

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

Check it out

Modern CSS Reset

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

Read it

Tiny UI Toggle

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

Check it out

Parallax Powered by CSS Custom Properties

A great tutorial by Jhey Tompkins on how to use custom properties to control a parallax effect.

Read it

emojimix

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

Check it out

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.

Check it out

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).

Check it out

Dynamic Color Manipulation with CSS Relative Colors

Jim Nielsen explains why he’s so excited about dynamic color manipulation with CSS relative colors.

Check it out

AppFlowy.IO

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

Check it out

BgRem

An AI powered video background removal tool.

Check it out

Cross-fading any two DOM elements is currently impossible

A really interesting article by Jake Archibald on a tricky problem: cross-fading two elements.

Read it

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.

Check it out

Tamagui

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

Check it out

Caffeine

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

Check it out

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?”

Read it

Backgrounds

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

Check it out

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.

Read it

Marvin

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

Check it out

Letting users tick a ‘none’ checkbox

Learn how adding a ‘none’ option to checkboxes can solve several issues.

Read it

Puzzle Panda

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

Check it out

Blog Page Accessibility Deep Dive

Abbey Perini performs an accessibility audit to her portfolio and shares her insight in this series of articles.

Read it

From Our Blog
Ripple Effect on a Texture with Three.js

A coding session that deconstructs the ripple effect seen on homunculus.jp.

Check it out

The post Collective #689 appeared first on Codrops.