Frontend Coffee Break
Episode 45: Storybook, Web Components and Figma Tokens
This is an angular-free podcast but we do talk web components. Chucho and Ricard discuss Storybook, what to consider when thinking about using it. Are Figma tokens the future? Sources of truth are nice but are they worth it?
What's your experience with these tools?
Audio and video options:
@angular team, can you please fix the `CUSTOM_ELEMENTS_SCHEMA` for #WebComponents? It's really broken.
React-like functional webcomponents, but with vanilla HTML, JS and CSS
Introducing Dim – a new #Framework that brings #ReactJS-like functional #JSX-syntax with #VanillaJS. Check it out here: Project: https://github.com/positive-intentions/dim
Website: https://dim.positive-intentions.com
My journey with #WebComponents started with Lit, and while I appreciated its native browser support (less #Tooling!), coming from #ReactJS, the class components felt like a step backward. The #FunctionalProgramming approach in React significantly improved my #DeveloperExperience and debugging flow.
So, I set out to build a thin, functional wrapper around #Lit, and Dim is the result! It's a #ProofOfConcept right now, with "main" #Hooks similar to React, plus some custom ones like useStore for #EncryptionAtRest. (Note: #StateManagement for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore #Passwordless options like #WebAuthn/#Passkeys).
You can dive deeper into the #Documentation and see how it works here: Dim Docs: https://positive-intentions.com/docs/category/dim
This #OpenSource project is still in its early stages and very #Unstable, so expect #BreakingChanges. I've already received valuable #Feedback on some functions regarding #Security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!
Excited about @wc-toolkit's JSX Types Generator!
Generate complete #TypeScript type definitions for your #WebComponents in JSX frameworks like React19+, Preact, and StencilJS.
Autocomplete
Inline documentation
Type validation
Event typing
ap-components
I want to share some information about a repository we just published. ap-components is a set of Web Components for building interfaces for the ActivityPub API. I built it as I was making a sample application for handling the acct: URI scheme. I found myself making more and more components for the UI, and realised that they would probably be useful for other applications, too. The library is available on npm at @socialwebfoundation/ap-components. It currently covers some of the simplest […]shopify embracing web components. lightdom web components no less.
love to see it.
How do I figure out the total number of DOM nodes in a page, _including_ #ShadowDOM, open and closed?
Neat, you can cause too much recursion with nothing but (non-declarative) Shadow DOM
Using #PodOS elements you can access data on #Solid pods without writing a single line of JavaScript. It's as easy as writing #html thanks to #WebComponents!
Check out the quick start guide:
https://github.com/pod-os/PodOS/tree/main/elements#quick-start
Teskoanno is now live! My #threejs powered 3D N-Body simulator is now up - it's a dev build, and not optimised but it works! I tested it on mobile - UI needs to work, but runs well on my Pixel 8 Pro.
Would love to get #feedback
https://tanepiper.github.io/teskooano/
#gamedev #astronomy #webDev #webComponents #vanillaJS #opensource
(Bonus debug tools screenshot)
Ornament 3.0: https://www.npmjs.com/package/@sirpepe/ornament
Had to fix a few API brain farts, which means breaking changes, which means a major release with next to zero material changes. Semver
Web Component Base (WCB) by Ayo Ayco (@ayo) | https://ayos.blog/wcb/