Search
Items tagged with: Kitten
Kerzenschein....
.... ist Kitty nicht so ganz geheuer....
#kleineKunstklasse #advent #christmas #art #sketching #sketch #sketchbook #pencil #BlackAndWhite #illustration #drawing #zeichnung #bleistiftzeichnung #skizzenbuch #doodle #art #tiere #cute #handmade #cats #caturday #CatLovers #pets #animals #kitten #katze #catArt #kunst #MastoArt #FediArt #FediGiftShop #artist #arte #CatsOfMastodon #catstodon #WhiskersWednesday #cat #kitty #kittens
So Iām teaching a friend who doesnāt have any development knowledge how to get started with Small Web development and I thought it would be a good opportunity to start creating and sharing the course on the Kitten web site, one lesson at a time.
Hereās the link:
Itās a work in progress that Iāll be adding to along with our lessons but the draft of the first one, on setting up your development environment (which I whipped up in the pub last night, so expect typos) is here:
kitten.small-web.org/course/seā¦
Please feel free to follow along and file issues if you have thoughts for improvements, etc.
The Setting Up lesson will actually likely end up being the second one with the first being a theoretical one on Small (peer-to-peer) Web development and how it is similar to and differs from Big (centralised) Web development.
Enjoy!
š
#SmallWeb #Kitten #SmallTech #web #dev #course #education #HTML #CSS #JavaScript #NodeJS
I love how simple Kittenās Streaming HTML workflow makes building features like this, especially when using class-based Kitten pages and components :)
š
#Kitten #SmallWeb #StreamingHTML #EventBasedProgramming #ObjectOrientedProgramming #JavaScript #NodeJS #web #dev #GazaVerified
![Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted:
<style>
table[inert] {
opacity: 0.9;
filter: grayscale(100%);
}
</style>
</table>
</section>
`
}
onToggle () {
this.editable = !this.editable
console.log(this.editable)
this.update()
}
}](https://friendica.hellquist.eu/photo/preview/640/5334061 "Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted:
<style>
table[inert] {
opacity: 0.9;
filter: grayscale(100%);
}
</style>
</table>
</section>
`
}
onToggle () {
this.editable = !this.editable
console.log(this.editable)
this.update()
}
}")
Another quick release, this one adds Alpine.js support for shorthand event handlers.
Just add a `@` before your shorthand event handler names to have them expanded as inline Alpine.js event handlers.
e.g., `on:connect` ā `@on:connect`
Enjoy!
š
#Kitten #AlpineJS #HTMX #SmallWeb #peerToPeerWeb #web #dev #JavaScript #nodeJS #SmallTech #KittenRelease
š„³ New Kitten Release
You can now use the simple `on:` prefix instead of `hx-on:htmx:` to define inline event handlers for HTMX eventsĀ¹.
Also, there are three new event shorthands for responding to your Kitten pageās connection lifecycle:
ā¢ on:connecting
ā¢ on:connect
ā¢ on:disconnect
(These expand during render to `hx-on:htmx:ws-connecting.window`, `hx-on:htmx:ws-open.window`, and `hx-on:htmx:ws-close.window`, respectively.)
These are useful when using Kittenās Streaming HTML workflow.
Full change log:
codeberg.org/kitten/app/src/brā¦
Enjoy!
š
Ā¹ htmx.org/events/
Ā² kitten.small-web.org/tutorialsā¦
#Kitten #SmallWeb #peerToPeerWeb #web #dev #SmallTech #KittenRelease
htmx ~ Events
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.htmx.org
Ah, the joys of having a built-in native JavaScript databaseĀ¹ that can persist and load typed JavaScript objectsĀ² and an interactive JavaScript shell (REPL)Ā³ in Kittenā“ :)
š
Ā¹ kitten.small-web.org/referenceā¦
Ā² kitten.small-web.org/tutorialsā¦
Ā³ kitten.small-web.org/referenceā¦
ā“ kitten.small-web.org
#Kitten #SmallWeb #development
![Screenshot of the Kitten shell open in terminal for the currently-running site:
> kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al')
Proxy [
Account {
id: 'ce4c1f2c-2044-47a0-b97e-1bc1a43bfc07',
url: 'https://mastodon.ar.al/@aral',
isVerified: true,
data: Proxy [ [Object], [Object] ],
isScheduled: false,
joinPageIp: undefined,
privatePageIps: Proxy [ [Array], [Object] ],
isTeam: false,
callDays: Proxy [ [Array], [Object] ]
}
get: [Function: bound getHandler], set: [Function: bound setHandler], defineProperty: [Function: bound definePropertyHandler], deleteProperty: [Function: bound deletePropertyHandler]
}
]
> kitten.db.calendar.scheduleInterview(kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al').id)](https://friendica.hellquist.eu/photo/preview/640/5325612 "Screenshot of the Kitten shell open in terminal for the currently-running site:
> kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al')
Proxy [
Account {
id: 'ce4c1f2c-2044-47a0-b97e-1bc1a43bfc07',
url: 'https://mastodon.ar.al/@aral',
isVerified: true,
data: Proxy [ [Object], [Object] ],
isScheduled: false,
joinPageIp: undefined,
privatePageIps: Proxy [ [Array], [Object] ],
isTeam: false,
callDays: Proxy [ [Array], [Object] ]
}
get: [Function: bound getHandler], set: [Function: bound setHandler], defineProperty: [Function: bound definePropertyHandler], deleteProperty: [Function: bound deletePropertyHandler]
}
]
> kitten.db.calendar.scheduleInterview(kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al').id)")
Here is my #caturday offering, and I think you will agree there is little doubt who are the parent pussys of these kittens. The colourings of Mom and Dad are repeated in each kitten - except, uh oh, who was the white cat who contributed? (LOL)
#catsofmastodon #catstodon #catlife #caturday #CatsOfMastodon #Kitten #Cats #CatsOfFediverse #mastocats #petsofmastodon
