Posts

Drawing Across Browser Tabs with JavaScript, Canvas and BroadcastChannel

Image
A few days ago I wrote about using the JavaScript BroadcastChannel API to keep multiple browser tabs synchronized. The basic idea is surprisingly simple: pages from the same origin can create a channel with the same name and exchange messages directly in the browser. There is no WebSocket connection, no polling loop and no server involved. This time I wanted to turn that concept into something more visual. Instead of synchronizing a text field or a counter, I built a small experiment where you can draw in one browser tab and see the same drawing appear immediately in another tab . The result is a cross-tab neon drawing canvas built with: HTML Canvas Pointer Events BroadcastChannel requestAnimationFrame plain JavaScript No framework and no external library are required. The complete experiment is available on CodePen: Draw Across Browser Tabs ✦ Open the Pen in two browser tabs and start drawing in one of them. The second tab should foll...
Post a Comment
Read more

Building an Hourly Temperature Explorer with Astro, TypeScript and Open-Meteo

Image
External APIs are a good way to build small applications that still involve several real-world development concerns: asynchronous communication, data validation, error handling, third-party data structures and UI updates. For this project, I wanted to keep the application deliberately simple. The user provides three values: latitude; longitude; date. The application sends the request to Open-Meteo and displays the hourly temperatures for the selected geographical location and day. There is no weather dashboard, authentication layer or large frontend framework. The objective is to focus on the API integration itself and keep the architecture small enough to understand at a glance. Source code The complete project is available on GitHub: github.com/sfestacatenate/astro-open-meteo-test The application The interface contains a small form with lat...
Post a Comment
Read more

Building AI Prompt Lab with Java 21, Spring Boot and React 19

Image
AI Prompt Lab is a full-stack application I built around a simple idea: managing reusable AI prompts should feel like working with any other structured application asset, rather than keeping them scattered across notes, text files or chat histories. The project combines Java 21, Spring Boot, React 19, TypeScript, PostgreSQL and OpenRouter in a compact architecture that covers the main concerns of a modern web application: authentication, authorization, persistence, external API integration and management of sensitive configuration. I deliberately kept the system relatively simple. The goal was not to introduce architectural patterns for their own sake, but to build a clean application where each technology has a clear responsibility. The project AI Prompt Lab provides an authenticated workspace where users can create, update, organize and reuse prompts for generative AI models. Each user has an independent prompt collection and can configure ...
Post a Comment
Read more

Keep the Screen Awake with JavaScript: The Screen Wake Lock API

Image
Some web applications are designed to stay visible for a long time. Think about a workout timer, a cooking recipe, a presentation, a monitoring dashboard, or a web application being used as a control panel. There is one small problem: if the user doesn't interact with the device for a while, the operating system may dim or turn off the screen. Modern browsers provide a JavaScript API specifically designed for this situation: the Screen Wake Lock API. What does the Screen Wake Lock API do? The Screen Wake Lock API allows a web page to ask the browser to prevent the device's display from automatically turning off because of inactivity. The main JavaScript API is available through navigator.wakeLock . When the application requests a screen wake lock and the browser accepts the request, the display can remain active while the page is being used. This is especially useful for applications where the user needs to read...
Post a Comment
Read more

Keep Multiple Browser Tabs in Sync with JavaScript

Image
A web application can be open in several browser tabs at the same time. The interesting part is that each tab normally has its own JavaScript state . If something changes in one tab, the others don't automatically know about it. Imagine, for example, a simple note editor. You open the application in two tabs and start typing in the first one. Without additional logic, the second tab stays unchanged. Fortunately, JavaScript provides a small browser API designed specifically for communication between different instances of the same application: BroadcastChannel. Creating a channel Creating a channel requires only a name: const channel = new BroadcastChannel("notes"); Any other tab from the same origin can create a channel using the same name: const channel = new BroadcastChannel("notes"); Those tabs can now exchange messages. There is no server involved, no WebSocket connection and no polling loop running in the b...
Post a Comment
Read more

Building a Linear Regression PWA with React

Image
  From a CSV file to an interactive chart, entirely in the browser Linear regression is one of the simplest statistical techniques, but it is also a useful example of how data processing, mathematics and visualization can be combined in a modern web application. In this project, I built a Progressive Web App with React that allows users to upload a CSV file containing pairs of X and Y values. The application processes the data, calculates a linear regression model, displays the resulting equation and plots both the original observations and the regression line. The technology stack The application was created with React and Vite. A few focused libraries handle the main features: Papa Parse   reads and processes the uploaded CSV file. Chart.js   and   react-chartjs-2   display the dataset and regression line. KaTeX   renders the regression equation in mathematical notation. vite-plugin-pwa   adds the web app manifest, service worker and installable P...
Post a Comment
Read more