The Thaumatorium:
Where the magic happens

NostraDavid's Knowledge Base - Javascript code snippets and regex



For now () it's just snippets of JS and regex that I use every now and then

I'd use GitHub for that, but I have a tendency to forget GitHub Gist existsโ€ฆ

Online Tools

These are websites/webpages that I use to optimize this site.

Tool name What to use it for
SVGOMG! "SVG Optimizer's Missing GUI", an online SVG optimizer
Google's Closure Compiler A Javascript optimizer - turns modern JS into highly optimized, yet compatible, Javascript. I use this to improve my JS code here and there.
My Sitemap Generator Since this is a fully static site I have to update the sitemap manually. I use this site to automate the generation partially.
Boxy SVG editor Usually I edit my SVG files by hand, but sometimes I need some basic shapes placed.
Bing's robot.txt Tester Use this to check your robots.txt for faults.
Squoosh Google Chrome Labs created this site so you can customize the compression of your image (and compare it with the original). Desktop version is also available.
Diagrams.net (previously Draw.io) Used for diagrams. If you save a file as PNG you can open it as PNG with an image viewer and and with the website or Desktop version

Javascript oneliners

Small scripts that I run in the browser to manipulate a website (like remove my reddit comments from a specific subreddit, for example)

note code
Open all collapsed comments on a reddit comment page
document.querySelectorAll(".expand")
		.forEach(el => {
			if (el.innerText == "[+]") {
				el.click();
			}
		});
Manipulating Unicode strings per code point, not per byte. "".split() gives you bytes, not codepoints Array.from("๐”ฑ๐”ข๐”ฐ๐”ฑ๐”ฆ๐”ซ๐”ค ๐”—๐”ˆ๐”–๐”— #@$%#^$% ๐”ฑ๐”ข๐”ฐ๐”ฑ๐”ฆ๐”ซ๐”ค ๐”—๐”ˆ๐”–๐”—");
Remove all .bighead classed elements (no Array.from() needed, which is what I used before, so I could use map() instead of a for loop)
document.querySelectorAll(".bighead")
		.forEach(el => {
			el.parentElement
				.removeChild(el)
			});
Make console.log use colors
const CONSOLE_STYLE = "background: #800; color: #fff; padding: 2px";
console.log('%cService worker installing', CONSOLE_STYLE);
This opens all are you sure? dialogs for comments, on a profile page of Reddit
let ys = Array.from(document.getElementsByClassName("score likes"))
					.filter(e => parseInt(e.title) < 3)
					.map(e => e.parentElement.parentElement.parentElement)
					.map(el => el.querySelector(`[data-event-action*="delete"]`));
// pick everything after the 77th comment
ys = ys.slice(77, ys.length - 1);
ys.map(e => e.click());
Removing duplicates
const cities = ["Den Haag","Den Haag",
						"Utrecht", "Utrecht",
						"Arnhem", "Arnhem",
						"MiddelBurg", "MiddelBurg",
						"MiddelBurg"];
const uniqueCities = [...new Set(cities)];
// ["Den Haag", "Utrecht", "Arnhem", "MiddelBurg"]
Run a timed loop (handy for interacting with Reddit, because Reddit has a rate limit of 30 requests per minute)
let xs = document.querySelectorAll("[query goes here]");
let i = 0;
let id = setInterval(() => {console.log(i); xs[i].click(); i++;}, 1100);
clearInterval(id);
Remove all comments from a specific subreddit (TheLastOfUs2, in this case)
Array.from(document.getElementsByClassName("subreddit hover"))
							 .filter(el => el.innerHTML == "TheLastOfUs2")
							 .map(el => el.parentElement.parentElement)
							 .map(el => {
								 // subselection apparently works
								 el.querySelector(`[data-event-action*="delete"]`)
							 })
							 .map(el => el.click());
Use on Twitch to track the amount of currently used emotes
const groupBy = (xs, key) => xs.reduce((acc, x) => {
(acc[x[key]] = acc[x[key]] || []).push(x);
return acc;
}, {});
let emoticons = Array.from(document.querySelectorAll(`.chat-line__message--emote[alt]`));
let groupedEmoticons = groupBy(emoticons, 'alt');
let listedEmoticons = [];
for (const key in groupedEmoticons) {
if (groupedEmoticons.hasOwnProperty(key)) {
const el = groupedEmoticons[key];
listedEmoticons.push({key: key, length: el.length});
}
}
listedEmoticons.sort((a, b) => b.length - a.length)
					 .slice(0,6)
					 .sort((a, b) => a.length - b.length)
					 .reduce((acc, el) => `${el.length}x ${el.key} ` + acc);

Regular Expressions

Use in combination with $0/$1/$2... to find and replace text.

note regex
Find the nth comma, via stackoverflow;
Edit the number in between {} to find the nth comma.
,(?=(?:[^,]*,){3}[^,]*$)
Every line that doesn't start with a . via regex;
I was trying to filter bootstrap.css from all non-classes
^((?!^\.).)*$
Filter everything from a : till the end of the line [:].*$
Find non-ASCII letters in vscode;
Great for finding unicode characters in copied code, because Haskell can't handle Unicode in your comments...
([^\x00-\x7F])
hit him up when you pay for WoW Craizler-TarrenMill
WoW BattleTag Cyrstad#2776
Find main content of HTML page <main>\n\t+<section>((\n.*?)*)</section>(\n\t+)</main>
find paragraph tags that aren't closed \t+<p>.*(?<!</p>)$
find all lines that do not contain hede ^((?!hede).)*$

National 'warcry'

Twitch sillyness

Not really a 'warcry', but whenever anyone posts any of these terms other nationals will join in repeating it.

PS: Sometimes it's just an emote spam

Country Warcry
Dutch G E K O L O N I S E E R D
German Sprich Deutsch, du Hurensohn!
Swedish Skรฅรฅรฅรฅรฅl
Danish Skรฅรฅรฅรฅรฅl
Finnish Torille!
Bulgarian KKomrade
Germany DatScheffe

Information for a secret project

I can't show you yet. I'm halfway, but its important it's done.

Character HTML code
๐‘ฅ &#119909;
ษ™ &#601;
ฮฑ &alpha;
ฮฒ &beta;
๐”Ÿ &bfr;
๐”… &Bfr;
๐”  &cfr;
โ„ญ &Cfr;
โ€  &dagger;
โ€ก &ddagger;
๐”ข &efr;
๐”ˆ &Efr;
= &equals;
๐”ฃ &ffr;
ฮณ &gamma;
โ€ฆ &hellip;
๐”จ &kfr;
๐”ฉ &lfr;
โ„ณ &Mscr;
&nbsp;
๐”ฌ &ofr;
รถ &ouml;
๐”ญ &pfr;
โ€ฒ &prime;
๐”ฎ &qfr;
โ†’ &rarr;
๐”ฏ &rfr;
ยง &sect;
๐”˜ &Ufr;
๐’ฐ &Uscr;
รœ &Uuml;
โ€œ &OpenCurlyDoubleQuote;
โ€ &CloseCurlyDoubleQuote;
ฯ€ &pi;