WebArray - NFHN Reader

Abstractions that fit our minds like jigsaws are fun to play with. While building tools, I have often felt state management at the backend is needlessly complicated especially for very small tasks. Say, a list management or a counter or even a simple email form.

It’s not about the difficulty, but these complicated database setups can drain the joy from building an idea in just a few hours. Especially with ChatGPT, we can now give life to an idea that we have been thinking about in practically no time. So, I wanted to build a tool that speeds up managing small states a breeze.

A web store with granular access control. Free. Anonymous. Available everywhere.

Ruby Demo

Quick Start

Open a browser console & follow along:

Import library

import("https://cdn.toolbomber.com/js/WebArray.min.js")

Generate keys

const keys = await WebArray.generateKeys("USE_YOUR_SEED")

Create instance by passing keys

const wa = new WebArray(keys)

Note: You can skip any of the read, append or replace keys to restrict the instance from doing the corresponding action.

Append

Read

console.log(await wa.read())

Replace

Features

It can do read(), append(item) & replace(item)
Access can be restricted by removing the specific keys in webArray.keys

Use cases

Forms
Email Collectors
Chat Systems
Polls
Surveys
Feedback Collectors
Leaderboards
Status pages

Apps

Parayu

Examples

Shortest Backendless Code

Full frontend and backend app in 11 lines of readable code!

Edit it live in CodePen

<script src="https://cdn.toolbomber.com/js/WebArray.min.js"></script>
<script type="module">
  const fruits = await WebArray.create("fruits")
  document.querySelector("table").innerHTML += (await fruits.read())
    .map(f => `<tr><td>${f.name}</td><td>${f.updatedAt}</td></tr>`)
    .join("")
</script>

<table>
  <tr><th>Fruit</th><th>Unix Time</th></tr>
</table>

Access Control

WebArray instances requires the read, append or replace keys to do the specific actions. To prevent a specific action, initialize WebArray using the keys object excluding the corresponding access key.

Try creating the keys locally, save the seed and use the specific keys required in the page.

WebArray.generateKeys(seed)

For instance keys can be independently created and used to initialise the client for fine grained access control.

const keys = await WebArray.generateKeys("YOUR_UNIQUE_KEY")

delete keys.append
delete keys.replace

const readOnlyClient = new WebArray(keys)

Design Goal

I hope WebArray will be used by folks to test ideas on the fly. It certainly won’t scale, but thats not the point. The trade-off here is rapid prototyping, as WebArray eliminates 90% of the overhead in setting up a data store, allowing you to get your idea off the ground in just a few hours.

ChatGPT + WebArray = 💥

Checkout how a single prompt can generate a fully functional todo app with zero edits.

Note

All remote access functions are async, do remember to use await
A seed can hold a maximum of 800KB of data.
Anyone with the seed can read/modify the data; use keys to protect data
Not intended to be used for anything critical or even in production
Planning to open source the code in future
Regardless of what is used to replace it, WebArray will always return an array.