#customelements — Public Fediverse posts

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

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

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

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

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

#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

#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

I love that you can expose a shadow part with multiple names using `exportparts`.

```html
<site-header exportparts=nav-list,nav-list:header-nav-list></site-header>
<site-footer exportparts=nav-list,nav-list:footer-nav-list></site-footer>
```

#HTML #CSS #CustomElements #ShadowDOM

Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>

https://knowler.dev/blog/an-intro-to-manual-slot-assignment

#WebComponents #CustomElements #ShadowDOM #HTML #WebDev

New #cem release, the multitool for #customElements manifest files - make working with #webComponents a breeze!

github.com/bennypowers/cem/releases/tag/v0.4.5

This release adds a module graph to the LSP missing imports diagnostic.

Say you import the module that defines , and that module imports the definition for . Let's also say that the my-tab module imports the definition for . With this update, you'll no longer get errors for failing to import my-tab and my-icon, since they're included in my-tabs' module graph.

JSX-Syntax with Webcomponents.

https://positive-intentions.com/blog/dim-functional-webcomponents

I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.

#functional #webcomponents #javascript #html #css #web #components #library #webcomponents #customelements #lithtml #lit #polymer #OpenSource

#Development #Techniques
Managing reactive state using custom elements · Signals work great in custom elements too https://ilo.im/160x7y

_____
#Signals #WebComponents #CustomElements #Framework #Preact #WebDev #Frontend #DOM #HTML #JavaScript

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

Follow Me! #introduction

#oregon #pdx #pnw #portland #sanFrancisco #sf #arkansas #cannabis #coffee #cycling #bike #eBike #fungi #mushrooms #unreal #videoGames #gaming #vr #retroGaming #rg35xx #sega #web #css #developer #frontEnd #fullStack #html #javaScript #js #webApps #webDev #aws #customElements #cypress #devops #graphql #lit #pwa #react #reactjs #serverless #shadowDom #webComponents #web3 #activityPub #bitcoin #blockchain #btc #crypto #cryptocurrency #filecoin #helium #hnt #icp #ipfs

I'm not sure how search on Mastodon works, but if you're searching for #webcomponents #progressivewebapps #pwa #html #css #javascript #js #customelements #webapps #webdevelopment #chromeos #react #reactjs #graphql #ebikes #evs #portland #oregon #pdx #crypto #cryptocurrency #bitcoin #btc #icp #internetcomputer #icpeople #helium #hnt #ipfs then you should follow me!!!