Nicholas Macias

@nich.bsky.social

330 Followers 509 Following

Waving my hands around in front of a computer until it does what I want. https://rockinghelvetica.com

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

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.

Xziibit biting an H200

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…

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

Link above screen capture in iOS 26 showing the css fix toggled on and the layer clipping going away

Gemini explaining "like teets on a cashew"

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

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

"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.

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

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.

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

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

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

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

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)

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

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

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

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

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.

clip of an old Flash website chasmcfeely.com circa 2004ish? He's a copywriter, and the design is like a photo of his forehead and spiky haircut. His portfolio has a TV section, and when "TV" is hovered over and selected the whole thing begins to look like a CRT TV that is going into a language selection menu

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

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

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

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

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).

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.

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

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"

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

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

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

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

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.

containers made from discarded 3.5" floppy disks and wireties

Acrylic Magazine Display Rack / CnCHappyPlace on Etsy

herman miller crates that kinda look like backroom grocery produce bins in multicolor plastics

Al Overview
Many popular movies, from action films to fantasy epics, have been adapted into video games. Some prominent examples include The Super Mario Bros.
Movie (2023), Sonic the Hedgehog 2 (2022), Detective Pikachu (2019), Rampage (2018), Warcraft (2016), Prince of Persia: The Sands of Time (2010), Silent Hill (2006), and The Lord of the Rings franchise, with some games being highly successful and popular adaptations. •
Examples of Movies Adapted into Video Games
The Super Mario Bros. Movie

Tabby kitty reaching through a wooden frame of a chair that is painted like the Golden Gate Bridge orange. Boop! Foreshortened paw stretches through the right of frame.

The laundress and pawn broker from Scrooge (1951) saying “Bed curtains…? Bed curtains.” after she stripped his bed immediately after finding Scrooge dead in said bed.

Marigold flower drawn in black India ink where each concentric ring of petals is the next letter from the word Marigold from an M center

A tabby cat, close up, laying on its side and looking up from a tile floor through a loose pile of purple toole (sheer fabric). Miffed. A woman’s fingertips appear top of frame, about to pet. Her nails are painted like colorful fish.

Kelly Rowland Dilemma Meme (someone trying to text "WHERE YOU AT? HOLLA WHEN YOU GET…" in Excel on a Nokia keyboard smartphone)

screenshot of the site linked in skeet, basically a zoomed out view of a bunch of black and white book page scans in a small scale grid with one selected and enlarged atop them

Gothic lettering from black to blue ink showing a sequence:
overseer
ovrsr
ofrsr
offrcr
offficer

Two editorial reviews of the same paper-based single-player game-one bad, one good in their overall critique, while both can acknowledge contrary points as appropriate. Both should assume the reader is not familiar with the game, and there is not a particular need to guard against spoilers (the gameplay is roguelike-ish, not narrative).

The game is based on [redacted]. The transition is made by the player, using [redacted] they play. The rest of the rules and dynamics can be creatively explored in writing these reviews. Ask if there are any blocking questions, and go.

M monogram in parallel pen with a small key below showing its constructed as N and M overlapping together

EXPERIENCE STORYBOARD
a blue slide with 3 grafs and a concept drawing of a future article page type, appearing as a thread of short posts under a headline. The captions say:

CONTRIBUTE Editors and contributors share anything relevant into a topic, like original content, reviews, questions... even links to other
things around the web.
CURATE Fans shape the priority of a topic's content through simple mechanisms, similar to Tumblr's reblog & like.
CONVERSE Discussion is promoted around submissions to a topic, and happens on dedicated views, called Conversation pages.

A diagram slide missing the UI screenshot that otherwise shows dotted white lines entering a green prism and leaving as a rainbow spectrum and emitting a jumping Mario. Caption:

IGN Programming Tool → Live/VOD Stitcher → HLS Video

Diagram from Apple on how to implement a MagSafe accessory, where it’s more or less a C shape with radiant lines and engineering diagram markup, and captions like “DATUM B CENTER TO BE PLACED WITHIN +- 0.30MM TO DEVICE CENTER”

First Time meme (james franco at the gallows)

Sketch showing a topic stream with an editorial masthead and then a post view with a strong comment-centric presentation. Basically a big publication through a tumblr lens.

Belatro screenshot (iPadOS) showing an about-to-win Ante 8 round. The jokers are notably the Oops-all-6s, the Swashbuckler, the Blueprint, and Yorick. The deck is also stacked with 9s, showing a 5 of kind in hand.

TRADER JOE'S®
CRISPY JALAPEÑO PIECES
NORI KOMI FURIKAKE
JAPANESE
MULTI-PURPOSE
SEASONING

USB c with screws like an old parallel port cable