Janis Jansen 🌳

@janis.me

91 Followers 271 Following

Building @elevenlabs.io and open source CSS tools. Before that fluid simulations and making steel with software. Make complex css maintainable with surimi.dev 🔗 janis.me 🖥️ github.com/janis-me 📽️ youtube.com/@janis-me

A picture of me with the elevenlabs Branding and a text showing "Elevenlabs x Janis"

A spam email claiming to be PayPal, sent from Uni Münster Accounts

The game Metroid Fusion (the best Metroid game) and a Wii remote.

Screenshot of a GitHub PR summary, showing:
162 Files changed, +11.691 additions, -2.682 deletions and 24 commits

| `-webkit-${string}`
| `-moz-${string}`
| `-ms-${string}`
| `-o-${string}`
| `-khtml-${string}`
| `-apple-${string}`
| `-x-moz-${string}`;

":dir" | ":has" | ":host" | ":host-context" | ":is" | ":lang" | ":not" | ":nth-child" | ":nth-last-child" | ":nth-last-of-type" | ":nth-of-type" | ":where" | ":active" | ":any-link" | ":blank" | ":checked" | ":current" | ":default" | ":defined" | ":disabled" | ":empty" | ":enabled" | ":first" | ":first-child" | ":first-of-type" | ":focus" | ":focus-visible" | ":focus-within" | ":fullscreen" | ":future" | ":hover" | ":in-range" | ":indeterminate" | ":invalid" | ":last-child" | ":last-of-type" | ":left" | ":link" | ":local-link" | ":nth-col" | ... 21 more ... | ":visited"

Here you go. All 40 of them:
'any-hover', 'any-pointer', 'color-gamut', 'grid', 'hover', 'overflow-block', 'overflow-inline', 'pointer', 'scan', 'update', 'aspect-ratio', 'color', 'color-index', 'device-aspect-ratio', 'device-height', 'device-width', 'height', 'monochrome', 'resolution', 'width', 'max-aspect-ratio', 'max-color', 'max-color-index', 'max-device-aspect-ratio', 'max-device-height', 'max-device-width', 'max-height', 'max-monochrome', 'max-resolution', 'max-width', 'min-aspect-ratio', 'min-color', 'min-color-index', 'min-device-aspect-ratio', 'min-device-height', 'min-device-width', 'min-height', 'min-monochrome', 'min-resolution', 'min-width'

The new inwx website

The Spotify-astro clone showing view transitions when clicking on albums. See it at https://spotify-astro-transitions.vercel.app/

The nyt game spelling be, showing the word "linting" but it's not in the word list.

An enum like

enum Options {
ONE = 1,
TWO = 2
}

let x = Options.ONE;

will compile to

"use strict";
var Options;
(function (Options) {
Options[Options["ONE"] = 1] = "ONE";
Options[Options["TWO"] = 2] = "TWO";
})(Options || (Options = {}));
let x = Options.ONE;

The Xerox Alto user interface. White and gray boxes with black text and borders. Not a lot going on on the screen, just shows some lists, text and the mockup/3d design plan of a screw. Simple but crisp design!

My website! Showing the home page with the new "colorful dark" theme. It's got a yellow font on dark background. The website itself is made up of simple lines, clean and simple.

The dunning-kruger effect graph (confidence vs knowledge), but the 'peak of mt. stupid' is 'hot take, but...'

Picture of a lake and forest during the day, and a barbeque grill with some bread and sausages in the front.

A demo of how handlery works. It shows a `subscribe` decorator, a TodoHandler that extends an `EventHandler`, and some methods using the `on` decorator to listen to `todos.add` and `todos.remove`

A screenshot of GitHub, showing that mrdoob followed meugen87

interface Input {
a: string;
b?: number;
}

// should become
interface Output {
a: string;
b: number | undefined;
}

export type Prettify<T> = {
[K in keyof T]: T[K];
};

export type OptionalKeys<T> = {
[K in keyof T]-?: {} extends Pick<T, K> ? K : never;
}[keyof T];

export type OptionalToUndefined<T> = Prettify<
{
[K in Exclude<keyof T, OptionalKeys<T>>]: T[K];
} & {
[K in OptionalKeys<T>]?: T[K] | undefined;
}
>;

A code snippet of the program I described:

export function MyContextableMesh() {
const contextMenuTriggerRef = useRef<HTMLSpanElement>(null);

return (
<mesh
onContextMenu={e => {
contextMenuTriggerRef.current?.dispatchEvent(
new MouseEvent('contextmenu', { bubbles: true, clientX: e.clientX, clientY: e.clientY }),
);
}}
>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />

<Html as="div">
<ContextMenu.Root>
<ContextMenu.Trigger ref={contextMenuTriggerRef} />
<UI.ContextMenu.Portal>
...
</UI.ContextMenu.Portal>
</UI.ContextMenu.Root>
</Html>
</mesh>
);
}

Putting olives on pizza should be illegal

A screenshot of the npm website for https://www.npmjs.com/package/@janis.me/themed, showing that the 'homepage' link is the same as the package name.

The SCSS output of the website, looks like

@use '@janis.me/themed';
@use '@janis.me/themed/generators';
@use '@janis.me/themed/plugins';

$themes: generators.theme(
$primary: #1b11d4,
$target-space: oklch,
);

// The plugins are optional,
// but that's what's used for this website.
@include themed.configure(
$themes,
$plugins: plugins.alpha(
$operation: 'change',
$steps: (
0.2,
0.4,
0.9,
)
)
);

@include themed.apply();

The themed.janis.me/generator website, showing some color inputs to automatically generate a color scheme. The SCSS and CSS code is visible as well

A chart that shows where the two scales meet. Around -the -40 mark, they are at (C left and F right)
-37 -34,6
-38 -36,4
-39 -38,2
-40 -40
-41 -41,8
-42 -43,6
-43 -45,4
-44 -47,2