Lewis Nakao lewdev

💻 Address Bar Code Editor Bookmarklet Part 5 (2284b) - Goto Line and Tab In/Out

Features

Press Ctrl + Enter to run code

New Features:

Press Ctrl + L to get prompted to enter a line number which it will go to. It will highlight the entire line for visibility.
- I didn't use Ctrl + G because it interfered with the browser's search again key shortcut.
Highlight Tab or Shift + Tab to indent or remove indents with two spaces.
Ctrl + D duplicate line(s). Works with multiple lines.

💻 Address Bar Code Editor Bookmarklet Part 4 (1047b) - Toggle Full Screen Views

+59b in this update to enable additional toggled views to include a full screen text editor view and full screen iframe view. Sometimes I want to run something in the editor in full screen so this makes the app a bit more usable. Sometimes I even pull this app out as a text editor and the iframe is in the way. So having the text editing part in full screen is useful as well.

I have mentioned this on twitter when I first shared this project, but I realized that I haven't credit

💻 Address Bar Code Editor Bookmarklet Part 3 (988b) - Toggle Horizontal-Vertical Views

Initially when I started this project, I wanted to keep it as tiny as possible, which made me hesistant to add more features. But since I started to care about that less, I started to add more features. First it was showing the cursor's line number, column, selected number of characters, and total character count. Then I added a better "dark mode" and now, I enabled the ability to toggle between horizontal and vertical views. This is especially useful on my rotated monitor. On my main set up, my side monitor is rotated to accomodate fitting a large monitor and a smaller one on my monitor stand.

Here's the code. Copy-paste this into your a

💻 Address Bar Code Editor Bookmarklet Part 2 (876b) - Keeping It Dark

Part 1: 💻 Address Bar Code Editor Bookmarklet (841b)

I just learned about an easy way to enable "Dark Mode" on any web page with:

:root { color-scheme:dark; }

🧪 JEX Part 3: Two-Color Pixel Editor Exports to JEX Data (each byte stores 3 values) in Sharable URL

JEX is a URL friendly Base 69 data storage method I created. JEX is a name that combines the names JavaScript and Hexidecimal.

All JEX characters: ()*+,-.0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~

NOTE: I was about to publish the format before realizing that twitter hates single quotes because they force it to be encoded. I really wanted to keep it at 70, I SWEAR!

These characters are all in order by charCodeAt and skips URL unsafe characters: &/:;=? @#<>[]{}|\^%\

`highlightDiff` compares two strings and

adds a strikethrough attribute to text that was removed and
adds a green highlight over the text that was added.

It's very simple solution that works for most situations.

<pre id=o></pre>

📄 Load Local Text File to HTML Page in JavaScript (+bookmarklet 🔖)

I wanted to be able to load a text file on a page; specifically, a CSV file for my purposes.

The idea is to load a text file and do some data analysis.

The code uses a built-in browser object FileReader and displays the result. Here's a simple implementation:

	<style>:root{color-scheme:dark}
	div {
	margin-left: 100px;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	}
	</style>
	<h1>🏁 Emoji Car Race</h1>
	A super simple racing simulation game for fun and learning.
	<p id=o></p>
	<script>

	<script>
	const showCoord = (eventName, pos, e) => {
	o.innerHTML = `${eventName} "${pos}" at x: ${e.x}, y: ${e.y}`;
	e.preventDefault()
	};

	const onMouseEvent = eventName => e => [
	e => showCoord(eventName, "Left", e),
	e => showCoord(eventName, "Middle", e),
	e => showCoord(eventName, "Right", e),

	<canvas id=c><script>c.width=c.height=1080;x=c.getContext`2d`,F=M=0,onload=U=e=>{requestAnimationFrame(U);if(F&&e<M-2)return;M=Math.max(M+1e3/60,e);T=F/60;if(T*60\|0!=F++)T+=1e-6;E(T)};E=t=>{

	S=Math.sin;

	//Inside a cylinder trick
	//https://youtu.be/6XtrgFPoZ2E?si=ucjJgzsH8UVdsH11&t=64

	c.width\|=0;x.font="2cm'"
	x.fillText('⚽',0,70)
	for(i=70;i--;)for(j=2;j--;)x.drawImage(c,