Search
Items tagged with: Dev
🎉 New Kitten feature: Markdown pages
You can now create .page.md files and use front matter to specify a layout template as well as any other props you want to pass to your layout.
(I’m working on the Kitten web site with docs, etc., so I thought I’d bite the bullet and add this feature this morning to make my life easier. Should make it easier to make this sort of site with Kitten in the future for everyone.)
https://codeberg.org/kitten/app
💕
#Kitten #Markdown #SmallWeb #web #dev #NodeJS
Here's a pure CSS char by char text reveal on scroll!
@codepen demo https://codepen.io/thebabydino/pen/MWPeLmp
No splitting text into individual characters!
Inspired by an old Toblerone Story page, except that used JS (reasonable for cross-browser support) and was splitting the text into individual characters (yikes! 😱)
cc @bramus
#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev
I do love that buffer.subarray() returns a – checks notes – Buffer instance, not an array, in Node.js. 👀
Note that when you’re working with Kitten, your apps do not have a build process.
You write HTML, CSS, JavaScript and, optionally, extend using first-class support for htmx and alpine.js as well as Kitten’s own Streaming HTML workflow¹. There’s also no scaffolding or generating a project with hundreds of files or anything. You just write the code for your app.
¹ https://ar.al/2024/03/08/streaming-html/
#SmallWeb #Kitten #StreamingHTML #web #dev #NodeJS #JavaScript #HTML #CSS
Streaming HTML
Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player. Building the Streaming HTML counter example.Aral Balkan
So Kitten’s build process (i.e., the time it takes to build Kitten itself) takes ~0.7 seconds on my ~1 year old desktop (Ryzen 7 5700G 3.8Ghz) vs ~1.4 seconds on my ~3-year-old Starlabs LabTop (renamed to the Starbook thanks to a suggestion by yours truly but sadly, not quickly enough).
So, in summary, it’s bloody fast for something that results in a ~9MB bundle.
(And that’s all thanks to esbuild.)
I still prefer the Kitten version ;)
(That’s _all_ the code for a _persisted_ counter.) :)
#Kitten #SmallWeb #web #dev #html #css #javascript #NodeJS
New Kitten features: Interactive Shell (REPL), Multi-page Settings, and backup and restore (data portability)
Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player.Aral Balkan
Looking forward to presenting my computer science colloquium on Small Web at the University of Groningen, Netherlands, on 11th of June, 2024 at 4PM.
There might be space for a few people from outside the university to attend so if you want to drop by, make some noise and I’ll have a chat with the university.
Thanking @mirela for organising this and looking forward to hopefully meeting some of you in the Netherlands soon.
#SmallWeb #groningen #netherlands #web #dev
Colloquium Computer Science - Aral Balkan, Small Technology Foundation
Title: Small Web Abstract: The Small Web¹ is a web where each one of us can own and control our own places. At these places, we can choose to either...University of Groningen
💕
New Kitten update!
Mostly housekeeping:
• Runtime is now Node 22 (22.1.0 as 22.2.0 has a bug that can crash on deprecation warnings). This might be a breaking change for your code (e.g., import…assert is now import…with, etc.) Remember, Kitten is pre-release/not API-versioned yet.
• Applied all semver-compatible dependency version upgrades.
• Fixed tests & coverage. Tests are still woefully inadequate but will improve.
#tinySVGtip Better gooey effect with no matrix filter!
Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).
The assembly containing them gets an SVG filter as below.
Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG
#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment
7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK
A simple #SVG filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
We then animate the gradient stops... magic! 🪄✨
#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment
6⃣ 688 ❤️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv
A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091
#halftone #pattern #gradient #cssGradient #blendMode #blending #fliter #cssFilter #code #coding #frontend #web #webDev #dev #webDevelopment
Ana Tudor 🐯 (@anatudor@mastodon.social)
Attached: 1 image #tinyCSStip You may have seen some of my demos using this on #CodePen already. Here's the how behind it.Mastodon
5⃣ 723 ❤️ No SVG, no image fluid slider with input[type=range] https://codepen.io/thebabydino/pen/qByGqOm
JS used only for
a) feature support detection
b) updating slider value in a --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
#css #slider #code #coding #frontend #control #web #webDev #dev #webDevelopment
4⃣ 736 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd
The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/
Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.
#3D #transform #css3D #code #coding #looping #animation #cssAnimation #frontend #web #webDev #dev #webDevelopment
Simplifying CSS Cubes with Custom Properties | CSS-Tricks
I know there are a ton of pure CSS cube tutorials out there. I've done a few myself. But for mid-2017, when CSS Custom Properties are supported in all majorAna Tudor (CSS-Tricks)
3⃣ 747 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE
Behind demo https://css-tricks.com/recreating-the-twitter-heart-animation/
Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!
#css #svg #code #coding #frontend #web #webDev #webDevelopment #dev
Recreating the Twitter Heart Animation (with One Element, No Images, and No JavaScript) | CSS-Tricks
I recently saw a recreation of the Twitter heart animation among the picks on CodePen. If I happen to have a bit of time, I always look through the code ofAna Tudor (CSS-Tricks)
2⃣ 841 ❤️ neon hex https://codepen.io/thebabydino/pen/zGmdep
Most people know my CSS stuff, but this was my most hearted Pen for some three quarters of a decade... and it's a #canvas one! The JS feels dated nowadays, but oh, well... still my favourite out of this top 3.
#js #javascript #code #coding #frontend #web #dev #webDev #webDevelopment
I turn 12 on @codepen in less than a month, so here are my most hearted demos ever:
1️⃣ 955 ❤️ Pure CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv
My only demo to ever pass 850 ❤️ - a bit mixed about it, it was just an exercise in getting a certain result - please don't use it in the wild!
#css #pureCSS #gravity #button #code #coding #frontend #web #dev #webDevelopment #webDev
Kitten bugfix release:
Please upgrade to the latest release that fixes a regression introduced into sessions object with the latest JSDB¹/JSDF² upgrade:
https://codeberg.org/kitten/app/issues/177
Persisting arbitrary objects to sessions is a supported workflow and this regression broke that.
e.g., See the Kitten Count Sessions example: https://codeberg.org/kitten/app/src/branch/main/examples/kitten-count-sessions/index.page.js
💕
¹ https://codeberg.org/small-tech/jsdb#javascript-database-jsdb
² https://codeberg.org/small-tech/jsdb#javascript-data-format-jsdf
#Kitten #SmallWeb #web #dev #sessions #JSDB #JavaScript #database #regression
Sessions class should populate ...rest arguments on itself
Given that storing data on session objects is valid behaviour and since the requirement of constructors in the latest JSDB, the Session class needs to be updated to store rest arguments on itself.Codeberg.org
New Video – Kitten features introduced this week:
• Interactive Shell (REPL)
• Multi-page Settings
• Backup and restore (data portability)
With examples that cover components and Kitten’s built-in JavaScript database (JSDB).
💕
#Kitten #SmallWeb #SmallTech #web #dev #JavaScript #HTML #database #JSDB #components #settings #dataPortability #REPL
New Kitten features: Interactive Shell (REPL), Multi-page Settings, and backup and restore (data portability)
Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player.Aral Balkan
So! Many! Kittens!
(Going to record a demo of the new interactive shell – REPL to some – and multi-page Settings this afternoon, just planning it out now.)
Oh and is that me creating and calling web routes interactively in the REPL on a live server? Why yes, yes it is.
💕
#Kitten #SmallWeb #web #dev #HTML #CSS #JavaScript #NodeJS
})
The output has more kittens in it each time. One copy of the output is below:
<html><meta charset="utf-8"><h1>🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱</h1></html>
Then the following command:
🐱 💬 count
Output: 31
In the web browser, you see the HTML rendered shown above rendered.](https://friendica.hellquist.eu/photo/preview/640/2736237 "Screenshot of terminal window on the left, browser on the right. In the terminal window, the following command is run several times:
🐱 💬 kitten.app.router.find('GET', '/cats').handlers[7](null, {end: output => console.log(output)})
The output has more kittens in it each time. One copy of the output is below:
<html><meta charset=\"utf-8\"><h1>🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱</h1></html>
Then the following command:
🐱 💬 count
Output: 31
In the web browser, you see the HTML rendered shown above rendered.")
Kitten’s interactive shell (REPL) now saves session history scoped to your app so it will still be there when you next serve the same app.
https://codeberg.org/kitten/app#kitten-s-interactive-shell
I think I’m done with the REPL feature now.
Going to take a little break, step away from the computer, and make a plan for the next week of work on Kitten and Domain¹.
¹ https://codeberg.org/domain/app
#Kitten #SmallWeb #REPL #shell #JavaScript #NodeJS #web #dev #SmallTech
Small update on Kitten’s new interactive shell (REPL). You can now access Kitten’s router via:
kitten.app.router
Also updated the section in the tutorial to fix typos in some of the code examples and use the new router key path:
https://codeberg.org/kitten/app#kitten-s-interactive-shell
💕
🎉
Kitten now has a lovely new multi-page Settings screen and… *drumroll*… a new 🐢 interactive shell (REPL) for you to play with the running state of your Small Web site/app/place and debug your app, inspect/manipulate its database, etc.
I plan on recording demos of each of them tomorrow but you can play with them now.
And here’s a little tutorial to get you started with the shell:
https://codeberg.org/kitten/app#kitten-s-interactive-shell
💕
#Kitten #SmallWeb #SmallTech #NodeJS #REPL #JavaScript #HTML #CSS #web #dev
![Screenshot of Kitten running in terminal:
🌍 Domain https://localhost
📂 Source /var/home/aral/Projects/kitten/app/examples/file-uploads
💾 Databases /var/home/aral/.local/share/small-tech.org/kitten/databases
🐢 To launch an interactive shell, press the [s] key.
Server is running and listening for connections…
s
🐢 Launching interactive shell ctrl-d to exit; .help for assistance
A good place to start is to run the .ls command to see the keys of the global kitten object:
» 💡.ls is an alias for Object.keys(kitten)
[
'version', 'domain',
'port', 'app',
'databaseDirectory', 'projectIdentifier',
'deploy', 'WebSocket',
'html', 'libraries',
'page', 'events',
'css', 'js',
'markdown', 'md',
'safelyAddHtml', 'sanitise',
'uploadsDirectory', '_db',
'uploads', 'package',
'db'
]
🐱 💬 kitten.db.images[0]
Proxy [
{
path: '/uploads/1a6c2612-057d-435b-83c7-7157b4add982/',
altText: 'Screenshot of Draw Together sketch that reads Free Gaza!'
},
{
get: [Function: bound getHandler],
set: [Function: bound setHandler],
defineProperty: [Function: bound definePropertyHandler],
deleteProperty: [Function: bound deletePropertyHandler]
}
]
🐱 💬](https://friendica.hellquist.eu/photo/preview/640/2720308 "Screenshot of Kitten running in terminal:
🌍 Domain https://localhost
📂 Source /var/home/aral/Projects/kitten/app/examples/file-uploads
💾 Databases /var/home/aral/.local/share/small-tech.org/kitten/databases
🐢 To launch an interactive shell, press the [s] key.
Server is running and listening for connections…
s
🐢 Launching interactive shell ctrl-d to exit; .help for assistance
A good place to start is to run the .ls command to see the keys of the global kitten object:
» 💡.ls is an alias for Object.keys(kitten)
[
'version', 'domain',
'port', 'app',
'databaseDirectory', 'projectIdentifier',
'deploy', 'WebSocket',
'html', 'libraries',
'page', 'events',
'css', 'js',
'markdown', 'md',
'safelyAddHtml', 'sanitise',
'uploadsDirectory', '_db',
'uploads', 'package',
'db'
]
🐱 💬 kitten.db.images[0]
Proxy [
{
path: '/uploads/1a6c2612-057d-435b-83c7-7157b4add982/',
altText: 'Screenshot of Draw Together sketch that reads Free Gaza!'
},
{
get: [Function: bound getHandler],
set: [Function: bound setHandler],
defineProperty: [Function: bound definePropertyHandler],
deleteProperty: [Function: bound deletePropertyHandler]
}
]
🐱 💬")
Double bubble! 🫧
On scroll text bubble up effect with 1 div, no text duplication, no JS - just a little bit of #CSS trickery and a simple #SVG #filter! 🪄
Live on @codepen
https://codepen.io/thebabydino/pen/NWmBmrZ
#CodePenChallenge #svgFilter #CodePen #text #textEffect #code #coding #frontend #webDev #webDevelopment #web #dev #scrollAnimation
![Screenshot of same page showing the Domain section:
🏠 Domain
Your Small Web place was not deployed by Domain.
Here are some ways you can deploy your site.
Using Domain:
Use an existing Small Web host like small-web.org.
Run your own instance of Domain and deploy using that.
On any computer that runs Linux[1]:
Deploy your site to any server (like a tiny single-board computer or your own VPS server somewhere) using Kitten’s deploy command.
With systemd (this is not some political statement; it’s just easier for us to support with limited resources). We recommend Alma Linux as that’s what we deploy with at small-web.org but it should work with any Linux with systemd. ↩︎](https://friendica.hellquist.eu/photo/preview/640/2690252 "Screenshot of same page showing the Domain section:
🏠 Domain
Your Small Web place was not deployed by Domain.
Here are some ways you can deploy your site.
Using Domain:
Use an existing Small Web host like small-web.org.
Run your own instance of Domain and deploy using that.
On any computer that runs Linux[1]:
Deploy your site to any server (like a tiny single-board computer or your own VPS server somewhere) using Kitten’s deploy command.
With systemd (this is not some political statement; it’s just easier for us to support with limited resources). We recommend Alma Linux as that’s what we deploy with at small-web.org but it should work with any Linux with systemd. ↩︎")
Here’s a niche gotcha with the clipboard API’s `navigator.clipboard.writeText()` method that’s unique to Safari:
If you access a function from a module within your gesture handler (e.g., click handler), you will get a permission error.
The (sadly hacky and not as robust) workaround is to set a global variable from your module instead.
Full gist:
#Safari #clipboardAPI #JavaScript #ESModules #web #dev #gist
gists/clipboard-writetext-permission-error-when-using-modules-in-safari.md at main
gists - A place for me to post and share small, self-contained code snippets.Codeberg.org
The Evergreen Web section in Kitten’s¹ settings now has its own page too (and uses Kitten’s new Streaming HTML² workflow).
If you have the previous version of your site up somewhere, you can use the 404-to-307 technique³ to forward missing pages to your old site so as not to break the Web.
I’ll add local static archive support later.
¹ https://codeberg.org/kitten/app
² https://ar.al/2024/03/08/streaming-html/
³ https://4042307.org
#Kitten #SmallWeb #EvergreenWeb #StreamingHTML #web #dev #NodeJS #JavaScript
Streaming HTML
Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player. Building the Streaming HTML counter example.Aral Balkan
Lots to do yet but the new Kitten¹ settings section (that’s common to all Kitten apps / Small Web places) is coming along nicely. (With the general style/layout borrowed from Domain².)
(It’s currently a single page and I’m breaking it up into multiple ones because it’s time.)
Once I’m done with this I should really record a screencast of Kitten’s new backup and restore feature/data portability.
¹ https://codeberg.org/kitten/app
² https://codeberg.org/domain/app
#SmallWeb #Kitten #Domain #SmallTech #web #dev
![Screenshot of Small Web Place Settings tab (https://localhost/💕/settings/) in browser:
At the top is a partial view of some data about uploads from a database table listing. Under that is an App database (db): “This is your app’s database.” Under that is a partial listing of the images table showing two objects:
},
{
"path": "/uploads/8e9a18fe-0c2f-4f67-89ae-052e38159c60/",
"altText": "70-topological-decentralisation.png"
},
{
"path": "/uploads/4f28a42f-6e10-46ba-9359-aa41e096d453/",
"altText": "30-accessibility-for-everyone-laura.jpg"
}
]
Under that is an Uploads section (“These are files that have been upload to your Small Web place.”) with thumbnails of images their file names in a scrollable list.](https://friendica.hellquist.eu/photo/preview/640/2639740 "Screenshot of Small Web Place Settings tab (https://localhost/💕/settings/) in browser:
At the top is a partial view of some data about uploads from a database table listing. Under that is an App database (db): “This is your app’s database.” Under that is a partial listing of the images table showing two objects:
},
{
\"path\": \"/uploads/8e9a18fe-0c2f-4f67-89ae-052e38159c60/\",
\"altText\": \"70-topological-decentralisation.png\"
},
{
\"path\": \"/uploads/4f28a42f-6e10-46ba-9359-aa41e096d453/\",
\"altText\": \"30-accessibility-for-everyone-laura.jpg\"
}
]
Under that is an Uploads section (“These are files that have been upload to your Small Web place.”) with thumbnails of images their file names in a scrollable list.")
… JSDB, by the way, is short for JavaScript Database, which is, umm, a JavaScript database.
It’s an in-process, in-memory database for Node.js for Small Web use that persists to an append-only JavaScript – not JSON, JavaScript – transaction log.
JSDB’s very easy to work with because you just use native JavaScript objects and they just automatically get persisted for you.
e.g., Here’s a quick 6-line Kitten app that persists a counter:
https://codeberg.org/kitten/app#using-javascript-database-jsdb-a-not-so-scary-database
