Search
Items tagged with: SmallWeb
![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>
</>
`](https://friendica.hellquist.eu/photo/preview/640/4802216 "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>
</>
`
}
}](https://friendica.hellquist.eu/photo/preview/640/4802218 "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>
</>
`
}
}")
🚨 Let’s Encrypt at risk from Trump cuts to OTF: “Let’s Encrypt received around $800,000 in funding from the OTF”
Dear @EUCommission, get your heads out of your arses and let’s find @letsencrypt €1M/year (a rounding error in EU finances) and have them move to the EU.
If Let’s Encrypt is fucked, the web is fucked, and the Small Web is fucked too. So how about we don’t let that happen, yeah?
(In the meanwhile, if the Let’s Encrypt folks want to make a point about how essential they are, it might be an idea to refuse certificates to republican politicians. See how they like their donation systems breaking in real time…)
CC @nlnet @NGIZero@mastodon.xyz
#USA #fascism #OpenTechFund #LetsEncrypt #SSL #TLS #encryption #EU #web #tech #SmallWeb #SmallTech mastodon.social/@publictorsten…
publictorsten (@publictorsten@mastodon.social)
Wenn Let’s Encrypt plötzlich nicht mehr klappt, wird das halbe Internet aus Zertifikatsfehlern bestehen. https://www.heise.de/news/Nach-Trump-Dekret-Kampf-um-US-Foerdermittel-fuer-Tor-F-Droid-und-Let-s-Encrypt-10328226.htmlMastodon
Feedle is not only a nicely done index of RSS feeds. Every search query is its own RSS feed! This is so cool!
#RSS #SmallWeb #Web #SocialWeb #SocialMedia
feedle: Search and Discover Quality RSS Feeds from Thousands of Blogs and Podcasts
A search engine for blogs and podcasts, where every search is an RSS feed.feedle
New Kitten release
• Socket routes now have precendence in the router.
This stops wildcard page routes from capturing the default socket routes that Kitten creates to enable the Streaming HTML workflow.
e.g., Previously, the following route:
/videos/index_[slug].page.js
Could not connect to its default socket (/videos/default.socket) because default.socket would be captured by the [slug] parameter.
Now, it will work as intended as the /videos/default.socket (a socket route) has precendence over index_[slug].page.js (a page route).
Learn more about Kitten’s Streaming HTML workflow here:
kitten.small-web.org/tutorials…
Enjoy!
💕
#Kitten #SmallWeb #SmallTech #StreamingHTML #routing #NodeJS #web #dev #JavaScript #JS
New Kitten release
• Fixes edge case where the sign in page, if left open for longer than the length of a session, would throw an error on sign-in attempt (because the challenge for the public-key authentication Kitten apps use would have expired alongside).
💕
#Kitten #SmallWeb #SmallTech #publicKeyAuthentication #sessions #web #dev #NodeJS #JavaScript
I've complettely revamped my site again! It's now #BuiltWithEleventy and has a proper blog with a tagging system and everything!
![Screenshot of code for index_[optional-postId].page.js open in Helix Editor. Highlighted section is part of a <select> control definition in a JavaScript template string that translates a list of event posts into option elements that begins
${db.site.events.list.map(post => kitten.html`<option value='${post
The code is partially obscured by a language intelligence popover that’s showing type information for the list property:
(property) Collection<EventPost>.list: EventPost[]. Generic list. @type - {Array}
In the rest of the visible code, you can see post.title being accessed.](https://friendica.hellquist.eu/photo/preview/640/4198256 "Screenshot of code for index_[optional-postId].page.js open in Helix Editor. Highlighted section is part of a <select> control definition in a JavaScript template string that translates a list of event posts into option elements that begins
${db.site.events.list.map(post => kitten.html`<option value='${post
The code is partially obscured by a language intelligence popover that’s showing type information for the list property:
(property) Collection<EventPost>.list: EventPost[]. Generic list. @type - {Array}
In the rest of the visible code, you can see post.title being accessed.")
jsdb
A zero-dependency, transparent, in-memory, streaming write-on-update JavaScript database for the Small Web that persists to a JavaScript transaction log.Codeberg.org
