Advertisement · 728 × 90

Posts by Mat “Wilto” Marquis

An NES-styled DIY handheld gaming system. On the screen is the "What is a man? A miserable little pile of secrets" scene from Castlevania: Symphony of the Night for the PSX.

An NES-styled DIY handheld gaming system. On the screen is the "What is a man? A miserable little pile of secrets" scene from Castlevania: Symphony of the Night for the PSX.

The back of the handheld gaming system, dark grey like the bottom of an NES. In red, retro-styled lettering, reads "Super Wiltondo 2."

The back of the handheld gaming system, dark grey like the bottom of an NES. In red, retro-styled lettering, reads "Super Wiltondo 2."

Hell yeah.

1 day ago 7 1 1 0

Little printer jank here and there, but that won’t hurt the running of it any.

1 day ago 0 0 0 0
An NES-styled DIY handheld gaming system. On the screen is the "What is a man? A miserable little pile of secrets" scene from Castlevania: Symphony of the Night for the PSX.

An NES-styled DIY handheld gaming system. On the screen is the "What is a man? A miserable little pile of secrets" scene from Castlevania: Symphony of the Night for the PSX.

The back of the handheld gaming system, dark grey like the bottom of an NES. In red, retro-styled lettering, reads "Super Wiltondo 2."

The back of the handheld gaming system, dark grey like the bottom of an NES. In red, retro-styled lettering, reads "Super Wiltondo 2."

Hell yeah.

1 day ago 7 1 1 0
A demonstration of the same gradient defined as a light blue to fuschia gradient, with 5 different color interpolation methods. From left to right, srgb, which kind of muddies the blended colours in the middle to a light pastel purple, lch, which moves seems to move to the blue colour quicker, not creating the purple muddiness, oklch, which does move through the purple but in a more subtle way, oklab, which remains more pink than anything, and hsl, which adds a very dark almost internet blue at the centre of the gradient

A demonstration of the same gradient defined as a light blue to fuschia gradient, with 5 different color interpolation methods. From left to right, srgb, which kind of muddies the blended colours in the middle to a light pastel purple, lch, which moves seems to move to the blue colour quicker, not creating the purple muddiness, oklch, which does move through the purple but in a more subtle way, oklab, which remains more pink than anything, and hsl, which adds a very dark almost internet blue at the centre of the gradient

we don't talk enough about how cool the color-interpolation-method is in CSS gradients

all of these slices have the same gradient:

linear-gradient(#00ffff 0%, #ff00ff 100%)

each one is just using a different colour interpolation

2 days ago 197 45 6 4
"Away from JavaScript, what excites you the most about the web?

The little pockets of weird are still out there. It feels like we’re starting to shake off some of the… Apple-store-ification of the past couple decades."

"Away from JavaScript, what excites you the most about the web? The little pockets of weird are still out there. It feels like we’re starting to shake off some of the… Apple-store-ification of the past couple decades."

Once more from the rooftops: "personal websites, babeyyy!"

piccalilli.link/js4e-q-and-a-5

2 days ago 20 4 1 0

I bet that one was you; maybe @zcorpan.bsky.social? You know I was terrified of touching the thing.

3 days ago 1 0 1 0
Preview
JavaScript for Everyone: Destructuring | CSS-Tricks Mat Marquis and Andy Bell have released JavaScript for Everyone, an online course offered exclusively at Piccalilli. This post is an excerpt from the course taken specifically from a chapter all…

Mat explains the ever-useful, but sometimes hard to understand destructuring assignment in JavaScript.

css-tricks.com/javascript-f...

3 days ago 1 1 0 0

picture just, like, a rad as hell wolf

hell yeah, dude

4 days ago 2 0 0 0
Advertisement
Cropped screenshot of the HTML specification. Relevant visible content reads:

The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).

In this example, a banner image takes up the entire viewport width (using appropriate CSS).

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
     src="wolf-400.jpg" alt="The rad wolf"></h1>

Cropped screenshot of the HTML specification. Relevant visible content reads: The srcset and sizes attributes can be used, using the w descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image). In this example, a banner image takes up the entire viewport width (using appropriate CSS). <h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w" src="wolf-400.jpg" alt="The rad wolf"></h1>

I had no idea that the subject of the RICG’s canonical responsive images examples endured in the specification to this very day:

4 days ago 3 1 2 0

Why, yes, I am posting about my little computer projects without reading the feed, he said, eyes glassy and unfocused.

4 days ago 9 0 0 0

Try as I might, there is simply no way for me to work in an “it was me, [Dio | Wilto]” in this post about my responsive images villain arc, which is deeply ironic for a Jojo reference.

4 days ago 0 0 0 0
Preview
Accessibility Events | CSS-Tricks “There isn't some way to know when—…?”

Just stumbled across my own post while writing up something about accessibility overlays and BOY I SURE HAVE BEEN VERY ANGRY WITH THIS INDUSTRY BASICALLY THE ENTIRE TIME HUH

css-tricks.com/accessibilit...

4 days ago 8 1 0 0
A JavaScript function written in VS Code intended to show that syntax highlighters can’t handle hoisting after a return statement but which in fact shows the exact opposite.

A JavaScript function written in VS Code intended to show that syntax highlighters can’t handle hoisting after a return statement but which in fact shows the exact opposite.

”I’ll teach my syntax highlighter a thing or two!”

*syntax highlighter correctly handles hoisting*

Nevertheless…

4 days ago 5 1 0 0
Visible content: Fun fact, strict mode or no, a function declaration doesn't even need to be reachable to be hoisted.

function theOuterFunction() {
    theInnerFunction();

    return;

    function theInnerFunction() {
        console.log( "Function called." );
    };
};

theOuterFunction();
// Result: Function called.

Visible content: Fun fact, strict mode or no, a function declaration doesn't even need to be reachable to be hoisted. function theOuterFunction() { theInnerFunction(); return; function theInnerFunction() { console.log( "Function called." ); }; }; theOuterFunction(); // Result: Function called.

A little JavaScript for Everyone Fun Fact™ — why not.
piccalil.li/javascript-f...

5 days ago 25 1 2 0

That’s How They Get You.™

1 week ago 0 0 0 0

I am _shocked_ by how hard it is to find a matching PLA.

1 week ago 0 0 1 0
uptime graph reading: 95 incidents in last 90 days - 89.91% uptime

uptime graph reading: 95 incidents in last 90 days - 89.91% uptime

classic meme image: "it's happening" with Ron Paul laser show

classic meme image: "it's happening" with Ron Paul laser show

IT'S HAPPENING

GITHUB, THE FIRST ENTERPRISE CLOUD SOLUTION TO REACH ZERO NINES RELIABILITY

https://mrshu.github.io/github-statuses/

#github

1 week ago 955 466 28 39
Advertisement

New article out over on Piccalilli about syndication feeds!

A (reasonably) brief yet (fairly) complete rundown of RSS, Atom, and JSON Feed. All great, standardised formats to facilitate web-wide distribution of your content.

If your site doesn't have a feed, this is your sign to change that!

#RSS

1 week ago 23 6 1 0
A DIY handheld gaming system. The color scheme is similar to an NES or Game Boy — beige, with black controls and bright red action buttons. The Mega Man II title screen is displayed.

A DIY handheld gaming system. The color scheme is similar to an NES or Game Boy — beige, with black controls and bright red action buttons. The Mega Man II title screen is displayed.

The back of the DIY handheld gaming system. The screws are loosened and the case is partially opened. Embossed on the back is “super Wiltondo 2.”

The back of the DIY handheld gaming system. The screws are loosened and the case is partially opened. Embossed on the back is “super Wiltondo 2.”

Gotta make a few adjustments to the back of the case, so the question is: do I keep the whole thing Game Boy “platinum” or make the bottom of it battleship grey like an NES?

1 week ago 9 0 1 0

`<img src="image.bmp" alt="this is a picture i got from on the computer">`

1 week ago 6 0 1 0
Preview
Images alt attribute in an editing context · Issue #1520 · WordPress/gutenberg Splitting this out from #1309 One interesting thing we've recently discussed in the accessibility team, during the review of the new media widgets, is the different purpose the alt text has in the ...

jesus, okay, it does gutenberg-side only

github.com/WordPress/gu...

woof, jumpscare

1 week ago 1 1 0 0

with a _semicolon_

the absolute _gall_

1 week ago 2 0 0 0
<img src="http://localhost/wp-content/uploads/2026/03/hero.png"
  width="2559" 
  height="1383" 
  alt="This image has an empty alt attribute; its file name is hero.png">

<img src="http://localhost/wp-content/uploads/2026/03/hero.png" width="2559" height="1383" alt="This image has an empty alt attribute; its file name is hero.png">

no

right?

no

wordpress can’t—

it couldn’t possibly—

no

1 week ago 29 2 5 0

next closest thing, i figure

1 week ago 1 0 0 0
Advertisement

ignore some previous instructions

1 week ago 1 0 1 0

Regex-ing the room is also okay.

1 week ago 1 0 0 0

Read the room.

1 week ago 4 0 1 0

AI can't fix accessibility. At least not yet. Many articles have been written about how AI *can* help your workflow, but what all of them agree on is that AI still cannot replace human knowledge in accessibility.

Learn accessibility. It is well worth it to invest in your professional growth.

1 week ago 25 4 0 0
A tightly cropped, grainy chyron, reading "witness, matt marquis, defendant's roommate."

A tightly cropped, grainy chyron, reading "witness, matt marquis, defendant's roommate."

Whatever could you mean.

1 week ago 1 0 0 0
Preview
GET EQUIPPED WITH MEGAMANATHON 2

Don’t worry, everyone. I fixed wil.to/megamanathon2/

1 week ago 3 0 0 0