DEV Community: Joash Xu

Bulk Actions in Table with Django, htmx, and AlpineJS

Joash Xu — Thu, 19 Jan 2023 02:50:34 +0000

When it comes to displaying large amounts of data in a tabular format, tables are often the go-to choice for developers. However, traditional tables can be limiting in their functionality, especially when it comes to performing actions on multiple rows. This can lead to a poor user experience, as users are forced to perform actions on each row individually, leading to slow and tedious interactions.

The need for a table that supports multiple actions by the user is becoming increasingly important, especially in today's fast-paced digital environment. Users expect to be able to perform actions on multiple rows in a single click, providing a more efficient and user-friendly experience. By implementing a table that supports multiple actions by the user, developers can improve their applications' overall usability and satisfaction, making it a necessary feature for modern web development.

In this article, we will discuss how to implement a table that supports bulk actions by the user using the combination of the django-tables2, htmx, and AlpineJS libraries. The django-tables2 package is a powerful library that allows developers to create and manage tables in Django projects with minimal effort. It provides a simple and flexible way to define the columns, data, and behavior of the table. The htmx and Alpine.js packages are lightweight JavaScript libraries that allow developers to perform rich interactions and dynamic updates on web pages without the need for extensive JavasScript code.

Together, these libraries provide a powerful solution for building tables without compromising performance, scalability, and maintainability.

The Requirements

Before we start, lets write down what we want to build. The following are the rough specification

The table shall support pagination and sorting when the user clicks on the column header.
The table shall have a search query form that allows the user to filter the table. The pagination and sort shall be ignored when the user performs a search.
The table shall allow the user to select the row(s) and perform a specific action on those selected row(s).
The table shall be rendered in a way that provides a seamless interaction.

The Packages Used For This Project

To build this table, we will need to use the following packages:

htmx. htmx gives access to using AJAX directly in HTML, using attributes. It is simple and, for a package this small, quite powerful.
django-tables2. This Django app lets you define tables like you define Django models. It can automatically generate a table based on a Django model. It supports pagination, column-based table sorting, custom column functionality via subclassing, and many other features.
django-filter. I use this package for the filtering functionality. It has APIs similar to Django's ModelForm and works well with django-tables2.
django-htmx. For htmx to work, Django view needs to tell which request is made using htmx and which is not. It has a middleware that adds htmx attribute to a request object.
Alpine-js. This project requires a more complex behavior, htmx alone will not be enough. Specifically, the table needs to make sorting, pagination, and filtering work together nicely. This is where Alpine-js comes in. This small javascript package allows me to store data and trigger action based on changes happening to a variable.

The Model

First, let's define a model to work with.

from django.db import models  

class Product(models.Model):  
    class Status(models.IntegerChoices):  
        ACTIVE = 1, "Active"  
        INACTIVE = 2, "Inactive"  
        ARCHIVED = 3, "Archived"  

    name = models.CharField(max_length=255)  
    category = models.CharField(max_length=255)  
    price = models.DecimalField(max_digits=10, decimal_places=2)  
    cost = models.DecimalField(max_digits=10, decimal_places=2)  
    status = models.PositiveSmallIntegerField(choices=Status.choices)  

    class Meta:
        ordering = ("pk",)  

    def __str__ (self):  
        return self.name

The Table

Next, based on our model above, we are going to define the table. For this project, we need to:

Add a checkbox column. We do this by using tables.CheckBoxColumn(accessor="pk", orderable=False).
To make the checkbox column appear as the first column, we will utilize the sequence parameter on the table meta's class.
We also need to add a class to our rows to indicate when rows are updated. We use this class to give some animation when a user updates rows. To achieve this, we will use the row_attrs parameter on the table meta's class. To get the information of the updated rows, we will add a new parameter for the table __init__ method named selection.
Also, we will allow a user to select multiple rows using Shift Key and a mouse click. To achieve this, we are going to define an attribute attrs={td__input:{ "@click": "checkRange"}}. The AlpineJS package will handle the rest.

import django_tables2 as tables  

from .models import Product

def rows_higlighter(**kwargs):  
    # Add highlight class to rows 
    # when the product is recently updated.
    # Recently updated rows are in the table
    # selection parameter.  
    selected_rows = kwargs["table"].selected_rows  
    if selected_rows and kwargs["record"].pk in selected_rows:  
        return "highlight-me"  
    return ""

class ProductHTMxBulkActionTable(tables.Table):  
    # Add a checkbox column to the table.  
    selection = tables.CheckBoxColumn(accessor="pk", orderable=False,   
                                      attrs={  
                                        "td__input": {  
                                            "@click": "checkRange"  
                                        }  
                                      })  
    # Status is not orderable
    status = tables.Column(accessor="status", orderable=False)

    class Meta:  
        model = Product  
        template_name = "tables/bootstrap_htmx_bulkaction.html"
        show_header = False

        # This will put the checkbox column first.  
        sequence = ("selection", "...")  

        # This will add the highlight class to the rows  
        # when the product is recently updated.
        row_attrs = {  
            "class": rows_higlighter  
        }  

        # Additional class for easier styling.  
        attrs = {"class": "table checkcolumn-table"}  

    def __init__ (self, selected_rows=None, *args, **kwargs):  
        super(). __init__ (*args, **kwargs)  

        # The selection parameter is a list of product ids  
        # that are recently updated.
        self.selected_rows = selected_rows 
        return

The Filter

The table supports a single query form so that the user can filter the table. We define the filter below.

from decimal import Decimal  

from django.db.models import Q  
from django.forms import TextInput  
import django_filters  

from .models import Product

# Custom widget that uses search input type
class SearchInput(TextInput):  
    input_type = "search"  

class ProductUniversalFilter(django_filters.FilterSet):  
    query = django_filters.CharFilter(  
        method="universal_search",  
        label="",  
        widget=SearchInput(attrs={"placeholder": "Search..."}),  
    )  

    class Meta:  
        model = Product  
        fields = ["query"]  

    def universal_search(self, queryset, name, value):  
        if value.replace(".", "", 1).isdigit():  
            value = Decimal(value)  
            return Product.objects.filter(Q(price=value) | Q(cost=value))  

        return Product.objects.filter(  
            Q(name__icontains=value) | Q(category__icontains=value)  
        )

I made a simple custom widget to change the input_type to search. The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired.

The Views

Now that we have our model, table, and filter, we can start implementing our view. First, we need to implement a view that renders the table.

from django_tables2 import SingleTableMixin  
from django_filters.views import FilterView  

from .models import Product  
from .tables import ProductHTMxBulkActionTable
from .filters import ProductUniversalFilter

class ProductHTMxBulkActionView(SingleTableMixin, FilterView):  
    table_class = ProductHTMxBulkActionTable  
    queryset = Product.objects.all()  
    filterset_class = ProductUniversalFilter  
    paginate_by = 10  

    def get_template_names(self):  
        if self.request.htmx:  
            template_name = "products/product_table_partial.html"  
        else:  
            template_name = "products/product_table_bulkaction.html"  

        return template_name  

    def get_table_kwargs(self):  
        # Get the list of recently updated products.  
        # Pass the list to the table kwargs.
        kwargs = super().get_table_kwargs()  
        selected_rows = self.request.GET.get("selection", None)  
        if selected_rows:  
            selected_rows = [int(_) for _ in selected_rows.split(",")]  
            kwargs["selected_rows"] = selected_rows  

        return kwargs

In the get_template_names, we render different templates based on whether or not the request is made via htmx. Also, since we need to pass the selected rows to our table constructor, we need to implement the get_table_kwargs.

Next, we need a view to handle the bulk update request.

from django.http import HttpResponseRedirect 
from django.utils.http import urlencode  
from django.urls import reverse_lazy  

def reverse_querystring(view, urlconf=None, args=None, kwargs=None,
                        current_app=None, query_kwargs=None):  
    '''Custom reverse to handle query strings.  
    Usage:
        reverse('app.views.my_view', kwargs={'pk': 123}, 
                 query_kwargs={'search': 'Bob'})
    '''
    base_url = reverse_lazy(view, urlconf=urlconf, args=args, 
                            kwargs=kwargs, current_app=current_app)  
    if query_kwargs:  
        return '{}?{}'.format(base_url, urlencode(query_kwargs))  
    return base_url

def response_updateview(request):  
    if request.method == "POST" and request.htmx:  
        # Get the selected products  
        selected_products = request.POST.getlist("selection")  

        # Check if the activate/deactivate button is pressed  
        if request.htmx.trigger_name == "activate":  
            # Activate the selected products              
            Product.objects
                   .filter(pk__in=selected_products)
                   .update(status=Product.Status.ACTIVE)  
        elif request.htmx.trigger_name == "deactivate":  
            # Deactivate the selected products  
            Product.objects
                   .filter(pk__in=selected_products)
                   .update(status=Product.Status.INACTIVE)  

        # Get the page number  
        page = request.POST.get("page", 1)  
        page = int(page)  

        # Get the sort by column  
        sort_by = request.POST.get("sort", None)

        # Get the query  
        query = request.POST.get("query", "")  

        # Get selection  
        selection = ",".join(selected_products)  

    # Redirect to table view 
    return HttpResponseRedirect(  
        reverse_querystring("products:products_htmx_bulkaction",   
                            query_kwargs={"page": page, "sort": sort_by,  
                                          "query": query,
                                          "selection": selection}))

In this view, we first check what action is triggered (activate/deactivate) and update our data. Finally, we redirect to our table view, including all the needed parameters like pagination, sort, query/filter, and the selected row.

The Templates

There are three templates in play here:

A template to render the whole page. Where I generate the page with an HTML header and body and the table.
A template to render only the table. When we perform some action like sorting or filtering, we only need to render the partial page.
Custom table template to override the default. I need to remove the table definition. And add some Alpine-js attributes for the pagination to work.

Template to Render the Entire Page

For this project, I put the table header and query form on this page. This template has a lot of functionality.

Bulk activate or de-active products. To achieve this, we need to include all information like pagination, sorting, and filtering. We accomplish this using hx-include="#bulk-actions, #id_query".
For searching, we included a simple search form. There are two ways to trigger the search functionality. The first is when the user types something in the search box. We delay the trigger for 500ms, and the trigger only happens when the content is changed. The second trigger is when the user clicks on the cross icon on the search box. We achieve this by using hx-trigger="keyup changed delay:500ms, search". Also, when we search, we will remove the pagination and sorting information. To achieve this, we first need to define x-data and trigger the custom clear-pagination-and-sort event before every request. To accomplish this functionality, we use x-on:htmx:before-request="$dispatch('clear-pagination-and-sort'). The custom event is defined later via the @clear-pagination-and-sort.window functionality.
Pagination and sorting. I define two extra hidden input fields. The sort and page input. When a user performs an action, be it sorting, jumping between pages, or filtering, I will submit all three pieces of information back to the server.
We also added functionality in the check box column, where the whole rows in that page got selected upon clicking. We achieved this using @click="toggleSelection()". Inside the toggleSelection we simply checked all rows on that page.
To support multiple rows selection when the user uses Shift Key and mouse click, I added the checkRange function at the bottom.

{% extends "products/base.html" %}

{% load render_table from django_tables2 %}
{% load i18n %}
{% load django_tables2 %}

{% block bulkaction_table %}active{% endblock %}

{% block table_main %}
<h1>Product Table</h1>

<div class="table-top-container">

  {# Bulk actions and search bar #}
  <div class="row justify-content-between">
    <div class="col-4">
      <div>
          <button id="activate" type="submit" name="activate"
                  class="btn btn-secondary"
                  hx-post="{% url 'tables:products_htmx_bulkaction_update' %}"
                  hx-target=".table-container"
                  hx-indicator=".progress"
                  hx-include="#bulk-actions, #id_query">
          Activate
        </button>
        <button id="deactivate" type="submit" name="deactivate"
                class="btn btn-secondary"
                hx-post="{% url 'tables:products_htmx_bulkaction_update' %}"
                hx-target=".table-container"
                hx-indicator=".progress"
                hx-include="#bulk-actions, #id_query">
        Deactivate
        </button>
      </div>
    </div>
    <div class="col-4">
      <div class="form-inline">
        <div class="d-flex justify-content-end">
          <input type="search" name="query" placeholder="Search..."
                 class="searchinput form-control" id="id_query"
                 hx-trigger="keyup changed delay:500ms, search"
                 hx-get="{% url 'tables:products_htmx_bulkaction' %}"
                 hx-indicator=".progress"
                 hx-target=".table-container"
                 x-data
                 x-on:htmx:before-request="$dispatch('clear-pagination-and-sort')">
        </div>
      </div>
    </div>
  </div>

  {# Table header #}
  <form id="bulk-actions"
        hx-get="{% url 'tables:products_htmx_bulkaction' %}"
        hx-target=".table-container"
        hx-trigger="sort-initiated, pagination-initiated"
        hx-swap="outerHTML"
        hx-include="#id_query"
        hx-indicator=".progress"
        x-data="{ sort_by: '',
                  page_by: 1,
                  select_all: false,
                  last_checked: false }"
        @clear-pagination-and-sort.window="page_by = 1; sort_by = ''"
        x-on:htmx:after-swap="select_all = false">

    {% csrf_token %}

    {# Hidden input to store pagination page and column to sort by #}
    <input type="hidden" name="sort" x-ref="sort_input" x-model="sort_by"
           x-init="$watch('sort_by',
                           () => $refs.sort_input.dispatchEvent(
                                    new Event('sort-initiated',
                                              { bubbles: true })))">

    <input type="hidden" name="page" x-ref="paginate_input" x-model="page_by"
           x-init="$watch('page_by',
                           () => $refs.paginate_input.dispatchEvent(
                                    new Event('pagination-initiated',
                                              { bubbles: true })))">

    <table class="table checkcolumn-table header">
      <thead {{ table.attrs.thead.as_html }}>
        <tr>
          {% for column in table.columns %}
            {% if column.name == 'selection' %}
            <th {{ column.attrs.th.as_html }}
                x-data="{ toggleSelection(event) {
                  select_all = !select_all;
                  let checkboxes = document.getElementsByName('selection');
                  [...checkboxes].map((el) => {
                    el.checked = select_all;
                  })
                }
              }"
              @click="toggleSelection()"
              style="cursor: pointer;">
              <input type="checkbox" x-model="select_all">
            </th>
            {% else %}
              {% if column.orderable %}
                <th {{ column.attrs.th.as_html }}
                    x-data="{ col_name: '{{ column.order_by_alias }}',
                    toggleSort(event) {
                      this.col_name = this.col_name.startsWith('-') ? this.col_name.substring(1) : ('-' + this.col_name);
                      sort_by = this.col_name;
                    }
                  }"
                  @click="toggleSort()"
                  :class="sort_by !== '' ? (sort_by === col_name ? (sort_by.startsWith('-') ? 'desc' : 'asc') : '') : ''"
                  style="cursor: pointer;">
                  {{ column.header }}
                </th>
              {% else %}
                <th {{ column.attrs.th.as_html }}>{{ column.header }}</th>
              {% endif %}
            {% endif %}
          {% endfor %}
        </tr>
      </thead>
    </table>

    {# Progress indicator #}
    <div class="progress">
      <div class="indeterminate"></div>
    </div>

    {# Content table #}
    {% render_table table %}
  </form>
</div>
{% endblock %}

{% block footer %}
<script>
    // Set the checkbox to be checked from the start 
    // to end when the user presses the shift key.
  function checkRange(event) {
    let checkboxes = document.getElementsByName('selection');
    let inBetween = false;
    if( event.shiftKey && event.target.checked ) {
      checkboxes.forEach( checkbox => {
        if( checkbox === event.target || checkbox === last_checked ) {
          inBetween = !inBetween;
        }
        if( inBetween ) {
          checkbox.checked = true;
        }
      });
    }
    last_checked = event.target;
  }
</script>
{% endblock %}

Template to Render Table

Here we only render the table content, no HTML header, and no HTML body. Just the content.

{# templates/products/product_table_partial.html #}
{% load render_table from django_tables2 %}

{% render_table table %}

Template to Override the Default Table

This template extends the default table from django-tables2. It seamlessly updates the page_by variable in x-data when a user triggers any pagination action. This, in turn, updates the value of the page input, which is linked via the x-model. And it starts a custom event called pagination-initiated, which tells htmx to send the complete form back to the server, including all sorting, pagination, and filtering information. It's like magic!

{% extends "django_tables2/bootstrap4.html" %}  

{% load django_tables2 %}  
{% load i18n %}  

{% block pagination.previous %}  
<li class="previous page-item" role="button">  
    <div @click="page_by = {{table.page.previous_page_number}}"  
         class="page-link">  
        <span aria-hidden="true">&laquo;</span>  
        {% trans 'previous' %}  
    </div>  
</li>  
{% endblock pagination.previous %}  

{% block pagination.range %}  
{% for p in table.page|table_page_range:table.paginator %}  
<li class="page-item{% if table.page.number == p %} active{% endif %}" role="button">  
    <div class="page-link" {% if p != '...' %}@click="page_by={{p}}"{% endif %}>  
        {{ p }}  
    </div>  
</li>  
{% endfor %}  
{% endblock pagination.range %}  

{% block pagination.next %}  
<li class="next page-item user-select" role="button">  
    <div @click="page_by = {{table.page.next_page_number}}" class="page-link">  
        {% trans 'next' %}  
        <span aria-hidden="true">&raquo;</span>  
    </div></li>  
{% endblock pagination.next %}

Style

Column Width

/* Column Width */
.checkcolumn-table td:nth-child(1),  
.checkcolumn-table th:nth-child(1) {  
    width: 1%;  
}  

.checkcolumn-table td:nth-child(2),  
.checkcolumn-table th:nth-child(2) {  
    width: 8%;  
}  

.checkcolumn-table td:nth-child(3),  
.checkcolumn-table th:nth-child(3) {  
    width: 34%;  
}  

.checkcolumn-table td:nth-child(4),  
.checkcolumn-table th:nth-child(4) {  
    width: 32%;  
}  

.checkcolumn-table td:nth-child(5),  
.checkcolumn-table td:nth-child(6),
.checkcolumn-table td:nth-child(7),  
.checkcolumn-table th:nth-child(5),  
.checkcolumn-table th:nth-child(6),  
.checkcolumn-table th:nth-child(7) {  
    width: 8%;  
}

Pagination

/* Pagination */
ul.pagination {  
  justify-content: end !important;  
}

Sorting

/* Sorting */
th.asc:after {  
    content: '\0000a0\0025b2';  
    float: right;  
    width: 10%;  
}  

th.desc:after {  
    content: '\0000a0\0025bc';  
    float: right;  
    width: 10%;  
}

Highlight Rows on Update

/* Rows highlight */
.highlight-me {  
  background-color: white;  
  animation-name: blink;  
  animation-duration: 2s;  
  transition-timing-function: ease-in;  
  transition: 0.2s;  
} 

@keyframes blink {  
  0% { background-color: orange; color: white;}  
  50% { background-color: orange; color: white; }  
  51% { background-color: white; }  
  100% { background-color: white; }  
}

Progress Bar

/* Progress bar */  
.checkcolumn-table.header {  
    margin-bottom: 0;  
}

.progress {  
    height: 4px;  
    width: 100%;  
    border-radius: 2px;  
    background-clip: padding-box;  
    overflow: hidden;  
    position: relative;  
    opacity: 0;  
}  

.htmx-request .progress,
.htmx-request.progress {  
    opacity: 1;  
}  

.progress .indeterminate {  
    background-color: blue;  
}  

.progress .indeterminate:after,  
.progress .indeterminate:before {  
    content: '';  
    position: absolute;  
    background-color: inherit;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    will-change: left, right;  
}  

.progress .indeterminate:before {  
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;  
}  

.progress .indeterminate:after {  
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;  
}

@keyframes indeterminate {  
    0% { left: -35%; right: 100%; }  
    60% { left: 100%; right: -90%; }  
    100% { left: 100%; right: -90%; }  
}  

@keyframes indeterminate-short {  
    0% { left: -200%; right: 100%; }  
    60% { left: 107%; right: -8%; }  
    100% { left: 107%; right: -8%; }  
}

Summary

In this article, we have covered the process of building a table that supports bulk actions by the user using the combination of django-tables2, htmx, and AlpineJS. We have gone through the implementation of pagination and sorting, the search query form, and the checkbox column. We also covered how to enhance the user experience by improving the table's design and layout, adding responsive design, and providing feedback to the user.

We have seen how django-tables2 is a powerful library that allows developers to create and manage tables in Django projects with minimal effort. The htmx allows developers to perform rich interactions and dynamic updates on web pages without the need for extensive JavaScript code, and Alpine.js will enable developers to add interactive functionality to their web pages with minimal code. Together, these libraries provide a powerful solution for building tables that support bulk actions by the user.

Animate Point Along an Arc in MapBox

Joash Xu — Tue, 15 Nov 2022 03:27:27 +0000

Have you ever wanted to animate a point along an arc in MapBox? In this blog post, I'll show you how to do just that! I'll also provide code examples to get you started. So, whether you're a developer or a student, read on!

This project is inspired by a case study made by Fantasy.co. You can still find the project description at the Fantasy.co website.

The Packages Used For This Project

Mapbox GL JS. Mapbox GL JS is a JavaScript library for vector maps on the Web.
turf. Turf is an advanced geospatial javascript tool that is simple to use and runs very fast.

File setup

For this simple project, we only need to have three files. An index.html, a style.css and a map.js. The content of index.html and style.css are detailed here. I will talk about the content of map.js in more detail later.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Animated </title>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
  <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id='map'></div>        
    <script src="map.js"></script>
</body>
</html>

style.css

#map {
    width: 600px;
    height: 600px;
}

Now that we have the index.html and style.css let's move on to the juicy stuff.

Making Semi-Circle Path

First, let's make the semi-circle path. There are many ways to make a path between two points. But, in this article, I created a number of new coordinates between the start and end points. Creating more points is also helpful since we will animate a marker using these new coordinates later. More points will generate a smoother animation.

The idea of the process is as follows:

Get the midpoint between origin and destination. Also, get the bearing and radius of the semi-circle.
Translate that midpoint based on the bearing (modified by some angle) and the radius.
Repeat this process multiple times. In this article, I make 1000 additional coordinates between the origin and destination. More coordinates mean smoother lines and smoother animation.

By the end of this process, we will get a list of new coordinates.

And the function to generate this is as follows.

// Generate arc from start point to the end point.
// The segments parameter tell us how many
// new point should we generate.
function generateArc(start, end, segments) {
    // Get the mid point between start and end
    let midPoint = turf.midpoint(start, end);

    // Get the bearing 
    let bearing = turf.bearing(end, start);

    // Get half of the distance, because we 
    // start from the midpoint.
    let distance = turf.distance(start, end) / 2;

    // Add the start coordinate
    let arc = [start.geometry.coordinates];

    // We devide 180 angle by segments, and for each angle
    // we transform the mid point by distance and an angle.
    for (let angle = 0; angle < 180; angle += (180/ (segments))) {
        let rotatedPoint = turf.transformTranslate(midPoint,
                                                   distance,
                                                   bearing - angle);
        arc.push(rotatedPoint.geometry.coordinates);
    }

    // Add the last coordinate
    arc.push(end.geometry.coordinates);

    return arc
}

Animate a Marker

Once we created a bunch of new coordinates. We can start moving a point or a marker between these coordinates.

So for every coordinates pair we created from the previous step, we will:

rotate our marker using turf.bearing .
move the marker using mapbox.getSource().setData()

In the reference, the animation slows down halfway. So I tried using some ease-out functions from https://easings.net/, but the result was not quite what I wanted. So I decided to simply slow down the animation when the marker reached halfway.

function animate(map, counter, route, point, source_id, segments) {

    const start = 
        route.features[0].geometry.coordinates[
            counter >= segments ? counter - 1 : counter
        ];
    const end =
        route.features[0].geometry.coordinates[
            counter >= segments ? counter : counter + 1
        ];

    if (!start || !end) return;

    // Update point geometry to a new position 
    // based on counter denoting the index to access the arc.
    point.features[0].geometry.coordinates =
        route.features[0].geometry.coordinates[counter];

    // Calculate the bearing to ensure the icon is 
    // rotated to match the route arc.
    point.features[0].properties.bearing = turf.bearing(
        turf.point(start),
        turf.point(end)
    );

    // Update the source with this new data
    map.getSource('point-' + source_id).setData(point);

    // Request the next frame of animation 
    if (counter < (segments/2)) {
        // Before halfway, just run the animation 
        // as normal.
        requestAnimationFrame(function() {
            animate(map, counter, route, point, source_id, segments);
        });
    } else {
        // Slow down the animation after half way.
        let fps = 20
        setTimeout(() => {
            requestAnimationFrame(function() {
                animate(map, counter, route, point, source_id, segments);
            });
          }, 1000 / fps);
    }
    counter += 1;
}

Zoom Level

Another thing I like to do is to set a proper zoom level. For this, I utilize the fitBounds functionality. To correctly calculate the bounding box, I should probably add the rotated midpoint. But here, I only use the original city coordinates to get the bounding box. And added some padding when I invoked the fitBounds().

let bbox = turf.bbox(turf.points(cityCoordinates));
map.fitBounds(bbox, {
    linear: true,
    easing: function(x){
        return x * x * x;
    },
    padding: {top: 100, bottom:100, left: 100, right: 300}
});

All together now

With all of the above, we can write our map.js as follow.

map.js

// Set origin, destination, and route
//

// Cities
const cities = {
    "JKT": [106.8227, -6.208763],
    "SG": [103.8198, 1.3521],
    "KL": [101.693207, 3.140853]
}

var cityCoordinates = Object.keys(cities).map(function(key){
    return cities[key];
});

// Route
const routes = [
    [cities["JKT"], cities["SG"]],
    [cities["SG"], cities["KL"]],
];

// Map setup
//
mapboxgl.accessToken = '<USE YOUR TOKEN>';

// Get the center coordinate based on the city coordinates
let center = turf.center(
                turf.points(cityCoordinates)
             ).geometry.coordinates;

// Setup map
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v10',
    center: center,
    zoom: 5
});

// Add navigation control
map.addControl(new mapboxgl.NavigationControl());

// Load the map
//
map.on('load', () => {

    // Set zoom level.
    let bbox = turf.bbox(turf.points(cityCoordinates));
    map.fitBounds(bbox, {
        linear: true,
        easing: function(x){
            return x * x * x;
        },
        padding: {top: 100, bottom:100, left: 100, right: 300}
    });

    // Number of segment to use in the arc.
    // More segment means a smoothe arc.
    const segments = 1000;

    for (let i = 0; i < routes.length; i++) {
        // Route
        //
        let route = routes[i];

        // Create the line segments based on the route
        let arc = generateArc(turf.point(route[0]), 
                              turf.point(route[1]),
                              segments);

        // Turn the object into feature collection
        let mapRoute = turf.featureCollection([turf.lineString(arc)]);

        // Put the information on to the map
        map.addSource("route-" + i, {
            "type": "geojson",
            "data": mapRoute
        });

        map.addLayer({
            "id": "route-layer-" + i,
            "type": "line",
            "source": "route-" + i,
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
            "line-color": "#fff",
            "line-width": 1
            }
        });

        // Point
        //

        let mapPoint = turf.featureCollection([turf.point(routes[i][0])]);
        map.addSource('point-' + i, {
            'type': 'geojson',
            'data': mapPoint
        });

        map.addLayer({
            'id': 'point-layer-' + i,
            'source': 'point-' + i,
            'type': 'symbol',
            'layout': {
                'icon-image': 'airport-15',
                'icon-size': 1,
                'icon-rotate': ['get', 'bearing'],
                'icon-rotation-alignment': 'map',
                'icon-allow-overlap': true,
                'icon-ignore-placement': true
            }
        });

        // Animate
        animate(map, 0, mapRoute, mapPoint, i, segments);
    }
});

function generateArc(start, end, segments) {
    // See the above
    // ...
}

function animate(map, counter, route, point, source_id, segments) {
    // See the above
    // ...
}

And when you open the index.html in your browser, you will get the following.

Conclusion

In this article, I show how to create a semi-circle arc between two points using MapBox. I also demonstrated how you could move a point or a marker along these routes. I hope you can learn something from this. Thank you for reading!

Column Filter Table with htmx, Alpine-js, and Django

Joash Xu — Thu, 18 Aug 2022 02:52:13 +0000

Have you ever needed to create a table where you need to filter between multiple columns? Maybe you've tried using a standard table with a single search/filter input field, but it didn't quite work the way you wanted.

This article will show how I build a table with a multi-column filter. The table I am going to implement looks like this:

As a side note, this article builds on the previous article, where I create a simple table using Django and htmx; I won't revisit how htmx work. Now, let's get started.

The Packages Used For This Project

htmx. htmx gives access to using AJAX directly in HTML, using attributes. It is simple and, for a package this small, quite powerful.
django-tables2. This Django app lets you define tables like you define Django models. It can automatically generate a table based on a Django model. It supports pagination, column-based table sorting, custom column functionality via subclassing, and many other features.
django-filter. I use this package for the filtering functionality. It has APIs similar to Django's ModelForm and works well with django-tables2.
django-htmx. For htmx to work, Django view needs to tell which request is made using htmx and which is not. It has a middleware that adds htmx attribute to a request object.
Alpine-js. This project requires a more complex behavior, htmx alone will not be enough. Specifically, the table needs to make sorting, pagination, and filtering work together nicely. This is where Alpine-js comes in. This small javascript package allows me to store data and trigger action based on changes happening to a variable.

The Model

The model I use for this project is as follows:

# products/models.py
from django.db import models

class Product(models.Model):
    class Status(models.IntegerChoices):
        ACTIVE = 1, "Active"
        INACTIVE = 2, "Inactive"
        ARCHIVED = 3, "Archived"

    name = models.CharField(max_length=255)
    category = models.CharField(max_length=255)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    cost = models.DecimalField(max_digits=10, decimal_places=2)
    status = models.PositiveSmallIntegerField(choices=Status.choices)

    def __str__ (self):
        return self.name

The Table

The table is straightforward to set up. The show_header is set to False because I put the table header, which includes columns name, in a separate template. I will discuss this further in the template section below.

# products/tables.py
import django_tables2 as tables
from products.models import Product

class ProductHTMxMultiColumnTable(tables.Table):
    class Meta:
        model = Product
        show_header = False
        template_name = "tables/bootstrap_col_filter.html"

The Filter

The filter I use is as follows:

# products/filters.py
from decimal import Decimal

from django.db.models import Q
from django.forms import TextInput
import django_filters

from products.models import Product

class ProductFilter(django_filters.FilterSet):
    id = django_filters.NumberFilter(label="")
    name = django_filters.CharFilter(label="", lookup_expr="istartswith")
    category = django_filters.CharFilter(label="", lookup_expr="istartswith")
    price = django_filters.NumberFilter(label="", method="filter_decimal")
    cost = django_filters.NumberFilter(label="", method="filter_decimal")
    status = django_filters.ChoiceFilter(label="", choices=Product.Status.choices)

    class Meta:
        model = Product
        fields = ["id", "name", "category", "price", "cost", "status"]

    def filter_decimal(self, queryset, name, value):
        # For price and cost, filter based on
        # the following property:
        # value <= result < floor(value) + 1

        lower_bound = "__".join([name, "gte"])
        upper_bound = "__".join([name, "lt"])

        upper_value = math.floor(value) + Decimal(1)

        return queryset.filter(**{lower_bound: value,
                                  upper_bound: upper_value})

The View

The view will send out a full page when the request is not made by htmx and send partial results when the request is made by htmx.

# products/views.py
from django.core.paginator import Paginator, EmptyPage

from django_tables2 import SingleTableMixin
from django_filters.views import FilterView

from products.models import Product
from products.tables import ProductHTMxMultiColumnTable
from products.filters import ProductFilter

class CustomPaginator(Paginator):
    def validate_number(self, number):
        try:
            return super().validate_number(number)
        except EmptyPage:
            if int(number) > 1:
                # return the last page
                return self.num_pages
            elif int(number) < 1:
                # return the first page
                return 1
            else:
                raise

class ProductHTMxMultiColumTableView(SingleTableMixin, FilterView):
    table_class = ProductHTMxMultiColumnTable
    queryset = Product.objects.all()
    filterset_class = ProductFilter
    paginate_by = 10
    paginator_class = CustomPaginator

    def get_template_names(self):
        if self.request.htmx:
            template_name = "products/product_table_partial.html"
        else:
            template_name = "products/product_table_col_filter.html"

        return template_name

I also add a CustomPaginator to handle an edge case in pagination. Specifically, this is to handle a case where for instance:

A user selects a valid page 8
The user then uses the filter
Because the result of the filter is less than 8 pages long, Django then raises 404.

Here I can choose to use a different template when Django raises 404. But I am not sure if it is desirable. The template will not have any pagination information. I think this will confuse users since they would not know that the empty page results from an invalid page and filtering, rather than just filtering.

So, when a user filter and the page is invalid, I simply return either the last page or the first page of the filtering result.

The Template

There are three templates in play here:

A template to render the whole page. Where I generate the page with HTML header and body and the table.
A template to render only the table. When we perform some action like sorting or filtering, we only need to render the partial page.
Custom table template to override the default. I need to remove the table definition. And add some Alpine-js attributes for the pagination to work.

Template to Render the Entire Page

For this project, I put the table header and filter form on this page. Here I define two extra hidden input fields. The sort and page input. When a user performs an action, be it sorting, jumping between pages, or filtering, I will submit all three pieces of information back to the server.

To make this happens, I need to use Alpine-js. Here is the summary of how it works:

When a user sorts a table by clicking on a column header, the value of the sort_by that I define in the x-data gets updated via toggle function. This also changes the sort input value because this is linked through the use of x-model. To toggle between the ascending or descending arrow, I use :class in the column header.
I use x-init to watch if the input value for sort has changed or not. When the value changes, I send out a custom event called sort-initiated.
Since I have specified that custom event in the hx-trigger attribute, when this custom event is made, htmx will submit the whole form, which contains information on the filter, the sorting, and the pagination.

{# templates/products/product_table_col_filter #}
{% extends "base.html" %}

{% load render_table from django_tables2 %}
{% load i18n %}
{% load django_tables2 %}
{% load crispy_forms_tags %}

{% block multi_htmx_table %}active{% endblock %}

{% block main %}
<h1>Product table</h1>

<div id="table-container" class="table-container">

    <form class="form-inline"
          hx-get="{% url 'tables:products_htmx_multicol' %}"
          hx-target=".table-body-container"
          hx-trigger="input, select, sort-initiated, pagination-initiated"
          hx-swap="outerHTML"
          hx-indicator=".progress"
          x-data="{ sort_by: '', page_by: 1 }">

        <input type="hidden" name="sort" x-ref="sort_input" x-model="sort_by"
                x-init="$watch('sort_by',
                        () => $refs.sort_input.dispatchEvent(
                                new Event('sort-initiated', { bubbles: true })))">

        <input type="hidden" name="page" x-ref="paginate_input" x-model="page_by"
               x-init="$watch('page_by',
                        () => $refs.paginate_input.dispatchEvent(
                                new Event('pagination-initiated', { bubbles: true })))" >

        <table {% render_attrs table.attrs class="table multi-col-header" %}>
            <thead {{ table.attrs.thead.as_html }}>
                <tr>
                    {% for column in table.columns %}
                    <th {{ column.attrs.th.as_html }}
                        x-data="{ col_name: '{{ column.order_by_alias }}',
                                  toggle(event) {
                                    this.col_name = this.col_name.startsWith('-') ? this.col_name.substring(1) : ('-' + this.col_name);
                                    sort_by = this.col_name;}}"
                        @click="toggle()"
                        :class="sort_by !== '' ? (sort_by === col_name ? (sort_by.startsWith('-') ? 'desc' : 'asc') : '') : ''"
                        style="cursor: pointer;">
                        {{ column.header }}
                    </th>
                    {% endfor %}
                </tr>
                <tr>
                    {% for field in filter.form %}
                    <td>{{ field|as_crispy_field }}</td>
                    {% endfor %}
                </tr>
            </thead>
        </table>

        <div class="progress">
            <div class="indeterminate"></div>
        </div>

        {% render_table table %}
    </form>
</div>
{% endblock %}

Template to Render Table

Here we only render the table content, no HTML header, no HTML body. Just the content.

{# templates/products/product_table_partial.html #}
{% load render_table from django_tables2 %}

{% render_table table %}

Template to Override the Default Table

This template overrides the default table from django-tables2. On this template, I render the table body and pagination information. The pagination works like sorting. When a user triggers any pagination action, the page_by variable in x-data gets updated, which changes the value of page input because it is linked via x-model. Which creates a custom event pagination-initiated. Which then tells htmx to send the complete form with all sorting, pagination, and filtering information back to the server.

{# templates/tables/bootstrap_col_filter.html #}
{% load django_tables2 %}
{% load i18n %}

{% block table-wrapper %}
    <div class="table-body-container">
        {% block table %}
            <table {% render_attrs table.attrs class="table" %}>
                {% block table.thead %}{% endblock table.thead %}

                {% block table.tbody %}
                    <tbody id="body-target" {{ table.attrs.tbody.as_html }}>
                    {% for row in table.paginated_rows %}
                        {% block table.tbody.row %}
                            <tr {{ row.attrs.as_html }}>
                                {% for column, cell in row.items %}
                                    <td {{ column.attrs.td.as_html }}>{% if column.localize == None %}{{ cell }}{% else %}{% if column.localize %}{{ cell|localize }}{% else %}{{ cell|unlocalize }}{% endif %}{% endif %}</td>
                                {% endfor %}
                            </tr>
                        {% endblock table.tbody.row %}
                    {% empty %}
                        {% if table.empty_text %}
                            {% block table.tbody.empty_text %}
                                <tr><td colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
                            {% endblock table.tbody.empty_text %}
                        {% endif %}
                    {% endfor %}
                    </tbody>
                {% endblock table.tbody %}
                {% block table.tfoot %}
                    {% if table.has_footer %}
                        <tfoot {{ table.attrs.tfoot.as_html }}>
                        <tr>
                            {% for column in table.columns %}
                                <td {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
                            {% endfor %}
                        </tr>
                        </tfoot>
                    {% endif %}
                {% endblock table.tfoot %}
            </table>
        {% endblock table %}

        {% block pagination %}
            {% if table.page and table.paginator.num_pages > 1 %}
                <nav aria-label="Table navigation">
            <ul class="pagination justify-content-end">
                {% if table.page.has_previous %}
                {% block pagination.previous %}
                <li class="previous page-item" role="button">
                    <div @click="page_by = {{table.page.previous_page_number}}"
                         class="page-link">
                        <span aria-hidden="true">&laquo;</span>
                        {% trans 'previous' %}
                    </div>
                </li>
                {% endblock pagination.previous %}
                {% endif %}
                {% if table.page.has_previous or table.page.has_next %}
                {% block pagination.range %}
                {% for p in table.page|table_page_range:table.paginator %}
                <li class="page-item{% if table.page.number == p %} active{% endif %}" role="button">
                    <div class="page-link" {% if p != '...' %}@click="page_by={{p}}"{% endif %}>
                        {{ p }}
                    </div>
                </li>
                {% endfor %}
                {% endblock pagination.range %}
                {% endif %}
                {% if table.page.has_next %}
                {% block pagination.next %}
                <li class="next page-item user-select" role="button">
                    <div @click="page_by = {{table.page.next_page_number}}" class="page-link">
                        {% trans 'next' %}
                        <span aria-hidden="true">&raquo;</span>
                    </div>
                </li>
                {% endblock pagination.next %}
                {% endif %}
            </ul>
        </nav>
            {% endif %}
        {% endblock pagination %}
    </div>
{% endblock table-wrapper %}

The Result

This is what it looks like in the end.

Sorting

Pagination

Filtering

Progress Bar

All actions

Summary

In this article, I explore how to use Django, htmx to build a slightly more complex table. For a more complex behavior, htmx alone is not enough. This is where I use Alpine-js. With Alpine-js I built a table with a multi-column filtering feature. It is pretty straightforward to make. I hope you find this article helpful.

In the future, I will explore how to build an even more complex table with features like complex filters, column selection, and saved filters.

Coding Techniques for Solving Algorithmic Problems

Joash Xu — Sun, 15 May 2022 08:32:19 +0000

How many times have you seen an algorithm problem and had no idea how to start solving it? Do not worry. You are not alone. I struggle with the process of solving algorithm problems all the time. Often, I just stare at the problem or start typing away at the keyboard until I get the right solution, spending hours in the process.

It turns out that there are underlying patterns for most of these problems. Finding the right technique to solve an algorithm problem can be the difference between a correct solution and spending hours staring at a problem.

I have summarized some patterns that help me solve algorithmic problems in a short study note. There are 14 techniques overall. Each method is explained with examples that illustrate how it can be used to solve specific types of problems. You can learn how to apply these techniques to solving problems in order to produce correct solutions more efficiently.

I also provide just a summary of the coding techniques without the code examples for quick reference.

With a bit of practice, you will be able to apply these patterns to any algorithm problem and start solving problems. Pick up your free copy of coding techniques today!

Coding Techniques Study Notes

A concise guide that will teach you how to solve coding problems with great techniques. The note includes coding techniques, with examples in Python, so you can better understand how different coding techniques work. It is the perfect study tool for students and coding enthusiasts.I also provide just a summary of the coding techniques without the code examples for quick reference.

joashxu.gumroad.com

Responsive table with Django and htmx

Joash Xu — Thu, 17 Mar 2022 04:04:47 +0000

As a developer, you will need to create tables in your web applications. To create a table in Django, you typically implement a set of APIs on the server-side that transfer data to the client and use a Javascript table library on the client-side. But you can also implement an HTML table. The drawback of this approach is that every action like sorting or searching will refresh the whole page. And that can be a jarring experience for the user. But did you know that there's a better way to create tables? This article will show you how to use Django and htmx to develop functional and responsive tables.

This article will show you how to build a table using django-tables2 and htmx. The table I am going to implement looks like this:

I assume you are already familiar with Django and can set up a Django project on your own. So I will not go through setting up a Django project from scratch. Let's get started.

The packages used for this project

htmx. htmx is a small Javascript that helps you avoid Javascript. Javascript fatigue is real. There are too many Javascript front-end frameworks, tools, and options. Integrating some of this framework into a Django project brings a lot of complexity. You will need to context switch between Python and Javascript. You also need to understand a broad set of tools like node, npm, webpack, etc. htmx lets Django developer sticks to what Django is good at: the server-side stuff.
django-tables2. You can implement an HTML table using just Django, but there is a way to create and manage tables easily: django-tables2. This Django app lets you define tables like you define Django models. It can automatically generate a table based on a Django model. It supports pagination, column-based table sorting, custom column functionality via subclassing, and many other features.
django-filter. I use this package for the search functionality. It has API that is similar to Django's ModelForm and works well with django-tables2.
django-htmx. For htmx to work, Django view needs to be able to tell which request is made using htmx and which is not. You can make your middleware or a class that your view can inherit to handle this. But for this project, I use django-htmx because why reinvent the wheel. It has a middleware that adds htmx attribute to a request object.

How htmx works

Before we move on, let's talk about how htmx works. The htmx library gives you access to AJAX. In vanilla HTML, only <a> and <form> can make HTTP requests, and only click and submit events can trigger them. Furthermore, an HTTP requests will always replace the entire screen. But the htmx library has overcome all these limitations. You can initiate HTTP requests on any element you want. And it is straightforward to do, example (taken straight from the htmx page):

  <!-- Load from unpkg -->
  <script src="https://unpkg.com/htmx.org@1.7.0"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

When you click on the button, htmx will issue an AJAX request to /clicked, and replace the entire button with the HTML response.

I can use the same mechanics for a table. All I need to do:

Render the whole page with the first page of the table
When you trigger any action (sort, search, go to a specific page), it will issue an AJAX request to the server
Server returns HTML response (partial HTML, only the table data)
Designated section content gets replaced with the new HTML response

For this project, I use several htmx attributes, they are:

hx-get. To issue a GET request to a given URL.
hx-trigger. The way to trigger the request.
hx-target. To load the result into a target element.
hx-swap. To swap the HTML returned into the DOM method.
hx-indicator. Let the user know that something is happening since the browser will not give them any feedback.

The model

First, let's create a simple product table. I will make a table out of the following model.

# products/models.py
from django.db import models

class Product(models.Model):
    class Status(models.IntegerChoices):
        ACTIVE = 1, "Active"
        INACTIVE = 2, "Inactive"
        ARCHIVED = 3, "Archived"

    name = models.CharField(max_length=255)
    category = models.CharField(max_length=255)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    cost = models.DecimalField(max_digits=10, decimal_places=2)
    status = models.PositiveSmallIntegerField(choices=Status.choices)

    def __str__ (self):
        return self.name

The table

I will now define a table and specify the template. This template override is necessary because I need to add some htmx attributes to some elements. My table definition looks like the following.

# products/tables.py
import django_tables2 as tables
from products.models import Product

class ProductHTMxTable(tables.Table):
    class Meta:
        model = Product
        template_name = "tables/bootstrap_htmx.html"

Inside the bootstrap_htmx.html template, I extend the original bootstrap4.html template. The parts that I extend are the table headers (used for sorting) and the pagination part. Notice that the hx-target points to div.table-container. This is because the bootstrap4.html template has a div container that wraps the table and the class for the container is table-container. The htmx will swap the data of div.table-container with the response from the server.

{# templates/tables/bootstrap_htmx.html #}
{% extends "django_tables2/bootstrap4.html" %}

{% load django_tables2 %}
{% load i18n %}

{% block table.thead %}
  {% if table.show_header %}
      <thead {{ table.attrs.thead.as_html }}>
      <tr>
          {% for column in table.columns %}
              <th {{ column.attrs.th.as_html }}
                  hx-get="{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}"
                  hx-trigger="click"
                  hx-target="div.table-container"
                  hx-swap="outerHTML"
                  hx-indicator=".progress"
                  style="cursor: pointer;">
                  {{ column.header }}
              </th>
          {% endfor %}
      </tr>
      </thead>
  {% endif %}
{% endblock table.thead %}

{# Pagination block overrides #}
{% block pagination.previous %}
    <li class="previous page-item">
        <div hx-get="{% querystring table.prefixed_page_field=table.page.previous_page_number %}"
             hx-trigger="click"
             hx-target="div.table-container"
             hx-swap="outerHTML"
             hx-indicator=".progress"
             class="page-link">
            <span aria-hidden="true">&laquo;</span>
            {% trans 'previous' %}
        </div>
    </li>
{% endblock pagination.previous %}
{% block pagination.range %}
    {% for p in table.page|table_page_range:table.paginator %}
        <li class="page-item{% if table.page.number == p %} active{% endif %}">
            <div class="page-link" 
                 {% if p != '...' %}hx-get="{% querystring table.prefixed_page_field=p %}"{% endif %}
                 hx-trigger="click"
                 hx-target="div.table-container"
                 hx-swap="outerHTML"
                 hx-indicator=".progress">
                {{ p }}
            </div>
        </li>
    {% endfor %}
{% endblock pagination.range %}
{% block pagination.next %}
    <li class="next page-item">
        <div hx-get="{% querystring table.prefixed_page_field=table.page.next_page_number %}"
             hx-trigger="click"
             hx-target="div.table-container"
             hx-swap="outerHTML"
             hx-indicator=".progress"
             class="page-link">
            {% trans 'next' %}
            <span aria-hidden="true">&raquo;</span>
        </div>
    </li>
{% endblock pagination.next %}

The filter

For adding filtering and searching on a django-tables2 table, I will use django-filter. The following is the filter definition.

# products/filters.py
from decimal import Decimal
from django.db.models import Q
import django_filters
from products.models import Product

class ProductFilter(django_filters.FilterSet):
    query = django_filters.CharFilter(method='universal_search',
                                      label="")

    class Meta:
        model = Product
        fields = ['query']

    def universal_search(self, queryset, name, value):
        if value.replace(".", "", 1).isdigit():
            value = Decimal(value)
            return Product.objects.filter(
                Q(price=value) | Q(cost=value)
            )

        return Product.objects.filter(
            Q(name__icontains=value) | Q(category__icontains=value)
        )

Since there is only a single search form for the entire table, I first check if the input data is a digit. If it is, only search for columns price and cost. Otherwise, search in columns name and category.

The view

The view will send out a full page when the request is not made by htmx and send partial results when the request is made by htmx.

# products/views.py
from django_tables2 import SingleTableMixin
from django_filters.views import FilterView

from products.models import Product
from products.tables import ProductHTMxTable
from products.filters import ProductFilter

class ProductHTMxTableView(SingleTableMixin, FilterView):
    table_class = ProductHTMxTable
    queryset = Product.objects.all()
    filterset_class = ProductFilter
    paginate_by = 15

    def get_template_names(self):
        if self.request.htmx:
            template_name = "product_table_partial.html"
        else:
            template_name = "product_table_htmx.html"

        return template_name

The template for product_table_htmx.html will render the entire page complete with the HTML header. The render_table template tag will generate the table according to our tables/bootstrap_htmx.html template.

{# product/templates/product_table_htmx.html #}
{% extends "base.html" %}

{% load render_table from django_tables2 %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block main %}
    <h1>Product table</h1>

    {# Search form #}
    <form hx-get="{% url 'product_htmx' %}" 
          hx-target="div.table-container" 
          hx-swap="outerHTML" 
          hx-indicator=".progress" 
          class="form-inline">
        {% crispy filter.form %}
    </form>

    {# Progress indicator #}
    <div class="progress">
        <div class="indeterminate"></div>
    </div>

    {# The actual table #}
    {% render_table table %}
{% endblock %}

The template for product_table_partial.html will render only the table part. It will return only the table container part and the table itself. Notice we do not extend from the base.html.

{# product/templates/product_table_partial.html #}
{% load render_table from django_tables2 %}

{% render_table table %}

Style

The table we define already uses Bootstrap 4 table styling. But I need to add some style so I can see an arrow on the right of the column when I perform sorting on a column. The arrow will point up or down depending on whether the sort is ascending or descending. Also I need to specify the width of the column, otherwise the column will change size during sorting or searching. After that I only need to add styling for the progress indicator.

/* Table style */
.table-container th.asc:after {
    content: '\0000a0\0025b2';
    float: right;
}

.table-container th.desc:after {
    content: '\0000a0\0025bc';
    float: right;
}

.table-container table td:nth-child(1) {
    width: 5%;
}

.table-container table td:nth-child(2) {
    width: 20%;
}

.table-container table td:nth-child(3) {
    width: 50%;
}

/* Progress bar */
.progress {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background-clip: padding-box;
    overflow: hidden;
    position: relative;
}

.progress {
    opacity: 0;
}

.htmx-request .progress {
    opacity: 1;
}
.htmx-request.progress {
    opacity: 1;
}

.progress .indeterminate {
    background-color: blue;
}

.progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

The result

So now I have a working table that looks like this.

Sorting

Pagination

Searching

Summary

In this article, I have shown why you should take a step back in frontend development and carefully weigh the pros and cons of introducing a Javascript framework into a Django project. I have shown you how to use htmx with django-tables to create a responsive and functional table, so you can keep the frontend light and lean.

Go Graceful SIGINT killing

Joash Xu — Wed, 12 Jan 2022 04:26:07 +0000

In this problem, you are given a process that runs indefinitely and blocks the program. The only way to stop the program is to send a SIGINT. But you should stop the process gracefully first. If you receive SIGINT again, then kill the process immediately.

Solution

Line:

This goroutine executes a blocking receive for the operating system signal.
Create a channel to receive os.Signal value. This channel should be buffered.
Register the channel to receive a notification. We use os.Interrupt instead of syscall.SIGINT here so Go can handle the correct interrupt on the platform it is running on (operating system Agnostic).
Block until we receive a signal.
Remove all signal handlers. The sig channel will no longer receive any signal. So the next time the user press Ctrl-C, it will follow the default behavior of signals in a Go program. In this case, the SIGINT signal causes the program to exit.
Gracefully ask proc to kill itself.

Key takeaways

A little background

In a Unix-based operating system, processes can receive a variety of signals. Signals are the method of communication between processes. There are a lot of signals. For example we have SIGTERM, SIGQUIT, SIGKILL, etc.

When a process receives a signal, it interrupts its execution, and a signal handler is invoked. Every signal has a default action: ignore, kill the process, kill the process and make a core dump file, stop the process, and resume operation.

SIGINT is the signal sent when you press Ctrl+C. The default action for the signal is to kill the process.
SIGTERM and SIGQUIT are used to terminate a process. SIGTERM is the default signal when we use the kill command. Sometimes, when we send SIGTERM, the process does a clean-up routine before exiting.
SIGKILL is also used to terminate a process. SIGKILL can't be ignored and can not be changed by a program. So your Go application will not handle this signal. The process that receives SIGKILL might not execute any clean-up routine.

Go `os` and `os/signal` packages

You can use the os package to work with the operating system. This package provides a platform-independent interface.

You can use the os/signal package to handle the operating system signal. This package implements access to incoming signals. Signals are primarly used on Unix-like systems. But you can still use this on Windows. According to the documentation:

If Notify is called for os.Interrupt, ^C or ^BREAK will cause os.Interrupt to be sent on the channel, and the program will not exit.

How to capture signal pattern in Go

Create a goroutine that runs a blocking for os.Signal, where you:

Create a buffered channel.
Use signal.Notify to register what signal you want to capture and specify the channel that receive the signal from step 1.
Block for the signal to be received.
Do what you need to do with the signal.

Go limit service time per user

Joash Xu — Fri, 07 Jan 2022 04:52:07 +0000

In this problem, you are given a video processing service with a freemium tier. Everyone will be given 10 seconds of free processing time. If you are not a paying user, the service will kill your process after 10 seconds.

There are two variations for this problem. You can limit every 10 seconds for every request or limit 10 seconds for every user accumulated.

This article will discuss the first one, limiting every user to 10 seconds.

Solution

This solves the problem where you need to limit processing time for every user.

Key takeaways

Use a similar pattern as the previous problem (limit service to 10 seconds per request), where I use a select block wrapped in a for-loop.
Use time.Tick to write to a channel every second. And then, we check whether the user has reached ten seconds. Return the function if the user is not a premium user and has used all ten seconds.
To keep track of the accumulated time used, you should use mutex via the sync.Mutex package. In this problem, every time you receive a time tick, set a lock and then update the TimeUsed variable. Check if the user has used up their ten seconds. If they have and are not premium, return false to mark that the process has to be killed.

Go limit service time per request

Joash Xu — Wed, 05 Jan 2022 06:12:42 +0000

There are two variations for this problem. You can limit every 10 seconds for every request or limit 10 seconds for every user accumulated.

This article will discuss the first one, limiting every request to 10 seconds.

Solution

This implementation will block a request if a user is not premium after 10 seconds.

Key takeaways

How to time out code

You can use the following pattern when you need to limit how long operations take in Go.

// This code is taken from the book 
// Learning Go by Jon Bodner.
func timeLimit() (int, error) {
    var result int
    var err error

    done := make(chan struct{})

    go func() {
        result, err = doSomeWork()
        close(done)
    }

    select {
        case <-done:
            return result, err
        case <-time.After(2 * time.Second):
            return 0, errors.New("Timed out")
    }
}

You will see many variations of the above pattern when you want to limit or time out code in Golang.

In this pattern, I use:

time.After function that sends the current time to a channel after a specific duration has elapsed.
select statement behavior, where it will block until one of its cases can run. And it will choose one at random if multiple cases can run.

This is the pattern I utilize to solve this problem. The only difference is that I wrap the select block inside a for loop, which I will explain later.

Goroutine are not actually being killed with this time our pattern

If you exit timeLimit before the goroutine finishes processing, the goroutine continues to run. You just choose not to do anything with the result that it (eventually) returns.

If you want to stop work in a goroutine that you are no longer wish to wait for its completion, use context cancellation. But that will be the topic of another article.

Select statement behavior

The select statement lets a goroutine wait on several communication operations. A select statement without a default statement blocks until one of its cases can run.

In this problem, you need to wrap the select statement inside a for-loop because once you receive a message from the timer, you might need to wait for the process to finish.

func HandleRequest(process func(), u *User) bool {
    ...
    for {
        select {
            case <-done:
                return true
            case <-time.After(time.Second * 10):
                if !u.IsPremium {
                    return false
                }
        }
    }
    ...

When time.After sends a message to the channel, you need to check if the user is premium or not. If the user is premium, you need to continue the process until it is finished. By putting the select statement inside a for-loop, you execute the select statement once again and wait until the done channel has been written before the function returns.

Go race conditions problem

Joash Xu — Wed, 15 Dec 2021 06:56:49 +0000

In this problem, you are given code that caches key-value pairs into the main memory from a database. The code contains a race condition. You need to change the code to fix this bug.

The code you are given boils down to the Get function that handles requests. The process works as follow:

A side note: the reason for moving or putting the page to the front of the cache is because the code uses Least Recently Used (LRU) to organize the page.

The problem with this implementation is when multiple goroutines try to execute the function concurrently.

Solution

In order to prevent race conditions from occurring, you should put a lock around the shared data to ensure only one goroutine can access the data at a time. The following code fix the race condition problem.

The bug fixes for the function are:

Line 2 Lock this function so only one goroutine can read and write the cache.
Line 3 Don't forget to unlock when you are done!

Key takeaway

Pay attention to goroutines that perform the "check-then-act"

While Go's concurrency mechanisms make it easy to write clean concurrent code, they don't prevent race conditions.

Generally speaking, a race condition happens when two or more threads can access shared data and try to change it simultaneously. Problems often occur when one thread does a "check-then-act," and another thread does something to the value between the "check" and the "act".

In this problem, multiple goroutines "check" if key X is available in the cache, and if the key does not exist, then the "act" load pages from a database and put it in the cache.

As stated previously, you should put a lock around the shared data to ensure only one goroutine can access the data at a time.

Go support a more primitive way of handling concurrency

Go supports traditional means of writing concurrent code through memory access synchronization. In this problem, since we need to coordinate access to data across goroutines, we use sync.Mutex. sync.Mutex has two methods, Lock and Unlock. Calling Lock causes the current goroutine to pause as long as another goroutine is currently in the critical section. When the critical section is clear, the current goroutine's lock is acquired, and the code in the critical section is executed. Call the Unlock method to mark the end of the critical section when you are done.

When you acquire a mutex lock, make sure you release the lock. Use a defer statement to call Unlock immediately after calling Lock to handle this easily.

func (k *KeyStoreCache) Get(key string) string {
    k.mu.Lock()
    defer k.mu.Unlock()

    // More codes here...
}

This ability to choose between CSP primitives and memory access synchronizations is excellent since it gives you control over what style of concurrent code you decide to write to solve problems, but it can also be confusing. Newcomers to the language often think that the CSP style of concurrency is the one and only way to write concurrent code in Go.

If you can, use a higher-level technique

While Go support a more traditional means of writing concurrent code, it is highly recommended for you to use a higher-level technique. According to the language FAQ:

Regarding mutexes, the sync package implements them, but we hope Go programming style will encourage people to try higher-level techniques. In particular, consider structuring your program so that only one goroutine at a time is ever responsible for a particular piece of data. Do not communicate by sharing memory. Instead, share memory by communicating.

The drawback of using mutexes is that they obscure the flow of data through a program. When you pass a value from goroutine to goroutine over a series of channels, the data flow is clear. Access to the value is localized to a single goroutine at a time. When a mutex is used to protect a value, there is nothing to indicate which goroutine currently has ownership of the value, because access to the value is shared by all of concurrent processes.

Use -race flag to test for a race condition

Go includes a race detector tool for finding race conditions. It is available on all platforms. To use this tool, just add the -race flag to the command line:

$ go test -race package // Test the package
$ go run -race source.go // Compile and run the program
$ go build -race command // Build the command
$ go install -race package // Install the package

When there are race conditions, it will print out a warning about data race.

fatal error: concurrent map writes
==================
WARNING: DATA RACE
Write at 0x00c000012038 by goroutine 19:
  container/list.(*List).insert()
      /usr/local/Cellar/go/1.16.6/libexec/src/container/list/list.go:96 +0x79a
  <--------- TRUNCATED LINES ------------->

Previous write at 0x00c000012038 by goroutine 16:
  container/list.(*List).insertValue()
      /usr/local/Cellar/go/1.16.6/libexec/src/container/list/list.go:104 +0x644
  <--------- TRUNCATED LINES ------------->

Goroutine 19 (running) created at:
  2-race-in-cache/2-race-in-cache.RunMockServer()
      /Users/jxu/01-Projects/learninggo/go-concurrency-exercises/2-race-in-cache/mockserver.go:26 +0xb5
  <--------- TRUNCATED LINES ------------->

Goroutine 16 (running) created at:
  2-race-in-cache/2-race-in-cache.RunMockServer()
      /Users/jxu/01-Projects/learninggo/go-concurrency-exercises/2-race-in-cache/mockserver.go:26 +0xb5
  <--------- TRUNCATED LINES ------------->
==================

You should take the warning seriously. According to the article from go.dev blog:

It will not issue false positives, so take its warnings seriously. But it is only as good as your tests; you must make sure they thoroughly exercise the concurrent properties of your code so that the race detector can do its job.

Go producer-consumer problem

Joash Xu — Mon, 06 Dec 2021 04:11:15 +0000

In the producer-consumer problem, a producer repeatedly generates data and writes it into a buffer. The consumer repeatedly reads the data in the buffer, removing it from the buffer and using the data in some way.

In this particular problem, the producer reads in tweets from a stream, and a consumer is processing the data to find out whether someone has tweeted about Golang or not. The task is to implement a producer and consumer that run concurrently to increase the throughput.

Solution

Key takeaway

The use buffered channel

You can opt to implement this using an unbuffered channel. When no goroutine reads the channel, the execution will pause. So this will decrease throughput. The length of the buffer depends on your need. For this problem, I just use ten. The buffered channel is declared at line 34.

Clean up your goroutines

When you launch a goroutine, make sure that it will eventually exit. Go runtime can not detect that a goroutine will never be used again. If a goroutine does not exit, the scheduler will still periodically give it time to do nothing, which slows down your program. This is called a goroutine leak.

In our solution, we clean up our goroutine on line 12. Once the stream is closed, we also close the link channel.

Range and close

You can read from a channel using a for-loop construct. It will keep reading from the channel until the channel is closed.

So in our solution, line 20 will keep reading the channel link. Until that channel is closed (at line 12).

Wait for the process to finish

In our solution, line 43, the execution will pause until a value is written to the done channel. And we write to this channel at the end of our consumer function (line 27) to indicate that we are done. If you don't wait, the program will exit immediately.

Wrap up

So in this article, we again see Go concurrency's building block, namely goroutines and channels. The following article will examine a more traditional means of writing concurrent code through memory access synchronization and the primitives that follow that technique.

Go simple rate limiter

Joash Xu — Thu, 02 Dec 2021 08:58:38 +0000

So the first problem in this series is a straightforward one.

You are given a crawler that requests pages. But this crawler is very aggressive. Now, you do not want to burden the webserver too much. So you need to limit the crawler to at most one page per second while still doing it concurrently.

The solution

In this solution, you need to use a ticker from the time package. The time.NewTicker will return a channel that sends the time on every tick. You specified the period of ticks by the duration argument; the duration parameter is in nanoseconds. In this case, you need to pass the time. Second because you need to limit the crawl to one page per second.

For the limiter to actually work, you need to understand the behavior of an unbuffered channel. Once you know that, you have solved the problem.

Key Take Away

Execution will pause when you read from an empty channel. If you read from an empty channel, in this case ticker, the goroutine will pause. The execution will resume when the ticker writes to this channel on every tick (one second).
Value written to a channel can only be read once. If multiple goroutines are reading from the same channel, a value written to the channel will only be read by one of them.
You need at least two concurrently running goroutines when you write to or read from an unbuffered channel.

Wrap up

This is a simple problem that shows how unbuffered channels behave. This is relatively straightforward, but it shows how execution pauses and resumes as you read from and write to a channel.

Go concurrency overview

Joash Xu — Wed, 01 Dec 2021 06:23:05 +0000

One of the things that drive me to learn Go is concurrency. Go is famous for this feature. Go concurrency is based on Communicating Sequential Processes (CSP), which was first described by Tony Hoare back in 1978. Yes, he is the one who invented the Quicksort algorithm.

This article will go through four fundamental components of concurrency in Go: goroutines, channels, the select keyword, and WaitGroup.

Words of caution

Parallelism is about doing lots of things at once.Not the same, but related.

One is about structure, one is about execution.

Concurrency provides a way to structure a solution to solve a problem that may (but not necessarily) be parallelizable.

-- Rob Pike, Co-inventor of the Go language

More concurrency does not automatically make things fasters, and it can make code harder to understand. Concurrency is not parallelism. When you write a piece of concurrent code, you hope that it will be run in parallel. But there is no guarantee. Parallelism is a property of the runtime of our program, not the code.

You should use concurrency in two cases. First, when you want to combine data from multiple operations that can operate independently. And second, the process that is running concurrently takes a lot of time, for instance, functions like I/O or reading and writing to a disk or network. Otherwise, the overhead of passing values via concurrency overwhelms any potential time savings you would gain.

Goroutines

Goroutines are one of the basic units of organization in a Go program. Every Go program has at least one goroutine: the main goroutine, which is automatically created and started when the process begins.

A goroutine is a function that runs concurrently alongside other code. To use it, place the go keyword before a function.

func sayHello() {
    fmt.Println("hello")
}

func main() {
    go sayHello()
    // continue doing other things

    // You can use anonymous function as well
    go func(){
        fmt.Println("Hello")
    }()
}

Goroutines are not OS threads, and they are not exactly green threads. They are, in fact, coroutines. Because goroutines are not OS threads, they have several advantages. You can create goroutines quickly, and the initial stack sizes are smaller than the operating system thread. Switching between goroutines is also fast. You can spawn a huge number of goroutines; other languages with native threading will slow to a crawl.

Channels

Channels are how goroutines communicate. Channels are a built-in type through which you can send and receive values. Like maps and slices, channels must be created before use. This is how you create a channel:

ch := make(chan int)

Channels are reference types like maps. When you pass a channel to a function you are passing a pointer to the channel.

To interact with a channel, you can use the <- operator. If you want to read from a channel, place the <- operator to the left of the channel. If you want to write to a channel, place the <- operator to the right of the channel.

x := <-ch // reads a value from channel ch and assign it to x
ch <- y // write the value in y to channel ch

By default, read and write block until the other side is ready. If you write to an open channel, the writing goroutine will pause until another goroutine reads from the same channel. Likewise, a read from an open channel causes the reading goroutine to pause until another goroutine writes to the same channel.

Each value written to a channel can only be read once. If multiple goroutines are reading from the same channel, a value written to the channel will only be read by one of them. This allows goroutines to synchronize without explicit locks or condition variables.

Buffered channels

By default, channels are unbuffered. But channels can be buffered. A buffered channel is created by specifying the capacity of the buffer when creating the channel:

ch := make(chan int, 10)

If the buffer is full before any reads from the channel, a subsequent write to the channel pauses the writing goroutine until the channel is read. Likewise, if reading from an empty channel will also block.

The built-in functionslen and cap return information about a buffered channel. Use len to find out how many values are currently in the buffer and use cap to find out the maximum buffer size. Once it is declared, the capacity of the buffer cannot be changed.

Range and Close

You can close a channel when there are no more values to be sent. And you can test whether a channel has been closed by assigning a second parameter.

close(ch)

// Check if channel is close or not
// exists is false if there are no more values to read and the channel is closed.

v, exists := <-ch

You can read from a channel using a for-loop construct. It will repeatedly read from the channel until the channel is closed.

for v := range ch {
    ftm.Println(v)
}

Once a channel is closed, any attempts to write to the channel or close the channel again will panic. But, attempting to read from a closed channel always succeeds.

// Writing to a closed channel will panic
var ch = make(chan string, 1)
ch <- "Hello, world!"
close(ch)
ch <- "This will panic"

// Reading from a close channel returns the zero value
var ch = make(chan int, 2)
ch <- 1
ch <- 2
close(c)
for i := 0; i < 3; i++ {
    fmt.Println("%d", <-ch)
}
// This will output 1 2 0
// No panic

Closing a channel is only required if there is a goroutine waiting for the channel to complete, such as using a for-range loop to read from the channel.

Nil channel

You can declare nil channel, but you should not. If you send a message to a nil channel, it will block forever. If you read from a nil channel, it will block forever.

// A send to a nil channel blocks forever
var ch chan string // declare nil channel
ch <- "Hello, World"

// A receive from a nil channel blocks forever
var ch chan string // nil channel
y := <- ch

Select

The select keyword allows a goroutine to read from or write to one of a set of multiple channels. Each case in a select statement either read or write to a channel, and if it is possible for a case, it executes that case. If no cases can run, a select will block. A default case can read or write without blocking.

select {
    case v := <-ch:
        fmt.Println(v)
    case v := <-ch2:
        fmt.Println(v)
    case ch3 <- x:
        fmt.Println("wrote", x)
    case <-ch4:
        fmt.Println("ignore value from channel")
    default:
        fmt.Println("no channel can be read or written")
}

The interesting about select is how it handles when multiple cases are ready. The select statement randomly picks one case that can go forward; order is not important. This is very different from a switch statement that chooses the first case that resolves to true.

The select can resolve two problems that make concurrency hard: starvation and deadlock. It solves the starvation problem by picking a random case (no case is favored over the other), and all cases are checked simultaneously. It can avoid deadlock because it checks if any of its cases can proceed; it will execute that case if it can.

WaitGroup

Sometimes one goroutine needs to wait for multiple goroutines to complete their work. But if you are waiting on several goroutines, you need to use a WaitGroup, which is found in the sync package in the standard library.

func w(id int, wg *sync.WaitGroup) {
    defer wg.Done()
    time.Sleep(time.Second)
}

func main() {
    var wg sync.WaitGroup
    routineCount := 5
    wg.Add(routineCount)
    for i := 1; i <= routineCount; i++ {
        go w(i, &wg)
    }
    wg.Wait()
}

A sync.WaitGroup doesn’t need to be initialized, just declared, as its zero value is useful. You don’t pass the sync.WaitGroup as a function parameter. This is because you must ensure that every place that uses a sync.WaitGroup is using the same instance. If you pass the sync.WaitGroup to the goroutine function and don’t use a pointer, then the function has a copy, and the call to Done won’t decrement the original sync.WaitGroup.

There are three methods of sync.WaitGroup:

Add, which increments the counter of goroutines to wait for. Add is usually called once, with the number of goroutines that will be launched.
Done, which decrements the counter and is called by a goroutine when it is finished. Done is called within the goroutine. To ensure that it is called, even if the goroutine panics, we use a defer.
Wait, which pauses its goroutine until the counter hits zero.

While WaitGroups are handy, they shouldn’t be your first choice when coordinating goroutines. Use them only when you have something to clean up (like closing a channel they all write to) after all of your worker goroutines exits.

Wrap up

So This is a short overview of the concurrency in Go. In the following article, we will try to take a deeper look by solving some concurrency problems.

DEV Community: Joash Xu

Bulk Actions in Table with Django, htmx, and AlpineJS

The Requirements

The Packages Used For This Project

The Model

The Table

The Filter

The Views

The Templates

Template to Render the Entire Page

Template to Render Table

Template to Override the Default Table

Style

Column Width

Pagination

Sorting

Highlight Rows on Update

Progress Bar

Summary

Animate Point Along an Arc in MapBox

The Packages Used For This Project

File setup

index.html

style.css

Making Semi-Circle Path

Animate a Marker

Zoom Level

All together now

map.js

Conclusion

Column Filter Table with htmx, Alpine-js, and Django

The Packages Used For This Project

The Model

The Table

The Filter

The View

The Template

Template to Render the Entire Page

Template to Render Table

Template to Override the Default Table

The Result

Sorting

Pagination

Filtering

Progress Bar

All actions

Summary

Coding Techniques for Solving Algorithmic Problems

Coding Techniques Study Notes

Responsive table with Django and htmx

The packages used for this project

How htmx works

The model

The table

The filter

The view

Style

The result

Sorting

Pagination

Searching

Summary

Go Graceful SIGINT killing

Solution

Key takeaways

A little background

Go os and os/signal packages

How to capture signal pattern in Go

Go limit service time per user

Solution

Key takeaways

Go limit service time per request

Solution

Key takeaways

How to time out code

Goroutine are not actually being killed with this time our pattern

Select statement behavior

Go race conditions problem

Solution

Key takeaway

Go `os` and `os/signal` packages