Latest posts tagged with #WebComponent on Bluesky
Announcement: Dave Rupert LLC’s new <myth-os> #webcomponent is so powerful that I’m unable to release it to the world. It threatens to undo all UI framework technology of the last 20 years. In mere minutes <myth-os> was able to detect over 100 bad websites and user experiences.
Little excited about the next jackrabbit test-runner release.
I need to test a new #webcomponent library and now jackrabbit has webdriver commands:
- take element screenshot
- element click
- get shadow root from element
and more!
Will post a release today or tomorrow :3
(still no dependencies)
Check out this very simple code example over on @codepen.io
#html #customElement #webComponent #invokerCommands
powered by #zumerlab / #snapdom
codepen.io/g12n/pen/vEX...
![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
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
I updated my article on reducing #WebComponent FOUC to include details on how to choose an appropriate timeout.
#html #css #javascript
dev.to/stuffbreaker...
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
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...
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
UI framework is way harder than backend framework!
#dart #webcomponent #sparkframework
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
Inheritance seems like a fairly divisive approach, but I love it for #webcomponent systems in the right use cases!
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)
#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
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?...
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
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
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...
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
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.
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
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
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
Buongiorno! Yesterday, I designed and coded a streaming audio player that plays royalty free music. Did I cook? 👨🍳🍝
#100Devs #softwareengineer #webdev #webcomponent
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...
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
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
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:
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...
