Skip to main content

Posts

Showing posts from May, 2025

JavaScript: Select Content and Copy to Clipboard (Snippet)

ℹ️ For Any Element Applicable for input and textarea elements. Also general DOM elements: div p blockquote span strong em Et cetera. 🧑‍💻 Snippet /** * Copies the text content of a DOM element to the clipboard using the Clipboard API. * * Supports input, textarea, and general DOM elements (e.g., div, span). * * @param {HTMLElement} elm - The element whose content will be copied. * @throws {Error} If the argument is not an HTML element. * @throws {Error} If the Clipboard API is unavailable. * @returns {Promise<void>} Resolves when content is copied successfully. * * @example * const input = document.querySelector('input'); * await copyToClipboard(input); * * const div = document.getElementById('textContent'); * await copyToClipboard(div); */ async function copyToClipboard(elm) { const isElement = elm instanceof HTMLElement; if (!isElement) { throw new Error(`${elm} is not a DOM element.`); } cons...

Bagatha Bagpipe 🎻

One night at a pub, in a place where the pub is constructed, Tadhg O'MacMick is inside the pub. "One of your finest peanut!", he shouted to the barman. The barman, being 20 cm from Tadhg O'MacMick, ignores him. Aside from the fact that he is precisely 20 centimetre from Tadhg O'MacMick. It's pretty near, mind you. For instance, watching a car muffler from 20 cm distance, pretty near. Or, placing our face 20 cm in front of a fireplace, pretty near. I made a point. Shortly after, he brings a bowl of peanuts to him. The "he" is Tadhg O'MacMick himself. Thus, he did, what we call, a self-service. "Oi, where did you get those peanuts?", barked the barman in front of Tadhg O'MacMick's outward manifestation. (Tadhg O'MacMick) "Feck! You spat on my peanuts! I took them." (Barman) "You brought your own bowl?" (Tadhg O'MacMick) "What bowl?" (Munching peanuts.) The saliva theatre is quite d...

Oedema

Good day. This post is from my own experience and my intense stare at the subject. Because if it were other people's experience or intense stare, I wouldn't know. Etymology Greek ΟΙΔΗΜΑ (OIDĒMA), meaning "swelling" (noun). From ΟΙΔΕΩ (OIDEŌ) = "to swell" (verb). ⬇️ Roman (Classical Latin) ➡️ OEDEMA . Taken directly from Greek. ⬇️ Medieval Latin ➡️ ŒDEMA . Typographic ligature of "oe" emerged (and other "variative pointers"), started from 8th century (manuscripts from the Carolingian period) and more common in printed Latin texts in the 15th–18th century. ⬇️ English (British): oedema . Directly from Latin's term. English (American): edema . ΟΙΔΗΜΑ ➡️ OEDEMA ➡️ oedema (or edema). Medical Definition 💡 Oedema is fluid retention — typically affecting the legs, feet, or hands — resulting in visible swelling. ✅ Common Cause In this era of ...

JavaScript: Recursively Retrieve All Nested DOM Elements (Snippet)

Hi. 🙂 Let's name the function as crawlElements . /** * Recursively collects all nested element nodes from * a given DOM node. * * @param {Node} node - The root DOM node from which * to begin the search. * @returns {Element[]} An array of all descendant * element nodes found beneath * the input node. * * @example * const root = document.getElementById("container"); * const allElements = crawlElements(root); * console.log(allElements); // Array of nested div, span, etc. */ function crawlElements(node) { let elements = []; const isElement = node && node instanceof Element; const hasChildren = isElement && node.hasChildNodes(); if (!hasChildren) return elements; node.childNodes.forEach((child) => { if (child.nodeType === Node.ELEMENT_NODE) { elements.push(child); elements = [...elements, ...crawlElements(child)]; ...

World Domination: The Villain's Handbook (Skeletor)

After watching He-Man for more than 10 episodes, I sensed something awkward. 🤔 Skeletor with his might and schemes, as a fulltime villain, could not defeat He-Man, the freelance superhero — an unbeatable response squad. The less-clothed, tan, deeper and reverb-enhanced voice Prince Adam — is an instant comedy. And! When we apply that to a real life situation, lifting a sword, shouting, becomes almost nude, then doing his duty as He-Man, is... unfathomably brilliant. Did you notice "he" is a pronoun used to refer to a male? Also, "man". So many gems. Let us see from the overall perspective. Suppose Skeletor won and ruled Eternia. He has little-known management and political skills — he has skills, but certainly not those. Therefore, after Skeletor sits on the throne for 1 full day, we should expect chaos and gradual destruction of Eternia. Imagine: Evil-Lyn : ...

Music: Amazing Grace

Please Enable JavaScript. One verse of Amazing Grace on electric piano. To echo John Newton. 4 August 1725 – 21 December 1807 A quiet rendition by Jp performed through Cakewalk . The rendition above is performed in the key of A — A Major scale (three sharps scale, do = A). Amazing Grace is commonly performed in G Major scale (one sharp scale, do = G). Audio is licensed under CC0 (Public Domain — no restriction) . About Amazing Grace 📜 John Newton wrote the lyrics (hymn). It wasn't metaphor — it was fact. He wrote his hymns in 1772 — after his soul heard and felt, Hey . First published in February 1779 as Olney Hymns — curated work of John Newton and his poet friend, William Cowper (1731–1800). Page 53 in Olney Hymns, the verses that would become known as "Amazing Grace". Amazing Grace lyrics is taken from Hymn XLI (41) verses — page 53 and 54 — of Olney Hymns. Olney is a historic market town in...

CSS: Using Invalid and Valid Pseudo-Class

The title is ambiguous actually, why do we want to use an invalid pseudo-class? 🤔 And is it not valid pseudo-class in CSS plenty? Why? Because. Hi. In form context, we can use :invalid and :valid pseudo-class to notify user if their input is either invalid or valid. The CSS styling for the pseudo-class can be applied to: input tag (with exception) ✅ ❌ Input type exception: button , submit , reset , image , hidden , file , range , color , checkbox , radio . It is because there is no validation is done to those particular types. textarea tag ✅ select tag ✅ Let's try it combined with massive JavaScript and plenty of HTML elements. 🤣 No, it's quite straightforward actually. We can see the example below. Demonstration Please enable JavaScript Please choose Option One Option two Option three Option four ...
Monkey Raptor uses cookies or biscuits 🍪 for analytics, functionality, and advertisements. More info in Privacy Policy