Lewis Nakao lewdev

🖼 Code Editor w/Canvas Boilerplate (1,284b)

I often want to test some code using canvas a lot recently, so I made this template to jump into writing code for canvas of 1080x1080.

The canvas is also always centered and resized to fit the screen which is also very helpful when coding in this editor. It also runs in 60FPS and has S, C, T, R dwitter declarations.

Canvas, WASD/ZQSD/Arrow Key controls, fixed canvas pixels

Boilerplate Code: 251b

Bookmarklet Code: 1,284b

🔎 View Emojis, HTML Entities, 3-hex colors

See all Emojis

data:text/html,<body id=o onload="for(i=0x1f1e6;i<0x1F6FF;i++)if(i<0x1F200||i>0x1F2FF)o.innerHTML+=String.fromCodePoint(i)+' '">

See all HTML entities

data:text/html,<body id=o onload="for(i=0x2190;i<0x25BC;i++)o.innerHTML+=String.fromCodePoint(i)+' '">

⛳ Code Golf Notes

Techniques used to shorten code.

Shorten `fillStyle`

If fillStyle is going to be used more than once, turn it into a reusable function.

j=l=>x.fillStyle=l

Use the back-tick character to call methods with a single string argument:

🤚 Configurable Drag and Drop Assignments

Drag and drop names on the left to put into the chart on the right.

This is useful when you have a fix list of things you want to put in a chart.

This is configurable with text boxes to add, edit, or remove column headers, row headers, or items.

I've always wanted to make something like this, but didn't really look into it.

⌨ Minified JS Keyboard Inputs (WASD, ZQSD, & Arrow Keys)

Source: JS Keyboard Inputs

Code to demonstrate capability (108b)

I reduced the original size from 115b by 7 characters by using repeat.

This is a clever solution where it's finding u, d, l, r in the string using e.which which is the keyboard code and finding the index of it minus 37.

💻 JSON.stringify(window) JSON of window object

I used this recur method to accomplish this from this Stackoverflow answer.

If you want to do this yourself, do it in an about:blank page because it will load the current page and may crash your browser.

function recur(obj, visited = new WeakSet()) {
  if (visited.has(obj)) return {}; // skip already visited object to prevent cycles
  visited.add(obj); // add the current object to the visited set

	<style>html,body{background:#222;display:flex;justify-content:center;align-items:center;height:100%;margin:0}#c{background:white;max-height:100%;max-width:100%}</style>
	<canvas id=c width=1080 height=1080></canvas>
	<script>
	x=c.getContext`2d`,lfr=1,S=Math.sin,C=Math.cos,T=Math.tan,R=(r,g,b,a=1)=>`rgba(${r\|0},${g\|0},${b\|0},${a})`,t=f=nfm=0;


	/* code */z=t=>{
	c.width=c.height=120

	t?0:v=1;

	<meta charset=utf8>
	⌨<input type=number id=c value="8272">
	<input type=number id=d value="11096">
	<button onclick="l('Custom Range',parseInt(c.value),parseInt(d.value))">⛨ Load</button>
	<input type=checkbox id=m> Show numbers

	<p id=j></p>
	<p id=o></p>

	<script>//line: 9

	<h2>isObject returns true for arrays?!?!?</h2>

	<p id=o></p>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script>
	const tests = [{}, [], "z", 1];
	o.innerHTML = tests.map(a => `${JSON.stringify(a)}, isArray=${_.isArray(a)}, isObject=${_.isObject(a)}`).join`<br><br>`;
	/* Yields:
	{}, isArray=false, isObject=true

	<input oninput="fuzzySearch(this.value)">
	<ul id=o></ul>
	<script>
	const list = Object.keys(window);
	const fuzzySearch = searchValue => {
	let buf = "." + searchValue.replace(/[.+?^${}()\|[\]\\]/g, '\\$&').replace(/(.)/g, "$1.*").toLowerCase();
	var reg = new RegExp(buf);
	let newList = list.filter(e => reg.test(e.toLowerCase()));
	o.innerHTML = newList.map(s => `<li>${s}</li>`).join``;
	};