Console Programming

Marc stayed overnight in Portland after the first leg of his train trip home was canceled. With a bit of free time together I suggested he try programming. We coded in the console and element tabs of the chrome debugger ultimately hacking his favorite svg from the dom api.

The word "console" comes from the '60s era device where one could type commands directly in to a computer such as the IBM 1130. wikipedia

We opened one of Marc's pages and typed command-option-i to open the debugger and start explaining.

Variables hold values and can retrieved by name.

x = 2 + 3 x = 2 + 3 + 4 y = x + 1 z = 2*x + y

Variables hold functions defined in terms of formal parameters and expressions that don't run until called.

w = ( ) => 2*x + 1 w = (n) => 2*n + 1

A dom element selected is named $0 and thus enters javascript space where it can be manipulated. page

b = $0 b

<h3>A ReLocalize Creativity Site</h3>

b.innerText

"A ReLocalize Creativity Site"

b.innerText = "Ward is cool" b.innerText

"Ward is cool"

a complex dom element can be selected and manipulated the same way.

c = $0

Produced by OmniGraffle 7.19.2\n2021-12-30 01:02:28 +0000 ReLocalize Creativity Layer 1 PATHWAYS TOOLS MENTORS METHODS PATTERNS One Idea SEE THE SYSTEMS PROGRAMS PARTNERS RE LOCALIZE One Million Neighborhoods COMMUNICATION PLATFORM CREATIVITY Please click on any of the text in this graphic to explore each topic further.

c.getAttribute('width')

"100%"

c.setAttribute('width','50%')

We discussed how the dom and javascript had their own memories but that these were joined by the dom api as documented on the web. mdn

This edit was not saved in his site. We repeated the modification and then copied the modified svg to pasted into the wiki editor.

c.setAttribute('width','50%') copy(c.outerHTML)