Skip to main content

Search

Items tagged with: SmallTech


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


Web Numbers

Domains? Where weā€™re going, we donā€™t need domains! Until the end of this year, the only way to have a secure web site is to have it accessible via a domain name. That, however, is changing.
Aral Balkan
#SmallTech #letsencrypt #SmallWeb #AutoEncrypt #https #tls #IPAddresses #webnumbers

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

ā‡§