DEV Community: Go4WebDev

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

Go4WebDev — Mon, 25 Dec 2023 18:40:34 +0000

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

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.
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.
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.
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.
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.
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

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
Responsive (9 MB)
The next step is to find a layout that fits all screen from mobile to wide screens. Live preview here
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
Theming (9 MB)
The ability to choose a theme is both to satisfy personal preferences and for usability for the disabled. Live preview here
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
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
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
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
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

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.

Embed Chart.js in Go

Go4WebDev — Wed, 11 Oct 2023 06:06:38 +0000

My goals with this "chart demo" was to

Find a solution that can use local API on the server.
Make it as fast as possible.
Work more dynamically using JSON.

Normally you use Javascript fetch() in the browser and hence have to use a "public" API to get data from the database. Creating the charts on the server makes it possible to use "hidden" API requests. This makes it both safer and faster.

Chart.js is one of the smallest Javascript chart libraries available (as far as I know) - about 60KB. So in order to load faster I skipped the CDN part and downloaded it to my server. To further increase the speed I embedded Chart.js into the Go binary.

The ability to fetch JSON from within Go and populate the chart before rendering also makes it more dynamic and way safer than fetch() in the browser.

Here is my attempt to make charts faster using Go. I welcome any clue how to make it even faster.

Flicker free HTML forms using Go templates

Go4WebDev — Sun, 20 Aug 2023 15:30:44 +0000

When it comes to creating and populating HTML forms, there are many choices. The pivotal question: Should the form be crafted on the server or the client side? After some considerations, I've chosen a different approach. Something like "SSR Hybrid method."

How It Works:

The Go render a HTML template form.
During the rendering, data injected into the form.
Labels are translated to the user's language.
The page is then send to memory buffer
Injected into the HTML body.
The form is fetched and integrated into the innerHTML.

The Go func that make this possible sending REST string from Javascript fetch() tsk/view/1

// write form to buffer an send to html body
func get_card(w http.ResponseWriter, module string, mode string, val string) {
    page := module + "_" + mode // form name
    data := json2map4id(module, val) // call the API
    var buf bytes.Buffer 
    tpl.ExecuteTemplate(&buf, page, data) // Render to buffer
    fmt.Fprint(w, buf.String()) // write to html body
}

Benefits of the SSR Hybrid Approach:

Safety The hybrid approach enhances security by reducing exposure of APIs to the internet directly, thanks to Go's compiled nature.

Speed & Flicker-Free Experience By optimizing initial page load times with Server-Side Rendering and subsequently employing JavaScript for seamless updates, users experience fast interactions without flickers.

Maintenance Simplified Combining related forms into single HTML templates streamlines maintenance and curbs complexity, even as your project grows.

Translation Go's HTML templating makes multilingual support simpler. All translations are handled server-side, ensuring global accessibility.

Seamless Form Switching The hybrid technique facilitates dynamic switches between forms, delivering a polished and uninterrupted user journey.

Check the "SSR Hybrid method" here in action. Code snippets attached.

Static 2 level menu in Go

Go4WebDev — Sun, 16 Jul 2023 20:15:00 +0000

Navigation in General
When it comes to designing navigation menus, it's generally recommended to keep the levels of depth to a minimum for optimal user-friendliness.

In my experience, a maximum of two levels deep provides a user-friendly navigation experience and reduces the chances of confusion or getting lost.

A mobile-first approach ensures that the navigation remains user-friendly across different devices and screen sizes.

Using Go HTML Templates
By using Go HTML templates, you can simplify the process of creating navigation menus. Go templates are a powerful feature of the Go language that allows for the creation of HTML pages.

Instead of hard-coding navigation elements into each individual page, you can define a single navigation sub-template that is shared across the entire site.

Go templates provide many functions that enhance the flexibility of navigation implementation. Templating functions like "if" enable you to conditionally render navigation elements based on parameters.

In this micro guide, I will show you how I created a static two-level menu navigation using Go templates.

Translations on-the-fly using Go

Go4WebDev — Sun, 30 Apr 2023 06:14:44 +0000

There are several methods to make a Go web app "multilingual". I chose to store the translations in .po files. One language per file.

The Go html template looks like this:

<p>{{trans "Company"}}</p>

This means that the html template calls a func trans() and translates "Company" into the set language.

The html template is translated by Go web server before the page is rendered without noticeable delay.

Here is both an example and the code behind.

How to call a function from within a Go html template

Go4WebDev — Wed, 29 Mar 2023 15:40:31 +0000

Using Go for web development is not that common, but I find it rather simple to create static web sites and the site often will be faster than other tools like Drupal, Wordpress and PHP.

Web development using Go means that you use at least 3 other “languages”. HTML, CSS and Javascript. The challenge is to get these languages to “talk” to each other. It is rather trivial to put data in a Go html template, but sometimes you want the HTML template to call a function in Go.

This is of course possible, but all sources I have found do not explain this in a simple way. The Go documentation is not that friendly to a newbie. And almost all examples on the net are either at “hello world” level OR too complicated.

Finally I found a solution by using 3 simple steps. Hope this will help somebody that also has been struggling with this.

Write the HTML and call the function with parameters.
Tell the templates to use this function.
Finally create the desired func in Go.

Using Funcs in HTML you can do a lot of things in a HTML template.

Here is the code and live preview https://funcs.go4webdev.org

Switch dynamically between multiple Themes using plain CSS and vanilla Javascript

Go4WebDev — Fri, 16 Sep 2022 08:21:22 +0000

There are tons of "theming" ways out there. But I found them either too simple or too complicated. Or using a "plugin" of some sort. Close to nothing using plain HTML, CSS and Javascript.

The challenges with theming I found was:

Switching between multiple themes
Saving the theme settings locally
Make it as simple as possible (but not simpler)
Include svg icons in theming

The method I use was to

Put the theme in a dataset in the body tag
Save this setting in localStorage
Using CSS variables connected to the body tag
Saving svg icons as "symbol" to make it dynamic

In this micro site you can see the result. The main parts of the code behind is also included.

Comments and suggestions for improvements are welcome

Hosting Several Go sites on one VPS

Go4WebDev — Wed, 22 Sep 2021 18:15:44 +0000

https://hosting.go4webdev.org/howto

Hosting MANY Go executables is different from hosting PHP or similar. You have to set the Go to listen to different ports. And then tell Nginx proxy (redirect) which Go executable to open. This mini tutorial guides you how to set up a VPS and create a "Go Hosting".

Webmin is a tool to manage the entire VPS Host. Amongst other things, upload, config and monitor.

By using Cloudflare in front as an extra proxy you can add several cool things. Amongst others can Cloudflare handle the SSL certificate for your entire server if you want. The sites are cached automatically and if you want Cloudflare can compress your code for faster rendering.

When adding systemd support to each Go executable you make it simpler to restart Go. Both manually and automatically.

If you host only ONE Go executable, there is no need for Nginx. Just use port 80 and 443 as usual.

Website by Go

Go4WebDev — Mon, 20 Sep 2021 09:31:24 +0000

I have run a couple of Drupal and WordPress sites for several years. I always had a hard time understanding the logic behind these tools as soon as I could do anything but add a plugin.

So it was refreshing to test Go to create a website. Go html templates have a touch of Angular and an ounce of React, but way simpler and above all faster.

I still consider myself as a beginner both using Go and Web developing. The Go part of this website is about 10 MB of compiled code replacing both Apache, Nginx and frameworks.

As there are a few tutorials about Go as a web "framework", I decided to document my efforts. And the result is in this mini tutorial: https://static.go4webdev.org

Any feedback is welcome!