Micah asuh

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

What i'm using in streams and while working

Development tools

https://fishshell.com/ - my default shell, i use theme bobthefish
https://www.sublimetext.com/ - my default editor
- Material Theme
- Operator font
- Packages: Emmet, Hayaku, SidebarEnhancements, JS Snippets, GSAP Snippets
- Sublime snippet for comments
- Sublime icon
https://code.visualstudio.com/ - trying to switch, but not yet

`vs` Questions

http://stackoverflow.com/questions/804115 (rebase vs merge).
https://www.atlassian.com/git/tutorials/merging-vs-rebasing (rebase vs merge)
https://www.atlassian.com/git/tutorials/undoing-changes/ (reset vs checkout vs revert)
http://stackoverflow.com/questions/2221658 (HEAD^ vs HEAD~) (See git rev-parse)
http://stackoverflow.com/questions/292357 (pull vs fetch)
http://stackoverflow.com/questions/39651 (stash vs branch)
http://stackoverflow.com/questions/8358035 (reset vs checkout vs revert)

	# Project Policy

	This policy provides a single, authoritative, and machine-readable source of truth for AI coding agents and humans, ensuring that all work is governed by clear, unambiguous rules and workflows. It aims to eliminate ambiguity, reduce supervision needs, and facilitate automation while maintaining accountability and compliance with best practices.

	# 1. Introduction

	> Rationale: Sets the context, actors, and compliance requirements for the policy, ensuring all participants understand their roles and responsibilities.

	## 1.1 Actors

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Angular from Scratch</title>
	<style>
	.my-component {
	font-family: Arial, sans-serif;

	// 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; // ¯\\_(ツ)_/¯

	type ResponseWithData = Response & { data?: any };

	interface Fetcher {
	run(input: RequestInfo, init?: RequestInit): Promise<ResponseWithData>;
	}

	class BasicFetcher implements Fetcher {
	async run(input: RequestInfo, init?: RequestInit): Promise<ResponseWithData> {
	return await fetch(input, init);
	}

	function useMedia(mediaQuery) {
	const match = () => {
	if (!window.matchMedia) {
	return false;
	}
	return window.matchMedia(mediaQuery).matches;
	};

	const [value, set] = useState(match);

	/**
	* Pass in an element and its CSS Custom Property that you want the value of.
	* Optionally, you can determine what datatype you get back.
	*
	* @param {String} propKey
	* @param {HTMLELement} element=document.documentElement
	* @param {String} castAs='string'
	* @returns {*}
	*/
	const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => {

	{
	"name": "_s",
	"version": "1.0.1",
	"scripts": {
	"clean": "rimraf style.css",
	"notify": "notify -h",
	"serve": "browser-sync start --proxy 'my.asuh' --files '*/.css, */.js, .php, /.json, dist/images/*'",
	"imagemin": "imagemin src/images/* -o dist/images",
	"icons": "svgo -f src/images/icons -o dist/images/icons && svg-sprite-generate -d dist/images/icons -o dist/images/icons/sprite.svg",
	"lint-scss": "stylelint 'sass/*/.scss' --syntax scss --config node_modules/stylelint-config-wordpress/scss.js",