Lewis Nakao lewdev

`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:

🔼 Turn a webpage into a detab window (no tabs, buttons, bars) as a #bookmarklet

Save this in a bookmark URL and click on it when you land on the page you want to turn into a clean window.

javascript:window.open(location.href,"detab","toolbar=0");window.close()

🎮 Download CSV of Steam Purchases (473b)

Much like my script to Download Steam Library List, I created a similar script to download your list of Steam Purchases as a CSV file.

It's not perfect because you'll have to filter out the refunds and other types of transactions. Someone on reddit requested me to make it and I figured it was something I wanted to do myself so I did.

🏪 Visit Purchase History Page

Your Purchase History

My JS1024 Annual JavaScript Golfing Competition Submission

I'm happy to have something to submit to the JS1024 2024 competition. I just found out about the competition and realized that I have something to submit even if it's not aligned with the theme. I'm pretty sure I started and finished the project during the competition. See my submission here.

Title: 🏗 Stacking Game

Short Description: Press Space or tap on mobile! See how high you can go in this stacking game!

My Submission (1020b)

🏗️ Stacking Game

Date: June 29, 2024

🕹️ Play Now

Whenever I see a simple game, I start thinking about its mechanics and how it might be implemented.

So then when it seemed like a good small weekend project, I went for it. I got it down to its bare mechanics.

In future iterations, I could add animations, backgrounds, title screen, scoreboard, etc.

🧙‍♂️ Calculating XP to Level for RPG Games

I was curious on how level was determined for games and I found an awesome article about it by Jake Lee.

But one important thing was not explained in this article, how is it implemented in JavaScript?!

He has provided implementations in a Google Sheet and Github Gist though. So that may be your preferred method.

The XP and Level formulas in JavaScript

💻 Address Bar Code Editor Bookmarklet (841b)

Copy-paste this into your address bar:

data:text/html,<title>code</title><link rel=icon href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 99 99%22><text y=%221em%22 font-size=%2272%22>&%23128187;</text></svg>'><textarea id=d spellcheck=false onkeypress=e=event;k=e.keyCode;(e.ctrlKey&&k==13)||k==10?f.srcdoc=d.value:0 style=resize:none;filter:invert(><p id=o></p>%0d<script>%0do.innerHTML = 0;%0d</script></textarea><iframe id=f></iframe><p id=p style=position:fixed;bottom:1;color:white></p><script>D=0,d.onkeyup=d.onclick=n=>{clearTimeout(D),D=setTimeout(_=>{A=d.selectionStart,B=d.selectionEnd,V=d.value,E=V.substr(0,B).split`\n`,p.innerHTML=`Ln:${E.length}, Col:${E.pop().length+1}, ${A==B?'Pos:'+B:'Sel:'+(B-A)}, Len:${V.length}`},99)}</script><style>*{box-sizing:border-box;margin:0}textarea,iframe{width:50%;height:100%;vertical-align:top}

In the latest iteration my code editor, I've made big practical improvements to

🌱 Random Seed Methods

I wanted to see what's out there and here's what I found.

I think this is decent set to study, but I'm mainly interested in the smallest implementation and not worried about if it's computationally random.

@KilledByAPixel (source)

rand = max => Math.sin(++seed)**2 * 1e9 % max

	<table><tbody><tr id=o></tr></tbody></table>
	<script>
	o.innerHTML = [window, Set, Array, Math, Number, RegExp, Date]
	.map(M=>`<td><h3>${M.name \|\| M}</h3><br>${Reflect.ownKeys(M).map(a=>JSON.stringify(a)).join`<br>`}</td>`).join``;
	</script>
	<style>*{vertical-align:top}