Creating a Simple PWA App using the Elephant Technique. Part 1

Background
I have developed a desktop application using a RAD tool. Meaning that you can do almost everything in this tool. Carrying unnecessary baggage. Tons of magic but now and then it breaks when new OS arrives. To avoid this, I plan to move this app to the web. Having close to none experience of web development. This task is significant and may span several years. In this journey I will use the "elephant technique" in order to grasp an entire new technology.

Why use the Elephant Technique?
First time I heard about the "Elephant Technique" was reading a tiny book from "Time Manager". Short it means that you can eat an elephant if you eat it bit by bit. To learn new things, this is a technique that I embrace. To break up an overwhelming task into small pieces.

The Four Pillars I use to decide tools / methods

Security
There are two types of security. The first is a "physical" safety. Like firewalls and other ways to hide assets. In my case I am testing the "secure vault technique". The second type is to make it harder to use, like encrypting.

Speed
I prioritize speed. Not only because it is user friendly, but also being sustainable. Less space and less traffic reduces the environment impact.

Sustainability
To base every single choice by its impact on the environment. Speed, footprint, memory consumption etc. Smaller and faster means "less resources". And even a simpler UI can increase the sustainability by reducing time for the user to navigate and get things done.

Simplicity
Simplicity has different layers. Developing, deploying, maintenance and even marketing. By using "magic extensions" you may make the development simpler, but all the magic can make it harder to maintain in the long run.

Choosing tools

1. Choose the main tool. I did choose to give Go a Go as the foundation. Mainly because it is rather simple and very fast. Being compiled Go enhances security, sustainability, and speed.

2. Then select auxiliary tools. In my case it was obvious to use the "holy trinity". HTML, CSS and Javascript. And of course Postgresql as a military graded database. Known for its speed both for read and store. And its small footprint.

3. Select where to host. I found that Debian on a VPS is easy to both deploy and maintain. For testing purpose I use IONOS VPS for 1GBP a month. And then using Webmin to manage the VPS.

4. Avoid using any form of frameworks and external libraries. Frameworks introduce another layer of complexity to the vanilla languages.. Which means steeper learning curve and harder to maintain several extra syntaxes. Frameworks do a lot of magic at the cost of sustainability and speed.

5. Selecting coding methods. Like DRY, comment code and split up code into chunks. And make as dynamic and maintainable code as possible. Using variable and function names that is easy to understand.

6. Find coding buddies. Forum I use is Go forum and Sitepoint for the web part. And Bard, chatGPT and phind are also good sparring partners.

Start developing

1. HTML Structure (9 MB)
   At a fundamental 'Hello World' level, I've defined the layout's components, laying the foundation for future developments. but defined the parts of the layout, laying a foundation for further developments IMO. Live preview here

2. Responsive (9 MB)
   The next step is to find a layout that fits all screen from mobile to wide screens. Live preview here

3. Navigation (9 MB)
   I have found left navigation with 2 levels suitable for many cases. Two level of navigation is good for most users. Live preview here

4. Theming (9 MB)
   The ability to choose a theme is both to satisfy personal preferences and for usability for the disabled. Live preview here

5. Language support (10 MB)
   Language support can be achieved by many ways. In this case I added a function to the Go HTML template. So each sentence in the template is translated separately. Live preview here

6. Master view / table (11 MB)
   Basically get the scroll position and fetch next 100 rows of totally 25,000 records into the <tbody> element. Live preview here

7. Detail view / form (11 MB)
   Master-Detail is a common way to select a table row and show the details. I discovered a technique that inserts a "sub page" into another page without reloading the entire page. Live preview here

8. CRUD (11 MB)
   To manage data (Create, Read, Update and Delete) using Postgresql, I call the database using REST call via an API. This detour is to increase safety and the speed as the connection to the database and credentials is done "internally" by a totally blocked servers. Live preview

9. PWA (11 MB)
   PWA is an app that runs in a browser and looks like almost like a real app. The first challenge was to "override" the caching when using a multi-user app. The second challenge was to understand that only Chrome on Mac fully supports PWA automatic installations. Chrome on Windows, Edge and Safari only have "manual" installation. I have found no support for PWA in Firefox and Opera. Live preview preferable running on Chrome

1. Part 2 - Login Next challenge is to do a safe login procedure. As safe as possible. Stay tuned...

VPS
All 9 steps are hosted on a 1 GBP per month server from IONOS. The final compiled executable is only 11 MB. All images, scripts, pages etc included.

I welcome feedback on whether my approach is on the right track or suggestions for alternative methods.