#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

#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".
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
Are Web Components & Cybersecurity A Better Combo?
I'm not trying to dunk on popular #UI #frameworks – I'm sure they're totally fine for #cybersecurity stuff, probably get loads of reviews and #audits.
But from my angle: Web Components are *native* to the #browser. Doesn't that just inherently reduce the risk of **#SupplyChainAttacks** (you know, like a rogue `npm install` on a bad network) for your #AppSecurity?
Or am I overthinking it, and the #framework choice is less important than the #browser, #OS, or #device running it? What are your thoughts, #DevCommunity?
---
Quick context: I've got a #ReactJS #messagingApp (repo here: https://github.com/positive-intentions/chat) and a separate #UIFramework (repo here: https://github.com/positive-intentions/dim) built with #Lit (which uses Web Components). I'm genuinely wondering if there's a compelling #cybersecurity reason to refactor the chat app to use my #WebComponent UI framework. Might be a whole new level of #SecurityByDesign for #FrontEndDev.
FYI, same question's on Reddit here: https://www.reddit.com/r/ExperiencedDevs/comments/1lmk1rg/are_web_components_better_for_cybersecurity/, got some good #insights, but want to make sure nothing's getting overlooked! Let's discuss #InfoSec #WebDev #JavaScript #OpenSource #TechQuestion.
thanks to a discussion on reddit [1] and some links [2] I came across a different view on #webcomponents.
In short, just wrap content in a #webcomponent instead of trying to "upgrade" it. Like so:
<user-avatar>
<img src>
</user-avatar>
I always thought until now that it should rather be
<img src is=user-avatar>
but `is` is not widely usable.
I still need to digest it. I see the use cases, but somehow feels still strange
[1] https://www.reddit.com/r/HTML/comments/1ldt5s4/spaish_upgrading_the_details_element/
[2] https://adactio.com/journal/20618
@webkit Also, while I'm here, #firefox #mozilla @FirefoxDevTools where's my support for `:host:has(...)` at!?!
@matuzo Shadow DOM isn’t the only part of the platform that #webComponent popularity is adding pressure on automated tools to support. Things like Element Internals are getting left off the menu in many places, like https://github.com/dequelabs/axe-core/issues/4259, just as they and soon things like Reference Targets start to expand as well.
#Development #Approaches
Glossary web component · A slick way to add links and context to your content https://ilo.im/163pvz
_____
#Glossary #Content #Markdown #JSON #Popover #WebComponent #WebDev #Frontend #HTML #JavaScript
The other day I mentioned I might have accidentally written a web component framework powered by @vite Here I've written about said framework - https://mastodon.gamedev.place/@teskooano/114432752411496927
Version 0.2.0 of #teskooano is out!
Read about the release and the new #webComponent #JavaScript #framework I've written - now live on the site!
Also see the roadmap for upcoming plans
I think I've accidentally built quite a cool '#webComponent-as-a-plugin' system for the @teskooano UI - essentially two functions - one to register base components, and one to register full plugins, that are made up of one or more web components, functions and a controller. These components can self-register things like buttons in certain toolbars, or you can just add them as functions (like opening a new external URL). I'll post a bit more on it later
Just released: #teskooano new #webComponent based engine toolbar - a plugin toolbar that allows panels to register themselves with a button - so it;s much easier to add new features.
Is it possible to unregister or redefine a web component? The CustomElementRegistry doesn't support it, but does anyone know a workaround?
My #webcomponent for embedding #mastodon feeds and its demo page https://hcschuetz.github.io/mastodon-toots/ got a few enhancements, for example:
1. CSS fixes. (The old styling worked in Firefox but had problems in Edge and probably also Chrome.)
2. Hide sensitive content.
3. Added a list of similar projects to the demo page.
4. And perhaps most importantly: The component configuration became both simpler and more powerful.
1/2
If you have a #WebComponent with
```js
constructor() {
this.mq = matchMedia(…)
}
```
do you need to clean up any change listeners in `disconnectedCallback()`?
This was not intuitive to me, and I could imagine it going both ways.
1/2 (answer in next post)
#Development #Launches
Marquee · A smoothly animated, flexible ticker web component https://ilo.im/162b3u
_____
#Marquee #Animation #API #WebComponent #WebDev #Frontend #HTML #JavaScript
This is a re-post since I don't see Keith on here:
Call to action for #WebComponent / #ShadowDOM fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.
Please try this out, and let me know if you encounter issues!
https://github.com/w3c/csswg-drafts/issues/10013
https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385
Call to action for #WebComponent / #ShadowDOM fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.
Please try this out, and let me know if you encounter issues!
Hey gang, good news, I'm back on my bullshit! By which I mean I made a new #WebComponent that exposes page statuses from @zeroheight on any website. Almost the perfect #DesignSystems tooling intersection if you ask me. Here's how I did it (bonus GitHub repo within):
https://zeroheight.com/blog/api-tutorial-add-page-statuses-to-any-website/
#Development
QR code HTML web component · A handy way to add a QR code to a HTML link https://ilo.im/1622pq
_____
#QrCode #Webpage #Website #WebComponent #HtmlWebComponent #WebDev #Frontend #HTML #CSS #JavaScript