Bi-Weekly Frontend News

Collective #782

C782_maxim

Painting with Math: A Gentle Study of Raymarching

Maxime Heckel shares his experience with GLSL shaders and how he became intrigued by Raymarching, a technique to render 3D scenes using math and signed distance functions. He explains the basics of Raymarching, its use of signed distance fields, and how to implement it in a Three.js/React Three Fiber environment, ultimately creating complex scenes with lighting, shadows, and fractals.

Check it out
C782_starter

Vue3 + TresJS Starter

A fresh Vue 3 and TresJS starter made by Francesco Michelini, including components for loading a custom GLTF model, handling click events on a rotating box, using GSAP as a Vue Composable, and the inclusion of Pinia for state management, along with setup and production build instructions.

Check it out
C782_meyer

Nuclear Anchored Sidenotes

Eric Meyer discusses the use of anchor positioning in CSS to create Tufte-style static sidenotes for footnotes in a web project and explains how this technique works, with reference to the limitations and potential future developments in CSS anchor positioning.

Read it
C782_dataloss

Shining a Light on the Digital Dark Age

Adrienne Bernhard writes about the challenges of preserving digital information in the face of hardware degradation, format obsolescence, and data decay, highlighting the risk of a "Digital Dark Age" where valuable information could be lost.

Read it
C782_qr

Building a QR Coder Web Component

Raymond Camden writes about his exploration of using web components for progressive enhancement, specifically creating a web component to generate QR codes for URLs, and shares the implementation using a JavaScript library called QR Code JS by Daniel Jackson.

Read it
C782_postmarks

Postmarks

Postmarks is a single-user bookmarking website that offers features like tag-indexed bookmarking, ActivityPub publishing, and simple commenting, inspired by platforms like del.icio.us and Google Reader, with the goal of easy customization and hosting on Glitch.

Check it out
C782_parallax

Project Parallax

A lovely personal project by Dennis Snellenberg showing the parallax effect in action of various photographs.

Check it out
C782_globeshader

Realtime Planet Shader

Julien Sulpis has created this real-time procedural planet shader in WebGL using GLSL, featuring raycasting of spheres with fbm noises for normals and colors, along with an atmosphere hack, and it runs smoothly at 60fps on various devices.

Check it out
C782_lobocss

CSS lobotomized owl selector: A modern guide

This article explores the "lobotomized owl selector" in CSS, a technique introduced by Heydon Pickering in 2014, discussing its history, benefits, and limitations, as well as its modern applications and use in various UI patterns, such as horizontal lists and vertical containers, while emphasizing its low specificity and exception-based styling.

Read it
C782_accessiblecharts

How to make charts and graphs more accessible

This article by Whitney Lewis discusses the importance of creating accessible and usable data visualizations, covering topics such as static and dynamic visualizations, color considerations, keyboard interactions, screen reader accessibility, and strategies for making dynamic data visualizations more user-friendly for individuals with disabilities.

Check it out
C782_accessibilityquestions

Web Components Accessibility FAQ

Manuel Matuzović shares a Q&A-style post about web components and their accessibility, addressing various questions related to web components and their impact on accessibility.

Check it out
C782_geospatial

Satlas

A platform that uses geospatial data and AI models to monitor and analyze changes on Earth, including marine and renewable energy infrastructure, tree cover, and offers high-resolution satellite imagery enhancement.

Check it out
C782_character

Floating Capsule Character Controller

A web-based character controller by Andrew Chen built on React, React Three Fiber, and React Three Rapier, offering features like seamless movement over obstacles, enhanced control with floating forces, realistic physics simulation, and various character animations with recent updates introducing new character animations, physics enhancements, camera improvements, and character auto-balancing features.

Check it out
C782_designsys

Redesigning Design Systems

An introductory guide to creating and implementing design components, emphasizing the importance of a well-thought-out process, including research, design, build, and release phases, to achieve an accessible and widely adopted component within a design system.

Check it out
C782_bitmapfonts

ZX Origins

Damien Guard has designed numerous 8x8 bitmap fonts available for use in games, requesting credit in exchange, and provides information on their usage, inspiration, and download options for various formats.

Check it out
C782_gitgame

Oh My Git!

"Oh My Git!" is an open-source game designed to teach Git version control through visualization, playing cards, and an integrated terminal, created by bleeptrack and blinry, with available downloads for Linux, macOS, and Windows.

Check it out
C782_aigil

AI for Web Devs: Project Introduction & Setup

Austin Gil discusses the growing influence of AI technology and introduces a tutorial series aimed at helping web developers incorporate OpenAI's AI services into web applications using the Qwik JavaScript framework.

Read it
C782_zoom

Semantic zoom

In this lab note, Alexander Obenauer explores the concept of gestural, itemized interfaces that allow users to customize their view of data, using examples from Colin Lord's training data and John Underkoffler's "undulant interface," emphasizing the importance of tailoring interfaces to unique user needs and contexts.

Read it