Lewis Nakao lewdev

👩‍💻 JSON Object Paths

I had a problem with looking at an object and seeing all of its possible object paths.

Instead of looking through massive JSON objects, I created this tool to see it all easily.

📋 Paste your JSON data into the textarea

This will also display errors if your JSON is not properly formatted.

On the right column, it will display the possible attributes as well as a search filter tool.

📅 Tiny Calendar App

I wrote a tiny app that simply displays a calendar and the ability to traverse the calendar by month.

Copy-paste into address bar (582b)

data:text/html,<body onload="d=new Date();M=d.getMonth(d=new Date());Y=d.getFullYear();p=_=>{d=new Date(Y,M,1,d.getHours());Y=d.getFullYear();M=d.getMonth();s=d.toLocaleDateString(0,{month:`long`,year: `numeric`})+`<table width=100%><tr>`;a=d.getDay();while(a--)s+=`<td>`;while(M==d.getMonth()){s+=`<td>${d.getDate()}`;d.setDate(d.getDate()+1);a=d.getDay();if(!a)s+=`<tr>`}o.innerHTML=s};p()"><button onclick=M--;p()>-</button><button onclick=M++;p()>+</button>
<p id=o></p><style>*{margin:0;font-size:9vh}td,p{text-align:center;height:1.3rem}button{width:50%;display:inline-block}

🎎 Typing Japanese Practice

This app allows you to practice typing the romanized Japanese in 3 different sets: A-NA, HA-WA, and Digraphs.

Next features

Katakana sets
Stores times and "completion" ratings (bronze, silver, gold)
Writing Homework Random Generation
Vocabulary writing

👨‍💻 Matrix Digital Rain

I was really curious about implementing the Matrix Digital Rain effect and looked at many implementations.

The best implementation I saw was Digital Rain by javascriptacademy.

I think the others were a little overly complicated.

Naturally, I had to code golf it and make it work in an address bar:

	<p id=o></p>
	<script>
	const capCamel = s => (
	// capitalize the first character
	s.charAt(0).toUpperCase()
	// Split by capital letter
	+ s.substring(1).split(/(?=[A-Z])/).join` `
	);
	o.innerHTML = capCamel("splitSelectionByLine"); //Result: "Split Selection By Line"
	</script>

	<!doctype html>
	<head>
	<title>itch.io Bundle for Ukraine list of games</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css" integrity="sha512-o/MhoRPVLExxZjCFVBsm17Pkztkzmh7Dp8k7/3JrtNCHh0AQ489kwpfA3dPSHzKDe8YCuEhxXq3Y71eb/o6amg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	</head>
	<body>
	<div class="container mt-3">
	<!--
	Data Source:
	Bundle for Ukraine

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

	<div class="container my-4">
	<h1>❌ Canceling Plans Excuse Generator</h1>

	<div class="card card-body p-4 m-4">
	<div id="o"></div>
	</div>

	<div class="text-center my-3">

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>ACE in Action</title>
	<style type="text/css" media="screen">
	/*
	#editor {
	position: absolute;
	top: 0;
	right: 0;

	<!doctype html>
	<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
	</head>
	<style>
	.notify {
	position: fixed;
	top: -5rem;
	left: 20%;
	width: 60%;

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

	<style>
	a { text-decoration: none }
	ul { margin-bottom: 0 }
	</style>

	<div class="container mt-2">
	<div class="justify-content-between d-flex">
	<input id="searchField" type="text" class="form-control w-100 mb-2" placeholder="Search..." oninput="render()"/>