DEV Community: JS Bits Bill

Ad-Free YouTube With a Custom Player

JS Bits Bill — Thu, 02 Apr 2026 03:03:36 +0000

As enshittification marches on, more ads, more dark patterns, more UI designed to serve the platform instead of the user, I've found myself writing more and more userscripts to just take back control of my own browser.

The web is full of it these days. Search results that bury the actual answer under AI summaries and SEO slop, cookie banners engineered to trick you into opting in, UI patterns designed to get you to click something you never intended to. I've just started writing small scripts to deal with it, nothing fancy, just enough JS to sand off the rough edges of whatever site is annoying me that week.

YouTube has been one of the worst offenders. Pre-roll ads, mid-roll interruptions, recommended video overlays hijacking your screen the second a video ends. But it turns out YouTube's own embed URL has a lesser-known cousin that makes most of this go away: youtube-nocookie.com. It's their own domain, built for privacy-respecting embeds and as a side effect, it serves no ads. 🎉

The script intercepts any youtube.com/watch?v=VIDEO_ID link and reconstructs it as a yout-ube.com/watch?v=VIDEO_ID URL, opening it in a new tab. yout-ube.com is a third-party pass-through that rewrites the request and loads it via youtube-nocookie.com/embed with the right HTTP Referer context intact. That Referer is what matters — if you navigate directly to a nocookie embed URL or just hit refresh, YouTube throws an Error 153 and kills playback entirely. The yout-ube.com hop is what keeps everything happy.

From there a second script runs on the nocookie domain to enhance the player. You get the full video, zero ads. Just the video. It sounds simple because it should have always been this way.

The custom player on youtube-nocookie.com — comments panel open, like/dislike ratio bar, clean controls, zero ads.

What It Does

Speed hold: hold the mouse button over the video to speed it up. Upper half = 2x, lower half = 3x. Release to snap back to 1x. No UI, no buttons, just muscle memory.

Double-click fullscreen: YouTube's overlay swallows the native dblclick event so I track clicks manually. Two clicks within 300ms over the video area toggles fullscreen.

Comments panel: a collapsible panel at the bottom of the player that pulls comments via the YouTube Data API v3. Top or New sort, like counts, timestamps, and a like/dislike ratio bar.

UI Cleanup

The nocookie player still renders some unwanted elements, a "watch on YouTube" button, a fullscreen recommendations overlay, the loop icon. All of it gets nuked with CSS:

player-fullscreen-action-menu,
.ytp-pause-overlay-container,
.watch-on-youtube-button-wrapper,
.ytFullscreenVideoRecommendationsHost {
  display: none !important;
}

Volume, CC, and settings buttons get relocated to a custom bottom bar to keep things tidy.

The web is still a hackable place. The browser is still yours. A little JS goes a long way. 🛠️

Set It Up Yourself

I put together a short video walkthrough of the full setup if you'd rather just follow along: https://streamable.com/ry74kw

Full written instructions including both scripts and the API key setup are over on my GitHub Gist.

Adding Emoji Search to Google Messages for Web

JS Bits Bill — Sun, 25 Jan 2026 22:44:59 +0000

The Problem

If you've ever used Google Messages for Web, you know the pain: you want to send a particular emoji, but instead of searching for it, you're stuck scrolling through endless categories hoping to find the right one. It's 2026, this SO shouldn't be a thing!

The Solution

Messages for Web Emoji Search adds keyboard-friendly emoji search directly into the UI where you can type what you want and get instant results. IMO, this is way easier than browsing annoying "categories" or having to endlessly scroll just to find the clown emoji.

How It Works

The extension uses a MutationObserver to watch for when the emoji picker appears and injects a search input at the top:

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const pickerClass = 'emoji-picker-content-wrapper';
        const picker = node.classList?.contains(pickerClass)
          ? node
          : node.querySelector?.(`.${pickerClass}`);
        if (picker) injectIntoEmojiPicker(picker);
      }
    }
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Once detected, it injects a custom search interface with autocomplete that filters through a database of emojis by name and keywords. Looking for "skull"? You'll get 💀 Skull, ☠️ Skull and Crossbones, 🏴‍☠️ Pirate Flag, and more.

When you select an emoji, it gets inserted directly into your message input at the cursor position, just like the native picker.

Try It Out

The extension is live on the Chrome Web Store and the code is open source:

Chrome Extension: https://chromewebstore.google.com/detail/messages-for-web-emoji-se/ihgbgoclaogjailgdkpejeebemeibjnm
GitHub: https://github.com/doctafaustus/messages-for-web-emoji-search

The extension is still in beta, but feel free to give it a spin 🙃.

Simplify Shadow DOM with setHTMLUnsafe

JS Bits Bill — Fri, 03 May 2024 21:52:06 +0000

It's typical for Web developers to create encapsulated DOM elements in order to isolate both styles and functionality within a component. To achieve this, the element.attachShadow method is used to create a shadow DOM: a hidden subtree attached to an element. While powerful, it can be somewhat verbose and complex to set up:

const sectionElement = document.querySelector('section');
const shadowTemplate = document.createElement('template');
shadowTemplate.innerHTML = `
  <style>
    /* Shadow styles applied only within the shadow DOM */
    h2 { color: blue; }
  </style>
  <h2>Shadow Content</h2>
`;
shadowTemplate.content.shadowRootMode = 'open'
const shadowHost = document.createElement('div');
const shadowRoot = shadowHost.attachShadow({
  mode: 'open'
});
shadowRoot.appendChild(shadowTemplate.content.cloneNode(true));
sectionElement.appendChild(shadowHost);
sectionElement.insertAdjacentHTML('beforeend', `
  <h2>Light Content</h2>
`);

This produces the following rendered HTML:

Notice how we must create the shadow DOM using the .attachShadow method first and then we can access the shadow root and use .innerHTML to populate the content.

Also note how .innerHTML cannot be used to directly create this output. This method is not designed to understand shadow elements within the template. Further, it also prevents this content from rendering due to a browser security restriction. If user-generated content is inserted with .innerHTML, it could contain malicious scripts that execute within your page. Shadow DOM creates a separate DOM tree that prevents styles and scripts from leaking into the main page.

However, if we understand and accept the security implications, we can take advantage of the new setHTMLUnsafe method to directly set HTML content, including shadow DOM declarations, bypassing the need for separate shadow DOM attachment methods like .attachShadow:

document.querySelector('section').setHTMLUnsafe(`
  <div>
    <template shadowrootmode="open">
      <style>
        /* Shadow styles applied only within the shadow DOM */
        h2 { color: blue; }
      </style>
      <h2>Shadow Content</h2>
    </template>
  </div>
  <h2>Light Content</h2>
`)

With setHTMLUnsafe, you don't need to manage separate template elements, shadow hosts, or shadow roots manually. This can reduce the complexity of your codebase and make it easier to maintain, especially in larger projects where encapsulation of DOM elements is a common practice.

setHTMLUnsafe is available now in Chrome 124 (and supported in Edge, Safari, and Firefox).

Journey into the Minification Abyss: The Peculiar '0' Placeholder

JS Bits Bill — Mon, 12 Jun 2023 15:21:48 +0000

In transpiled code, you'll often notice a pattern that looks like this:

i.default.createElement("p", {
  dangerouslySetInnerHTML: {
    __html: (0, $.sanitize)(n.desc) // What's the 0?
  },
  __self: this,
  __source: {
    fileName: S,
    lineNumber: 328,
    columnNumber: 13
  }
})

With the line __html: (0, $.sanitize)(n.desc), we see 2 curious things:

Why do the parens in (0, $.sanitize) have two expressions?
Why is there a seemingly useless number 0 present?

Let's explain:
(0, $.sanitize)(n.desc) simply calls $.sanitize with n.desc as an argument. In other words, this is the same as: $.sanitize(n.desc).

Inside the parenthesis, the comma operator evaluates all expressions in sequence but only returns the value of the last expression.

function foo() {
  return ('a', 'b', 1+3);
}

foo(); // returns 4

So by adding the 0 before the comma , in (0, $.sanitize)(n.desc) the transpiler is using the comma operator to create an expression where the value 0 is discarded (so it could technically be any other expression without side effects), but the function $.sanitize is still executed. This ensures that the $.sanitize function is treated as a standalone expression and evaluated before the function call (...)(...) is made.

This pattern shows a specific transformation in the bundled output by ensuring the fn in (0, fn)(arg) is invoked with a this value of undefined:

'use strict';

const spellbook = {
  title: 'Arcanum',
    enchant(weapon) {
      console.log(`Enchanting ${weapon}`);
      console.log(this);
  }
};

// Will log "this" as {title: 'Arcanum', enchant: ƒ}
spellbook.enchant('sword'); 

// Will log "this" as undefined
(0, spellbook.enchant)('sword');

/* 
  Note that "this" will refer to the global object in
  non-strict mode or "undefined" in strict mode.
*/

This transformation ensures that exported functions are not called with a different this context which will lead to incorrect function behavior.

Even though not all functions will need to access this, this transformation is applied regardless so the transpiler does not need to waste time analyzing wether or not the code accesses it.

Instead of (0, fn)(arg), could we have called the function in this manner: (fn)(arg)?

No, because the the parentheses around fn would be interpreted simply as a grouping operator rather than the comma operator, and it is the comma operator that triggers the behavior of calling the function without any specific context.

I always believed the 0 in these patterns was an index to another function in the code bundle, but it's not! It’s a transformation pattern used when exporting functions to ensure that they are not unintentionally bound to a different context. ✨

Special thanks to user j4k0xb and their very helpful explanation which prompted a better explanation on my part.

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿 JS Bits Blog

HTML : Chrome's weird navigational element

JS Bits Bill — Fri, 17 Jun 2022 15:21:55 +0000

What's a Portal?

You might have never heard of the HTML <portal> element. It's an experimental feature since Chrome 75 (June, 2019) and its proposal is in the draft stages. But what is it exactly? Essentially the <portal> is like a souped-up <iframe> and includes the ability to seamlessly navigate into embedded content.

Similar to an <iframe>, <portal> includes a src attribute which is the URL of the page you want to embed and the embedded content will look identical to an <iframe>. The <portal> is clickable but is not interactable since its purpose is to provide a smooth navigation into a prerended page - similar to the way most SPAs navigate. This differs from iframes which cannot immediately be navigated to without another request to the source. Clicking on a portal will navigate you right into all that content that's already loaded and rendered as the child inset of the parent document.

What's cool about portals is that they can be cross-origin, meaning you can create a portal to a different domain from where you're embedded it.

How To Use

So since portals are an experimental, we need to enable 2 flags in Chrome at about://flags/#enable-portals:

🚩 Enable Portals
🚩 Enable cross-origin Portals

Chrome will prompt you to relaunch your Browser and after doing so, you should see the HTMLPortalElement function available in your console:

So now let's create a basic portal! It's as easy as adding this HTML to your web page.

<portal src="https://theoatmeal.com"></portal>

You can add styles to this element to adjust height, width, etc. but in its raw form you'll see the webpage from The Oatmeal embedded. When you click the portal, you navigate instantly to the source page and should not notice the normal "blink" you'd otherwise get from visiting a new Web page.

Let's Get Fancy

Here's a use case where we'll create a list of popular webcomics. Each block of content will show a preview image of the comic and when the user hovers over it our code will render a portal in place that can be clicked to navigate directly to the the webcomic's page:

First, the HTML:

<h2>Best Webcomics</h2>
<ol>
  <li>
    <h3>The Oatmeal</h3>
    <div 
      class="comic-container"
      data-src="https://theoatmeal.com/comics/forbidden_love"
    >
      <img src="/forbidden_love_big.png">
      <img class="spinner" src="/spinner.gif">
      <portal src=""></portal>
    </div>
  </li>

  <!-- Repeat lis for other webcomics -->
</ol>

Notice we're using an empty src for the portal. To avoid unnecessary loading, we'll set the source in JavaScript only when the user hovers over .comic-container via the mouseenter event. As the source is being loaded, we'll show the spinner overlay so there's user feedback to show something is loading. Once fully loaded (by listening to the load event), we can display the portal over the existing image.

const blocks = document.querySelectorAll('.comic-container');
blocks.forEach(block => {
  block.addEventListener('mouseenter', e => {
    block.classList.add('hover');
    const portal = block.querySelector('portal');
    const { src } = block.dataset;
    portal.src = src;
  });

  // Add "mouseleave" listener to reset classes
});

const portals = document.querySelectorAll('portal');
portals.forEach(portal => {
  portal.addEventListener('load', e => {
    if (portal.closest('.comic-container').matches('.hover')) {
      portal.classList.add('show-portal');
    } 
  });
});

From there, the user can click the portal and be instantly transported to the source page!

The default click behavior on a portal can also be prevented if you wanted to create a fancy animation the on click event and then call portal.activate() to activate the portal programmatically.

See full code here: https://github.com/doctafaustus/html-portal

Closing Thoughts

While portals give us a new way to preview and prerender pages, it's unclear if they'll ever be standard in browsers. My first thoughts about security were assuaged by reading that portals do not allow user interaction to channel through to the "portaled" document. Additionally, the embedded content will not have direct access to the host document. However, portals would still introduce yet another opportunity to create clever browser exploits, so a sound content security policy (CSP) would be recommended.

Nevertheless, they're still pretty cool!

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on Twitter, TikTok and I have a new debugging course out now!

Coding a Hank Hill Hotkey

JS Bits Bill — Mon, 14 Feb 2022 16:49:32 +0000

Today we'll be coding a hotkey easter-egg for your website that will display a random Hank Hill image in your viewport. This will prove to be an essential feature that will delight your visitors, optimize the user experience, and improve your conversation rate.

First we add a basic CSS style to scale and position the eventual images:

document.head.insertAdjacentHTML('beforeend', `
  <style>
    .hh {
      position: fixed;
      z-index: 999;
      transform: scale(1.65);
    }
  </style>
`);

Next we add a keydown listener on the document, taking care to exit our callback early if the key was pressed inside an input or form element so we don't hijack real typing inside these elements:

document.addEventListener('keydown', handleHotkey);

function handleHotkey(e) {
  if (e.target.matches('input, textarea')) return;

  // ...
}

Then we'll map the h key to a displayHank function and detect if this key was pressed by checking the code property value on the event:

function handleHotkey(e) {
  if (e.target.matches('input, textarea')) return;

  const commands = {
    'KeyH': displayHank,
  };

  const enteredCommand = commands[e.code]; 
  if (enteredCommand) enteredCommand();
}

Our displayHank function will grab a random image source from an array and insert it into the DOM with a random position obtained via the getRandomPosition function:

function displayHank() {
  const images = [
    '9H8k4mF/200w-1.gif', 
    '09T2y3p/giphy-4.gif', 
    'k3VYFZk/giphy-5.gif', 
  ]

  const image = images[randomIndex(images)];
  const [x, y] = getRandomPosition();

  document.body.insertAdjacentHTML('beforeend', `
    <img 
      class="hh"
      style="top: ${y}px; left: ${x}px"
      src="https://i.ibb.co/${image}"
    >
  `);
}

function randomIndex(arr) {
  return Math.floor((Math.random() * arr.length));
}

Now if we hit the h key, we'll see all these Hank Hill images pop up. Perfect!

It's missing one thing, though... let's map another hotkey to play some soundbites:

function handleHotkey(e) {
  if (e.target.matches('input, textarea')) return;

  const commands = {
    'KeyH': displayHank,
    'KeyS': playSound
  };

  const enteredCommand = commands[e.code]; 
  if (enteredCommand) enteredCommand();
}

function playSound() {
  const baseURI = 'https://res.cloudinary.com' +
  '/dzynqn10l/video/upload/v1644093214/Msc/';

  const sounds = [
    'bwaaah_ckyvbs.mp3',
    'dang-it-bobby_d8hvry_jh4civ.mp3',
    'jpeg_hwasj2.mp3'
  ];

  const audio = new Audio(`${baseURI}${sounds[randomIndex(sounds)]}`);
  audio.play();
}

Now if the user hits the s key, they'll hear a clip of Hank saying one of these phrases:

Bwaaah!
God dammit, Bobby.
Do I look like I know what a JPEG is? I just want a picture of a god-dang hotdog.

Spam these keys quickly for some real fun! 🤠

Full script is here: https://github.com/doctafaustus/hank-hill-js.

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on Twitter, TikTok and I have a new debugging course out now!

HTML

JS Bits Bill — Thu, 18 Nov 2021 16:19:12 +0000

HTML's <dialog> element is a built-in tag to represent a dialog box or modal. It's not just a newer semantic element, it also includes an API and its own special CSS.

Here's a video using `<dialog>` in action:

How to use it

To start, we add our <dialog> HTML:

<dialog>
  <h1>Modal Heading</h1>
  <p>This is the content for the modal.</p>
</dialog>

This won't yet display any visible content, until we call the dialog's .showModal() method:

const dialog = document.querySelector('dialog');

// When we want to open...
dialog.showModal();

Calling this method will programmatically add the open attribute to the element, indicating its state and visibility:

<dialog open>
  <h1>Modal Heading</h1>
  <p>This is the content for the modal.</p>
</dialog>

It will also add a ::backdrop pseudo-element element with these default styles to dim the content behind the dialog:

dialog::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}

If we add a close button, we can hook up an event handler to call the built-in .close() method to un-show the dialog and remove the backdrop:

<dialog open>
  <h1>Modal Heading</h1>
  <p>This is the content for the modal.</p>
  <button id="close">Close</button>
</dialog>

const dialog = document.querySelector('dialog');
const btn = document.querySelector('#close');

btn.addEventListener('click', () => {
  dialog.close();
});

dialog.addEventListener('close', () => {
  // Runs after dialog is closed
  console.log('The modal was closed!');
});

The document also includes the close event which can be leverage to run a custom callback once .close() is called.

As of 11/21, support is available mainly for Edge, Chrome, and Safari Technology Preview with greater support emerging soon! 🙂

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on Twitter, TikTok and I have a new debugging course dropping soon!

Easy console.log() inside one liner functions

JS Bits Bill — Wed, 10 Nov 2021 21:24:48 +0000

Let's say we want to log obj inside this .map() function here:

const arr = [
  { val: 1 },
  { val: 2 },
  { val: 3 }
];

const nums = arr.map(obj => obj.val*2);

Well, dang! Now we have to convert this to a multi-line function, right?

const nums = arr.map(obj => {
  console.log(obj);
  return obj.val * 2;
});

Instead we can use the logical OR (||) operator with console.log() to short-circuit evaluate the return statement:

const nums = arr.map(obj => console.log(obj) || obj.val*2);

This works because console.log() evaluates to undefined so our OR (||) opertator will evalutate the next operand which is the return portion of the function and will return the same result as the original example!

This is especially usefull with JSX where we commonly render components with implicit return statements:

export default function App() {
  return (
    <div>
      <h2>Short-circuit Logging</h2>
      <ul>
        {nums.map((num) => console.log(num) || (
          <li key={num}>{num}</li>
        ))}
      </ul>
    </div>
  );
}

Huzzah! 😃

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on Twitter, TikTok and I have a new debugging course dropping soon!

What JavaScript looked like in 1996

JS Bits Bill — Thu, 04 Nov 2021 21:55:50 +0000

Check out this very early JavaScript guide book I got from eBay. It was released in 1996 and is only the beta edition back when JS was just born! 👶 Definitely a piece of history.

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on TikTok, Twitter and I have a new debugging course dropping soon!

Creating a Text-To-Speech program in Vanilla JS

JS Bits Bill — Fri, 29 Oct 2021 15:01:23 +0000

If you haven't been too traumatized from using a Microsoft browser, you might have discovered Edge's built-in "Read Aloud" feature which will speak the highlighted text out loud right in your browser:

As of now, Chrome has no such feature so we're going to build it ourselves! Here's the code:

function speak() {
  const text = window.getSelection().toString();
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = getFemaleVoice();
  speechSynthesis.speak(utterance);
}

// Optional - select one of several voices
function getFemaleVoice() {
  const voiceIndex = 4;
  return speechSynthesis.getVoices()[voiceIndex];
}

So essentially we just pass in the string from window.getSelection().toString() to a new instance of SpeechSynthesisUtterance and call the .speak() method and that's it!

But we need a way to trigger our speak() function. You could create a Chrome extension to add this functionality to the context menu but I've chosen to use DevTool's "Snippets" just to keep it simple. Snippets are your own custom saved scripts you can paste into your browser and run at will. They're super handy for utility functions like cookie getter/setters, JS libraries like Lodash or jQuery, custom UI modifications, etc.

Once you create a snippet, you can run the code either by clicking "Run Snippet" or pressing Command/Control + Enter. You can also run them directly from the DevTools Command Menu.

Snippets are located in the Sources tab and then on the sidebar click "Snippets":

We just need a bit more overhead to account for the asynchronous loading of speechSynthesis.getVoices() so that our desired voice has loaded before the speech audio runs. The final code looks like this:

if (voiceLoaded()) {
  speak();
} else {
  speechSynthesis.addEventListener('voiceschanged', speak);
}

function speak() {
  const text = window.getSelection().toString();
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = getFemaleVoice();
  speechSynthesis.speak(utterance);
}

function getFemaleVoice() {
  const voiceIndex = 4;
  return speechSynthesis.getVoices()[voiceIndex];
}

function voiceLoaded() {
  return speechSynthesis.getVoices().length;
}

And now we can do the laundry and have our article read to us at the same time! 🔊

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on Twitter, TikTok and I have a new debugging course dropping soon!

Customize any website with your own CSS

JS Bits Bill — Thu, 21 Oct 2021 23:18:22 +0000

How to hide those distracting PrimeGaming notifications!

If you have digital OCD like me then these little red alerts drive you crazy 🤪

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on TikTok, Twitter and I have a new debugging course dropping soon!

3 Uncommon but useful HTML elements

JS Bits Bill — Wed, 20 Oct 2021 14:55:46 +0000

1) `<abbr>`

The abbreviation <abbr> element is used to represent an acronym or abbreviation. If you include a title attribute, the text will be display as a tooltip on hover!

<p>
  The <abbr title="Product Detail Page">PDP</abbr> provides
  information on a specific product.
</p>

2) `<progress>`

The <progress> element will display a progress bar indicator that can be easily controlled with it's value attribute. The JavaScript in this example will incrementally fill our progress bar every 100ms as shown here:

<label for="progress">Progress:</label>
<progress id="progress" max="100" value="0"></progress>

<script>
  const progress = document.querySelector('#progress');
  let val = 0;

  setProgress();
  function setProgress() {
    if (val > 100) val = 0;
    progress.value = ++val;
    setTimeout(setProgress, 100);
  }
</script>

3) `<wbr>`

The word break opportunity <wbr> element will allow you to specify exactly where a line of text should break when there is overflow. For example, if we have a super long line of text like this URL, we can tell the browser where the text should break if it doesn't fit on one line:

<p>
http://is.this.just.real.life.com/is<wbr>/this/just/fantasy/caught/in/a/landslide/no/espace/from/reality
</p>

Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿

I'm on TikTok, Twitter and I have a new debugging course dropping soon!

DEV Community: JS Bits Bill

Ad-Free YouTube With a Custom Player

What It Does

UI Cleanup

Set It Up Yourself

Adding Emoji Search to Google Messages for Web

The Problem

The Solution

How It Works

Try It Out

Simplify Shadow DOM with setHTMLUnsafe

Journey into the Minification Abyss: The Peculiar '0' Placeholder

HTML : Chrome's weird navigational element

What's a Portal?

How To Use

Let's Get Fancy

Closing Thoughts

Coding a Hank Hill Hotkey

HTML

Here's a video using <dialog> in action:

How to use it

Easy console.log() inside one liner functions

What JavaScript looked like in 1996

Creating a Text-To-Speech program in Vanilla JS

Customize any website with your own CSS

3 Uncommon but useful HTML elements

1) <abbr>

2) <progress>

3) <wbr>

Here's a video using `<dialog>` in action:

1) `<abbr>`

2) `<progress>`

3) `<wbr>`