Lightnews — Scholar-powered news

Sukima

@mastersuki.bsky.social

I am a passionate software developer specialized in Ember.js & JavaScript. I dabble in Photography, 360 panoramic tours, interactive fiction, and geek culture. https://tritarget.org/

Posts Replies Media Videos

Sukima

@mastersuki.bsky.social

If you want start and ending indices try the “d” flag for RegExp. developer.mozilla.org/en-US/docs/W...

/bar/d.exec('foo bar baz').indices[0]; // => [4, 7]

/* Especially useful with named groups */
/(?<bar>bar)/d.exec('foo bar baz').indices.groups.bar; // => [4, 7]

November 7, 2025 at 1:54 PM

Sukima

@mastersuki.bsky.social

Hmmm. Oh dear.

const reply = '';
Boolean(reply);
// => false

November 5, 2025 at 12:27 AM

Sukima

@mastersuki.bsky.social

For the curious, to do what "newExample" is doing WITHOUT the "using" keyword it would look like "oldExample".

Have I got your attention about Explicit Resource Management in #JavaScript yet?

class Resource {
constructor(label) {
this.label = label;
}

[Symbol.dispose]() {
throw new Error(`bork ${this.label}`);
}
}

function newExample() {
using a = new Resource('A');
using b = new Resource('B');
using c = new Resource('C');
throw new Error('bork');
}

function oldExample() {
let aError;
const a = new Resource('A');
try {
let bError;
const b = new Resource('B');
try {
let cError;
const c = new Resource('C');
try {
throw new Error('bork');
} catch (error) {
cError = error;
throw error;
} finally {
try {
c[Symbol.dispose]();
} catch (error) {
if (cError) throw new SuppressedError(error, cError, 'message');
throw error;
}
}
} catch (error) {
bError = error;
throw error;
} finally {
try {
b[Symbol.dispose]();
} catch (error) {
if (bError) throw new SuppressedError(error, bError, 'message');
throw error;
}
}
} catch (error) {
aError = error;
throw error;
} finally {
try {
a[Symbol.dispose]();
} catch (error) {
if (aError) throw new SuppressedError(error, aError, 'message');
throw error;
}
}
}

October 24, 2025 at 12:11 AM

Sukima

@mastersuki.bsky.social

How about this one? Uses built-in libs and common APIs. Same result.

class AsyncCounter extends EventTarget {
#count = 0;

get count() {
return this.#count;
}

async run(task) {
using stack = new DisposableStack();
stack.defer(() => this.dispatchEvent(new Event('count')));
stack.defer(() => this.#count--);
this.#count++;
this.dispatchEvent(new Event('count'));
return await task();
}
}

const getAsyncTask = (ms, label) => () =>
new Promise(res => setTimeout(() => res(label), ms));

const logCount = (count) =>
console.log(
'[%s] in flight: %s',
new Date().toLocaleTimeString(),
count,
);

const counter = new AsyncCounter();
const subscription = new AbortController();

counter.addEventListener(
'count',
(e) => logCount(e.target.count),
{ signal: subscription.signal },
);

await Promise.all([
counter.run(getAsyncTask(1200, 'A')),
counter.run(getAsyncTask(2200, 'B')),
counter.run(getAsyncTask(800, 'C')),
]);

subscription.abort();
console.log('Done. Final count: %s', counter.count);

October 23, 2025 at 1:55 AM

Sukima

@mastersuki.bsky.social

A common patter I use is to destructure class fields. Private fields cannot destructure in the same way forcing one line per private field to assign to a const.

class Foo {
publicA = …;
publicB = …;
publicC = …;

#privateA = …;
#privateB = …;
#privateC = …;

nice() {
// This is a nice pattern.
const { publicA, publicB, publicC } = this;
}

notNice() {
// This won't work and that is sad.
const { #privateA, #privateB, #privateC } = this;

// Instead this is needed.
const privateA = this.#privateA;
const privateB = this.#privateB;
const privateC = this.#privateC;
}
}

October 23, 2025 at 1:48 AM

Sukima

@mastersuki.bsky.social

class EventEmitter {
#listeners = new Map();

on(eventType, listener) {
const listeners = this.#listeners.get(eventType) ?? new Set();
listeners.add(listener);
this.#listeners.set(eventType, listeners);
return this;
}

off(eventType, listener) {
const listeners = this.#listeners.get(eventType);
listeners?.delete(listener);
return this;
}

emit(eventType, ...args) {
if (!this.#listeners.has(eventType)) return false;
const listeners = this.#listeners.get(eventType);
for (const listener of listeners) listener(...args);
return true;
}
}

October 10, 2025 at 12:36 AM

Sukima

@mastersuki.bsky.social

Today I learned there is a subtle foot-gun when extending ReadableStream. #JavaScript

class AsyncArrowsWork extends ReadableStream {
data = 'foobar';
constructor() {
super({
start: async (controller) => {
controller.enqueue(this.data); // OK
controller.close();
},
});
}
}

class SyncArrowsFail extends ReadableStream {
data = 'foobar';
constructor() {
super({
start: (controller) => {
controller.enqueue(this.data); // Fail
controller.close();
},
});
}
}

October 9, 2025 at 12:13 PM

Sukima

@mastersuki.bsky.social

I would expect you need to at least cancel the other requests with an AbortSignal right? Also, not sure what kind of API/service would need this. Clever, but also feels like a solution looking for a problem.

using stack = new DisposableStack();
const { signal } = stack.adopt(
new AbortController(),
(controller) => controller.abort(),
);
const apiUrls = […];
const res = await Promise.any(
apiUrls.map((url) => fetch(url, { signal })),
);
const data = await res.json();
console.log(data);

October 3, 2025 at 12:54 PM

Sukima

@mastersuki.bsky.social

This works in #JavaScript also.

let a = 1;
let b = 2;
([a, b] = [b, a]);
console.log({ a, b });
// => { a: 2, b: 1 }

August 13, 2025 at 1:42 PM

Sukima

@mastersuki.bsky.social

Or in cases where start and stop are separate async functions:

$async function main() { while (true) { await using stack = new AsyncDisposableStack(); stack.adopt(await startServiceOne(), stopServiceOne); stack.adopt(await startServiceTwo(), stopServiceTwo); stack.adopt(await startServiceThree(), stopServiceThree); await sleep(120_000); } }$

August 5, 2025 at 12:23 AM

Sukima

@mastersuki.bsky.social

Curious, but why not have the services resolve to an AsyncDisposable which can get called when it is time for it to be cancelled? I think that would cover the issue presented in the Blog post. developer.mozilla.org/en-US/docs/W...

$async function main() { while (true) { await using stack = new AsyncDisposableStack(); stack.use(await startServiceOne()), stack.use(await startServiceTwo()), stack.use(await startServiceThree()), await sleep(120_000); } }$

August 5, 2025 at 12:18 AM

Sukima

@mastersuki.bsky.social

If NaN === NaN returned true, invalid data would silently pass through filters and contaminate calculations. The special comparison behavior forces developers to explicitly handle invalid numeric conversions, preventing subtle bugs where bad data corrupts entire datasets.

// Demonstrate the protection NaN comparison provides
const userInputs = ["85", "92", "invalid", "78", "", "95", "not a number"];
const validInputs = userInputs.map(Number).filter(num => num === num);
// [85, 92, 78, 95];

August 3, 2025 at 3:34 PM

Sukima

@mastersuki.bsky.social

XKCD meme image of a tower of blocks all held up by one tiny little one on the bottom. Tower labeled as “Modern democracy and civility” and the tiny block holding it all up labeled “One orange colored rich dude having rambling temper tantrums on social media”

July 18, 2025 at 4:37 PM

Sukima

@mastersuki.bsky.social

Linters fight me ALL the time.

Also, may I code golf?

const url = new URL(current, 'thismessage:/');
const { searchParams: activeQPs } = url;
let { pathanme: base } = url;

July 12, 2025 at 8:52 PM

Sukima

@mastersuki.bsky.social

Look how nice Explicit Resource Management + AbortController makes adding multiple event handlers without memory leaks! #JavaScript

async function foobar(eventTarget) {
using stack = new DisposableStack();
const { singal } = stack.adopt(
new AbortContoller(),
(controller) => controller.abort(),
);

eventTarget.addEventListener('event1', handler1, { signal });
eventTarget.addEventListener('event2', handler2, { signal });
eventTarget.addEventListener('event3', handler3, { signal });
eventTarget.addEventListener('event4', handler4, { signal });
eventTarget.addEventListener('event5', handler5, { signal });

await new Promise((done) => {
eventTarget.addEventListener('done', done, { signal });
eventTarget.dispatchEvent(new Event('start'));
});
}

July 12, 2025 at 12:04 AM

Sukima

@mastersuki.bsky.social

@davidkpiano.bsky.social I discovered your FLIP animation technique works amazing well with the new Explicit Resource Management in #JavaScript/#TypeScript s.tritarget.org/l

$function example(element) { // Construction captures first bounding rect. using _token = new DisposableFlipAnimator(element); doSomethingWith(element); } // Scope disposal captures last bounding rect and animates.$

July 11, 2025 at 8:09 PM

Sukima

@mastersuki.bsky.social

#AI #JIRA #SoftwareEngineering

Padme & Anakin four panel meme
1. Anakin: Leadership wants us to use AI everywhere to be more efficient
2. Padme: AI can finally handle all that JIRA syuff right?
3. Anakin: …
4. Padme: AI can handle all that JIRA stuff right?

June 5, 2025 at 9:02 PM

Sukima

@mastersuki.bsky.social

function * onlyRebels(people) {
for (const person of people)
if (person.affiliation === 'rebles')
yield person.name;
}

const names = onlyRebels([
{ name: 'Admiral Piett', affiliation: 'empire' },
{ name: 'Agent Kallus', affiliation: 'empire' },
{ name: 'Darth Vader', affiliation: 'empire' },
{ name: 'Han Solo', affiliation: 'rebels' },
{ name: 'Luke Skywalker', affiliation: 'rebels' },
{ name: 'Princess Leia Organa', affiliation: 'rebels' },
])
.map(({ name }) => name)
.toArray();

May 30, 2025 at 12:16 AM

Sukima

@mastersuki.bsky.social

Did you know this is doable in modern #JavaScript ?

eventReadableStream(someElement, 'click')
.pipeThrough(consoleLogger(IS_DEBUG))
.pipeThrough(siteAnalytics())
.pipeTo(clickHandler())
.catch(reportErrors);

May 25, 2025 at 3:25 PM

Sukima

@mastersuki.bsky.social

If you wanted to go to the extreme edge I found that using generator functions + Object.fromEntries() to be quite the fascinating and declarative approach to converting form data to API JSON.