Search
Items tagged with: Web
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.
All this to say, don’t be a usefool.
#usefool #usefools #bootlickers #SiliconValley #tech #technology #web #BigTech (3/3)
#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
just realized i've had the mollywhite.net domain for over 10 years(!!)
related sneak peek into an upcoming piece: i firmly believe that if you're going to spend money on one thing online it should be a domain, particularly as online identity gets more fragmented. as platforms come and go, you can always find me there.
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
Created this after reading conversation in comments below some tech article somewhere. Someone mentioned "surfing the #internet sewer" and I really liked that phrase.
#drawing #comic #krita #web #surveillance #google #SocialMedia #enshittification #privacy #adblocker #ads
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
"I collected data on participants eye-movements, buttons clicked and time taken. I did 25 user tests and interpreted the data through statistical analysis, including a T-Test.
" The outcome revealed a link between a user's personality type and how they behave on a sign-up form website."
https://madeleinehoyte.framer.website/
> View Madeleine Hoyte's latest work within the UX and psychology field.
#ux #psychology #design #web
![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
Why is #Mozilla collecting our #search data?
source: https://blog.mozilla.org/en/products/firefox/firefox-search-update/
Sensitive topics, like searching for particular health care services, are categorized only under broad terms like health or society. Your search activities are handled with the same level of confidentiality as all other data regardless of any local laws surrounding certain health services.
Hello Mozilla, I use Firefox because my privacy is important to me. The best security is still achieved if you don't collect the data. That is why I will use a fork that does not collect search data. It would be nice if Mozilla took user privacy more seriously.
#privacy #news #browser #web #internet #firefox #security #cybersecurity #surveillance #statistics #bigdata #bigbrother
See what’s changing in Firefox: Better insights, same privacy
We’re ramping up our efforts to enhance search experience by developing new features like Firefox Suggestions.Mozilla (The Mozilla Blog)
Also tired of endless streaming subscriptions? Take back control and self-host!
Are you tired of shelling out money for multiple streaming subscriptions every month? It seems like every media company now has its own platform
https://stux.me/web/also-tired-of-endless-streaming-subscriptions-take-back-control-and-self-host/
#Web #Emby #Jellyfin #selfhost #Streama
stux@me:~$ /Also tired of endless streaming subscriptions? Take back control and self-host!
Are you tired of shelling out money for multiple streaming subscriptions every month? No more with these free alternatives.stux
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
Just published a minor update (version 5.1.1) to JavaScript Database (JSDB) that optimises the custom data type¹ serialisation code by removing a redundant return statement:
https://www.npmjs.com/package/@small-tech/jsdb
This change is backwards compatible and shouldn’t require and updates to your projects, including the ones you have in Kitten (which uses JSDB internally).
¹ https://codeberg.org/small-tech/jsdb#custom-data-types
² https://codeberg.org/kitten/app
#JavaScriptDatabase #JavaScript #database #JSDB #Kitten #SmallWeb #NodeJS #web #dev
Just deployed a new Kitten¹ version 🎉
• Adds database backup and restore in your app’s Kitten settings page (/💕/settings)
• Upgrades version of JSDB from 4 to 5²
• You can emit and listen for events on the session object you get from `request.session` in your routes now.
¹ https://codeberg.org/kitten/app
² For migration notes, please see: https://codeberg.org/small-tech/jsdb#migrating-from-earlier-versions-of-jsdf
#Kitten #backupAndRestore #JavaScript #NodeJS #database #JSDB #sessions #SmallWeb #web #dev
![Screenshot of output of the kitten --version command in terminal:
Illustration of minimalist grey kitten sitting on a green hill in front of a blue sky.
Kitten
by Aral Balkan, Small Technology Foundation
Version 1-b8d459-20.12.2-20240504203731
Born 2024/05/04 at 20:37:31 UTC (Taurus)
Fav. colour #b8d459 [colour swatch]
API version 1
Runtime Node.js 20.12.2
Like this? Fund us!
We’re a tiny, independent not-for-profit.
https://small-tech.org/fund-us
Need help? https://codeberg.org/kitten/app/issues](https://friendica.hellquist.eu/photo/preview/640/2617739 "Screenshot of output of the kitten --version command in terminal:
Illustration of minimalist grey kitten sitting on a green hill in front of a blue sky.
Kitten
by Aral Balkan, Small Technology Foundation
Version 1-b8d459-20.12.2-20240504203731
Born 2024/05/04 at 20:37:31 UTC (Taurus)
Fav. colour #b8d459 [colour swatch]
API version 1
Runtime Node.js 20.12.2
Like this? Fund us!
We’re a tiny, independent not-for-profit.
https://small-tech.org/fund-us
Need help? https://codeberg.org/kitten/app/issues")
Watching The Doors live at The Hollywood Bowl (1968)¹ and hacking on Kitten² and Domain³.
All in all, not a bad way to spend a Saturday afternoon in my book.
(I’ve almost got database backup/restore working in Kitten and I’ve just finished porting Domain to the latest Kitten with JSDB 5⁴.)
¹ https://yewtu.be/watch?v=Q76QBhKHQGc
² https://codeberg.org/kitten/app
³ https://codeberg.org/domain/app
⁴ https://codeberg.org/small-tech/jsdb
#TheDoors #Kitten #Domain #JSDB #SmallWeb #web #dev #music
So @laura is giving a talk on Small Technology* at @marcthiele’s Beyond Tellerrand conference in Düsseldorf (May 13-14):
Sounds like it’s about to be sold out.
* https://small-tech.org/#small-technology
#BeyondTellerrand #germany #web #conference #SmallTech https://mastodon.social/@btconf/112377689225461419
Home
Hello! We’re a tiny and independent two-person not-for-profit based in Ireland. We are building the Small Web. No, it’s not web3, it’s web0.Small Technology Foundation
