Michal Čaplygin myfonj

This gist is a simple no-brainer description of the 3 ways (actually 2.5) the Web handle events.

`<tag onclick />`

The declarative inline HTML event listener is mostly an indirection of DOM Level 0 events, meaning this simply uses the equivalent of tag.onclick = listener behind the scene.

Example

click me

Welcome to the wacky world of almost 30 years of web

All of the following values for the <script type=" ••• "> will cause inline or external JavaScript to execute:

Value	Note
`""`	The default value of `script.type` (eg: no `type` attribute present)
`"text/javascript"`	The official JavaScript MIME type
`"application/javascript"`	Legacy MIME type from when semantics mattered
`"text/x-javascript"`	Legacy MIME type from before JavaScript was accepted as a valid MIME type

This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.

The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.

However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".

That being said, as an exercise to see if I could surf it via JS, I've created this ti

	// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks.
	// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/)
	(() => {
	const SHOW_SIDES = false; // color sides of DOM nodes?
	const COLOR_SURFACE = true; // color tops of DOM nodes?
	const COLOR_RANDOM = false; // randomise color?
	const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com)
	const MAX_ROTATION = 180; // set to 360 to rotate all the way round
	const THICKNESS = 20; // thickness of layers
	const DISTANCE = 10000; // ¯\\_(ツ)_/¯

	storybook:test-runner8:
	image: mcr.microsoft.com/playwright:v1.39.0-jammy
	stage: build-and-test
	artifacts:
	expire_in: 2 weeks
	when: always
	paths:
	- .storybook-images/__diff_output__/
	- .storybook-images/__received_output__/
	before_script:

	{
	"Gore": [
	"Blood", "Bloodbath", "Crucifixion", "Bloody", "Flesh", "Bruises", "Car crash", "Corpse", "Crucified", "Cutting", "Decapitate", "Infested", "Gruesome", "Kill (as in Kill la Kill)", "Infected", "Sadist", "Slaughter", "Teratoma", "Tryphophobia", "Wound", "Cronenberg", "Khorne", "Cannibal", "Cannibalism", "Visceral", "Guts", "Bloodshot", "Gory", "Killing", "Surgery", "Vivisection", "Massacre", "Hemoglobin", "Suicide", "Female Body Parts"
	],
	"Drugs": [
	"Drugs", "Cocaine", "Heroin", "Meth", "Crack"
	],
	"Clothing": [
	"no clothes", "Speedo", "au naturale", "no shirt", "bare chest", "nude", "barely dressed", "bra", "risqué", "clear", "scantily", "clad", "cleavage", "stripped", "full frontal unclothed", "invisible clothes", "wearing nothing", "lingerie with no shirt", "naked", "without clothes on", "negligee", "zero clothes"
	],

	import z from "zod";

	export async function safeFetch<T>(
	schema: z.Schema<T>,
	input: RequestInfo,
	init?: RequestInit
	): Promise<T> {
	const response = await fetch(input, init);

	if (!response.ok) {

	workflow:
	rules:
	- if: $CI_COMMIT_BRANCH == "main"

	image: node

	pages:
	variables:
	# Replace this variable with your own path. Just copy everything right behind the domain gitlab.io. Don't forget to add
	# the slash at the beginnig.

	/*
	Functionality – when executed, these lines are copied to the clipboard:
	1. The URL of the current web page.
	2. The title of the current web page (as originally written)
	3. The title of the current web page (converted to sentence case with a crude algorithm)
	4. Optionally: The currently selected text (if any).

	Installation: Create a bookmark whose URL is the code below (including `javascript:{···}`):
	– Tested in Chrome and Safari.
	– Both browsers can handle URLs with multiple lines.

	// Can you make this faster? Ping me.

	const escapeHtml = (function () {
	const serializer = new XMLSerializer ();
	const attr = document.createAttribute ( 'attr' );
	const re = /[&<>"]/;
	return function escapeHtml ( str ) {
	if ( !re.test ( str ) ) return str;
	attr.value = str;
	return serializer.serializeToString ( attr );