Lightnews — Scholar-powered news

Nicholas Macias

@nich.bsky.social

I could not find the relevant codepen from 16 years ago, but I was able to describe it enough to Claude (in ~5 passes around the artifact bend) to get rid of many, many lines of animation state management.

Here, chat bubbles are coming & going, dropping new messages onscreen, & we just bump cursor

container.addEventListener('animationend', (e) => {
if (e.animationName === 'typing') {
e.target.removeAttribute('data-cursor');
(e.target.nextElementSibling || container.firstElementChild).setAttribute('data-cursor', '');
}
});

December 3, 2025 at 8:28 PM

Nicholas Macias

@nich.bsky.social

I was debugging something else and vibe-coded a utility that monkey-patches a chat thread of GIFs with static representations when toggling "prefers reduced motion" on/off, because ADHD compels me.

Use case here is tightly defined (3 gifs, so not gonna lock up) but this was faster than photoshop

// Handle reduced motion preference for GIFs
function handleReducedMotion() {
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const messageImages = document.querySelectorAll('.message-wrapper img');

messageImages.forEach(img => {
if (prefersReducedMotion.matches) {
freezeGif(img);
} else {
restoreGif(img);
}
});

// Reevaluate when the preference changes
prefersReducedMotion.addEventListener('change', () => {
messageImages.forEach(img => {
if (prefersReducedMotion.matches) {
freezeGif(img);
} else {
restoreGif(img);
}
});
});
}

function freezeGif(img) {
const width = img.width;
const height = img.height;
const canvas = document.createElement('canvas');

// Create a canvas with the same dimensions as the image
canvas.width = width;
canvas.height = height;
canvas.style.maxWidth = "100%";

// Draw the current frame of the GIF onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0, width, height);

// Replace the GIF with the canvas
img.parentNode.insertBefore(canvas, img);
img.style.display = "none"; // Hide the original image

// Store the original image source in the canvas dataset to restore later
canvas.dataset.originalSrc = img.src;
}

function restoreGif(img) {
const canvas = img.previousElementSibling;

if (canvas && canvas.tagName.toLowerCase() === 'canvas') {
// Remove the canvas and restore the GIF
canvas.parentNode.removeChild(canvas);
img.style.display = "block"; // Show the original image
}
}

// Call the function to handle reduced motion preference
handleReducedMotion();

December 3, 2025 at 7:41 AM

Nicholas Macias

@nich.bsky.social

CSS Container Queries kicked my ass at first, but I won. This makes a headline that is usually flex and has a highlight element that breaks lines go inline and more plain when the user's font size is cranked up on their phone

$.home-landing { container-type: inline-size; } @media (max-width: 768px) { /* .home-landing is being observed, here for when browser text is ~150%+ */ @container (max-width: 250px) { .home-strapline { display: inline; } .home-strapline .yellow-highlight_span { display: inline; font-size: inherit; padding: 0.1em 0.25em; line-height: inherit; } } }$

December 2, 2025 at 11:40 PM

Nicholas Macias

@nich.bsky.social

imagine how many designers and developers make terrible decisions based on how this is represented as the viewport opposed to the actual experience. Chrome & Safari could do so much by adding the true viewport size here

screenshot of a website in safari's responsive design dev tools modality where the screen is 402x874, an unrealistic size for a phone UX upon first load.

November 20, 2025 at 5:12 AM

Nicholas Macias

@nich.bsky.social

This was the lowbrow version I did in flash circa 2004 when all you could do was a displacement map. Super excited to learn shaders some day (ADHD project #542)

November 20, 2025 at 2:48 AM

Nicholas Macias

@nich.bsky.social

Which would be too bad, as the query attribute is a very clean way to enforce *never* loading the asset on mobile, for example.

The fix is to observe the matching media query and (this is critical, as I first tried a lighter touch) do a little source swap on the video to force it to look again.

window.matchMedia('(min-width: 768px)').addEventListener('change', (e) => {
if (e.matches) {
document.querySelectorAll('video.hide-mobile').forEach(video => {
const source = video.querySelector('source');
const src = source.src;

source.removeAttribute('media'); // Remove the media query block
video.preload = 'metadata';
source.src = ''; // Force reset
source.src = src; // Restore source
video.load();
video.play();
});
}
});

November 18, 2025 at 8:08 AM

Nicholas Macias

@nich.bsky.social

I'm here to make @figma.com figjam diagramming unsafe for some of y'alls

a figjam diagram node with the text "In Figjam diagrams where the text box is fixed-width and right-aligned a space doesn’t wrap to the next line" demonstrating as much

November 4, 2025 at 12:05 AM

Nicholas Macias

@nich.bsky.social

Yes! I have one of these. I know in my heart that I crushed the day at IGN’s all-hands costume contest around 2013 or so, but I lost to a Mario because (shamefully) the chosen judges did not know the character.

A manny calavera costume head crafted out of foamcore and mesh for the mouth, where the wearer looks out from

November 1, 2025 at 5:53 AM

Nicholas Macias

@nich.bsky.social

It’s Halloween and of course I’m making my own hat

A yellow felt bucket hat before the fulling process alongside some roving in a ball and a spray bottle, on top of bubble wrap and a cutting mat

October 25, 2025 at 4:10 PM

Nicholas Macias

@nich.bsky.social

Heck yea it's happening

2022 tweets, by me: More “tools” and less integrated software. I should have a ruler that I love, not 6 arbitrary snap to line functions in as many apps.

Commenting & messaging tools especially noted in this regard.

More sandboxes and an easier time keeping multiple profiles.

…

Shader-like. I want to be able to pipe the output of some app’s UI into another and back, like having the ability to regex a list of layers in a drawing app, or filter a stream of coords being sent by my input device (ruler example).

October 21, 2025 at 8:26 PM

Nicholas Macias

@nich.bsky.social

Honestly, my quiet pride in this obscure post from 2019 is one of the last things keeping me from deleting Twitter outright, so I'm taking the step of re-planting here.

A twitter post exactly matching the previous post from May 1, 2019, by me. In reply to @ visakanv on there, with all of 19 likes.

October 16, 2025 at 2:07 PM

Nicholas Macias

@nich.bsky.social

Taking this way too far, now with added lettering

Wip illustration looking vaguely like an illuminated manuscript in iPadOS Procreate. The lettering for “medieval breakdance breakdown” in a hand drawn blackletter gothic is being worked out with a few guide lines drawn on top. A drawn medieval character above dances while blinded by teeeming rats

October 13, 2025 at 6:23 AM

Nicholas Macias

@nich.bsky.social

Claude Imagine passed my first test. It feels kinda like WebSim but a faux OS (when you do something like open the Trash icon, it opens a window and generates icons and items inside ad-hoc. Etc). It's kind of a marketing page and so it has these twee little sticky notes in the corner…

Claude Imagine UI. looks like a faux desktop OS with an AI chat bar. When you do something like open the Trash icon, it opens a window and generates icons and items inside ad-hoc. Here, I have previously typed "The sticky notes should be editable" with reference to some little yellow notes that the designers of the app placed on the desktop that say "Note to self: it doesn't have to be perfect" "ask for help. It's brave." and "keep thinking"

October 8, 2025 at 2:18 PM

Nicholas Macias

@nich.bsky.social

Madgeburg Unicorn says, Hey.

The skeleton on display looks like a horse head on a gator skeleton propped up on mammoth’s front legs

October 3, 2025 at 3:58 PM

Nicholas Macias

@nich.bsky.social

This #caturday Pasta is stalking your brainworm and about to pounce

A tabby kitty with a heart shaped collar tag that says Pasta is posed close to the camera with full saucer eyes

September 28, 2025 at 4:21 AM

Nicholas Macias

@nich.bsky.social

Ooops, Pasta, we missed #caturday because you slept through it

A tabby kitten on a purple sofa with her two front legs spilling out of a gray wool cat bed, fully extended to the camera and basically just looking like a kids drawing of an octopus as she basks in the sun

September 14, 2025 at 8:03 AM

Nicholas Macias

@nich.bsky.social

Disney’s Bongo & Kash, then?

Banzai and Ed (hyenas) from Disney’s animated The Lion King, still frame on red flames, cropped and flipped to suit the joke

September 12, 2025 at 12:07 PM

Nicholas Macias

@nich.bsky.social

Hang in there #caturday

A tabby cat dangles from a fire sprinkler pipe along the ceiling of a house, legs hanging down about 6 feet above the floor with her two front paws wrapped around the white-painted pipe while splayed against a royal blue wall. She lives.

September 7, 2025 at 5:01 AM

Nicholas Macias

@nich.bsky.social

wildcard: drill & color-matched wireties and DIY from something you like www.etsy.com/listing/8083...

containers made from discarded 3.5" floppy disks and wireties

September 4, 2025 at 4:58 AM

Nicholas Macias

@nich.bsky.social

what i learned when looking for pen holders is that people mostly only sell plans not finished pieces

Acrylic Magazine Display Rack / CnCHappyPlace on Etsy

pen organizer from multicolor acrylic sheet

September 4, 2025 at 4:58 AM

Nicholas Macias

@nich.bsky.social

or ugly-functional milk crate style turned pretty with color and arrangement maybe from Herman Miller (or HAY Color Crate) where the "flatpack" and modular design aspect they go for gives you square sides