Experimenting with Code
Welcome to the Lab! This is where I share my coding experiments. Dive into a collection of code snippets from my CodeSandbox and CodePen accounts.
Christmas Countdown
This snippet playfully blends holiday spirit with modern web APIs, featuring a dynamic countdown timer and an interactive "Santa's Mail" popover built using the widely supported Popover API. Distinct from the popover, a div element positioned next to the mailbox(anchor) demonstrates the precise element placement achieved through the CSS Anchor Positioning API (currently supported in Chrome and Edge, with Firefox and Safari support forthcoming), offering a glimpse into the future of web layout. This festive experiment provides a fun way to track the time until Christmas while exploring the capabilities of these cutting-edge web APIs.
Aurora Borealis
This HTML and CSS code snippet creates a realistic aurora borealis animation with a starry night sky. The HTML structure includes a container with layers for stars, and the aurora itself. The CSS uses background images, gradient effects, and keyframe animations to simulate twinkling stars, and the flowing, colorful lights of the aurora borealis. Inspired by the rare occurrence in May 2024, when the auroras, also known as northern lights or the aurora borealis, were visible throughout the San Francisco Bay Area and reported as far south as San Diego due to a solar storm.
Total Solar Eclipse
This HTML and CSS code snippet creates a total solar eclipse animation. The HTML defines a div structure for the sun and moon within a centered container. The CSS uses radial gradients to style the sun, a solid color for the moon, and keyframe animations to move the moon across the sun, simulating an eclipse effect. This snippet was inspired by the recent total solar eclipse that happened on April 8, 2024, which moved across North America, passing over Mexico, the United States, and Canada.