The Collective #888

Advent calendars * Love, derivatives and loops * Steel * Vince

Olá, creative makers! 👋

Happy Monday, and welcome to December! You know what that means—advent calendars galore, and not just the chocolate kind. Whether you’re solving puzzles with Advent of Code, exploring daily surprises in Advent of Svelte, diving into challenges in Advent of TypeScript, or contributing to Advent of Open Source, there’s plenty to keep your brain buzzing this month.

Speaking of creative energy, Yuri Artiukh’s story about crafting a perfect looping animation—fueled by math and maybe a bit of romance—is both heartwarming and inspiring.

Wishing you all a fantastic start of the week!

From our sponsor

In need of a convenient hosting without any hassle? Try Cloudways Managed Hosting. Enjoy 40% off for 4 months + 40 free migrations! 🚀

Why Cloudways?

  • Global data centers for optimal speed.

  • Cloudflare protection and malware scanning.

  • Intuitive dashboard and automated tasks.

  • Flexible pricing with Pay-as-you-go plans

  • Automate recurring invoices and payment collection in one application with Client Billing.

Don't miss out! This offer ends December 5th.

Yuri Artiukh's journey of using math and motion graphics to create a perfect looping animation in an effort to impress someone, blending love, persistence, and creative coding.

The Svelte team has launched "Advent of Svelte," a challenge to release one feature or improvement each day until Christmas.

Advent of Open Source is a community-driven event that aims to introduce newcomers to Open Source Software development, and to help all participants to create or enhance their repositories.

Advent of Code is back, offering its usual set of daily programming puzzles throughout December—perfect for honing coding skills, competing with friends, or simply enjoying the yearly challenge, with puzzles accessible for all skill levels and solvable in any language.

The second installment of Advent of TypeScript is here, featuring daily challenges and leaderboards.

An in-depth exploration of anti-aliasing techniques, covering traditional approaches like SSAA, MSAA, and FXAA, and presenting a new "Analytical Anti-Aliasing" method that uses signed distance fields for smooth, artifact-free rendering, offering a more efficient solution for achieving high-quality visuals.

An exploration of the pros and cons of structured editing versus incremental parsing, highlighting how incremental parsing can offer the flexibility of traditional text editing while maintaining the advantages of syntactic awareness.

Nolan Lawson delves into the subtle complexities of disconnectedCallback in web components, offering advice on optimizing cleanup tasks and improving component performance.

Sergei Nozdrenkov shared a prototype of a 3D "Street View for Coral Reefs," featuring a significantly expanded model that uses thousands of images to create a detailed, high-resolution digital representation of coral ecosystems for monitoring and research.

Hervé collaborated with Course Hero to create "Buddy Bear," a mascot designed as a comforting and supportive guide for students using the platform.

The Kolors-Virtual-Try-On Demo on HuggingFace lets you try out swapping clothes with AI.

🌐 Steel

Open Source Browser API for AI Agents & Apps. Steel Browser is a batteries-included browser instance that lets you automate the web without worrying about infrastructure.

📊 Vince

A self-hosted, privacy-focused web analytics tool that offers a cost-effective alternative to Google Analytics, allowing users to maintain compliance with privacy laws (like GDPR and CCPA) without cookie notices, while providing fast, efficient insights with minimal deployment requirements.

A real-time screen sharing application built with Next.js, WebRTC, and PeerJS. Create or join rooms to share your screen with others instantly.

🛠️ litdb

litdb contains LINQ-like type-safe SQL builders for TypeScript/JavaScript for writing type-safe expressive SQL that's parameterized & portable across SQLite, MySQL & PostgreSQL.

(From our blog) A simple yet cool image reveal effect created with React Three Fiber/Drei and animated using Framer Motion. By Colin Demouge.

(From our partner) Elegant Themes is hosting a Cyber Monday sale for their Divi product, offering up to 76% discounts on Divi licenses, bundles, and add-ons, along with free prizes, exclusive perks, and access to website templates for new and existing users looking to build websites with their no-code WordPress tools.

From our sponsor

The fastest way to build AI apps

Writer is the full-stack generative AI platform for enterprises. Quickly and easily build and deploy AI apps with Writer AI Studio, a suite of developer tools fully integrated with our LLMs, graph-based RAG, AI guardrails, and more.

Use Writer Framework to build Python AI apps with drag-and-drop UI creation, our API and SDKs to integrate AI into your existing codebase, or intuitive no-code tools for business users.

Animation Spotlight

by Kitasenju Design

From our sponsor

Why struggle with file uploads? Pinata’s File API is your fix

Simplify your development workflow with Pinata’s File API. Add file uploads and retrieval to your app in minutes, without the need for complicated configurations. Pinata provides simple file management so you can focus on creating great features.

Demo Corner

by Maeda Mameo

by Patrick Schroen

by Tyson Skakun

by Yuri Artiukh

from our Demos Hub

❓Did you know that…

…the first text message was sent on December 3, 1992? Engineer Neil Papworth used a computer to send the message “Merry Christmas” to a colleague’s phone via the Vodafone network. This simple act marked the beginning of SMS, sparking a revolution in global communication.

Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.