Is This Literate Programming? - 2023-07-13 - Entry 41

So I want to write some JavaScript code, show it here on this page, and have a <canvas> showing the result.

Here goes attempt #1, hand-coding the HTML.

My first code block

Yes, it does. At least in Firefox 114.0.2. Alright, no CDATA blocks. I'll just try to avoid using any angle brackets in my JavaScript code.

Here's a text area full of JavaScript that runs on page load, and runs again when click 'run'.

Change the text and run it! Wow, so beautiful. After a little bit of CSS, and wrapping things in a figure. And setting spellcheck="false" on the textarea.

Alright, what I'm interested in is drawing some lines and curves and stuff, and trying out some algorithms for rounding corners and doing offsets, etc. So let's draw a line!

I weary of having to hard-code the output element ID into the code blocks. Maybe I can have my executeCodeBlock function define an outputElement that's bound to it.

window.executeCodeBlock2 = function(codeBlockId) {
	const programText = document.getElementById(codeBlockId+"-program").value;
	const outputElement = document.getElementById(codeBlockId+"-output");
	eval(programText);
}

I don't really want you messing with this one, so I made it readonly and left off the Re-Run button

So now we can just do...

I could get fancier with this and pass in an object representing the whole editor as 'this' or somesuch.

window.executeCodeBlock3 = function(codeBlockId) {
	(function() {
		eval(this.programText);
	}).apply({
		programText: document.getElementById(codeBlockId+"-program").value,
		outputElement: document.getElementById(codeBlockId+"-output"),
	});
}

Cool, cool. Let's try that style.

Maybe I have messed with this enough for now. Maybe I'll come back and get my tangent-circle algorithm figured out. Time will tell.

Tasks for the future:

Standardize the CSS styles used by these widgets so that e.g. when you switch to the 'high contrast' page style (in Firefox, View menu > Page Style > High Contrast), the 'device panel' colors can change with the rest of the page.