Check out this very simple code example over on @codepen.io
#html #customElement #webComponent #invokerCommands
powered by #zumerlab / #snapdom
codepen.io/g12n/pen/vEX...
0
0
0
0
#WebComponent
Posts tagged #WebComponent on Bluesky
![CSS:
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
}
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}
:root:has(dark-mode-toggle[mode="light"]:not(:state(dark))),
:root:has(dark-mode-toggle:state(light)) {
color-scheme: light;
}
:root:has(dark-mode-toggle[mode="dark"]:not(:state(light))),
:root:has(dark-mode-toggle:state(dark)) {
color-scheme: dark;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:efcyuflqnbzhmaob2pelkpgo/bafkreiblctssmjpj75qcwyb3gmhtb7rwkx2pi6wkzehbk6ux34g4owdxa4)
CSS: @media (prefers-color-scheme: light) { :root { color-scheme: light; } } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } :root:has(dark-mode-toggle[mode="light"]:not(:state(dark))), :root:has(dark-mode-toggle:state(light)) { color-scheme: light; } :root:has(dark-mode-toggle[mode="dark"]:not(:state(light))), :root:has(dark-mode-toggle:state(dark)) { color-scheme: dark; }
The hoops you jump through to battle FOUC when <dark-mode-toggle> is a #webcomponent with custom dark/light states, but all the JS magic may need some time to load, so there's also a content attribute for the initial state, but that may in turn be overridden by user choice (= custom states) 🥴
#css
0
0
0
0
Today i released a big update to spark.
Lots of improvements in the framework.
see yourself : pub.dev/packages/spa...
and even more in the cli : pub.dev/packages/spa...
#dart #dartweb #dartlang #ssr #webcomponent
0
0
0
0
I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout.
#html #css #javascript
dev.to/stuffbreaker...
10
1
6
0
Developing my own web components is great because they're framework agnostic & usable in any project. I coded a "back to the top" button last year & I'm now importing it into a project using npm.
You can use it too 👇️
buff.ly/zsx7JA6
#webcomponent #react #vue #javascript #100Devs #softwareengineer
13
0
1
0
Most Web Component tutorials teach you to build components that look great in demos but fail in production. Here are the patterns that separate toy projects from real applications
#WebDevelopment #WebComponent #FrontendDevelopment #JavaScript #WebDev #Developer
pixicstudio.medium.com/how-to-build...
1
0
0
0
spark_framework 1.0.0-alpha.2 is now on pub.dev/packages/spa...!
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
#dart #web #webdev #webcomponent #spark
1
0
1
0
My setup to test the reactive #webcomponent using spark.
Seems to work as expected now, let's clean up, write more test, update docs and prepare for release!
#dart
0
0
0
0
Inheritance seems like a fairly divisive approach, but I love it for #webcomponent systems in the right use cases!
2
0
0
0
Wie lange hätte ich gebraucht : als Wiedereinsteiger in #Rust eine #WebComponent in einer #React #App auszuliefern ? — Es ist wunderschön ! 🥰 (1 Stunde Arbeit für eine lauffähige Demo steht hier etwa 1 - 3 Tagen gegenüber)
1
0
1
0
#Development #Fun
Hallucinations using web components · How to make your self-written posts look machine‑written ilo.im/168oqv by Zach Leatherman
_____
#Simulation #AI #Hallucinations #Content #Blog #WebComponent #WebDev #Frontend #HTML #JavaScript
2
0
0
0
I’m honored that @kevinpowell.co invited me on to build a #webcomponent for him and have him implement it and talk about it. I had a great time and hope we can do it again in the future!
youtu.be/qUhtlnL48yA?...
284
37
2
2
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
2
0
1
0
If you’re like me — loving standard Web Components and performance, but missing the React functional component model — then you’ll be interested in this small library I made: github.com/dsolimando/e....
It’s based on the excellent #uhtml library for signals and reactivity. #webcomponent #webstandard
1
0
0
0
A useful trick for #webcomponent that use lots of CSS Custom Properties to pierce the shadowDOM: You can explicitly define a CSS Custom Property to `initial` and it will be treated as `undefined` when `var()` dereferences it, triggering the fallback.
codepen.io/elfsternberg...
2
0
1
0
ACHIEVEMENT UNLOCKED: YNFINITI CERTIFIED
*(X+ nesting. That's Unprecedented!)*
🏆 ISG (International Scripting Gang)
⌨ YaiTabs Tabs Component v1.0.0
🔗 yaijs.github.io/yai/tabs/Exa...
🏷 #WebDev #Frontend #Javascript #VanillaJS #WebComponent
1
0
0
0
hey #webcomponent people that work at search engine companies, who do i have to annoy to get some words on an official blog for Bing and whatever else about search engine crawlers playing nicely with shadow dom?
there’s exactly 0 official docs saying that web components won’t hurt your SEO.
3
1
1
0
I made a scrolling ticker web component that will allow you to put whatever text/links you'd like in it. There are custom attributes for styling, font-size, separators, etc. It also has allows you to use google fonts without you having to import them
buff.ly/EooG6tc
#100Devs #webcomponent #webdev
12
1
2
0
Demonstrating of a back to the top web component
Need a back to the top button but don’t feel like writing any code? Copy & paste the script tag and the back-to-top custom element, and you’re good to go. Want to customize, size, color, shape, position, etc? No prob, instructions in the reaadme github.com/DevManSam777...
#webcomponent #100Devs
9
0
0
0
I made a reusable back-to-top button web component with lots of built-in html attributes for customizable style options. Feel free to use it in your projects. Enjoy!
👇🏽
github.com/DevManSam777...
#100Devs #webdev #javascript #softwareengineer #webcomponent
9
1
0
0
Buongiorno! Yesterday, I designed and coded a streaming audio player that plays royalty free music. Did I cook? 👨🍳🍝
#100Devs #softwareengineer #webdev #webcomponent
9
0
2
0
Here's the form repo. It's so easy to add to your projects. One script tag and one html web component element and you are ready to rock and roll. It's fully customizable with built in html attributes for styling. Check it out. #webcomponent #javascript #webdev
github.com/DevManSam777...
0
0
0
0
Let's make a
@leonnoel.bsky.social
#100Devs youtube ticker! We are going to find the rss feed xml info by viewing the page source on youtube and plugging into the web component I made! You can make your own RSS feed tickers too by using this 👇
github.com/DevManSam777...
#rss #webcomponent
13
2
1
0
Made an RSS ticker web component and got a bit carried away w/ the customization options. Google Fonts, custom colors, speed control, mobile support, multiple proxy services, smart caching and much more. Check it out if you need one! 👇
github.com/DevManSam777...
#100Devs #webcomponent #rss #webdev
10
0
0
0
Wanted to try out this <syntax-highlight> #WebComponent for myself andreruffert.github.io/syntax-highl...
The result is super clean and a fair chunk smaller than what's typically used:
29
3
0
1
I made a weather widget recently but forgot to update the readme with the correct cdn information. You can add the script tag to the head section of your html and then add the <weather-widget> element anywhere in your html. It's really easy. Enjoy #100Devs #webcomponent
github.com/DevManSam777...
20
1
4
0
I had the idea of making a web component weather widget, using weatherapi.com's API, that would look like a window. I think it was a success. Here are a few different locales I tested. #100Devs #javascript #coding #webcomponent
24
1
3
0
Scoped component registries seem like such a useless #webcomponent feature and imho hurts the web component ecosystem
Oh you as a dev registered your component rather than letting the app builder register it?
Tough
Just corporate slop codified so they get #material branded in your app
0
0
2
0