guest271314

Why I use node, deno, bun, qjs, tjs at the same time.

Winds up being a (not the) rather comprehensive JavaScript toolbox. The idea being for the modern JavaScript programmer can use all of the tools available for a given requirement, task or job, without preference for any. No external bundlers or compilers are needed. No frameworks are needed. I can use qjs or tjs for systems with minimal RAM and disk space; and when I want to use Web API's deno makes an effort to provide those interfaces. In some cases I can run the exact same code in bun, deno, and node, which provides a means to perform 1:1 testing as to performance.

There's probably a few things I am unintentionally omitting below. These are just a brief synposis. I'll update accordingly.

sindresorhus

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

WebReflection

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

ebidel

<!-- 
Complete feature detection for ES modules. Covers:

1. Static import: import * from './foo.js';
2. Dynamic import(): import('./foo.js').then(module => {...});

Demo: http://jsbin.com/tilisaledu/1/edit?html,output

Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
-->

samthor

// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
// does not support `nomodule` is probably not being used anywhere. The code below is left
// for posterity.

/**
 * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
 * load <script nomodule> anyway. This snippet solve this problem, but only for script
 * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
 *
 * Again: this will **not** prevent inline script, e.g.:

fnlctrl

/**
 * VueRouteData plugin for vue-router@2.0 and vue@1or2,
 * implemented according to https://github.com/vuejs/vue-router/issues/296#issuecomment-235481643
 *
 * This plugin looks for `$options.fetchRouteData`,
 * and watches `$route` using `$options.fetchRouteData` as handler.
 *
 * Before `fetchRouteData` executes, this plugin sets 'loadingRouteData' to true,
 * and when it finishes executing, the plugin sets 'loadingRouteData' to false,
 * so `fetchRouteData` can either be normal functions or async functions.

ericelliott

const nsTime = (hrtime) => hrtime[0] * 1e9 + hrtime[1];

gmetais

This list was moved to https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/

MSEdge

interface AesGcmEncryptResult {
    readonly attribute ArrayBuffer ciphertext;
    readonly attribute ArrayBuffer tag;

};

interface BookmarkCollection {
    readonly attribute long length;

    any item(unsigned long index);

p3t3r67x0

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {