Skip to main content

Search

Items tagged with: CSS

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

Jelly UI is a dependency-free Web Components library for "soft, tactile product interfaces"... soft-body physics, with dark mode, right-to-left support and WCAG AA color tokens built in.

#css #frontend #html #webdev

jelly-ui.com/

Jelly UI — Soft Web Components

Jelly UI is a dependency-free Web Components library for tactile product interfaces: soft-body physics, real form controls, dark mode, RTL and WCAG AA accessibility.
jelly-ui.com
#webdev #html #css #frontend

Your EPUB Is Fine. Kobo Disagrees. Blame Adobe - André Klein Dot Net
andreklein.net/your-epub-is-fi…

#kobo #epub #adobe #CSS


Your EPUB Is Fine. Kobo Disagrees. Blame Adobe - André Klein Dot Net

[drop_cap]A[/drop_cap]dobe isn’t exactly a beloved company these days. People begrudgingly use their stuff, because the Creative Suite is an industry standard (read: monopoly) or there are simply no worthwhile alternatives, not because anyone is genu…
André Klein (André Klein Dot Net)
#css #Adobe #kobo #epub

I tried a few and they all sounded like alt-rock band names 😄

#css #color #html #web

#web #html #css #color

RT @vitalyf@twitter.com

A11yphant (a11yphant.com), a great little tool to learn accessibility, one step at a time, with a few easy, medium and hard challenges. #accessibility #html #css

🐦🔗: twitter.com/vitalyf/status/159…

A screenshot of a11yphant, a game that teaches developers the basics of web accessibility.

a11yphant

a11yphant is the easy way to learn the basics of web accessibility. Learn step by step by completing short, interactive coding challenges and quizzes.
a11yphant.com

(Nitter addon enabled: Twitter links via https://nitter.privacytools.io)

#html #css #accessibility

⇧