Posts

Conveniently Drafting Long Messages on Mobile for Small Input Box Apps: Introducing Text Scratch Pad PWA

Text Scratch Pad is a minimalist, high-performance, and offline-first Progressive Web App (PWA) designed primarily for drafting messages on mobile. If you have ever tried to dictate or type a long, thoughtful message directly inside WhatsApp or a mobile AI assistant like Gemini, you know the frustration. The input boxes are cramped, easily triggered, and quite inconvenient when you want to write or dictate a message that takes up more than a few lines. Text Scratch Pad provides a dedicated, distraction-free, large canvas. It acts as a clean "staging ground" for your text. You open it quickly, type or dictate comfortably using your device's native capabilities, copy your finished draft with a single tap, and paste it wherever you need it. 🚀 Try It Now & Install You can access and use the app directly in your browser: 👉 https://textscratchpad.netlify.app/ How to use the app 📱 How to Install it on Your Phone or PC Running the app as an installed Progressive...
Post a Comment
Read more

Using WebSocket, Service Worker, Push and Background Sync Advanced Web APIs in a Plain JavaScript Tutorial Echo Chat Client App

Recently, through a tutorial echo chat client app I developed, I was pleasantly surprised to experience the features of advanced web API of WebSockets, Service Workers & IndexedDB, Background Sync API and Web Push API available in Chromium based browsers like Chrome and Edge. Note that these features are provided directly by the browser and accessible via plain HTML and JavaScript. We do not need external libraries and frameworks to access them. The advanced web API features mentioned above, with the exception of WebSockets, are considered to be part of Progressive Web Apps (PWAs). I need to mention here that I got back to industry-level software development in 2024 after a gap of over 20 years and my first very limited exposure to developing a minimal PWA app with PWA functionality provided by default by Create React App tool, was in March 2024. Details So when I developed this tutorial echo chat client app, I was quite astonished to see how many device platform capabilities we...
Post a Comment
Read more

HTML Refresher and Detailed Study - Part 17

Last updated on 11 July 2026 Post series: Part 1 ,     Prev Part (16) ,     Post Series TOC Contents (sections and/or jump links) Stage-8: Review rounds followed by snapshot folder creation Review rounds for client and server At Browser API level, Service Workers see unique ids for every tab/PWA but main script does not; Ping-Pong approach to identify active tab Broadcast Channel API does not provide list of clients subscribed to it Show push notification if multiple (chat) tabs are open clients.matchAll() list of clients is in order of most recently focused as per MDN git command to show when a particular line of code was added Multi-App workspace with Live Server resulted in URL check for 'client' which would fail in Netlify app When using Live Server for PWA apps in monorepo, change server root to client folder instead of monorepo root Discussion on ways for Service Worker to identify active tab and duplicate connection tab ...
Post a Comment
Read more