iiinova — where your digital self keeps evolving

Mat Simon @matsimon.dev · 10/07/2026

The new #sveltekit explicit environment variables are really great! But one thing that has been bothering me, is how to handle missing env variables during build time. We just found a nice solution that you might want to use as well. 1/ #svelte

130

Mat Simon @matsimon.dev · 18/01/2025

Very interesting new #svelte proposal: github.com/sveltejs/svelte/pull/150… A better, more portable implementation of “actions” called “attachments”.

070

Mat Simon @matsimon.dev · 14/01/2025

I love the chess drama.

Screenshot of Hans Niemann's Twitter post: "As the #1 Blitz Player on CHESSCOM. I challenge the #2 and #3 players to an OTB Blitz match to decide who the best player in the world is. I am willing to put up anywhere from 1 to 1 million USD. If they are too afraid of the challenge, I expect them to retract all false accusations and issue a formal apology."

140

Mat Simon @matsimon.dev · 10/01/2025

In case you missed it, #vscode now has an option for custom labels! The #svelte vscode extension will set this automatically in the future, but until then, you can make these changes to optimize your tab labels in a #sveltekit project. github.com/sveltejs/lan...

The customLabels.pattern configuration for vscode.

How tabs will be labeled with this configuration.

0101

Mat Simon @matsimon.dev · 01/01/2025

I can't remember where I saw this tip, but it's so nice to use vite when you're working on something as simple as a single html file. Just create an index.html file, and run `vite .` in the same folder, and you have a live dev server without hot reloading!

140

Mat Simon @matsimon.dev · 04/12/2024

This has got to be the worst product placement I have ever seen... and _two_ in one scene!

130

Mat Simon @matsimon.dev · 28/11/2024

Really looking forward to the calc-size function to become widely available. It's such a nice syntax. developer.mozilla.org/en-US/docs/W...

width: calc-size(min-content, max(100% - 3rem, size));

020

Mat Simon @matsimon.dev · 27/11/2024

The problem: I missed this section on mdn developer.mozilla.org/en-US/docs/W...

Note: animation-timeline is included in the animation shorthand as a reset-only value. This means that including animation resets a previously-declared animation-timeline value to auto, but a specific value cannot be set via animation. When creating CSS scroll-driven animations, you need to declare animation-timeline after declaring any animation shorthand for it to take effect.

000

Mat Simon @matsimon.dev · 27/11/2024

Omg... These two lines of code have just cost me a few hours. I just couldn't figure out why my scroll driven animation wasn't working!

CSS code with the animation-timeline and animation properties.

110

Mat Simon @matsimon.dev · 25/11/2024

Just got your prints @chrispiascik.bsky.social ! They look amazing. Thanks for sending them across the pond.

Print of cartoony characters on black background

Print of cartoon character on pink background with the text "ha ha ok bye"

020

Mat Simon @matsimon.dev · 25/11/2024

Here is the updated version that makes use of the built-in "fromStore". I changed the .value accessor to .current as well, so it's in line with the "fromStore" API.

Updated code for the store with a reactive value accessor.

000

Mat Simon @matsimon.dev · 24/11/2024

To help speed up the #svelte 5 migration, I wrote this simple writable store wrapper, that also exposes a $state value. This way I don't have to migrate all my code at once, but progressively switch to the $state. This works well, but did I miss a built-in solution for this? Feedback welcome!

230

Mat Simon @matsimon.dev · 24/11/2024

Hopping on the skircle train.

020

Mat Simon @matsimon.dev · 19/11/2024

I just added a nice little upvote button to my #svelte blog. The particles are rendered with WebGL. I created the sound effects in Logic and exported them as an audio sprite. Each IP address gets 20 upvotes. Inspired by Medium and @joshwcomeau.com Try it out (choose any post): www.matsimon.dev

280

Mat Simon @matsimon.dev · 16/11/2024

Here is an easy workaround.

Code showing that you need to access the scheme state outside of optional chaining as well.

120

Mat Simon @matsimon.dev · 16/11/2024

Be careful when accessing state with optional chaining in Svelte 5! JavaScript does *not* evaluate the rest of the statement if the object is nullish. This means that, in this example, `scheme` will never be accessed and the effect will not re-run if `particles` is undefined. #svelte #svelte5

Code example of accessing state with optional chaining.

5254

Mat Simon @matsimon.dev · 14/06/2024

@tolin.ski The transcript of the latest episode is great :)

Transcript of the latest episode that spells arrowtype wrong while explaining how it is spelled.

000

Mat Simon @matsimon.dev · 01/06/2023

I apologize in advance that I might post photos of my dogs from time to time

000

Mat Simon @matsimon.dev · 01/06/2023

One of my favorite blender renders of the last few years. I decided to rebuild one of the most iconic chess games I've watched, in a drinking chess setting.

A CG rendered chess board, as a drinking game, where each piece is a shot glass.

100

Mat Simon @matsimon.dev · 31/05/2023

I always thought that the difference between lch and lab was only how you specify it. lch always seemed more natural to me: lightness, chroma (saturation), hue. But you can also specify which color space should be used when generating a CSS gradient and lab will be smoother and more uniform.

000

Mat Simon @matsimon.dev · 31/05/2023

CSS has a few new color notations that allow you to define colors in different color spaces. The most important ones are oklch and oklab. The cool thing about these color formats, is that they mimic how color is perceived by the human eye.

100