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
I didn't explain it very well, but never mind—I checked the actual iframe demos on my laptop and see you're already doing what I was thinking of, eg:
.phone-screen .device-iframe { transform: scale(0.29333); }
Awesome! 👏
.phone-screen .device-iframe { transform: scale(0.29333); }
Awesome! 👏
November 7, 2025 at 9:40 PM
I didn't explain it very well, but never mind—I checked the actual iframe demos on my laptop and see you're already doing what I was thinking of, eg:
.phone-screen .device-iframe { transform: scale(0.29333); }
Awesome! 👏
.phone-screen .device-iframe { transform: scale(0.29333); }
Awesome! 👏
had this happen sooo many times
November 7, 2025 at 9:06 PM
had this happen sooo many times
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.
welp
I was laid off from Teen Vogue today along with multiple other staffers, and today is my last day.
certainly more to come from me when the dust has settled more, but to my knowledge, after today, there will be no politics staffers at Teen Vogue.
certainly more to come from me when the dust has settled more, but to my knowledge, after today, there will be no politics staffers at Teen Vogue.
November 3, 2025 at 9:25 PM
welp
“There’s something called Declarative Shadow DOM that Chrome implemented, but it’s not widely available”
Even the article you linked to starts off with:
“Celebration: This web feature is now available in all three major browser engines, and becomes Baseline Newly available as of August 5, 2024.”
Even the article you linked to starts off with:
“Celebration: This web feature is now available in all three major browser engines, and becomes Baseline Newly available as of August 5, 2024.”
Declarative Shadow DOM | web.dev
Declarative Shadow DOM is a new way to implement and use Shadow DOM directly in HTML.
web.dev
November 3, 2025 at 7:30 PM
“There’s something called Declarative Shadow DOM that Chrome implemented, but it’s not widely available”
Even the article you linked to starts off with:
“Celebration: This web feature is now available in all three major browser engines, and becomes Baseline Newly available as of August 5, 2024.”
Even the article you linked to starts off with:
“Celebration: This web feature is now available in all three major browser engines, and becomes Baseline Newly available as of August 5, 2024.”
lazy render (as oposed to lazy load)
Added an option to lazy render (as opposed to lazy load) the content by wrapping it in a : github.com/nonsalant/la...
Thank you, @justinfagnani.com for the suggestion.
Thank you, @justinfagnani.com for the suggestion.
November 2, 2025 at 9:10 AM
lazy render (as oposed to lazy load)
colocate pattern
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)
November 2, 2025 at 9:09 AM
colocate pattern
lazy load the markup
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...
November 2, 2025 at 9:06 AM
lazy load the markup