BRAIN.md Dump

TODO / RESEARCH

• CDN for code window with correct colours
• Turn off scrollbar colours for GitHub changes in VSCode
• Go through CodePens https://codepen.io/your-work for code / terminal
• Research external server python -m http.server
• VSCode custom hotkeys

DUMP

Viewports

• Full width, 100% zoom, 1.5dpr, 1280x559

• Full width, 150% zoom, 2.25dpr, 853x373

• Half width, 100% zoom, 1.5dpr, 639x559

• Half width, 150% zoom, 2.25dpr, 426x373

• Total height of default keyboard is 192px in a fixed 200px height container

• Total height of default grid is 328px in a flex grow that is about 355px height for normal browser

• Both need 517px height minimum viewport

PIXEL 7 Portrait 412x783 2.63dpr (screen size 412x915) Landscape 864x304 2.63dpr (screen size 412x915)

Andrew i12 414x895 Nan i11 390x844 Use blisk

lost 130h to web address bar on pixel 7

body { min-height: -webkit-fill-available; }

WITH NAVBAR = 412x752

SEB Chrome 1920x919 (1.0dpr) (screen size 1920x1080) Pixel 412x784 (2.63dpr) Messenger 412x792 (2.63dpr)

DUMP

@media (prefers-color-scheme: dark) { :root { background: #111; filter: invert(1) hue-rotate(180deg); }

img, video { filter: invert(1) hue-rotate(180deg); } } CHEAP DARK MODE https://polypane.app/blog/the-complete-guide-to-css-media-queries/

Miscellaneous

• You can download your bookmarks as an html file and the links will be clickable if you open that file in your browser
• Install Node.js on Windows here

You can use .then() callbacks to run synchronous code after the resolution of a promise so you don’t need to make lots of async functions that check on the promise, just call all needed functions within the .then(), and consider passing the result of the promise as an argument to those functions to avoid them looking for a global that hasn’t been set by the promise. Check out pyodide-file in html-demos

#

If you have to work with borders instead of outlines, you are best off using a transparent border on the default element, so that state changes don’t cause realignment due to reduction in the internal space of the element when a border-box border is applied, a border in a border-box is just coloured padding

input {
  all: unset;
  width: 300px;
  height: 40px;
  text-align: left;
  align-items: center;
  color: var(--colour-font);
  cursor: pointer;
  margin: 0px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

input:hover {
  border: 1px solid var(--colour-orange);
  outline: 1px solid var(--colour-orange);
  outline-offset: 2px;
}

input:focus {
  border: 1px solid var(--colour-orange);
  outline: 1px solid var(--colour-orange);
  outline-offset: 2px;
}

JavaScript

• Learn import / export / requires / define
• Learn CDNs and package structure
• README and info about cdns being essentially a server package with multiple files

<div id="toaster" style="visibility: hidden;"></div>

#toaster {
  width: 240px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  font-size: 14px;
  color: rgb(0, 0, 0);
  border-radius: 8px;
  background-color: rgb(255, 255, 255);
  z-index: 999;
  position: fixed;
  left: 50%;
  top: 11%;
  transform: translate(-50%, -0%);
}

// Toasting function to add a temporary toast message
function showToast(message) {

    const toaster = document.getElementById('toaster');
    toaster.textContent = message;
    toaster.style.visibility = 'visible';

    // Hide toaster after 3 seconds
    setTimeout(() => {
        toaster.style.visibility = 'hidden';
        toaster.textContent = '';
    }, 1200);

}

// Get the CSS styling for the current theme
function getThemeCSS() {
  let theme = editor.getTheme();
  let name = theme.split('/')[2]
  let selector = `.ace-${name}`
  let element = document.querySelector(selector);
  var computedStyle = window.getComputedStyle(element);
  return computedStyle
}

// Get the CSS styling for the gutter for the current theme
function getGutterCSS() {
  let selector = `.ace_gutter`
  let element = document.querySelector(selector);
  var computedStyle = window.getComputedStyle(element);
  return computedStyle
}

++value vs value++

editor.setAutoScrollEditorIntoView(true)

https://ajaxorg.github.io/ace-builds/demo/scrollable-page.html

parentElement.appendChild(editor.completer.popup.container)

learn important, relative and absolute

you can make --variable-name: value; in css for a specific class and it wont’t be globally available, can make global or local scope

Gotten quite a lot of value out of below

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow: auto;
  background-color: var(--background-colour);
  color: var(--foreground-colour);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  scrollbar-color: var(--scrollbar-colour);
  box-shadow: inset 0 0 0 var(--debug-outline) var(--foreground-colour);
}

#page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background-colour);
}

.toolbar {
  width: 100%;
  height: 48px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0px 32px;
  gap: 16px;
  display: flex;
  justify-content: left;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  box-sizing: border-box;
  background-color: var(--c2);
  scrollbar-color: var(--scrollbar-slider) var(--c2);
}

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px 32px;
  flex-grow: 1;
  flex-shrink: 1;
  background-color: var(--background-colour);
}

.hidden {
  display: none !important;
}

<style>
  #tools {
    all: unset;
    bottom: 0;
    right: 0;
    position: absolute;
    height: 48px;
    width: 48px;
    box-sizing: border-box;
    margin: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
  }
</style>

<div id="tools">
  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF">
    <path
      d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/>
  </svg>
</div>

// Constants, Variables and Declarations
var currentLayout = 1;
const maxLayout = 4;

// Toggle layout of #page
function toggleLayout() {

  tools.classList.remove(`layout-${currentLayout}`);
  currentLayout = currentLayout % 4 + 1;
  tools.classList.add(`layout-${currentLayout}`);

}

CSS

YOU CANNOT PLACE AN ELEMENT OUTSITE OF ANOTHER AS A CHILD, THEY NEED TO BOTH BE IN SAME PARENT AND THEN YOU CAN ABSOLUTE PLACE RELATIVE TO THE NEW PARENT, PLACING THE ELEMENT ON TOP OF ITS SIBLING AND OUT OF THE LAYOUT FLOW OF THE NEW PARENT

Adding Batch Files to PATH

• You can add .bat files to path for cmd, but you will need to also do this separately for powershell
• Any scripts in that folder can be called by name
• Eg. dispatcher.bat => in cmd just type dispatcher
• It is advised not to have too many if on PATH
• Currently running a system in which a dispatcher searches for a deeper subfolder, as subfolders are not included on PATH, and then you can call a script via enumeration integer
• currently at C:/bscripts
• Current use is to open BRAIN.md, and to create an HTML template folder with html / css / js file

JavaScript Cheat Sheet

// ===== Short Conditionals =====
const min = a < b ? a : b;          // Ternary if
const valid = x && y;               // Short-circuit AND
const result = x || defaultValue;   // Short-circuit OR

// ===== Spread & Rest =====
const arr = [1, 2, 3], more = [4, 5];
const merged = [...arr, ...more];  // Merge arrays
const copy = [...arr];             // Copy array
const { a, b, ...rest } = obj;     // Rest operator for objects

// ===== Destructuring =====
const [first, second] = arr;       // Array destructuring
const { key } = obj;               // Object destructuring
const { key: alias } = obj;        // Rename during destructuring

// ===== Default Parameters =====
function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

// ===== Optional Chaining & Nullish Coalescing =====
const value = obj?.prop?.nested ?? "Default"; // Avoid errors

// ===== Array & Object Tricks =====
arr.forEach(item => console.log(item)); // Loop
const mapped = arr.map(x => x * 2);     // Transform
const filtered = arr.filter(x => x > 0);// Filter
const found = arr.find(x => x > 10);    // Find
const sum = arr.reduce((a, b) => a + b, 0); // Reduce

// ===== Short Function Syntax =====
const add = (a, b) => a + b;  // Arrow function
const obj = { fn() { return 42; } }; // Method shorthand

// ===== String Tricks =====
const str = `Hello ${name}`;  // Template literals
const trimmed = str.trim();    // Trim whitespace

// ===== Number Tricks =====
const fixed = num.toFixed(2); // 2 decimal places
const rand = Math.random();   // Random 0-1

// ===== Short Timeout & Interval =====
setTimeout(() => console.log("Done"), 1000);
setInterval(() => console.log("Tick"), 1000);

2025/07/03

• All objects in JavaScript are considered ‘truthy’ even if empty
  • This means empty arrays are truthy