Some progress on this weekends web dev project, I'm making a little advent calendar generator ☺️

So far:

- Manged to randomize values into the cells, learning about the Fisher-Yates shuffle algorithm in the process

- Ended up hand coding the SVG to get it setup right

- Good groundwork for things to come, I think

#CSS #HTML #JS #SVG

Skeuomorphic Lunar Desk Calendar

Physical object. Digital form.
[HTML + CSS + JS]
JS drives date/lunar phase logic. CSS renders the physical form. A pure data visualization.
Source: https://freefrontend.com/code/skeuomorphic-lunar-desk-calendar-2026-03-19/
#UI #CSS #JS

Skeuomorphic 3D Elastic Toggle Switch

Simulated physics. Real interaction.
[HTML + CSS + JS]
JS calculates 3D transforms to simulate elastic depth. Function drives form. Accessible via native input (a11y).
Source: https://freefrontend.com/code/skeuomorphic-3d-elastic-toggle-switch-2026-03-19/
#UI #CSS #JS

Scroll-Driven Jigsaw Puzzle Assembler

Structure bound by scroll.
[HTML + CSS + JS]
Scroll coordinates dictate piece alignment. Hardware-accelerated transforms. Zero layout shifts.
Source: https://freefrontend.com/code/scroll-driven-jigsaw-puzzle-assembler-2026-03-19/
#CSS #UI #JS

Minimalist Canvas Animated Particle Background

Pure math. Visualized.
[HTML + JS]
Particles rendered via native Canvas API. Hardware-accelerated frame updates. Zero DOM clutter. Highly performant.
Source: https://freefrontend.com/code/minimalist-canvas-animated-particle-background-2026-03-19/
#Canvas #UI #JS

Gradient Vertical Scroll Progress Bar

Scroll position. Zero latency. ⚪️
[HTML + CSS + JS]
Scroll depth dictates gradient scale. Hardware-accelerated paint. Minimal footprint.
Source: https://freefrontend.com/code/gradient-vertical-scroll-progress-bar-2026-03-19/
#CSS #UI #JS

Cinematic Zoom Blur Image Gallery

Depth of field. No overhead.
[HTML + CSS + JS]
Cinematic blur via native backdrop-filter. Hardware-accelerated zoom. Zero DOM blocking.
Source: https://freefrontend.com/code/cinematic-zoom-blur-image-gallery-2026-03-19/
#CSS #UI #JS

Interactive Morphing Task List Item

State transformation.
[HTML + CSS + JS]
Morphing adapts form to task. Clean DOM transitions. Zero render bloat.
Source: https://freefrontend.com/code/interactive-morphing-task-list-item-2026-03-20/
#CSS #UI #JS