Today i released a big update to spark.
Lots of improvements in the framework.

see yourself : https://pub.dev/packages/spark_framework/changelog
and even more in the cli : https://pub.dev/packages/spark_cli/changelog

#dart #dartweb #dartlang #ssr #webcomponent

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

#html #css #javascript
https://dev.to/stuffbreaker/reducing-fouc-with-web-components-1jnh

🚨 New version of my mastodon-comments webcomponent available! 🚨

This webcomponent integrates a mastodon thread into a website to be used as a discussion thread.

The last version of the component introduces a dialog to allow the user selecting their mastodon instance to reply from.

👉 https://github.com/dpecos/mastodon-comments

#mastodon #comments #webcomponent

spark_framework 1.0.0-alpha.2 is now on https://pub.dev/packages/spark_framework!

lots of improvement.
✅ New way to write interactive component
✅ Fixed the reactive attribute of the component.
✅ Support for Cookie
✅ Automatic support for nonce when CSP header is present

To see how we write component now checkout:
https://spark.kleak.dev/docs/components

#dart #dartlang #web #webdev #webcomponent #spark

🚚 New cem release! The standards-based #WebComponent multitool just released v0.9.0 including support for #JavaScript class mixins, numerous bug fixes, and an overhauled and much more readable docs site.

Give it a try today in your web components project and let me know what you think!

bennypowers.dev/cem/

github.com/bennypowers/cem/releases/tag/v0.9.0

#Development #Fun
Hallucinations using web components · How to make your self-written posts look machine‑written https://ilo.im/168oqv

_____
#Simulation #AI #Hallucinations #Content #Blog #WebComponent #WebDev #Frontend #HTML #JavaScript

This weekend, I was inspired by the once-common, now-absent "Turbo" button of computers past. So I implemented a #webComponent that reproduces the experience of pressing one and watching the little LED turn off and on.

Wanna see?

🔗 https://beige-buttons.danq.dev

<color‑input> — современный веб‑компонент Адама Аргайла для выбора цвета, который поддерживает широкий цветовой охват (sRGB, Display P3, Rec2020) и конвертирует между sRGB, HSL, HWB, LAB, LCH, OKLCH и OKLAB. Построенный на Color.js, Preact Signals и Shadow DOM, он настраивается через CSS parts и поставляется в виде tree‑shakeable ES-модулей. Кастомный элемент автоматически регистрируется при импорте и работает в браузерах с Popover API. #webcomponent #color

https://color-input.netlify.app/

Does anyone have a favorite #WebComponent that validates at least one of a group of checkbox inputs is checked?

#WebComponents #HTML #CustomElements

#webComponent thought for the day: I'm thinking of changing my approach. I always prefer HTML first. However, if JS failed, for some components, I didn't want to show anything as they wouldn't be functional without JS, so I added elements dynamically. However, that can be resolved by setting display:none in CSS then showing them elements with JS once loaded. Maybe this would be better 🤔

Weekend project done: naked-table-stripe-sort #webComponent published: https://codeberg.org/patrickgrey/naked-web-components/src/branch/main/naked-table-stripe-sorter
Demo here: https://patrickgrey.co.uk/projects/naked-web-components/

Can't avoid garage tidy any longer...

A while ago, I had a need for a vertical scrolling assistant that skipped to styled articles, so I built one and put it out in public.

Accessible, configurable vanilla #WebComponent

https://www.npmjs.com/package/@localnerve/jump-scroll

Page includes a link to a live demo.

#webdev #webdevelopment #webcomponents

It's Twofer Friday! 🥳

1) @11ty website redesign: https://www.patrickgrey.co.uk/ 💅

2) I'm launching v1 of my small #webComponent library: Naked Web Components! They are focussed on function with minimal styling.

Read all about it here: https://www.patrickgrey.co.uk/projects/naked-web-components/ and find the code here: https://codeberg.org/patrickgrey/naked-web-components.

I never expected to create a component called <naked-sticky-overflow>... 😬

I'd love to know if they are useful for anyone 🥰

I wished there was a native todo app web component that you could drop into your web application under construction and test data update and mutation flows.

So I made one.

https://github.com/localnerve/editable-object

#webdev #webdevelopment #WebComponent #HtmlWebComponent #Frontend #HTML #CSS #JavaScript

#Development #Launches
Grid-aware status bar · A web component for energy-smart websites https://ilo.im/166dmv

_____
#Electricity #Sustainability #Website #Design #WebDesign #WebComponent #OpenSource #WebDev #Frontend

Trying out moving Joist over to Codeberg. If you are over there give it a star and a watch!

https://codeberg.org/deebloo/joist

#webdev #webcomponent #javascript

Why do all #webcomponent examples use innerHtml = when innerHtml is inherently insecure?

#Development #Launches
Split Flap · A fun text animation web component for your site https://ilo.im/165pb9

_____
#Text #Display #Animation #WebComponent #Design #WebDesign #WebDev #Frontend #HTML #JavaScript

Because of the generic nature of the terms, I'm having trouble searching for something that should have a page in the Nuxt docs somewhere:

I want to use an existing Web Component (developed by a third party) in a Nuxt app. It is having trouble with the SSR and I can't figure out how to work around it so that the web component is named in the template area but is only initialized in the browser.

Or, alternately, what I can tell the developer to do differently to make it work. It says it can't find "HTMLElement".

#nuxt #webcomponent

Wanted to try out this <syntax-highlight> #WebComponent for myself https://andreruffert.github.io/syntax-highlight-element/

The result is super clean and a fair chunk smaller than what's typically used. Even works with contenteditable!
https://codepen.io/daviddarnes/pen/bNVVVxQ?editors=1000