Blogs

HTMX - Using hx-select and hx-select-oob

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. so the result will be ...

Nextjs - Export as static site

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. The build folder will contain all the static files, which can be hosted using any static hosting solution. ...

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

Github - Open repo in web editor

Using a web browser, we can open up a vscode like ide environment with our codebase ( from repo ) and throw in some edits. Goto your repo ( in github.com ) Select the url and change github.com into github.dev You get your vscode ide opened with all your repo files listed. After making edits goto Source control tab and manage changes ( stage changes ). Enter the commit message and Click commit & push, your changes are now reflected in the repo. you can manage branches and merge request through the web ide. there are few other services which allow us to edit repo on the web ide ...

Chrome - How to override the http response

In chrome you can rely on dev tools to do a lot of things, one of them is mocking / overriding the http response value. Go to network tab, find the http request you want to override. ( you can goto https://httpbin.org/ to try this out ) Right click on the request and click open in sources panel. Click on the source and click override content. On the top it will show select a folder to store override files in, click select folder. Select the folder and click allow on the prompt. Your sources tab will have updated source with the folder open and enable local overrides checked. Edit the value and refresh the page / reload the request, It will use the overriden values.

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

Package managers

Package managers allow to manage a project’s dependancies run configurations etc.. mostly in an isolated way. They can also manage versioning related to these packages. Here are managers for few different languages Nodejs bun, pnpm, yarn, npm Go go mod Rust Cargo C# dotnet Nuget Python pip What do they do? Let’s see how we share code without package managers. We write code and share it with others by copying the code and pasting it in their project. To manage the versioning, we can potentially use version control systems like git. Package manager automates this process and makes it easier to manage. ...

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