Blogs

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

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

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

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

Go - Dependancy Injection pattern.

Dependancy injection is a pattern where we pass down dependancies to initializers. This pattern is used to avoid global variables and to make code more testable. For example in go, you can create a service which depends on a repository and pass the repository to the service initializer. Suppose you have a directory like this server ├─entities │ ├─data.go │ └─server.go ├─handler │ └─handler.go ├─service │ └─service.go └─storage └─storage.go main.go suppose you have a User struct in data....

Running Async Tasks in Django using Celery

Django is one of the best web frameworks to build some thing fast which comes with a lot of features. Even if it doesn’t appeal in terms of raw performance, it is one of the fastest frameworks in terms of development iteration. Celery is a distributed task queue that helps us to run tasks asynchronously. It is widely used in Django applications to run background tasks such as sending emails, processing images, etc....

Vim Cheatsheet

Vim Cheatsheet Cursor Navigation Vim has several commands for moving the cursor around the file. Here are the basic ones, which work in Normal mode: h: Move cursor left j: Move cursor down k: Move cursor up l: Move cursor right These are some more advanced commands: w: Move to start of next word b: Move to start of previous word e: Move to end of word 0 (zero): Move to start of line...