Inautilo#Development #Launches
Hyperblam · Make music with HTML https://ilo.im/16dx4d
_____
#HTML #Music #Sound #Audio #CustomElements #WebComponents #APIs #WebAudioAPI #WebDev #Frontend
xoron 
React-like syntax with WebComponents.
After spending some time with Lit, I really appreciated its lightweight footprint but wasn't a fan of the class-based components. While Vue offers a great approach, I still prefer the intuitive nature of React's syntax for debugging and deterministic rendering. This led me to a challenge: could I build a UI framework using WebComponents that completely eliminates the need for transpilation?
I have written a breakdown of the concept, the architecture, and where I want to take it. I highly invite you to take a look, check out the code, and explore the live demo.
* How it works: https://positive-intentions.com/docs/projects/dim/dim-jsx-webcomponents
* Checkout the code: https://github.com/positive-intentions/dim
* Storybook demo: https://dim.positive-intentions.com
Please note, while the project is open-source, this is a personal exploration rather than an attempt to launch "yet another framework." It is not production-ready and is built for my own upcoming project migrations, but I am sharing it in hopes that the methodology is educational or interesting to the community.
I would love to hear your thoughts on this approach. Feel free to reach out if you have any questions or want to discuss the implementation details.
#WebDev #WebDevelopment #Frontend #FrontendDev #JavaScript #JS #TypeScript #TS #HTML #HTML5 #CSS #SoftwareEngineering #SoftwareEngineer #Coding #Programming #WebDesign #OpenSourceProject #IndieDev #SideProject #Tech #Technology #DevCommunity #Fediverse #FediverseDevs #WebStandards #CustomElements #ShadowDOM #VanillaJS #NoTranspiler #NoBuild #BuildStep #EsModules #ComponentDriven #UIUX #DesignSystems #TechExperiment #LearningInPublic #Developer #ComputerScience #OSS #Github #React #WebComponents #Lit #Vue #ReactJS #JSX #Storybook #TechArticle #TechBlog #TechWriting #WebDevArticles
pablolarah🧨 Elena
Creator: Ariel Salminen @ariel @arielsalminen.com
is a simple, tiny library (2.6kB) for building #ProgressiveWebComponents. Unlike most web component libraries, Elena doesn’t force #JavaScript for everything.
#css #html #WebComponents #CustomElements
#webdev
https://elenajs.com/
Creator: Ariel Salminen @ariel @arielsalminen.com
is a simple, tiny library (2.6kB) for building #ProgressiveWebComponents. Unlike most web component libraries, Elena doesn’t force #JavaScript for everything.
#css #html #WebComponents #CustomElements
#webdev
https://elenajs.com/
React-Like JSX Syntax for Webcomponents
TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.
The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.
Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents
(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)
#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity
westbrook@patrickbrosset Great to see the Chromium family join #webkit in support of this! 🥳
https://caniuse.com/wf-scoped-custom-element-registries is gonna be full up of awesomeness before too much longer 😁
Jens Oliver MeiertCustom elements can have default accessibility semantics which should be stated and encouraged not to override.
yes, this is true
yes, but planned
no, never a thing
no, was dropped
Poll ended at .
Tony MottazI’m making #HTML #CustomElements using <template>; is there no way to opt-in to have it inherit styles from the parent document? It's a really nice way to encapsulate some reusable markup and behavior, but I still want all my buttons to look the same 
#Development #Templates
Web component starter template · The essentials to ship production-ready components https://ilo.im/169jml
_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend
A Production-Ready Web Component Starter Template :: Aaron Gustafson
Creating a new web component from scratch involves a lot of boilerplate—testing setup, build configuration, linting, CI/CD, documentation structure, and more. After building — and refining/rebuilding — numerous web components, I’ve distilled all that work into a starter template that lets you focus on your component’s functionality rather than project setup.
#Development #Guides
Installing custom elements dynamically · A reusable pattern for on-the-fly custom element loading https://ilo.im/169hh8
_____
#Loading #CustomElements #WebComponents #WebDev #Frontend #DOM #HTML #JavaScript
lmorchard's linksHow To Dynamically Install Custom Elements: HeydonWorks
"Today, I want to look into one very specific topic in excruciating technical detail: how to dynamically load custom elements."
https://heydonworks.com/article/dynamically-loading-custom-elements/
#customelements #webcomponents #webdev
"Today, I want to look into one very specific topic in excruciating technical detail: how to dynamically load custom elements."
https://heydonworks.com/article/dynamically-loading-custom-elements/
#customelements #webcomponents #webdev
