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
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
Ripple Effect on a Texture with Three.js
A coding session that deconstructs the ripple effect seen on homunculus.jp.
Check it out