Web Development on Nalar

Choosing JavaScript Promise Combinators: all, allSettled, any, and race

Tue, 01 Sep 2026 00:00:00 +0700

JavaScript provides several Promise combinators that look similar but encode very different failure policies. Choosing between Promise.all, Promise.allSettled, Promise.any, and Promise.race is less about syntax and more about defining what “success” means for a group of asynchronous operations.

The important question is not “which one runs in parallel?” Promises usually start when you create them. The combinator decides how to observe their outcomes.

`Promise.all`: every result is required

Use Promise.all when the operation is successful only if every input fulfills.

CSS Logical Properties for International and Flexible Layouts

Tue, 01 Sep 2026 00:00:00 +0700

CSS traditionally describes spacing and borders with physical directions such as left, right, top, and bottom. That works until a component must support right-to-left text or a writing mode where the inline direction is not horizontal.

Logical properties describe layout relative to the flow of text. They make components more adaptable without maintaining a second set of directional overrides.

Physical versus logical directions

In a typical English document, the inline axis runs from left to right and the block axis runs from top to bottom. Logical properties name those axes instead of assuming screen directions.

HTTP Conditional Requests with ETag and Last-Modified

Tue, 01 Sep 2026 00:00:00 +0700

HTTP caching is not only about choosing a long max-age. Applications often need clients to revalidate data because a resource can change, while still avoiding retransmitting the full representation when it has not changed.

HTTP validators solve that problem. The two common validators are ETag and Last-Modified.

Freshness and validation are different

A freshness directive can tell a cache that a response may be reused without contacting the server for a period:

Progressive Enhancement for Resilient Web Forms

Tue, 01 Sep 2026 00:00:00 +0700

A web form does not need JavaScript to submit data. That native capability is a useful reliability baseline.

Progressive enhancement starts with semantic HTML and a server endpoint that can complete the operation, then adds JavaScript for faster feedback or richer interactions. If the enhancement fails, the core task still has a path to succeed.

This approach is valuable even in highly interactive applications because JavaScript can fail for ordinary reasons: slow networks, stale cached chunks, browser extensions, runtime exceptions, or a partial deployment.

Use HTTP 103 Early Hints Without Breaking Page Delivery

Tue, 01 Sep 2026 00:00:00 +0700

A server may need time to produce an HTML response even though it already knows that the page will require a stylesheet or other critical resource. HTTP 103 Early Hints lets the server send selected Link hints before the final response so a supporting client can begin useful work sooner.

The optimization is optional: the final response still determines the page result.

Understand the response sequence

A simplified exchange looks like this:

Use JavaScript Import Maps for Browser Module Aliases

Tue, 01 Sep 2026 00:00:00 +0700

Native ES modules normally require browser-resolvable URLs such as ./math.js or /vendor/lib.js. Import maps add a controlled indirection layer so application code can use stable bare specifiers such as app/config without a bundler rewriting imports.

Define a map before modules load

$el.innerText = 'Copy', 2000)" class="absolute top-2 right-2 bg-neutral-700 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity" > Copy

<script type="importmap">
{
  "imports": {
    "app/": "/js/app/",
    "vendor-utils": "/vendor/utils-v3.js"
  }
}
</script>
<script type="module" src="/js/main.js"></script>

Then /js/main.js can use:

Use structuredClone for Safe Deep Copying in JavaScript

Tue, 01 Sep 2026 00:00:00 +0700

Copying JavaScript values is easy until nested objects, dates, maps, sets, binary data, or circular references appear. The common JSON round trip works only for a limited subset of values and silently changes some data.

The built-in structuredClone() API provides a defined deep-cloning algorithm for many JavaScript data types.

Spread syntax is only a shallow copy

Object spread copies the first level:

$el.innerText = 'Copy', 2000)" class="absolute top-2 right-2 bg-neutral-700 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity" > Copy

const original = {
  profile: { name: "Ada" }
};

const copy = { ...original };
copy.profile.name = "Grace";

console.log(original.profile.name); // "Grace"

Both objects still reference the same nested profile. Spread syntax is useful when shallow copying is intentional, but it is not a general deep-copy mechanism.

Web Development on Nalar

Choosing JavaScript Promise Combinators: all, allSettled, any, and race

Promise.all: every result is required

CSS Logical Properties for International and Flexible Layouts

Physical versus logical directions

HTTP Conditional Requests with ETag and Last-Modified

Freshness and validation are different

Progressive Enhancement for Resilient Web Forms

Use HTTP 103 Early Hints Without Breaking Page Delivery

Understand the response sequence

Use JavaScript Import Maps for Browser Module Aliases

Define a map before modules load

Use structuredClone for Safe Deep Copying in JavaScript

Spread syntax is only a shallow copy

`Promise.all`: every result is required