Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
livellosegreto.it is one of the many independent Mastodon servers you can use to participate in the fediverse.
Livello Segreto è il social etico che ha rispetto di te e del tuo tempo.

Administered by:

Server stats:

1.2K
active users

livellosegreto.it: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.7

#components

2 posts2 participants0 posts today
Public *
xoron :verified:

JSX-Syntax with Webcomponents.

positive-intentions.com/blog/d

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.

positive-intentions.com · Dim: Functional Web Components | positive-intentionsModern JavaScript frameworks like React JS and Vue JS have popularized the functional programming paradigm and declarative approaches to web app development. While these frameworks have made creating dynamic web applications more accessible, it's worth exploring the potential of web components in this landscape. Lit elements, with its minimalistic and declarative approach, stands out as an appealing base for leveraging web components in modern web and app development.
#functional#webcomponents#javascript
Continued thread
Public
Aral Balkan

👆 Sorry, life got in the way; just deployed this but I haven’t had a chance to document it properly yet. I’ll make a proper announcement when I do.

Also, you can now use the `delete` attribute on a DOM node/Kitten component you’re streaming back from the server to have it removed from the DOM on the client. It’s syntactic sugar for hx-swap-oob='delete' in htmx.

kitten.small-web.org

#Kitten#SmallWeb#icons
Public
💧🌏 Greg Cocks

Critical Minerals In Ores (CMiO) Database
--
lnkd.in/gynRjUfn <-- shared USGS publication
--
lnkd.in/gETca3DQ <-- shared link to open data database, web map services, etc
--
portal.ga.gov.au/persona/cmmi <-- shared web map
--
lnkd.in/gdmMp2zg <-- shared editorial piece on critical minerals and geopolitics
--
#geology #fedscience #opendata #CMMI #CMiO #criticalminerals #minerals #ores #database #opendata #GIS #spatial #mapping #spatialanalysis #commodities #technology #components #geochemistry #deposits #mining #extraction #classifaction #nomenclature #environments #structuralgeology #exploration
@USGS | @GeoscienceAustralia | @GeologicalSurveyOfCanada

Public *
Aral Balkan

New Kitten update

• 🥳 Kitten HTML templates and kitten.Component render functions can now be async.

kitten.small-web.org

This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.

So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)

I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.

The kitten.Component version also has a refresh button that streams a different three to the page.

For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.

Enjoy!

:kitten:💕

const BasicLayoutTemplate = async ({ title, SLOT }) => { const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3) return kitten.html` <main> <page css> <h1>${title}</h1> ${SLOT} <h2>Fediverse posts</h2> <ul> ${posts.map(post => kitten.html` <li><img src='${post.account.avatar}'> ${[post.content]}</li> `)} </ul> <style> li { display: flex; gap: 1em; margin-bottom: 1em; } img { width: 5em; height: auto; } </style> </main> ` } export default async () => await kitten.html` <${BasicLayoutTemplate} title='Async components are fun!'> <markdown> Oh, isn’t this __nice?__ </markdown> </> `
class BasicLayoutTemplate extends kitten.Component { async html ({title, SLOT}) { return kitten.html` <main id='page' morph> <page css> <h1>${title}</h1> ${SLOT} <${FediversePosts.connectedTo(this)} /> </main> ` } } class FediversePosts extends kitten.Component { async html () { const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3) return kitten.html` <div id='posts' morph> <h2>Fediverse posts</h2> <ul> ${posts.map(post => kitten.html` <li><img src='${post.account.avatar}'> ${[post.content]}</li> `)} </ul> <button name='refresh' connect>Refresh</button> <style> li { display: flex; gap: 1em; margin-bottom: 1em; } img { width: 5em; height: auto; } </style> </div> ` } onRefresh () { this.update() } } export default class MyPage extends kitten.Page { async html () { return kitten.html` <${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'> <markdown> Oh, isn’t this __nice?__ </markdown> </> ` } }
Screenshot of the functional components version (first screenshot) running in the browser. The page has a large title “Async components are fun!” Under that is the slotted content: “Oh, isn’t this nice?” with “nice?” in boldface. Under that is a smaller heading “Fediverse posts” followed by a list of three posts accompanied by avatar images. The first one is by me (“The only legitimate use of privilege is to help bring about the kind of world where you would not have had it to begin with. #privilege”), the second by Laura Kalbag (“Here’s to 38…”) and the last is by Lydia Conwell (”Can #FrancescaAlbanese be Prime Minister now?)
#Kitten#SmallWeb#async
SearchLive feeds
About