Mode Lang
Taithai Open-Source · app

app — Web Helper Toolkit

app is my personal collection of small, reusable helpers and plug-ins for web projects — starting with token.js for client-side token flows, and growing into a minimalist toolkit for future apps.

Open-source Vanilla JS Copy & paste friendly

What is this project?

app is a small, opinionated toolbox where I store scripts that I find myself reusing across multiple projects. Instead of rewriting logic for every new idea, I centralize them here and keep them simple, framework-free, and easy to understand.

Vanilla JavaScript Front-end helpers Static-site friendly
Reusable. Drop the helpers into any static site or SPA with minimal setup.
Practical. Every helper solves a real problem I had in my own projects.
Simple. No build step required — just HTML, CSS, JS.
Open. Learn from the code or adapt it to your needs.
Current module: token.js

token.js is a tiny client-side token manager using localStorage, useful for lightweight access flows:

  • One-time access to a simple “protected” page
  • Discouraging direct URL sharing without going through a start page
  • Quick gating for demos, prototypes, or mini tools

token.js · Quick Start

token.js helps you create and validate tokens purely in the browser. No backend is required.

1. Include script
<script src="token/token.js"></script>
2. Create token & redirect
Example: from a landing page
<script>
  Token.create({
    target: "secret.html",      // page to go to
    extraQuery: "from=landing"  // optional query string
  });
</script>
3. Validate token on target page
<script src="token/token.js"></script>
<script>
  // Optional (via CSS): body { display: none; }

  if (Token.validate()) {
    document.body.style.display = "block";
  } else {
    window.location.href = "index.html"; // or any fallback page
  }
</script>

Roadmap

  • Create base project and token.js module
  • Add more helpers (random utilities, DOM helpers, input validation)
  • Support ES Modules for modern bundlers
  • Add tests and more detailed examples
  • Optionally publish as an npm package

About the developer

Hi! I'm Danupol Saengnakhon (Taithai) — a student who enjoys experimenting with web technologies and building tiny tools that make my own projects easier.

This repository started as a “toolbox for myself”, but if you find something useful here, feel free to copy, learn, and improve it.

Taithai Open-Source · app

app — กล่องเครื่องมือ Web Helper

app คือโปรเจกต์ที่ผมใช้เก็บโค้ดตัวช่วยเล็ก ๆ สำหรับเว็บ เช่น token.js สำหรับจัดการโทเคนฝั่งลูกข่าย ตั้งใจให้เป็น “ชุดเครื่องมือ” ที่เอาไปใช้ซ้ำกับโปรเจกต์ในอนาคตได้ง่าย ๆ

โอเพ่นซอร์ส Vanilla JS ล้วน เน้นใช้งานจริง

โปรเจกต์นี้คืออะไร?

app เป็นเหมือนกล่องเครื่องมือเล็ก ๆ ที่ผมรวบรวมสคริปต์ หรือฟังก์ชันที่ใช้ซ้ำบ่อยในเว็บโปรเจกต์ต่าง ๆ แทนที่จะเขียนใหม่ทุกครั้ง ก็ปรับให้สะอาด เข้าใจง่าย และเก็บไว้ที่นี่ที่เดียว

Vanilla JavaScript ตัวช่วยฝั่ง Front-end ใช้กับเว็บ Static ได้
นำไปใช้ซ้ำง่าย. แค่ก๊อปโฟลเดอร์ไปวางก็พร้อมใช้งาน
แก้ปัญหาจริง. ทุกตัวช่วยเกิดจาก Pain Point ที่เจอจริง
ไม่พึ่งเฟรมเวิร์ก. แค่ HTML, CSS, JS ธรรมดา
เปิดโค้ดให้ดู. อยากเรียนรู้ ปรับแต่ง หรือดัดแปลงได้เลย
โมดูลปัจจุบัน: token.js

token.js เป็นตัวช่วยจัดการโทเคนเล็ก ๆ ที่ใช้ localStorage เหมาะกับงานเบา ๆ อย่างเช่น:

  • ให้เข้าหน้าบางหน้าได้ครั้งเดียว (one-time access แบบง่าย ๆ)
  • กันการแชร์ลิงก์ตรง โดยบังคับให้เริ่มจากหน้าเริ่มต้นก่อน
  • ล็อกหน้าทดสอบ / เดโม / เครื่องมือเล็ก ๆ แบบเร็ว ๆ

token.js · วิธีใช้งานแบบเร็ว

token.js ช่วยสร้างและตรวจสอบโทเคนได้จากฝั่ง browser เลย ไม่ต้องมี backend ก็ใช้ได้

1. เรียกใช้สคริปต์
<script src="token/token.js"></script>
2. สร้างโทเคน & เปลี่ยนหน้า
ตัวอย่าง: จากหน้า Landing
<script>
  Token.create({
    target: "secret.html",      // หน้าปลายทาง
    extraQuery: "from=landing"  // ถ้าอยากส่ง query เพิ่ม
  });
</script>
3. ตรวจโทเคนในหน้าปลายทาง
<script src="token/token.js"></script>
<script>
  // ตัวอย่าง (อาจซ่อน body ไว้ใน CSS ก่อน)
  // body { display: none; }

  if (Token.validate()) {
    document.body.style.display = "block";
  } else {
    // ถ้าโทเคนไม่ผ่าน / ถูกใช้ไปแล้ว
    window.location.href = "index.html";
  }
</script>

Roadmap (แผนในอนาคต)

  • สร้างโปรเจกต์พื้นฐานและโมดูล token.js
  • เพิ่มตัวช่วยอื่น เช่น random utils, DOM helpers, input validation
  • รองรับ ES Module เพื่องานสาย modern build tools
  • เพิ่มตัวอย่างโค้ดและ test ง่าย ๆ
  • พิจารณาปล่อยเป็น npm package ในอนาคต

เกี่ยวกับผู้พัฒนา

สวัสดีครับ ผม Danupol Saengnakhon (Taithai) สนุกกับการลองของใหม่บนเว็บ ชอบทำเครื่องมือเล็ก ๆ ที่ช่วยลดงานซ้ำซ้อนเวลาเริ่มโปรเจกต์ใหม่

โปรเจกต์นี้เริ่มจากการทำกล่องเครื่องมือใช้เอง แต่ถ้าใครเอาไปต่อยอดได้ ผมก็ยินดีมากครับ 💛