randomItem = items[Math.floor(Math.random() * items.length)];

average = (...list) => list.reduce((a,b) => a + b) / list.length;

'String'[charIndex];

let numbersArr = [4, 8, 9, 34, 100];

numbersArr[numbersArr.length - 1];

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

let startAt = performance.now();

FunctionCall();

let endAt = performance.now();

console.log('${endAt - startAt}');

const url = new URL(window.location.href);
const paramterValue = url.searchParams.get("pramaName");
console.log(paramterValue);

1. Right click on bookmarks bar.
2. Click on Add page....
3. Write the title of CSS on Name.
4. Write javascript:(function(){document.body.innerHTML+="❬style❭*{ your CSS content "}❬/style❭';})(); on URL.
5. Click Save.

Click on the page when you want to change the CSS of current page.

The Houdini API is a set of low-level CSS and JavaScript APIs that give developers more control over rendering and styling in the browser. It lets you access the browser's rendering engine to extend CSS and write custom behaviors for styling.

Paint API

• Allows you to write custom paint worklets that render graphics on an element.
• Use CSS.registerProperty() to define custom CSS properties.

Example: Custom Paint Worklet

CSS.paintWorklet.addModule('worklet.js');

worklet.js

class MyPaint {
  paint(ctx, size) {
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, size.width, size.height);
  }
}
registerPaint('my-paint', MyPaint);

CSS Usage:

.box {
  background: paint(my-paint);
}

Animation Worklet

Provides more control over animations beyond the regular requestAnimationFrame.

Layout API

Customizes how elements are laid out, useful for dynamic or grid-based layouts.

Typed OM (Object Model)

Programmatically interact with CSS values in a performant manner using Typed CSS Values.

Set the checkboxes value attribute to true and you will get true in your post value.

var OSName - "Minor unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="ios - Apple Inc.";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

console.log(OSName);

if(window.matchMedia && window.mathMedia('(prefers-color-scheme: dark)').matches){
	console.log('Dark Mode');
}else{
	console.log('Light Mode');
}