Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
en.osm.town is one of the many independent Mastodon servers you can use to participate in the fediverse.
An independent, community of OpenStreetMap people on the Fediverse/Mastodon. Funding graciously provided by the OpenStreetMap Foundation.

Administered by:

Server stats:

268
active users

en.osm.town: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.7

#nodejs

19 posts19 participants0 posts today
Public
Richie Khoo

Package Manager for Markdown

I'm working on a project that is intended to encourage folk to make markdown text files which can be bundled together in different bundles of text files using a package manager.

Question for coders; Which package manager would you suggest I use?

Main criterias (in order) are:

1. Easy for someone with basic command line skills to edit the file and update version numbers and add additional packages.

2. All being equal, more commonly and easy to setup is preferred.

#Markdown #CommonMark #PackageManager #Programming #Dev
#NPM #RubyGems #Cargo #PickingAMastodonInstance
#Ruby #Python #Rust #Javascript #NodeJs #Lisp #CommonGuide

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
Public *
Tommi 🤯

Looking for CMS advice

Hey Web devs!

Do you have any suggestions, tips, opinions, dos, don’ts about headless CMSes?

I have a growing list of small/mid non-profits and collectives asking for my help to (re)make their website. I totally want to help, but I don’t have much time, especially considering that they generally have little or no funding—I would most definitely point them to @VillageOneCoop, otherwise.

Therefore, I want a super simple and replicable solution where I can copy-paste most of the code, while providing them with a stable, fast, and modern solution. I had a look at the Headless CMS section in the Jamstack website, but I need opinions from people who actually used some of that software already.

Needs

  • I want to code and configure everything using @eleventy
  • Admin interface (#WebApp) for the client to add pages and write posts
  • Static website in the front-end
  • Simple and reliable CI/CD
  • No/minimal maintenance after the first setup
  • Self-hostable (I was taking this for granted so much that I forgot to write it)
  • If it requires forge integration, it should support #ForgeJo
  • #OpenSource

Nice to have

  • Possibly using #Deno, not #NodeJS
  • Allowing the client to customize a bit their website through the admin interface, with a GUI
  • CMS app packaged on @yunohost
  • No CMS vendor lock-in
  • I’d love to write as little JavaScript as possible
  • #FreeSoftware

Absolutely not

Please, boost this and ask around! Links to videos, tutorials, and resources are welcome.

People whose perspective I would really value: @zachleat @harryfk @deno_land @jaredwhite @vanillaweb @stefan @mxbck @WeirdWriter @deadsuperhero (Sorry if I am spamming you!)

Jamstack.orgHeadless CMS - Top Content Management Systems | JamstackCheck out this showcase of some of the best, open source headless CMSes. This is community-drive so be sure to submit your favorite CMS today!
#Eleventy#11ty#CMS
Public
𝕂𝚞𝚋𝚒𝚔ℙ𝚒𝚡𝚎𝚕

»10 Gründe JavaScript zu hassen – oder zu lieben:
Drei Dekaden der Entwicklungsarbeit gehen auch an JavaScript nicht spurlos vorüber. Im Guten, wie im Schlechten.«

Ich sehe dies sehr ähnlich und bin aber immer noch der Meinung, dass JavaScript (TypeScript) eigentlich nur im Browser angewendet werden sollte da ansonsten "zu langsam" ist.

🧑‍💻 computerwoche.de/article/38441

Computerwoche10 Gründe JavaScript zu hassen – oder zu liebenDrei Dekaden der Entwicklungsarbeit gehen auch an JavaScript nicht spurlos vorüber. Im Guten, wie im Schlechten.
#webdev#javascript#coding
Replied to Aral Balkan
Public
Thor A. Hopland

Out of pure curiosity, and because I'm on that #webdev #framework discovery tip. Heck, this project even made me download an IDE for Android lol

Just to read `install.bin` - which is an sh script.

Excuse me, but why are you bundling #nodejs and #npm? Is it to facilitate a setup process for containers, or is it merely to make the process easy?

I'm a bit sceptical to that sort of thing, especially when fetching from a vendors domain directly.

Any plans to build packages via CI?

@aral @andre

Continued thread
Public
nullagent

Wrote a little parser for meshcore packets tonight. It's still messy and a lot more to implement. But, it reads the container format so I'm happy for now.

I have meshcore packets flowing from multiple repeaters(on different frequencies) talking on wifi using udp broadcasts.

The repeaters automatically discover each other on the network and now I'm able to watch their chatter with a quick nodejs server.

#lora#meshcore#networking
Public *
Aral Balkan

New Kitten release

• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.

(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)

Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.

Enjoy!

:kitten:💕

¹ kitten.small-web.org/tutorials
² kitten.small-web.org/tutorials

Screenshot of code (left) and browser output (right). Code: <p>I am regular root</p> <div> <template shadowrootmode='open'> <p>I am shadow root</p> <slot></slot> <style> p { color: red; } </style> </template> </div> <p>I am also regular root</p> <style> p { color: blue; } </style> Browser output shows “I am regular root” in blue, “I am shadow root” in red, and “I am also regular root” in blue.
#Kitten#SmallWeb#SmallTech
ExploreLive feeds
About