Skip to main content

Search

Items tagged with: JavaScript


I'm so glad people find my MermaidJS plugin useful 🤩

https://github.com/KevinGimbel/eleventy-plugin-mermaid

It's a little something I once did for my own website when it was still build with 11ty, and I'm glad others find it useful as well!

#11ty #oss #foss #javascript


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:

https://codeberg.org/aral/gists/src/branch/main/clipboard-writetext-permission-error-when-using-modules-in-safari.md

#Safari #clipboardAPI #JavaScript #ESModules #web #dev #gist


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


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


Assign properties in a constructor’s parameter object (with defaults) to object being instantiated in JavaScript

https://codeberg.org/aral/gists/src/branch/main/assign-properties-in-a-constructors-parameter-object-with-defaults-to-object-being-instantiated-in-JavaScript.md

This is a little something I ended up playing around with this morning before figuring out how to do it (after spending far too much time down a rabbit hole with object destructuring when what I really needed was creative use of the spread operator).

(Useful for custom objects in JSDB 5 – https://codeberg.org/small-tech/jsdb#custom-data-types)

#JavaScript #parameterObject #defaults #JSDB


JSDB 5.1.0 published¹ 🎉

• Forgetting to pass a custom class that’s persisted in your database in your `JSDB.open()` call now throws instead of corrupting your database by falling back to using an untyped object.

• Added JSDF ver. 2 to 3 database migration script (i.e., JSDB version 2-4 to 5)²

To install update:

npm install @small-tech/jsdb@5.1.0

¹ https://codeberg.org/small-tech/jsdb/releases

² https://codeberg.org/small-tech/jsdb#version-2-to-3

#JavaScriptDatabase #JavaScript #database JSDB #JSDB5 #NodeJS #SmallTech #SmallWeb #web #dev


JSDB 5.0.1 published 🎉

• Fixes #14: Crash if DataProxy getHandler() called on object with null prototype. (https://codeberg.org/small-tech/jsdb/issues/14)

To install update:

npm install @small-tech/jsdb@5.0.1

Learn more about JSDB:

https://codeberg.org/small-tech/jsdb#javascript-database-jsdb

#JavaScriptDatabase #JavaScript #database JSDB #JSDB5 #NodeJS #SmallTech #SmallWeb #web #dev


To really drive home the above 👆 point that 100% test coverage does not mean ‘bug free’, just found a bug in JSDB¹ 5.0.0 where running JSON.stringify() on a complex custom object (actually: the automatic Proxy of the custom object created by JSDB) results in an error.

Already have a failing test and about to implement fix.

(It’s at this point where the test harness is invaluable.)

¹ https://codeberg.org/small-tech/jsdb

#JavaScriptDatabase #JavaScript #database #JSDB #JSDB5 #NodeJS #SmallWeb #SmallTech


If you use a parameter object in JavaScript, even if you specify its shape using JSDoc, you’ll only get errors if required properties are missing; not if there are extra properties provided.

e.g.,

```js
class A {
/**
@param {{
id:string
}} params
*/
constructor (params) {
Object.assign(this, params)
}
}

// Error:
new A({})

// No error:
new A({id: 'x', foo:'bar'})
```

According to this thread, it’s a fact-of-life:

https://stackoverflow.com/questions/49580725/is-it-possible-to-restrict-typescript-object-to-contain-only-properties-defined

#JavaScript #JSDoc


Philosophically, JSDB – which writes out to native JavaScript logs – is very much the JavaScript version of SWX, the native data format for Flash that I released around 2007 (where data was written out in native SWF format). I have to say that I’m glad I didn’t have to reverse engineer SWF bytecode this time around :)

Here’s a video of a younger me doing an impromptu demo of SWX at some conference or other from 16 years ago.

https://m.youtube.com/watch?v=OM9qOADsO3w

#JSDB #SWX #JavaScript #Flash #flashback


100% test coverage doesn’t mean your code’s bug free but it did just lead me to find and fix an issue in JavaScript Database (JSDB)¹ with a code path that wasn’t being hit that I would have otherwise missed because it was causing the relevant test to pass.

¹ JSDB is a zero-dependency, transparent, in-memory, streaming write-on-update JavaScript database for the Small Web that persists to a JavaScript transaction log (an append-only log).

https://codeberg.org/small-tech/jsdb

#JavaScript #database #JSDB


Just wrote a note about a little gotcha with default values for destructured properties of parameter objects in JavaScript that has gotten me a few times:

https://codeberg.org/aral/gists/src/branch/main/default-values-for-destructured-properties-of-parameter-objects-in-javascript.md

#JavaScript #destructuring #defaults #parameterObjects #web #dev


Realised last night that JavaScript Database (JSDB) doesn’t run the constructor on persisted custom objects (https://codeberg.org/small-tech/jsdb#custom-data-types) when deserialising them because I didn’t know that you apparently have to define your constructor manually when using Object.create().

Will fix it today but it’s something to watch out for if you’re using Object.create() directly.

For more info, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

#JSDB #customObjects #constructor #bug #JavaScript #NodeJS #SmallTech #SmallWeb


#Fedify is an #ActivityPub server framework in #TypeScript & #JavaScript. It aims to eliminate the complexity and redundant boilerplate code when building a federated server app, so that you can focus on your business logic and user experience.

The key features it provides currently are:

• Type-safe objects for Activity Vocabulary (including some vendor-specific extensions)
• #WebFinger client and server
• HTTP Signatures
• Middleware for handling webhooks
• #NodeInfo protocol
• #Node.js, #Deno, and #Bun support

If you're curious, take a look at the Fedify website! There's comprehensive docs, a demo, a tutorial, example code, and more:

https://fedify.dev/

#fedidev


Little web dev tip: if you have just one address field in your HTML form (e.g., a textarea) but you still want the person filling it in to avail themselves of autocomplete, here’s a little reusable snippet you can use to achieve that:

https://codeberg.org/aral/gists/src/branch/main/single-html-address-field-with-autocomplete-using-javascript.md

(Ideally the web spec should be extended to include a full-address value for the autocomplete attribute.)

#HTML #autocomplete #JavaScript #address #web #dev #tip #code


This is a niche one and will likely not affect any of the (three?) people playing with Kitten¹ right now but, in any case:

If you persist custom types to your Kitten database, you might be hit by this bug that was introduced when I released versions of Kitten with minified identifiers.

I briefly wrote about what happened, how you can identify if you’re affected, and how you can fix it here:

https://codeberg.org/kitten/app/issues/160#issuecomment-1775375

¹ https://codeberg.org/kitten/app

#SmallWeb #Kitten #web #dev #JSDB #JavaScript


Pragmatic drag and drop lib that can be used with any view layer (react, svelte, vue, angular and so on).

Powers Trello, Jira and Confluence.

#TypeScript #JavaScript #opensource

https://github.com/atlassian/pragmatic-drag-and-drop #webdev