Ui | Adharsh M

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