Nicholas Macias

@nich

Waving my hands around in front of a computer until it does what I want.

514 Folgt333 Follower1.769 Posts

Bluesky

Ist das dein Profil?Übernimm es — dann gehört dir nich.dirty.social.Profil übernehmen

Nicholas Macias@nich· 13d

Lamenting the lack of typographic skill on display here but also that it reads like Pilates Booty

2026 rebrand of Pirate’s Booty snacks where a kinda weak cartoon pirate loosely drawn from Paul Rudd who was late picking out his pirate costume and had to cobble something together from a British soldier set is holding a photographic cheese puff and still can’t distract you from the clunky blue typography where the R has a long, stray serif crossing under the A

Nicholas Macias@nich· May 29

the cat might have trucknuts, but pretty much a straight rip otherwise or maybe…

screenshot of Alf (Sega Master System game, I think 1989?) where a text box that says "Do I have to stand here all day?" floats above the scene of an 8-bit Alf sprite in an outdoor scene in the town setting

Nicholas Macias@nich· Apr 10

btw this is the 2012 era design that reflects what they are doing now with UX somewhat but with the design language you miss

2012 era prototype of IGN that has a left spine of topics tucked under the edge of a "Halo" vertical with big buttons for posting, as if more like Reddit, and more typical article content at right. Reader-style UX.

Nicholas Macias@nich· Apr 10

And @eldar.social knows this is true: we brought back dithers first. All these vibe-coded Figma plugins doing shader halftones on everything now… Fuck, I'm old.

Nicholas Macias@nich· Apr 10

i opened webflow and briefly disassociated into the loading screens of Marathon, which I'm also playing btw I am so righteously burnt up that I called the textmode aesthetic trend years ago and now everything is all bitmap fonts and terminal looking. Just a bitter "told ya sooooooo" in a void

Nicholas Macias@nich· Mar 12

Computers in the transformers? Can we get fractal here?

Nicholas Macias@nich· Mar 10

My body has rejected the concept of time altogether but Google’s AI powered Knowledge Graph has helpful DST strategies

Google Knowledge graph trying to kill everyone showing answers to questions like

“is a 3mg liquid or 5mg pill the more appropriatecdose when freebasing melatonin”

(Bad advice follows)
Determining the appropriate form and amount of melatonin depends on individual response, with health professionals often recommending starting with the lowest effective…

Nicholas Macias@nich· Feb 6

KQED said at the end of last month at least but I wasnt sure if there was something more direct www.kqed.org/news/1207118...

“SFUSD also said it offered a way to fully fund health benefits” in article linked, screenshot

Nicholas Macias@nich· Feb 2

Video of the fix in action

Nicholas Macias@nich· Feb 2

According to Gemini? I will note that the spelling of teets was suggested to boot

Gemini explaining "like teets on a cashew"

Nicholas Macias@nich· Feb 1

Oh fuck Spotify is trying to egg me on to actually do the move What is fucking wrong with this company

Marc Andreessen’s terrible head cursing the front page of the Spotify mobile app when no one asked for this

Nicholas Macias@nich· Jan 30

What is interesting here is that the "WHEE" is normally clipped in half by a mysterious force even tho all the parents have overflow:visible etc. But with layout:contain WHEE gets positioned relative to the body, which here is 100vh and half behind the UI; overscroll to see WHEE in full

the body and fixed elements share dimensions when layout:contain is applied to the section, opposed to a mysterious difference

Nicholas Macias@nich· Jan 30

fantastic example of the chaos here

"The green section here is 100% inside a 100% tall body (blue) inside 100% tall root (red)" where there is a 1rem padding, but it looks like a red-bordered green boxed letterboxed by blue UI stripes.

Nicholas Macias@nich· Jan 30

it is even funnier

ios26 safari short-sheeting the nav bar, see codepen link for code context

Nicholas Macias@nich· Jan 24

Well it’s #caturday, still. ICE can end.

A tabby cat paws akimbo, in a sunny spot on the couch, head turned at 90° and tongue out, mid-cleaning process. A purple Furby looks on.

Nicholas Macias@nich· Dec 19

This book and a handful of others I will refuse to give away as my kid ages: Bear Came Along Bathe The Cat … actually, there might be dozens. Picture books are joyful, I had no idea what I was missing until I had to read 10 a night.

Cover of Bathe the Cat Written by
Alice B. McGinty
Illustrated by
David Roberts

Beneath the title set in colorful magnetic fridge letters, Two dads pose with chaotically arranged children, pets, and cleaning supplies; watercolor illustration

Nicholas Macias@nich· Dec 12

I just lost the better part of a day to sussing out why Safari started culling videos that worked fine earlier. There's enough going on with this page's optimization that it could have been a lot of things, but ultimately the external CSS "got too long" and lost the race condition to the 1-time eval

// Safari aggressively evaluates the video media query on page load
// and if the CSSOM for the element's path is not yet ready, it will
// never load the video. So: re-run the query for all videos with such.

document.querySelectorAll('video source[media]').forEach(source => {
const video = source.parentElement;
const mediaQuery = source.media;

if (window.matchMedia(mediaQuery).matches) {
video.load();
}
});

Nicholas Macias@nich· Dec 10

I woke up mad today. But yesterday Google leaned in to fascism and they don’t even care to make it look good

Crop of a link showing a blue 45° arrow at the end of a link “…lopers”

Nicholas Macias@nich· Dec 10

This is just a visual soup of elements, and the combination of tightly tracked type with loose-goose leading feels an affront to their dead, or now dying, teachers It’s a design choice that can work, but only with reducing the number of type sizes here from ~7 to maybe 3

The Invoker Commands section of the above site, again on mobile screenshot right around the heading. Dark mode, fwiw.

Nicholas Macias@nich· Dec 10

People at Google are paid enough to be fucking perfect. I expect more than this widow for $350k+ —in general, but particularly on a site addressing front end designers and developers

a glaring, widowed “kiln” at the end of a too long headline in the preamble, as shown on a very mainstream phone viewport (here, an iPhone 15 Pro)

Nicholas Macias@nich· Dec 10

this was the hero shot shared by a (truly talented) leader there at Google & I’m just crushed by the utter lack of care for the design. There is no consistency nor proportion to the type, spacing, art, anything — and in a CSS showcase! It’s maybe subtle, but this is at best a draft-level effort.

Screenshot of site, see Optimized Ergonomics” section of above link

Nicholas Macias@nich· Dec 3

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', '');
}
});

Nicholas Macias@nich· Dec 3

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();

Nicholas Macias@nich· Dec 2

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; } } }$

Nicholas Macias@nich· Nov 20

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.

Nicholas Macias@nich· Nov 20

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)

Nicholas Macias@nich· Nov 18

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();
});
}
});

Nicholas Macias@nich· Nov 4

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

Nicholas Macias@nich· Nov 1

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

Nicholas Macias@nich· Oct 25

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