I've been playing around with keyboard scrolling of overflow regions, and I was interested to note how Firefox's native behavior doesn't expose any additional semantics -- i.e., it doesn't apply a role or accessible name when the scrolling region becomes focusable.
And I think that's the right thing to do -- that our standard workaround of including role="region" and aria-label or aria-labelledby (along with tabindex="0") creates unnecessary verbosity.
I've created a demo script on that basis, which doesn't add a role or label, it simply adds or removes tabindex based on whether the region actually has overflowing content.
It's triggered by a ResizeObserver so it continually updates in response to anything that changes the element's size (and you can test this by resizing the window, increasing zoom or font-size).
Here is a great resource for getting started with Observable Framework by Allison Horst. Observable Framework is an open-source JS library for creating dashboards. The sequence of videos covers how to set up a project and data loader, customize the dashboard, and deploy it.
Theo's main point is that const doesn't mean "this value will never change" (since objects and arrays can obviously still be mutated), but that let means "pay attention, this value will be reassigned further down", and I totally agree.
Useful snippet for computing pixel dimensions from paper sizes (both metric (DIN) and (US) imperial presets included) using https://thi.ng/units, an elaborate & powerful unit converter/calculator/DSL for all SI dimensions:
“Coding my handwriting”, by Amy Goodchild. On specifying each handwritten character as a vector path, rather than a font, and then rendering text in various shapes and colours. Beautiful. In #javascript.
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:
LLaVA (Large Language-and-Vision Assistant) was updated to version 1.6 in February. I figured it was time to look at how to use it to describe an image in Node.js. LLaVA 1.6 is an advanced vision-language model created for multi-modal tasks, seamlessly integrating visual and textual data. Last month, we looked at how to use the official Ollama JavaScript Library. We are going to use the same library, today.
Basic CLI Example
Let’s start with a CLI app. For this example, I am using my remote Ollama server but if you don’t have one of those, you will want to install Ollama locally and replace const ollama = new Ollama({ host: 'http://100.74.30.25:11434' }); with const ollama = new Ollama({ host: 'http://localhost:11434' });.
To run it, first run npm i ollama and make sure that you have "type": "module" in your package.json. You can run it from the terminal by running node app.js <image filename>. Let’s take a look at the result.
Its ability to describe an image is pretty awesome.
Basic Web Service
So, what if we wanted to run it as a web service? Running Ollama locally is cool and all but it’s cooler if we can integrate it into an app. If you npm install express to install Express, you can run this as a web service.
The web service takes posts to http://localhost:4040/describe-image with a binary body that contains the image that you are trying to get a description of. It then returns a JSON object containing the description.
@tripleo I would also be remiss not to mention #Perl's included perltrap manual page, which notes both the strict and warnings pragmas and also has nice lists of things for those coming from other #programming languages and tools like #AWK, #C and #CPlusPlus, #JavaScript, #sed, and #shell.
It's been almost a decade since I've done a live coding stream. This will be fun!
Today I'll be migrating my website from React to Lit, which is a lightweight framework built around web components. I have the scaffolding set up mostly, so now it's time to get this done.
Come watch. Ask questions in chat! You don't need to create an account, just a username is needed to participate.