Bi-Weekly Frontend News

Collective #773

C773_details

Invisible Details of Interaction Design

This article explores the intricacies of interaction design and delves into the science behind the details that make great user experiences, discussing concepts such as kinetic physics, responsive gestures, spatial consistency, fluid morphing, frequency and novelty, and fidgetability.

Check it out
C773_viewport

New Viewport Units

Learn about the small, large, and dynamic viewport units in CSS in this article by Ahmad Shadeed.

Read it
C773_scrolling

A case study on scroll-driven animations performance

This article by Yuriko Hirota introduces a new set of APIs that support scroll-driven animations, comparing them to the traditional JavaScript technique and showcasing how the new APIs make it easier to create smooth and visually appealing animations triggered by the user's scroll position.

Read it
C773_freefonts

Free Faces

A beautifully made website by Simon Foster that features a carefully selected assortment of typefaces available for free.

Check it out
C773_texteditor

Plate

Plate is a free, open-source, responsive, and dark mode-enabled modern rich-text editor for React, featuring a core plugin system, 50+ headless, unstyled packages, state and behavior hooks, and components from @radix_ui and @shadcn UI.

Check it out
C773_cards

Cards & Coding

Nicolas Tilly, an interactive media designer from Paris, shared this project with us that he has been working on since 2021. It's a stunning collection of digital and interactive trading cards that he created in collaboration with designers.

Check it out
C773_break

LittleJS Breakout Tutorial

A great tutorial on how to create a breakout-style game using the LittleJS game engine, covering topics such as creating game objects, implementing collision, controlling player movement, and adding sound effects.

Read it
C773_fontstack

The new @font-face syntax

An article by Ollie Williams about the new syntax for using variable fonts and color fonts in CSS, including how to test browser support for different font technologies using the tech() function in @font-face and @supports, and the availability of different font formats like woff2, truetype, and opentype.

Read it
C773_dissolve

Dissolve Shader

A fantastic demo by Faraz where he shows how to make a Unity dissolve shader work in Three.js using R3F. Paul Henschel also made some modifications, check it out here.

Check it out
C773_floating2

Solved: Tricky Floating Image Alignment

Tyler Sticka explains a CSS technique that combines the overflow behavior of floated images with the alignment behavior of grid or flex, allowing for better control of image and text layout in web design.

Check it out
C773_circuitrush

Circuit Rush

A great 3D racing game made with React Three Fiber and Cannon. Created by Yaraslau Maksimchyk after completing Bruno Simon's Three.js Journey.

Check it out
C773_aiauto

AI and the automation of work

Benedict Evans writes about the potential impact of generative AI, Large Language Models (LLMs), and ChatGPT on automation, employment, and the future of work, drawing comparisons to previous waves of automation and discussing the creation of new jobs.

Read it
C773_google

Permission

A good read by Jeremy Keith where he discusses the changing dynamics between Google and website owners, highlighting how Google's search results have shifted from linking to web pages to generating summaries on its own, potentially harming website traffic and the open web.

Read it
C773_chatgptjs

chatgpt.js

Chatgpt.js is a powerful JavaScript library that facilitates easy interaction with the ChatGPT DOM, offering various features and being lightweight and user-friendly.

Check it out