Skip to main content

Search

Items tagged with: JavaScript


auto-encrypt

Automatically-provisioned TLS certificates for Node.js servers using Let’s Encrypt.
Codeberg.org
#freesoftware #javascript #SmallTech #letsencrypt #nodejs #SmallWeb #kitten #ssl #AutoEncrypt #tls #nodepebble

That feeling when your renderer can handle a component that outputs HTML inside link text in Markdown that’s embedded in HTML.

(Yes, I’m bragging.)

#Kitten #SmallWeb #SmallTech #markdown #HTML #components #web #dev #JavaScript #taggedTemplateString #rendering

Screenshot: Detail of Helix editor show source code of Kitten example at ~/sandbox/layout-components: footer. component.js (another tab, types.d.ts, is visible but not active). Highlighted code: Powered with love by [Kitten <${kitten.icons.cat} weight=duotone size=1.5em style='vertical-align: bottom;'/>](https://kitten.small-web.org). Full (visible) code: export default () => kitten.html` <footer> <markdown> Copyright (c) 2023-${new Date().getFullYear()}, Yours Truly. The content on this site is released under [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)](https://creativecommons.org/licenses/by-nc-sa/4.0/). The source code of this site is released under [GNU AGPL 3.0](https://www.gnu.org/licenses/agpl-3.0.en.html). Powered with love by [Kitten <${kitten.icons.cat} weight=duotone size=1.5em style='vertical-align: bottom;'/>](https://kitten.small-web.org). </markdown>
Screenshot: A generic web browser showing the render of a page in the sample Kitten site showing the footer rendered. It reads Powered with love by Kitten with a blue (link-coloured) Kitten icon next to the word Kitten (as a single link).
#dev #web #javascript #html #SmallTech #SmallWeb #kitten #components #markdown #taggedtemplatestring #rendering

If I do say so myself, I do love expressive I can be with Kitten.

This is me injecting raw HTML markup into a Markdown code block in a Kitten Markdown page to highlight specific lines in a code blockÂą.

(The string interpolation of the HTML as an array is a hack that bypasses Kitten’s default sanitisation and should only be used with trusted content.)

PS. I’m going through all the tutorials on the site to update them to reflect the current state of Kitten after the three-month breaking-change update I’ve been working on.

¹ kitten.small-web.org/reference…

#Kitten #SmallWeb #SmallTech #web #dev #Markdown #HTML #JavaScript #JS #stringInterpolation

2. The welcome message tells you that you can use the `.help` command for assistance. Run that and you will see a list that looks like the following: ```text .break Sometimes you get stuck, this gets you out .clear Alias for .break .editor Enter editor mode .exit Exit the REPL .help Print this help message ${['<strong>']}.id Show your Small Web place ID (and create it and your secret if necessary).${['</strong>']} .load Load JS from a file into the REPL session ${['<strong>']}.ls List keys of global kitten object.${['</strong>']} .save Save all evaluated commands in this REPL session to a file ${['<strong>']}.settings Display the Kitten Settings page link .sign-in Display the Kitten sign-in page link .sign-out Display the Kitten sign out page link .stats Show current statistics on Kitten server${['</strong>']} ``` <style inline> /* Highlight the Kitten-specific commands */ @scope { code > strong { background-color: var(--focus); } } </style>

Kitten: Reference

kitten.small-web.org
#dev #web #javascript #html #SmallTech #SmallWeb #kitten #js #markdown #stringinterpolation

TL; DR: This is all the code you need in KittenÂą to make a *persisted* counter that streams interface updates to the browser. (Put it into a file called index.page.js in a folder all by itself and run `kitten`.)

Add the following two lines inside the `<main>` tag, if you also want it to look good:

```html
<page css>
<style inline>@scope { div { font-size: 3em; } }</style>
```

Âą kitten.small-web.org

#Kitten #SmallWeb #SmallTech #web #dev #HTML #CSS #JavaScript

kitten.db.counter ??= { count: 1 } export default function () { return kitten.html\` <main> <h1>Kitten counter</h1> <div aria-live='assertive'>\${kitten.db.counter.count}</div> <button name='increment' aria-label='increment' connect>+</button> <button name='decrement' aria-label='decrement' connect>-</button> </main> \` } export function onIncrement () { kitten.db.counter.count++ this.update() } export function onDecrement () { kitten.db.counter.count-- this.update() }

Kitten: Home

kitten.small-web.org
#dev #web #javascript #html #css #SmallTech #SmallWeb #kitten

So I’m updating the Kitten documentation, tutorials, videos, etc., in preparation for the major (breaking change) release I’ve been working on for the past few months and, as part of that, I had to set up my streaming/recording setup again as the layout of my room changed and I recorded an updated Kitten Counter video yesterday in which I made every mistake I could in 12 minutes (so I’ll be recording it again). But here it is a a preview (and also to show that no, none of us gets it right the first time. Any polished video you see is the result of meticulous planning and multiple iterations) :)

(This video doesn’t show the new stateful components. I will be recording new videos about that.)

vimeo.com/1212264139

#Kitten #SmallWeb #SmallTech #web #dev #HTML #CSS #JavaScript


A demonstration of how to build a simple counter using the latest Kitten

In this example, we build a simple counter with an increment and decrement button and wire it up to Kitten’s built-in JavaScript Database (JSDB).
Vimeo
#dev #web #javascript #html #css #SmallTech #SmallWeb #kitten

⇧