Stefan Matei

JavaScript Iterator․zip landed in Firefox 148, making it simple to loop over multiple things at the same time. Here's how it works:

<link rel="icon" href="data:," />

adding this line to all my starter templates to fix those pesky 404s.

<search>: The generic search element - HTML | MDN The <search> HTML element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The <search> e...

I thought I knew about (and used) this, but I was thinking of <input type=search>. This one wraps around whole forms:

A code snippet outlines the syntax for the CSS property "print-color-adjust," including various global value options.

Keep your designs looking perfect in print 🖨️

The print-color-adjust property controls whether browsers can optimize colors when printing. Set it to 'exact' to preserve your exact color scheme and prevent unwanted adjustments.

Learn more 👇
developer.mozilla.org/en-US/docs/...

I used the technique because I liked that it made the left/right arrow keys work (even without JS) to select the tabs—which is why I made the “keyboard accessible” claim, but you’re probably right, I’ll have to reconsider the wording if it doesn’t work properly with screen readers.

Since you reminded me of this, I’d like to find something written on the accessibility (or lack thereof) of checkboxes used for tabs. I vaguely remember someone was maybe critiquing the technique but can’t find anything at the moment. (If you know of anything, it would be much appreciated.)

The non standard role=tabs was just used as a generic attribute selector (was intending to get rid of the .simple-tabs class). But maybe not the best choice to invent roles that could clash with potential future roles.

<simple-tabs> Keyboard accessible tabs Web Component that changes to an accordion in small spaces. JavaScript is used to enable View Transitions that animate the the...

It’s been about a year since I last messed with tabs, but why do they *require* JS? 🤔

I built this and only used JS for some view transition stuff: codepen.io/nonsalant/pe...

Simplified example (no JS or demo CSS): codepen.io/nonsalant/pe...

or the content below the <summary> in <details>

you could be putting the new content in a non visible area (eg: that needs to be scrolled to or expanded), or if you can anticipate them you could set fixed heights to parent elements to reserve space on the screen for the new content

3. if I put anything after the menu and wrap both elements (eg: in display flex, or in a horizontal grid), the element after the menu is pushed out of the container—let me know if you’d like me to recreate this in a CodePen.

2. in the same function’s styles “display” is mistyped as “dislay” in:
:host(:state(nested)) .container > button {
dislay: flex !important;
}
— but when I fix that, items show a nested button that says “undefined”, not sure if that’s expected

This looks very useful. Been playing around with it and found a couple of potential issues (and typos):

1. in the render function of menu-item, there’s an opening div tag when it should be closing on the last line of the template literal (doesn’t seem to affect anything)

I published a web component that lets you render fully local iframes with <template>s. Check it out and lmk what you think or if there are use cases the current API doesn't handle:

github.com/AleksandrHov...

Background Patterns with CSS `corner-radius` You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.

Background Patterns with CSS `corner-radius`

You might need to know this someday: you can style a div, put the div into SVG, then put the SVG in to CSS and use it as a repeating background.

white text on light gray background

I think there’s something wrong with the background color in dark mode

No config responsive menu A Responsive Menu using slots for overflow. This uses slots for "moving" and thus avoids the need to alter the DOM directly with JavaScript. Also, with...

Do you want a dynamic, responsive navigation?
What if you want zero config, no DOM manipulation, no attributes popping up?
Well, slot assignment, popovers, and anchor positioning, you can get it done. Okay, that's a lot. But, doable.

#CSS #webcomponents #customelements

codepen.io/dutchcelt/fu...

no, i did not

Underlining Links With CSS A practical guide to styling link underlines with modern CSS text-decoration properties. Perfect for bookmarking when you need a quick reference!

I always forget what properties are available now so I've written a quick post to put them all in one place

Underlining links with CSS

www.alwaystwisted.com/articles/und...

#FrontEnd #CSS #WebDev #WebDesign

Looks like you won’t be reaching this, but what I found is they limit playlists at 5000. I had to create another “watch later” playlist a few years ago because of this so now I gotta do a couple of extra clicks whenever I add to this custom “watch later” 😔

Reducing FOUC with Web Components Learn practical techniques for reducing the flash of unstyled content (FOUC) as your web components/custom elements are defined to improve your users' experience

I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout.

#html #css #javascript
dev.to/stuffbreaker...

img:hover {
scale: 1.2;
clip-path: inset(
10% 10% 10% 10%
round 20px
);
}

nice, n' simple

codepen.io/argyleink/pe...

"CSS is my passion"

Repeatable Form Fields Made Simple :: Aaron Gustafson Sometimes you need users to provide multiple instances of the same information—multiple email addresses, phone numbers, team members, or emergency contacts. The form-repeatable web component makes thi...

Repeatable Form Fields Made Simple from @aaron-gustafson.com

www.aaron-gustafson.com/notebook/rep...

Performance-Optimized Video Embeds with Zero JavaScript Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.

Performance-Optimized Video Embeds with Zero JavaScript

Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.

Tweet from Phil Gordon: Hard to overstate the damage to US-Israel relations done by the sense of entitlement and ingratitude reflected in comments like these and Netanyahu's own recent statements. Baseless misdirection to suggest that Israeli soldiers' deaths in Gaza were caused by some phantom US "embargo" (when in fact Biden resisted enormous pressure to condition aid, as required by U.S. law, even as Israel rebuffed calls to facilitate more humanitarian assistance and reduce civilian casualties), and insulting to suggest that U.S. concern for people of Gaza was driven by "Michigan," as if no other possible basis for concern comes to mind. If goal of Netanyahu and his partisans is to accelerate the sharp decline in U.S. public support for Israel, and to further undermine the bipartisan character of that support, this seems like good way to go about it.

Kamala Harris's National Security Advisor Phil Gordon angrily replies to criticism from Israeli journalist Amit Segal that Biden didn't do enough for Israel.

He states that Biden went out of his way to violate US law in support of Israel.

TIL, Chrome 144 ships some new pseudo-classes. 👏

Within limits, you can now style the matching strings of the "find in page" search.

::search-text {
// matching strings
}

::search-text:current {
// currently matched string
}

More on the blog. 👇

www.stefanjudis.com/today-i-lear...

Matching the `commandfor` and `id` attributes is enough to tie the two elements together when anchoring.

@chriscoyier.net some good news on the popover web component--you don't need to do this explicitly:

button {
--anchor-name: --menu-button-${this.menuId};
}

menu {
--position-anchor: --menu-button-${this.menuId};
}

billionaires want you to know they could have done physics YouTube video by Angela Collier

More on this type of person by @acollierastro.bsky.social: youtu.be/GmJI6qIqURA