Stefan Matei
@stefanmatei.com
Web dev, mostly frontend, buildless and with zero dependencies when possible. Web components, modern CSS, and vanilla JS. AuDHD.
🇵🇸 Free Palestine
🔗 find me on codepen: codepen.io/nonsalant
🔗 find me on github: github.com/nonsalant
🇵🇸 Free Palestine
🔗 find me on codepen: codepen.io/nonsalant
🔗 find me on github: github.com/nonsalant
Great, I wanted to suggest allowing iframes when you first shared it! Do you think it would be possible to allow a zoom factor for them?
🤔 For example 0.5 would scale the *contents* of the iframe to half the normal size.
For reference, the CodePen preview has something like this on mobile.
🤔 For example 0.5 would scale the *contents* of the iframe to half the normal size.
For reference, the CodePen preview has something like this on mobile.
November 7, 2025 at 6:49 AM
Great, I wanted to suggest allowing iframes when you first shared it! Do you think it would be possible to allow a zoom factor for them?
🤔 For example 0.5 would scale the *contents* of the iframe to half the normal size.
For reference, the CodePen preview has something like this on mobile.
🤔 For example 0.5 would scale the *contents* of the iframe to half the normal size.
For reference, the CodePen preview has something like this on mobile.
to avoid off-by-one errors, always make sure there is enough contrast between your cats
October 29, 2025 at 2:25 AM
to avoid off-by-one errors, always make sure there is enough contrast between your cats
Was disappointed to see the Whiteboard Guy giving the Vercel CEO fodder to reply to (Vercel guy bumps up his positive comments to push down the negative ones after his Netanyahu photo).
He deleted it the next day (after at least one person got upset) but decided DHH is still OK to fraternize with.
He deleted it the next day (after at least one person got upset) but decided DHH is still OK to fraternize with.
October 2, 2025 at 10:24 PM
Was disappointed to see the Whiteboard Guy giving the Vercel CEO fodder to reply to (Vercel guy bumps up his positive comments to push down the negative ones after his Netanyahu photo).
He deleted it the next day (after at least one person got upset) but decided DHH is still OK to fraternize with.
He deleted it the next day (after at least one person got upset) but decided DHH is still OK to fraternize with.
🎶 mammas don’t let your babies grow up to be coders 🎶
September 30, 2025 at 9:57 AM
🎶 mammas don’t let your babies grow up to be coders 🎶
That’s an explicitly pro Israel labeler.
The labeler I’m using (that put these labels on pef-moderation) is @shadowbanner.bsky.social — it’s not perfect but it’s less biased in favor of Israel.
The labeler I’m using (that put these labels on pef-moderation) is @shadowbanner.bsky.social — it’s not perfect but it’s less biased in favor of Israel.
September 2, 2025 at 9:28 AM
That’s an explicitly pro Israel labeler.
The labeler I’m using (that put these labels on pef-moderation) is @shadowbanner.bsky.social — it’s not perfect but it’s less biased in favor of Israel.
The labeler I’m using (that put these labels on pef-moderation) is @shadowbanner.bsky.social — it’s not perfect but it’s less biased in favor of Israel.
Reposting with alt text:
86% of the world’s genocide experts have declared that Israel is committing genocide in Gaza.
Israel made its genocidal intent clear from day one.
It then committed genocide in full view of the world.
Nobody with power or influence can say they didn’t know at the time.
86% of the world’s genocide experts have declared that Israel is committing genocide in Gaza.
Israel made its genocidal intent clear from day one.
It then committed genocide in full view of the world.
Nobody with power or influence can say they didn’t know at the time.
September 2, 2025 at 8:19 AM
Reposting with alt text:
86% of the world’s genocide experts have declared that Israel is committing genocide in Gaza.
Israel made its genocidal intent clear from day one.
It then committed genocide in full view of the world.
Nobody with power or influence can say they didn’t know at the time.
86% of the world’s genocide experts have declared that Israel is committing genocide in Gaza.
Israel made its genocidal intent clear from day one.
It then committed genocide in full view of the world.
Nobody with power or influence can say they didn’t know at the time.
Nice! Just a heads up, it looks like the last two demos aren’t highlighting anything (only tried on iOS so far)
September 2, 2025 at 7:42 AM
Nice! Just a heads up, it looks like the last two demos aren’t highlighting anything (only tried on iOS so far)
Went to a pro Palestine march/protest in Bucharest
August 31, 2025 at 7:43 PM
Went to a pro Palestine march/protest in Bucharest
“a closed box” 🤯 now i realize why one of my icons felt off. the box wasn’t closed enough compared to the ios share icons.
not as off as bluesky’s icons though.
not as off as bluesky’s icons though.
August 18, 2025 at 5:33 PM
“a closed box” 🤯 now i realize why one of my icons felt off. the box wasn’t closed enough compared to the ios share icons.
not as off as bluesky’s icons though.
not as off as bluesky’s icons though.
A pattern I’m using to co-locate (adopted) stylesheet files with web component scripts until CSS module scripts—e.g: `import sheet from './styles.css' with { type: 'css' };`—become available outside of Chrome: 🔗 github.com/nonsalant/co...
![class MyComponent extends HTMLElement {
static cssPaths = ['my-component.css'];
constructor() {
super().attachShadow({ mode: 'open' }).innerHTML = `<h1>Hello World</h1>`;
// Current shadow root or the first parent shadow root or 'document'
this.assetHost = this.shadowRoot ?? this.getRootNode();
}
connectedCallback() {
this.addAssets();
}
async addAssets() {
const Ctor = this.constructor; // to access static stuff from non-static method
const cssPaths = Ctor.cssPaths;
const stylesheets = await Ctor.addCss(...cssPaths);
this.assetHost.adoptedStyleSheets.push(...stylesheets);
}
static basePath = import.meta.resolve('./');
// Load CSS files and cache the stylesheets statically
static cssPromiseCache = new Map();
static async addCss(...stylesheetPaths) {
const stylesheets = [];
for (let path of stylesheetPaths) {...
}
return stylesheets;
}
}
export async function createStylesheet(cssText) {
const stylesheet = new CSSStyleSheet();
await stylesheet.replace(cssText);
return stylesheet;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:komsc4cibngambanqjhpwweu/bafkreibjsypbpekxypfcxezwhzuqvopoq2e5rix4hylvlyrr6s5qhkp5ry@jpeg)
August 13, 2025 at 4:29 PM
A pattern I’m using to co-locate (adopted) stylesheet files with web component scripts until CSS module scripts—e.g: `import sheet from './styles.css' with { type: 'css' };`—become available outside of Chrome: 🔗 github.com/nonsalant/co...
And I started this off making the fallback for the custom element not getting defined (or javascript not loading) a horizontal scroller with the 2 images side by side, but now I found a way to make the scrollbar always visible on Mac OS (Chrome and Safari): codepen.io/nonsalant/pe...
August 4, 2025 at 2:56 PM
And I started this off making the fallback for the custom element not getting defined (or javascript not loading) a horizontal scroller with the 2 images side by side, but now I found a way to make the scrollbar always visible on Mac OS (Chrome and Safari): codepen.io/nonsalant/pe...
@kevinpowell.co really used `color-scheme: dark light` on his glasses 🤓 😎 #css
July 31, 2025 at 8:11 AM
@kevinpowell.co really used `color-scheme: dark light` on his glasses 🤓 😎 #css
just a heads up, looks like someone who doesn’t get sarcasm mislabeled you with the “Dearborn Scapegoating” label.
CC: @shadowbanner.bsky.social
CC: @shadowbanner.bsky.social
July 28, 2025 at 10:44 AM
just a heads up, looks like someone who doesn’t get sarcasm mislabeled you with the “Dearborn Scapegoating” label.
CC: @shadowbanner.bsky.social
CC: @shadowbanner.bsky.social
Correction on a previous thread I made about using AbortController in a web component (to clean up anonymous arrow function events from external elements):
![In the constructor():
this.#abortController = new AbortController();
this.#abortSignal = { signal: this.#abortController.signal }
In the connectedCallback():
trigger.addEventListener(
'click',
this.handleClick.bind(this),
this.#abortSignal
);
['mouseenter', 'focus'].forEach(e => {
trigger.addEventListener(
e,
() => this.loadAssets(),
this.#abortSignal
);
});
In the disconnectedCallback():
this.#abortController.abort();](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:komsc4cibngambanqjhpwweu/bafkreie54eyge6dfrbuwbrwazs5n6l46o3z4m5xfzf3xcnomi7puvsjbbi@jpeg)
July 24, 2025 at 9:49 AM
Correction on a previous thread I made about using AbortController in a web component (to clean up anonymous arrow function events from external elements):
Oh, it’s the first time I see this!
For what it’s worth, it shouldn’t be empty, but a whitespace: dev.to/afif/what-no...
For what it’s worth, it shouldn’t be empty, but a whitespace: dev.to/afif/what-no...
July 14, 2025 at 6:24 PM
Oh, it’s the first time I see this!
For what it’s worth, it shouldn’t be empty, but a whitespace: dev.to/afif/what-no...
For what it’s worth, it shouldn’t be empty, but a whitespace: dev.to/afif/what-no...
Sometimes I add extra keyboard shortcuts or access with alternative keys (besides the arrows) to things just to get an excuse to use ’s, like I did on codepen.io/nonsalant/fu...
July 12, 2025 at 12:33 PM
Sometimes I add extra keyboard shortcuts or access with alternative keys (besides the arrows) to things just to get an excuse to use ’s, like I did on codepen.io/nonsalant/fu...
I made some enhancements to my web component that loads other web components in popovers. You can now lazy load the markup inside the popover too (not just its script(s) and style(s)) from an external html file:
github.com/nonsalant/la...
github.com/nonsalant/la...
July 10, 2025 at 12:11 PM
I made some enhancements to my web component that loads other web components in popovers. You can now lazy load the markup inside the popover too (not just its script(s) and style(s)) from an external html file:
github.com/nonsalant/la...
github.com/nonsalant/la...
just used the dynamic import version of this (import attributes to import JSON from a module) in a web component method. very demure
![async fetchData() {
if (!this.stationId) return;
const weatherStationUrl = `${this.dataPath}${this.stationId}.json`;
const data = await import(weatherStationUrl, { with: { type: "json" } });
const stationData = data.default;
const spring = stationData.springFreezeDates;
const fall = stationData.fallFreezeDates;
const freezeFreeDays = stationData.freezeFreeDays;
const stationMeta = stationData.meta;
this.lastFrostDate.innerHTML = `<strong>${formatDateLong(spring[32][50])}</strong>`;
this.firstFrostDate.innerHTML = `<strong>${formatDateLong(fall[32][50])}</strong>`;
this.freezeFreeDays.innerHTML = `<strong>${freezeFreeDays}</strong>`;](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:komsc4cibngambanqjhpwweu/bafkreig6qvzngydb7asg5smdg7563g5jqlqja2yodu7nkomwc7hz52g5la@jpeg)
May 21, 2025 at 9:26 AM
just used the dynamic import version of this (import attributes to import JSON from a module) in a web component method. very demure
Tim O’Brien (illustrator whose work appeared on the cover of Time magazine and whose website I built a number of years ago) predicted this!
obrienillustration.com/american-pope/
obrienillustration.com/american-pope/
May 8, 2025 at 9:00 PM
Tim O’Brien (illustrator whose work appeared on the cover of Time magazine and whose website I built a number of years ago) predicted this!
obrienillustration.com/american-pope/
obrienillustration.com/american-pope/
And now that she won a Pulitzer, the washington post — from where she resigned after they censored her bezos cartoon — appear quite happy to count it as a “win” for themselves
May 7, 2025 at 12:41 PM
And now that she won a Pulitzer, the washington post — from where she resigned after they censored her bezos cartoon — appear quite happy to count it as a “win” for themselves