A better way of writing HTML via JavaScript?
Although I've been using React for at least 5 years now, I don't quite like frameworks. For personal projects I sometimes use web component but they can be over kill depending on what you are trying to achieve. I do like JSX though. I think it's quite neat to be able to write HTML inside of JavaScript code. With that in mind, I've been trying to come up with a way to better create HTML dynamically. Something along the lines of: const req = await fetch('api.com/posts') const data = await req.json() for (const d of data) createPost(d) For that, I end up writing this piece of code const…
What it does
In the maker’s words, at launch
Although I've been using React for at least 5 years now, I don't quite like frameworks. For personal projects I sometimes use web component but they can be over kill depending on what you are trying to achieve. I do like JSX though. I think it's quite neat to be able to write HTML inside of JavaScript code. With that in mind, I've been trying to come up with a way to better create HTML dynamically. Something along the lines of: const req = await fetch('api.com/posts') const data = await req.json() for (const d of data) createPost(d) For that, I end up writing this piece of code const assignDeep = (elm, props) => Object.entries(props).forEach(([key, value]) => typeof value === 'object' ? assignDeep(elm[key], value) : Object.assign(elm, {[key]: value})) const $c = (tag, props = {}, children = []) => { const elm = document.createElement(tag) assignDeep(elm, props) elm.append(...children) return elm } that way, I can define a blog post like this: const div = $c('div', {className: 'blog-post'}, [ $c('h1', {innerText: 'My blog post'}), $c('div', {className: 'body'}, [ $c('p', {innerText: 'My first blog post'}) ]), $c('div', {className: 'footer'}, [ $c('span', {innerText: 'Author: '}, [ $c('a', {href: '#', innerText: 'atum47'}) ]), $c('span', {innerText: 'Date: ' + new Date().toLocaleString()}) ]) ]); Here's an JS Fiddle of that code - https://jsfiddle.net/victorqribeiro/5cketz40/ I think this is a simple and elegant way to create HTML elements in JavaScript reducing the verbose of calling document.createElement() and element.append() everywhere. What do you think?
Does the same job
all alternatives →
- HHHibiki HTML – New frontend framework – no scaffolding, no Webpack2022 · playground.hibikihtml.com · ▲232
Source https://github.com/dashborg/hibiki | Interactive Tutorial https://playground.hibikihtml.com/tutorial/ I love JavaScript, but for many projects -- especially internal tools and prototypes -- setting up a full frontend JavaScript stack (npm, webpack, babel, create-react-app, redux) and all of their configuration files, folders, and scaffolding is overkill. Hibiki HTML incrementally plugs into any backend, using any template language (even static HTML files) with a single script include. It includes a built-in frontend data model, Vue.js-like…
- IBI built a JavaScript UI library with reactive atomic updates2024 · github.com · ▲6
Hey everyone! Some time ago I was analyzing why React apps are so hard to optimize, and came to a conclusion that the lack of atomic updates is the culprit. I made an experimental library which basically updates everything in place directly in HTML. At some point I became aware that Solidjs exists, which is a very similar idea, but at the end of the day I realized my approach to API is quite different and warrants the existence of my library (my state primitive allows selector subscriptions, array iterators return a state primitive with the element, allowing to never re-render the whole…
- LRLearn React JavaScript in Browser2016 · educative.io · ▲11
- R0React 0.12 renders to Web Components2014 · gist.github.com · ▲45
More dev tools this month
the category →
Open-source GTM skills for technical founders
Dev tools · 29d ago · gtmcofounder.com
OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.
Dev tools · 1d ago · opentrailpaper.com
Launched alongside, September 2024
the whole month →
BeforeSunset AI 2.0▲1,267Personalized AI daily planning that suits your life
AI · 2024 · beforesunset.ai
