Follow along of Frontend master & Primagen course - FULL Introduction To HTMX Using Golang.

• The Primeagen
• FrontEnd Masters

Declaring a package main

Program execution begins by initializing the program and then invoking the function main in package main. When that function invocation returns, the program exits. It does not wait for other (non-main) goroutines to complete.

package main

Using import statement to bring other packages code to use.

An import declaration states that the source file containing the declaration depends on functionality of the imported package (§Program initialization and execution) and enables access to exported identifiers of that package. The import names an identifier (PackageName) to be used for access and an ImportPath that specifies the package to be imported.

import (
	"html/template"
	"io"
	"strconv"
	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
)

A type definition creates a new, distinct type with the same underlying type and operations as the given type and binds an identifier, the type name, to it.

TypeDef = identifier [ TypeParameters ] Type .

https://go.dev/ref/spec#Type_definitions

type (
	Point struct{ x, y float64 }  // Point and struct{ x, y float64 } are different types
	polar Point                   // polar and Point denote different types
)

type TreeNode struct {
	left, right *TreeNode
	value any
}

type Block interface {
	BlockSize() int
	Encrypt(src, dst []byte)
	Decrypt(src, dst []byte)
}

A struct is a sequence of named elements, called fields, each of which has a name and a type. Field names may be specified explicitly (IdentifierList) or implicitly (EmbeddedField). Within a struct, non-blank field names must be unique.

https://go.dev/ref/spec#Struct_types

// An empty struct.
struct {}

// A struct with 6 fields.
struct {
	x, y int
	u float32
	_ float32  // padding
	A *[]int
	F func()
}

An array is a numbered sequence of elements of a single type, called the element type. The number of elements is called the length of the array and is never negative.

https://go.dev/ref/spec#ArrayType

[32]byte
[2*N] struct { x, y int32 }
[1000]*float64
[3][5]int
[2][2][2]float64  // same as [2]([2]([2]float64))

type Contacts = []Contact

Instead of replacing the inner html, the target could be specified to swap the outer html.

hx-swap

<form hx-swap="outerHTML">

hx-swap-oob

The hx-swap-oob attribute allows you to specify that some content in a response should be swapped into the DOM somewhere other than the target, that is “Out of Band”.

This allows you to piggy back updates to other element updates on a response.

For oob swap, we also need to specify what the original target should be replaced with. Otherwise it will be replaced with null.

https://htmx.org/docs/#debugging

On the console:

htmx.logAll()

hx-delete

The hx-delete attribute will cause an element to issue a DELETE to the specified URL and swap the HTML into the DOM using a swap strategy:

  <button hx-delete="/contacts/{{ .Id }}">Delete</button>

e.DELETE("/contacts/:id",  func(c echo.Context) error {
    id := c.Param("id")
    idNum, err := strconv.Atoi(id)

    if (err != nil) { 
      return c.String(400, "invalid id")
    }

    index := page.Data.indexOf(idNum)
    if (index == -1) {
      return c.String(404, "contact not found")
    }

    page.Data.Contacts = append(
      page.Data.Contacts[:index], 
      page.Data.Contacts[index+1:]...
    )

    return c.NoContent(200)
})

Problem: when pressing delete and a slow request is done, no visual indicator are shown to the user until the row is suddenly removed.

Solution: visual indicator that an operation is in progress.

Echo#Static(prefix, root string) registers a new route with path prefix to serve static files from the provided root directory.

https://echo.labstack.com/docs/static-files

e.Static("/images", "images")
e.Static("/css", "css")

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

https://htmx.org/

An open-source programming language

https://go.dev/

Live reload for Go apps.

https://github.com/cosmtrek/air

High performance, extensible, minimalist Go web framework

https://echo.labstack.com/

Package template (html/template) implements data-driven templates for generating HTML output safe against code injection. It provides the same interface as text/template and should be used instead of text/template whenever the output is HTML.

https://pkg.go.dev/html/template

mise is a polyglot tool version manager

https://mise.jdx.dev/