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

How can the average page size be below 20kB if #CSS is already 22kB?

Once #CSS, #JS, #Fonts are loaded once they are cached by the browser, so the #HTML is the only thing that needs to be loaded (again).

One could argue "but you could also just load the data". 💡 Oha, that is exactly what we are doing, just that the data is formatted as HTML (not JSON, or alike) and the browser can render it as is. 🤯

Isn't that amazing?

#useThePlatform at it's best
#noReact #noFramework #progressive

Acabei de subir um sistema completo de um cliente e apenas um erro ocorreu, que resolvi com dois cliques.
Vou passar o dia inteiro com a pulga atrás da orelha, está rodando lindo demais.
#php #noframework #developer #linux #website #SIG

Can someone with more #JavaScript experience tell me what's an idiomatic way of solving the problem of an application that must fetch multiple URLs?

I currently have the issue that a lot of those URLs actually are the same, so I end-up with 40 requests for the same resource.

Is there an elegant way to solve this with minimal overhead over the native fetch API?

#frontend #javascript #noframework #webdev

TIL: an <input list="mylist"> can be an input and select, in native HTML 🤯

<datalist id="mylist">
<option value="one"></option>
<option value="two"></option>
</datalist>

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#providing_default_options

#useThePlatform #HTML
one more reason for #noFramework

<input type="email"> - HTML: HyperText Markup Language | MDN

<input> elements of type email are used to let the user enter and edit an email address, or, if the multiple attribute is specified, a list of email addresses.

MDN Web Docs
Just stumbled upon this older post of @matthiasnoback: https://matthiasnoback.nl/2019/03/hand-written-service-containers/
About a hard coded dependency injection container. I think this is genius in its simplicity. #dependencyInjection #noFramework
Hand-written service containers — Matthias Noback - Blog

Case closed thanks to @renchap 🥳 Started #docker with #nodejs v6 (was built with v0.10 at the time) and after some line commenting the #express server started. Copied the generated #HTML source and the assets, skipped #modernizr and moved the fonts away from Google and Voilà! Now serving the page has static content. #noFramework #fullStatic #HTMLDelight