ui

When working with web applications, it’s common to navigate between different pages. It’s one of the basic parts of a web application. While using HTMX, it offers a few ways to achieve navigation between pages. Let’s explore them. hx-push-url attribute ( client ) This attribute is used to push a new URL to the browser’s history. This will change the URL without reloading the page. <a hx-get="/about" hx-push-url="true">About</a> or <a hx-get="/about" hx-push-url="/about-page">About</a> Hx-Push-Url header ( server ) We can also use Hx-Push-Url header to push a new URL to the browser’s history....

When using HTMX is a common pattern to write event based actions or ui updates in the client side. It’s a good practice to use javascript as event based scripting system in our client side code. Some events from the server might be required in client side to update the DOM or to trigger some actions. A common pattern to achieve this is to respond a header Server-Event with a value holding the custom event and then using javascript, you can handle the custom event....

As I was exploring htmx, I wanted to try out an interactive workflow with it. A classic example is a data list, modal to create / update data and a delete. Setup with Gofiber Initialize go module and install dependencies go mod init htmx-crud go get github.com/gofiber/fiber/v2 go get github.com/gofiber/template/html/v2 Setup Server html template engine main.go package main import ( "log" "github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2/log" "github.com/gofiber/template/html/v2" ) func main() { // Setup html template engine engine := html....

Htmx allows us to handle async form submissions with ease by using hx-post attribute. In background it will issue a post request to the url specified in hx-post attribute and replace the element with the response. In this post we will try to handle form submissions in razor pages using htmx. Initialize a new razor pages project. dotnet new razor -o htmx-form In Pages/Index.cshtml we setup the layout. @page @using Htmx @model IndexModel @{ ViewData["Title"] = "Home page"; } <div class="row pb-5"> <div class="col"> Form here </div> <div class="col"> Login here </div> </div> Create a partial userform which will be used here and in the post request....

Htmx allows us to handle async form submissions with ease by using hx-post attribute. In background it will issue a post request to the url specified in hx-post attribute and replace the element with the response. Setup with Gofiber Initialize go module and install dependencies go mod init htmx-form go get github.com/gofiber/fiber/v2 go get github.com/gofiber/template/html/v2 Setup Server package main import ( "log" "github.com/gofiber/fiber/v2" "github.com/gofiber/fiber/v2/log" "github.com/gofiber/template/html/v2" ) func main() { // Setup html template engine engine := html....

Setup nextjs with bootstrap Initialize nextjs project with typescript pnpm create next-app --typescript Install bootstrap pnpm add bootstrap Add bootstrap css to app/layout.tsx or pages/_app import "bootstrap/dist/css/bootstrap.min.css"; Create a bootstrap client component components/Bootstrap.tsx "use client"; import { useEffect } from "react"; function BootstrapClient() { useEffect(() => { require("bootstrap/dist/js/bootstrap.bundle.min.js"); }, []); return null; } export default BootstrapClient; Add bootstrap client component to app/layout.tsx or pages/_app layout.tsx might look like this. import BootstrapClient from "@/components/boostrap"; import "bootstrap/dist/css/bootstrap....

This benchmark compares performance of JSON serialization and HTML template rendering. In a server returning HTML or JSON the main difference is with the serialization. So I wanted to know how much difference it makes to return a JSON response vs HTML response. So I just tested json serialization vs html template rendering in Go. Benchmarking Setup The setup is simple, with go test, main_test.go package main import ( "bytes" "encoding/json" "testing" "text/template" "github....

hx-select When the server returns a broad html response, we can use hx-select to select a part of the response and replace the target element with it. For example, consider the following html <body> <div id="main-info"> </div> <div> Some content here </div> <button hx-get="/get-update" hx-target="#main-info" hx-select="#main-info"> update </button> </body> and we get a response from /get-update endpoint like this <div id="main-info"> Main information <p>This is main info</p> </div> <div id="extra-info"> <p>Additional info 1</p> <p>Additional info 2</p> </div> The hx-select will only select the element with id main-info and replace the target element #main-info with it....

Nextjs is a great framework to create multiple page react applications. It can also export the whole app as a static site. This is extremely useful if we want to avoid nodejs server and use another server like nginx to host the site, which is faster and more efficient. To export the site, we need to change the next.config.js file to include the following: const nextConfig = { distDir: "build", output: "export", }; export default nextConfig; This will export the app as a static site to build folder....

When starting to try htmx, It felt nice that we can interact and replace one area with response. As I started to build something practical, the need for updating multiple elements on response increased. Htmx has an attribute hx-swap-oob which helps to achieve exactly this. (OOB - out of bound) For an html section like this <body> <div id="main-info"> </div> <div> Some content here </div> <div id="extra-info"> </div> <button hx-get="/get-update" hx-target="#main-info" hx-swap="outerHTML"> update </button> </body> On clicking update I want 2 elements #main-info and #extra-info to be updated....