The hoops you jump through to battle FOUC when <dark-mode-toggle> is a #webcomponent with custom dark/light states... but all this async JS magic may need some time to initialize, so there's also a content attribute for the initial state, but that may in turn be overridden by user choice (and therefore one of the custom states) 🥴
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
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.
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
Peter Kröner
Kevin Sakemaer
Burton Smith
Daniel Pecos Martínez 🇪🇺 🐧
Benny Powers 🇮🇱🦁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.cem The blazing-fast CLI tool for generating and working with Custom Elements Manifests . Use cem to generate , validate , and query custom elements manifests. Develop with the dev server featuring live reload, interactive knobs, and buildless TypeScript. Then, use the built-in LSP and MCP servers to activate powerful, AI-native editor features like hover documentation, autocomplete, and more. npm install --save-dev @pwrs/cem Get Started Read the Docs
#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?
<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
Does anyone have a favorite #WebComponent that validates at least one of a group of checkbox inputs is checked?
Inautilo
Dan Q
Веб-стандарты
Jason Garber