Ui | Adharsh M

HTMX - Using hx-swap-oob

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. Also, in some cases #extra-info can be absent. You can achieve this in one simple step ...

HTMX - Using hx-target and hx-swap

The main attraction of HTMX is that it allows us to asynchronously swap the content of an element with server response using hx-swap and hx-target attribute with minimal effort and with less / no javascript. For an html contnet like this <html> <head> <title>HTMX - Using htmx hx-target and hx-swap attribute</title> </head> <body> <div id="content"> <p>Content will be replaced here</p> </div> <button id="btn" hx-get="/get-content" hx-target="#content" hx-swap="outerHTML">Click Me</button> </body> </html> Let’s look at the button attributes ...

HTMX - Overview

HTMX is a javascript library that allows to make web applications more interactive and dynamic. It’s based on hypermedia driven app philosophy. It enhances the capabilities of HTML attributes to make the web applications more interactive. Vanilla HTML attributes does something special only for the following a tag href attribute: navigates to the link form tag action attribute: submits the form to the action url htmx allows other elements to send http requests and update the DOM based on the response, without writing any javascript. ...

CSR and SSR rendering pattern

A UI in context of web applications is the HTML, CSS and JS that is sent to the browser. HTML is the structure of the page. CSS is the styling. JS is for programming browser to manipulate DOM / browser environment. The rendering patterns can be classified based on where are we running the process to generate the html required to display for the user. Things to keep in mind when rendering When rendering UI, there are primarily two factors to consider. ...

Nextjs - Overview

What is Nextjs ? Is it a framework ? Is it a static site generator ? Is it a server side rendering framework ? Is it overhyped ? Yes ! Next js is a framework which uses react as its base. Let’s explore some of it. Nextjs as a framework Routing Nextjs provides a good structure of application by providing directory based routing for pages. We can create a route by creating a file named page.tsx in the app directory and the directory path will follow the route path. ...