DEV Community

Cover image for µHTML
artydev
artydev

Posted on

1

µHTML

Andrea makes part to a certain type of developpers, those who innove and create constantly.
Very few are as productive as him in frontend developpement.
I absolutetly don't know him personnaly, but I am very impressed by his work.

Look at his site on WebReflection

Here a sample code from one of his numerous libraries µhtml
See how you can 'render' in 'render' !!!

You can see it in action here : µhtml

import {html, render} from "uhtml"

const Button = selector => {
  const button = document.querySelector(selector);
  return count => render(button, html`
    Clicks: ${count}
  `);
};

const Clicker = selector => {
  const button = Button(selector);
  return function update(count) {
    return render(document.body, html`
      <input style="width:200px" value="default value"/>
      <div onclick=${() => update(++count)}>
        Click again:
        ${button(count)}
      </div>
    `);
  };
}

Clicker('#btn-clicker')(100);
Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️