Loading data with one SQL query and disrupting the circular references to enable serialization as a JSON. It sounds simple but is tricky. — The browser is the typical and easiest means for interactive presentation of data. When a research team needs to analyze in some even smarter way historical data stored in a data warehouse, a project-specific web application visualizing results of SQL queries can be quickly developed.

Entities are boring, without them you can sometimes save time — A browser is a convenient tool for data visualization. In a browser, data can be presented in interactive charts or tables with relatively little effort. One can choose any imaginable chart from many ready-to-use options (for example look at https://observablehq.com/@d3/gallery or https://plotly.com/javascript/). …

The magic magnetic cube is a colored variant of the Soma cube puzzle. Let’s solve the puzzle in a browser using JavaScript. — I recently came across an addictive puzzle for kids — Magic magnetic cube. It is a set of 7 blocks with different shapes and colours that have to be assembled into a cube.

Free text entered by users might have typos. How to find approximate, misspelt matches to the searched string? — Advantages and drawbacks of free text Some people at work fill text fields in some forms. Later their colleagues analyse or process the free text in thousands of forms and draw some meaningful conclusions. For example, imagine doctors who fill patients records and also do clinical research using the data collected inside their hospital.

With modern Custom Highlight API you do not have to modify the DOM to highlight text fragments — A Find or Filter field is a indispensable attribute of the web applications visualising text data. When a user searches for a string, it is easy to filter the displayed data but it can be complicated to highlight the matches. Until recently there was only one way — to wrap…

Using import maps for loading HTML templates into JavaScript modules — JavaScript modules can import JSONs import data from '/api/data.json' assert { type: "json" }; but do not yet support imports of HTML templates. To load a template into a module one needs to use a longer code with fetch() and await. const html = await fetch(new URL('./template.html',import.meta.url)) .then(res => res.text()); …

Forget about AMD forever, there is no good reason for using AMD anymore — AMD modules used to be very popular. Lots of web applications and web sites were developed using AMD modules. But lately ES modules have clearly surpassed legacy AMD modules. At the time the most attractive feature of AMD modules was that they, unlike CommonJS modules, could run in a browser…

Impressively convenient API for converting lists into maps — Source data is typically stored in the form of a list. For example, a table of a relational database or an Excel file is a list of rows. …

Let’s explore the newest API for straightforward development of single-page applications — Generally, it is easier to make a user interface as a single-page application (SPA) than as a classical multi-page application. …