Forem: hungle00

HTMX for building a SQLite query dashboard

hungle00 — Mon, 09 Mar 2026 06:57:41 +0000

I recently built Sqlite Opus, a small web-based SQLite browser that plugs into Flask. The UI is a single-page dashboard where you can click around to explore the current database. At first, I used fetch calls with Flask partials, but later switched to HTMX to reduce JavaScript while keeping the same interactive feel.

What is HTMX? A tiny JS lib: you put attributes like hx-get, hx-post, hx-target on your HTML, and it does the AJAX + DOM swap for you. Server returns HTML chunks; no fetch() + JSON + manual DOM updates. Nice for stuff like dashboards and admin UIs where the server already renders the page—you just want “click this, replace that” without a fat SPA.

In this post, I’ll walk through how I use HTMX in this project.

Where HTMX fits in this project

I use HTMX for three main flows:

Load table info — Click a table name → load schema, columns, and indexes without a full page reload.
Execute query — Submit the query form → replace the results area with the new table (or error message).
Pagination — Click a page number → request the same query for another page and swap the results area.

How HTMX is used

1. Load table (schema, columns, indexes)

Where: Sidebar “Tables” list in index.html. Each table name is a clickable element.

Behavior: On click, HTMX sends a GET request to load that table’s metadata. The server returns one HTML response that contains three fragments. HTMX swaps each fragment into the matching element by id, so all three panels update from a single request.

Markup (concept):

<div class="table-item"
     data-table-name="{{ table }}"
     title="Click to view schema"
     hx-get="{{ url_for(blueprint_name ~ '.get_table_info_partial', table_name=table) }}"
     hx-trigger="click"
     hx-target="body"
     hx-swap="none">
  <i class="fas fa-table"></i> {{ table }}
</div>

hx-get — URL: GET /api/table/<table_name>/
hx-trigger="click" — Request is sent when the user clicks the table name.
hx-target="body" and hx-swap="none" — The main response body is not swapped anywhere; only 3 fragments are applied.

Server: The route get_table_info_partial renders partials/table_info.html, which outputs three divs with hx-swap-oob="true" and these ids:

table-columns-container
table-indexes-container
table-schema-container

So one response updates all three panels. JavaScript listens for htmx:beforeRequest and htmx:afterSettle to show a loading state, switch to the “Table Schema” tab, and prefill the query editor with SELECT * FROM <table>; for convenience.

2. Execute query

Where: Query editor form in index.html (textarea + Execute button).

Behavior: Submitting the form sends a POST with the SQL and pagination parameters. The server runs the query and returns the query results partial (the results table plus the pagination bar). HTMX replaces the contents of the results area with that HTML.

Markup (concept):

<form id="query-form"
      hx-post="{{ url_for(blueprint_name ~ '.execute_query') }}"
      hx-target="#query-results-area"
      hx-swap="innerHTML">
  <textarea id="query-editor" name="query" ...></textarea>
  <input type="hidden" name="page" value="1">
  <input type="hidden" name="per_page" value="20">
  <button type="submit" id="execute-btn" ...>Execute Query</button>
  <button type="button" id="clear-btn" ...>Clear</button>
</form>

hx-post — URL: POST /api/query/
hx-target="#query-results-area" — Response replaces the inner HTML of the results container.
hx-swap="innerHTML" — The new results table and pagination bar are inserted inside that container.

Server: The execute_query route reads query, page, and per_page from the form data. It runs the query (with pagination for SELECTs), then renders partials/query_results.html and returns that HTML.

Error handling: If the user submits an empty query, we don’t send the request: a htmx:beforeRequest handler checks the form and the textarea, calls preventDefault(), and shows a “Please enter a query” message in the top status banner. For other errors, an htmx:responseError handler shows the error in the same banner.

3. Pagination

Where: Pagination bar inside partials/query_results.html. It is rendered only when there is more than one page.

Behavior: Each page number, plus Prev and Next, is a submit button inside a form. Submitting sends the same query and per_page with a new page value. The server runs the query for that page and returns the same query_results.html partial; HTMX swaps it into the same #query-results-area container.

Markup (concept):

<form hx-post="{{ url_for(blueprint_name ~ '.execute_query') }}"
      hx-target="#query-results-area"
      hx-swap="innerHTML">
  <input type="hidden" name="query" value="{{ current_query }}">
  <input type="hidden" name="per_page" value="{{ pagination.per_page }}">
  <!-- Prev -->
  <button type="submit" name="page" value="{{ pagination.page - 1 }}" ...>Prev</button>
  <!-- Page numbers -->
  <button type="submit" name="page" value="{{ i }}" ...>{{ i }}</button>
  <!-- Next -->
  <button type="submit" name="page" value="{{ pagination.page + 1 }}" ...>Next</button>
</form>

current_query — Passed from the route into the template so the pagination form always re-sends the last executed query.
name="page" — Each button submits a different page value; the server uses it for LIMIT/OFFSET (or equivalent).

Server: The same execute_query route handles both the initial run and pagination. When the request comes from this form, query and per_page are in the form data, and page is the value of the clicked button. The route runs the query for that page and returns the updated query_results.html partial.

You can see detail implement in the repo: https://github.com/hungle00/sqlite-opus

From Ruby OOP to Elixir Functional by Example

hungle00 — Tue, 02 Dec 2025 04:00:02 +0000

One of the most effective ways to learn functional programming is to convert the same features you've written in an OOP language to functional style. In this post, I won't go into theoretical details about functional programming. Instead, I'll implement and compare a concrete example to highlight the differences between thinking in OOP vs functional paradigms.

For example, I have a ToyRobot object in Ruby. In OOP terms, this object has:

3 attributes: x, y, and direction
Some actions: move, turn left, turn right

Below is the code implemented in Ruby:

class ToyRobot
  attr_reader :x, :y, :direction
  DIRECTIONS = [:north, :east, :south, :west]
  BOUNDS = {x: 0..10, y: 0..10}

  def initialize
    @x = 0
    @y = 0
    @direction = :north
  end

  def place(x, y, direction)
    if DIRECTIONS.include?(direction)
      @x = x
      @y = y
      @direction = direction
    else
      raise "Invalid direction"
    end
  end

  def report
    {x: @x, y: @y, direction: @direction}
  end

  def move
    case @direction
    when :north
      @y += 1
    when :east
      @x += 1
    when :south
      @y -= 1
    when :west
      @x -= 1
    end

    if @x < BOUNDS[:x].min || @x > BOUNDS[:x].max || @y < BOUNDS[:y].min || @y > BOUNDS[:y].max
      raise "Out of bounds"
    end
  end

  def right
    case @direction
    when :north
      @direction = :east
    when :east
      @direction = :south
    when :south
      @direction = :west
    when :west
      @direction = :north
    end
  end

  def left
    # implement left
  end
end

I'll build the same thing in Elixir. If you're new to Elixir, I encourage you to try implementing it yourself before checking my code:

defmodule ToyRobot do
  @directions [:north, :east, :south, :west]
  @bounds_x 0..20
  @bounds_y 0..20

  defstruct x: 0, y: 0, direction: :east

  def new() do
    {:ok, robot} = place(0, 0, :east)
    robot
  end

  def place(_x, _y, direction) when direction not in @directions do
    {:error, :invalid_direction}
  end

  def place(x, y, _direction) when x not in @bounds_x or y not in @bounds_y do
    {:error, :out_of_bounds}
  end

  def place(x, y, direction) do
    {:ok, %ToyRobot{x: x, y: y, direction: direction}}
  end

  def report(%ToyRobot{x: x, y: y, direction: direction}) do
    {x, y, direction}
  end

  def right(%ToyRobot{direction: direction} = robot) do
    new_direction =
      case direction do
        :north -> :east
        :east -> :south
        :south -> :west
        :west -> :north
      end

    %ToyRobot{robot | direction: new_direction}
  end

  def left(%ToyRobot{direction: direction} = robot) do
    # implement right
  end

  def move(%ToyRobot{x: x, y: y, direction: direction} = robot) do
    {new_x, new_y} =
      case direction do
        :north -> {x, y - 1}
        :east -> {x + 1, y}
        :south -> {x, y + 1}
        :west -> {x - 1, y}
      end

    if new_x in @bounds_x and new_y in @bounds_y do
      %ToyRobot{robot | x: new_x, y: new_y}
    else
      robot
    end
  end
end

Key Differences

So what are the differences between these two implementations? I think there are two important differences that highlight the different ways of thinking between OOP and functional languages:

1. Method vs Function

In Ruby, we have objects. Methods are functions that belong to a class. When you call an instance method, you can think of the ToyRobot taking an action like move or left:

robot = ToyRobot.new
robot.move
robot.left

In Elixir, we don't have objects. Modules are just used to group functions. When we call ToyRobot.move(robot), we're applying the move function to the robot's data:

robot = ToyRobot.new()
ToyRobot.move(robot)
ToyRobot.left(robot)

In Elixir function definitions, we need to pass all required data to the function as arguments, but the Ruby version doesn't need to. This is because, in OOP languages, objects know their state (the position of the robot in our case). In Elixir, functions just receive and transform data—taking the robot's position and returning a new one.

2. Mutable vs Immutable

In Ruby, every time we call a method, we change the state of the ToyRobot object:

robot = ToyRobot.new

robot.move  # @x, @y change in the object
robot.report
# => {x: 0, y: 1, direction: :north}

robot.move  # Continues to change the same object
robot.report
# => {x: 0, y: 2, direction: :north}

In Elixir, data is immutable. Every time we call a function, it returns a new struct and does not change the input:

robot = ToyRobot.new()
# => %ToyRobot{x: 0, y: 0, direction: :east}

new_robot = ToyRobot.move(robot)
# => %ToyRobot{x: 1, y: 0, direction: :east}

robot
# => %ToyRobot{x: 0, y: 0, direction: :east}  # Original unchanged!

Elixir provides the pipe operator (|>) so we can call functions sequentially:

robot = ToyRobot.new()
|> ToyRobot.move()
|> ToyRobot.move()
|> ToyRobot.right()
|> ToyRobot.left()

In conclusion, the fundamental difference is in how we think about state:

Ruby (OOP): "The object changes its own state"
Elixir (Functional): "The function receives data and returns new data"

Ruby - use Redis-lock to avoid duplicate jobs

hungle00 — Fri, 25 Apr 2025 07:57:17 +0000

Introduction

In a Rails app, sometimes you need to execute a long-running job and have to run it in the background. You might run into some special requirements to avoid duplicate jobs

Problem 1

You must delete the user and all related data in CleanupDataJob job. It will take a long time, and to avoid some problems, such as database-locking, you need to keep only one user deleted at a time.

Problem 2

You have the ProductSalesJob to fetch the sales data of the product and calculate some numbers. What if you had 100 of these jobs? Your queue will have 100 jobs doing the exact same thing, and quickly pile up. So you need to avoid duplicate jobs that do the same thing for a single product.

To avoid more than one job executing at a time, you'll need the locking mechanism.

2. Redis-based locking

This solution is creating a Redis lock for each scheduled job. Depending on the uniqueness constraint, it will reject any jobs that match the same signature.

The main idea of using Redis-lock can be described as:

Try to Acquire Lock:
- Success → Proceed to Critical Section → Release Lock.
- Failure → Log Message → Re-enqueue Job.
Critical Section:
- Perform job logic.
Release Lock:
- Always release the lock, even on failure or exception, using ensure.

The full implementation for problem 1 is here:

Problem 1: Solution
In this case, we'll periodically call the job in 2 minutes if it has another job acquiring the lock.

require 'redis'

class CleanupDataJob < ApplicationJob
  queue_as :default

  # Redis lock configurations
  WAIT_FOR_NEXT_CALLING = 2.minutes
  LOCK_KEY_EXPIRATION = 5.minutes # Prevent stale locks
  REDIS_LOCK_KEY = "cleanup_data_job_lock"

  def perform(user_id)
    redis = Redis.new

    # Try to acquire the lock
    if acquire_lock(redis)
      begin
        # Perform the job logic
        Rails.logger.info "Executing #{self.class.name} with user: #{user_id}"
        cleanup_data user_id
      ensure
        # Release the lock
        release_lock(redis)
      end
    else
      Rails.logger.info "Job already running: #{self.class.name} with user: #{user_id}"
      self.class.set(wait: WAIT_FOR_NEXT_CALLING).perform_later(user_id)
    end
  end

  private

  def cleanup_data user_id
    # Simulate a long-running task
    sleep(30)
    Rails.logger.info "Data cleanup completed."
  end

  def acquire_lock(redis)
    # Set the lock key with NX (set if not exists) and expiration
    redis.set(REDIS_LOCK_KEY, "locked", nx: true, ex: LOCK_KEY_EXPIRATION)
  end

  def release_lock(redis)
    redis.del(REDIS_LOCK_KEY)
  end
end

Problem 2: Solution
This problem is quite similar to problem 1, the difference is that we must keep a unique job for each job with passing argument, not for all instances of the job. To do that, we pass the argument as a part of lock_key, so instead of product_sales_job_lock, we use product_sales_job_lock#{product_id}. Besides, we will not retry the job if another job with the same product_id is processing.

require 'redis'

class ProductSalesJob < ApplicationJob
  queue_as :default

  LOCK_KEY_EXPIRATION = 5.minutes # Prevent stale locks

  def perform(product_id)
    redis = Redis.new
    lock_key = "product_sales_job_lock#{product_id}"

    # Try to acquire the lock
    if acquire_lock(redis, lock_key)
      begin
        # Perform the job logic
        Rails.logger.info "Executing #{self.class.name} with product: #{product_id}"

        fetch_product_sales product_id
      ensure
        # Release the lock
        release_lock(redis, lock_key)
      end
    else
      Rails.logger.info "Job already running: #{self.class.name} with product: #{product_id}"
    end
  end

  private

  def fetch_product_sales(product_id)
    # Simulate processing logic
    sleep(15)
    ...
  end

  ...
end

Deploy a web app on VPS with Docker, Kamal

hungle00 — Mon, 17 Feb 2025 03:47:20 +0000

Introduction

When the Docker container came, it made building web applications easier for developers in both development and deployment. Before, I used Docker for development, but now I have decided to learn how to use it for deployment.
When you search the Internet, you may encounter many complex terms for newbies, such as CI/CD, K8s, and docker swarm. In this post, I'll focus on a basic understanding of the deployment workflow and then, deploy a simple Go web app on my Linode VPS.

In my opinion, the basic workflow behind Docker deployment can be divided into 4 steps:

Build an image from your application code.
Push the image you built in the previous step to the Docker service ( docker hub, Amazon ECR, ...).
Write a file (regularly .yml) that defines each needed service.
Run a file in step 3 to pull images, setup and run each service on your VPS.

Sample Golang web app

For saving time, I'll use the existing repo, at the beginning I decided to use my old Rails app. But after going around on the Internet, and seeing the exciting repo that was written in Go, I'll use it for demo deployment.
Here's my Git repo for this demo: https://github.com/hungle00/hacker-live
You can see a Dockerfile to build an image for this app in this repo.
Dockerfile for hacker-live

Use docker-compose

I will use Treafik for the proxy server, which will act as the middle-man between the outside web and your VPS. The advantage of Treafik compared to other proxy servers is that it can automatically detect our running containers.
Here's the docker-compose.yml file that defines 2 services: Treafik proxy and our Go app.

version: '3'

services:
  reverse-proxy:
    # The official v3 Traefik docker image
    image: traefik:v3.3
    # Enables the web UI and tells Traefik to listen to docker
    command: --api.insecure=true --providers.docker
    ports:
      # The HTTP port
      - "80:80"
      # The Web UI (enabled by --api.insecure=true)
      - "8080:8080"
    volumes:
      # So that Traefik can listen to the Docker events
      - /var/run/docker.sock:/var/run/docker.sock
  hacker-live:
    image: jamesjoyce/hacker-live
    container_name: hacker-live
    labels:
      - "traefik.http.routers.hacker-live.rule=Host(`Your IP/domain`)"

You just ssh to your server, copy docker-compose.yml file and then run:

docker-compose up -d

This approach is not practical because every time you change code, you must rebuild this image, then ssh to the server, and edit the docker-compose file to redefine the services.
In reality, we need the tool for the automatic setup of these steps. In the next part, I'll introduce Kamal for deployment.

Use Kamal

Kamal is the tool developed by the Rails team for deploying and managing your web app in production with Docker.
Simply speaking, Kamal is mostly a bunch of scripts to automate Docker deploys. When you run kamal init, it will generate some files that need for deployment, the most important file is config/deploy.yml.
For example, below is the config/deploy.yml file I use

# Name of your application. Used to uniquely configure containers.
service: hacker-live

# Name of the container image.
image: jamesjoyce/hacker-live

# Deploy to these servers.
servers:
  web:
    - 192.168.0.1  # change this with your IP
  # job:
  #   hosts:
  #     - 192.168.0.1
  #   cmd: bin/jobs

proxy:
  ssl: true
  host: app.example.com
  # Proxy connects to your container on port 80 by default.
  # app_port: 3000

# Credentials for your image host.
registry:
  # Specify the registry server, if you're not using Docker Hub
  # server: registry.digitalocean.com / ghcr.io / ...
  username: jamesjoyce

  # Always use an access token rather than real password (pulled from .kamal/secrets).
  password:
    - KAMAL_REGISTRY_PASSWORD

# Configure builder setup.
builder:
  arch: amd64
  # Pass in additional build args needed for your Dockerfile.
  # args:
  #   RUBY_VERSION: <%= ENV["RBENV_VERSION"] || ENV["rvm_ruby_string"] || "#{RUBY_ENGINE}-#{RUBY_ENGINE_VERSION}" %>

As you can see, I didn't define service for Treakfik. This is because Kamal automatically uses their Kamal proxy for the proxy server.
After config, then you run:

kamal deploy
# or kamal setup

It will SSH into each server, prepare it with any necessary dependencies, and build and push the latest images to the docker registry.

You can read more about Kamal at the official docs. There are many concepts that I didn't introduce in this post, for example: manage accessories (db/redis/search), manage logging, ...

What’s next

In this post, I just introduce how to deploy a very basic web app on VPS using Docker. In reality, you may need more to deploy and manage your web app in production, for example:

Some services like database, job workers, Redis, ...
Monitoring your server (memory usage, CPU, disk, etc.) ...
Setup CI/CD

Concurrency in Ruby: Thread and Fiber

hungle00 — Mon, 18 Nov 2024 02:17:27 +0000

In a previous post, I introduce briefly about Fiber and then, build a simple asynchronous HTTP server using Async gem. In this post, I'll focus on comparing Fiber and Thread and explain why Fiber is better than Thread in some cases.

Fibers and Threads
Example: Http request
Example: Http server
Concluding

Fibers and Threads

Thread

thread = Thread.new do
  #...
end
thread.join

Fiber

fiber = Fiber.new do
  #...
end
fiber.resume # transfer / Fiber.schedule

As you can see, they have quite similar syntax, so what are the differences between them?

The level:
- Threads are created 1:1 with threads on OS.
- Fibers are implemented at the programming language level, multiple fibers can run inside a thread.
Scheduling mechanism:
- Threads are run pre-emptive by almost modern OS.
- Fibers are referred to as a mechanism for cooperative concurrency.

Threads will run automatically, they are scheduled by OS.
With Thread, programmers are just allowed to create new Threads, make them do some tasks, and use the join method to get the return from execution. The OS will run threads and decide when to run and pause to achieve concurrency.

[
  Thread.new { # code },
  Thread.new { # code }
].each(&:join)

Meanwhile, Fiber gives us more control
With Fiber, programmers are free to start, pause, and resume them.

Fiber.new { } : create new fiber, started with resume
Fiber.yield: pause current Fiber, moves control to where fiber was resumed
After suspension, Fiber can be resumed later at the same point with the same execution state.

fib2 = nil

fib = Fiber.new do
  puts "1 - fib started"
  fib2.transfer
  Fiber.yield
  puts "3 - fib resumed"
end

fib2 = Fiber.new do
  puts "2 - control moved to fib2"
  fib.transfer
end

fib.resume
puts ""
fib.resume

1 - fib started
2 - control moved to fib2

3 - fib resumed

Fiber over Thread

A fiber is lighter-weight than a thread, so we can spawn more fibers than threads
Less context-switching time ( the advantages of cooperative scheduling compare to preemptive scheduling

Fiber scheduler

In a previous article, I noted that before Fibers lacked the scheduler implementation to be useful, now it is officially supported from Ruby 3. If you want to enable the fiber scheduling, you need to set a Fiber Scheduler object.

Fiber.set_scheduler(scheduler)

You can check the list of Fiber Scheduler implementations here Fiber Scheduler List project.
I suggest using this Fiber Schedulers implementation - Async gem. It was created by Samuel Williams and has the robust API to write concurrency code.

The next part will help you understand more about how to use Thread, Fiber, and Async gem to write concurrent HTTP requests.

HTTP requests example

For example, we will get a list of uuid from this site

require "net/http"

def get_uuid
  url = "https://httpbin.org/uuid"
  response = Net::HTTP.get(URI(url))
  JSON.parse(response)["uuid"]
end

This request will take about 1s to finish.

Sequentially version

def get_http_sequently
  results = []

  10.times.map do
    results << get_uuid
  end

  results
end

now = Time.now
puts get_http_sequently
puts "Fiber runtime: #{Time.now - now}" # about 11-12s

One request took about 1s so if we call sequentially, this code will take about 10s.

Concurrency version with thread

def get_http_via_threads
  results = []

  10.times.map do
    Thread.new do
      results << get_uuid
    end
  end.map(&:value)

  results
end
# => 1.3s

Concurrency version with fiber

require "async"

def get_http_via_fibers
  Fiber.set_scheduler(Async::Scheduler.new)
  results = []

  10.times do
    Fiber.schedule do
      results << get_uuid
    end
  end
  results
ensure
  Fiber.set_scheduler(nil)
end
# => 1.2s

Because all requests are called concurrently, the total time is about the time of the slowest request.

More about Async

Another implementation uses Async gem like that, we use Kernel#Async method instead of Async::Scheduler

def get_http_via_async
  results = []

  Async do
    10.times do
      Async do
        results << get_uuid
      end
    end
  end
  results
end

The general structure of Async Ruby programs:

You always start with an Async block which is passed a task.
That main task is usually used to spawn more Async tasks with task.async.
These tasks run concurrently with each other and the main task.

The task is built on top of each Fiber.

HTTP server example

The minimal HTTP server in Ruby can be implemented by using the built-in class TCPServer, it'll look like this:

socket = TCPServer.new(HOST, PORT)
socket.listen(SOCKET_READ_BACKLOG)

loop do
  conn = socket.accept # wait for a client to connect
  request = RequestParser.call(conn)
  #... status, headers, body
end

Now we'll make the server handle more than 1 request per time.

Thread pool version

pool = ThreadPool.new(size: 5)
loop do
  conn = socket.accept # wait for a client to connect
  pool.schedule do
    # handle each request
    request = RequestParser.call(conn)
  end
end

The idea is to use a thread pool to limit the number of threads running concurrently.

Async version

Async do
  loop do
    conn = socket.accept # wait for a client to connect
    Async do
      # handle each request
      request = RequestParser.call(conn)
    end
   end
end

The Falcon is the most-known app server that uses async for connection pool Falcon.

More detail about implementation and benchmark testing on this repo

Concluding

Threads and fibers allow programmers to write concurrent code, it's very useful for handling blocking-IO operations.
As a Ruby developer, we don't use Thread directly most of the time. But in reality, for web development, a lot of tools use threads.
- A web server like Puma or Webrick
- A background job like Sidekiq, GoodJob, and SolidQueue
- An ORM like ActiveRecord or Sequel
- A Http client HTTParty or RestClient
Fiber (+ FiberScheduler) has just been released from Ruby 3 maybe may have a bright future due to its advantages compared to Thread. Here's a couple of the most useful tools on top of fiber:
- async-http a featureful HTTP client
- falcon HTTP server built around Async core
- ...

Ruby Fiber Scheduler and Async

hungle00 — Wed, 23 Oct 2024 14:53:14 +0000

Ruby 3 comes with a lot of support tools for concurrency programming, one of them is Fiber Scheduler. In this post, I'll introduce briefly about Fiber Scheduler, the Async gem, and then, implement the simple server using Fiber Scheduler.

What is Fiber

Fiber can be seen as a lightweight thread or thread implemented at the programming language level instead of the OS level.

fiber = Fiber.new do
  #...
end
fiber.resume # transfer / Fiber.schedule

A Fiber is a lightweight unit of execution that can be suspended and resumed at specific points. Because only one fiber can execute at a time, they are often referred to as a mechanism for cooperative concurrency. Theoretically, the advantage of Fibers is less context switching compared to Thread, but before Ruby 3, Fibers lacked the scheduler implementation to be useful.

Fiber scheduler

Since Ruby 3, Fibers have been given superpowers in the form of the FiberScheduler.
The Fiber Scheduler consists of two parts:

Fiber Scheduler interface
Fiber Scheduler implementation

What Ruby 3 implements is the interface. It would not use the scheduler unless a scheduler implementation is included.
If you want to enable the asynchronous behavior in Ruby, you need to set a Fiber Scheduler object.

Fiber.set_scheduler(scheduler)

The list of Fiber Scheduler implementations and their main differences can be found at Fiber Scheduler List project.
I recommend you read this article to understand more detail about Fiber Scheduler.

Async gem:

One of the most mature and common Fiber Scheduler implementations is by Samuel Williams. Furthermore, he not only implemented a Fiber Scheduler but created the gem called Async which was more powerful for working with asynchronous programming.

If you want to go to details about the Async gem and how to use it, you should read the document Async Guides

The simple use of async gem is quite straightforward, you just need to wrap the computation code in Kernel#Async method, for example:

require 'async'

Async do |task|
  puts "Hello World!"
end

Simple asynchronous HTTP server

In this part, I'll implement the simple HTTP server using Async gem.
For simplicity, I will get the code from Appsignal's article Building a 30 line HTTP server in Ruby. After that, add the async gem to make the code asynchronous.

Using Fiber syntax + Async::Scheduler

require 'socket'
require 'async/scheduler'

Fiber.set_scheduler(Async::Scheduler.new)
server = TCPServer.new 2000 # Server bound to port 2000

app = Proc.new do
  ['200', {'Content-Type' => 'text/html'}, ["Hello world! The time is #{Time.now}"]]
end

Fiber.schedule do
  loop do
    session = server.accept    # Wait for a client to connect
    Fiber.schedule do
      status, headers, body = app.call({})

      session.print "HTTP/1.1 #{status}\r\n"

      headers.each do |key, value|
        session.print "#{key}: #{value}\r\n"
      end

      session.print "\r\n"

      body.each do |part|
        session.print part
      end

      session.close
    end
  end
end

or using Kernel#Async method

require 'socket'
require 'async'

server = TCPServer.new 2000

app = Proc.new do
  ['200', {'Content-Type' => 'text/html'}, ["Hello world! The time is #{Time.now}"]]
end

Async do
  loop do
    session = server.accept    # Wait for a client to connect
    Async do
      status, headers, body = app.call({})

      # ... same code as above
    end
  end
end

Our server is very simple but it is enough to demonstrate the usage and the advantage of Async gem. You can check the full code, and benchmark testing on [this repo].(https://github.com/hungle00/async-http-server)

If you wonder about the Ruby asynchronous server that can be used in production, you can check this gem, it is built on top of the Async gem.

Vanilla JS Effect Methods

hungle00 — Sat, 27 Jul 2024 02:52:20 +0000

In the past, I worked quite a lot with jQuery and the thing I love about jQuery is that it provides many useful methods with simple and lightweight syntax. One of the most used jQuery methods is effects methods - which are used for creating animation effects for website.

For example:

hide() / show()
toggle()
fadeIn()
fadeOut()
...

W3schools listed all JQuery effect methods here

But now with the growth of tons of JS libraries, jQuery seems to be out of date, and in some projects, developers must replace jQuery code with pure JS.

It's effortless to create the function act the same as hide() / show(), just edit the display style

element.style.display = 'block' // or none

but with more complex effects like fadeIn()/fadeOut(), we need to write more code.

Another problem with the writing effect method in vanilla JS is verbose syntax. You can see that with the jQuery method:

$(".myClass").slideDown();

It is very readable and intuitive, you find the element with jQuery selector, and then call the slideDown method as the method of the element.
The code implements the same feature in vanilla JS if you define slideToggle method before:

const element = document.querySelector(".myClass");
slideToggle(element);

You query the element and then pass it to the slideToggle() function, it seems less native and less readable than the sample with jQuery.

The trick here is to use HTMLElement.prototype to add a method to the HTML element and you can use the effect function as a method of the HTML element. For simplicity, let's define the hide() method:

HTMLElement.prototype.hide = function() {
  this.style.display = 'none'
}

document.querySelector(".myClass").hide()

For reuse purposes, I created some vanilla JS methods for effects here. Just put it somewhere on your codebase and use it as the native method of HTML element.

Lambda Calculus - Represent in Clojure

hungle00 — Sun, 12 Nov 2023 15:56:24 +0000

Recently, I've been spending my free time learning functional programming. To understand comprehensively about functional programming, it is need to mention Lambda Calculus - a completed computation model for functional programming.

I am a developer and didn't have Lambda Calculus academic training, so at the beginning, I was very confused about some concepts. From my perspective, trying to implement it in a specific programming language makes it much easier to understand and explain to someone else. I chose Clojure for this purpose because it is a Lisp dialect language and has coherence and elegance of design.
This post just focuses on representing λ-calculus in Clojure. I suppose that you have basic knowledge about λ-calculus, if not, try to read Lambda Calculus theory or search on Wikipedia.

Some basic λ expressions

Function abstraction: All functions of the lambda calculus are anonymous and only take one parameter.

For example: λx.e function accepts an argument x and returns the value of y. In Clojure, we'd write this as:

(fn [x] y)

Function application: (f e) means the applied function f to e. It has a similar form in Clojure:

(f e)

Let's explore some other λ expressions:

λx.x called the identity function.

(fn [x] x)

Applied identity function above to a we have (λx.x a):

((fn [x] x) a)

(λ f. λ x. f x) equivalent to:

(fn [f] (fn [x] (f x))

Function composition
This function takes 2 functions as arguments and returns a function that is the composition of those.

comp = λg. λf. λx. g (f x)

Now we'll write Clojure code to represent comp function and define 2 functions add and subtract for testing. In Clojure:

(def comp
  (fn [f g]
    (fn [x] (f (g x)))))

(def add (fn [n] (+ n 2)))
(def subtract (fn [n] (- n 4)))

((comp add subtract) 8)
;; => 6

In the next part, I'll introduce Church encoding - a tool for representing numbers, booleans, conditionals, and data structures in Lambda Calculus

Church encoding

Church encoding, in Lambda calculus, is a way to encode data and operators using only a combination of anonymous functions.

Booleans

Let's define an abstraction for the booleans.

true = λx. λy. x
false = λx. λy. y

These functions receive two arguments and, If true, the first argument is returned. If false, the second argument is returned.

(def fst (fn [x y] x))
(def snd (fn [x y] y))

Pair

pair = λx. λy. λf. f xy

The pair function takes two arguments x and y and returns a function that contains x and y in its body.

In Clojure, this term is equivalent to:

(def pair (fn [x t]
  (fn [func] (func x t))))

Given a pair, we can extract the first and second items using selection functions - these functions with similar form to boolean functions above.
Clojure code:

(def fst (fn [a b] a))
(def snd (fn [a b] b))

((pair 3 5) fst))  ;; => 3
((pair 3 5) snd))  ;; => 5

Numerals

A Church numeral applies its first argument to its second argument n times. For example, the definition of numbers from 0-3 in λ-Calculus:

0 = λf.λx.x
1 = λf.λx.f x
2 = λf.λx.f (f x)
3 = λf.λx.f (f (f x))

In summary, the definition of the numeral n is the application of a given function f n times to a given value.

;; 0
(def zero (fn [f] (fn [x] x)))
;; 1
(def one (fn [f] (fn [x] (f x))))
;; 2
(def two (fn [f] (fn [x] (f (f x)))))

We can define a succ function, which takes a Church numeral n and returns n + 1 by applying f to x one more time than the original number

succ = λn.λf.λx.f (n f x)

We'll try the function by applying function two defined before and check the result:

(def succ (fn [n]
            (fn [f]
              (fn [x]
                (f ((n f) x))))))

;; helper function to-int helps us check numerals
(def to-int  (fn [n]
               ((n (fn [i]
                     (+ i 1))) 0)))
(to-int (succ two)) ;; => 3
(to-int (succ (succ two))) ;; => 4

There are more exercises in Church encoding, how to express conditional expressions, arithmetic operations, lists, etc and you can define them by yourself.

More resources

Henri Borges'article Functions Describe the World
Lambda calculus represented in both Clojure and Elixir: https://hungle00.github.io/content.html?id=15
Matthew Might's work on FP and Lambda calculus is amazing.

Ruby's main object

hungle00 — Sun, 01 Oct 2023 03:20:19 +0000

In Java, every function must be wrapped by a class, but in Ruby, we can define a function without classes. Therefore, some years ago I used to suppose that:

There are no functions in Java, only methods. But for Ruby, we can have a function that isn't a method.

However, these days I have realized that: "Every function in Ruby is also a method".

But why can we define the function at the top-level scope, without creating classes for them, like Java? Or which class does this function belong to?

For example, I have the function increment

def increment(num)
  num + 1
end

We try to call increment this way:

self.increment 10
# or
self.send(:increment, 10)

Since self keyword contains a reference to the current object, the receiver for the current method, increment must be a method. Now let's check which object self reference to.

puts self
# => main
puts self.class
# => Object

You can see puts self code returns string "main", and it is an instance of Object, the root class of Ruby’s class hierarchy. So we can conclude that increment is an instance method in the Object class.
Technically speaking, Ruby automatically creates a main object as the top self object, it is the default receiver for top-level methods. Actually, all Ruby functions are private methods of Object.

p Object.private_instance_methods
# [:increment, :DelegateClass, :sprintf, ...]

Conclusion

Every function in Ruby is also a method. It's an instance method of Object class.
Ruby main object allows you to write simple functions and, at the same time, ensure sophisticated OO design.

Build a Masonry layout (Pinterest layout)

hungle00 — Thu, 20 Jul 2023 15:11:30 +0000

Recently, I worked on a side project that allows people to pin videos by link or upload images and I want to display them in the pinterest-style layout. After some research, I have figured out some effective methods to build that layout, including the use of some JS libraries. But for simplicity, I took the only CSS ways.

1. CSS columns approach

This approach will leverage the CSS columns with column-count CSS property that breaks an element's content into the specified number of columns.


 css
.board-grid {
  column-count: 4;
  column-gap: 1em;
}

The CSS rules above will style the board into a three column layout without a defined vertical axis.

If you have images with captions, then you want to avoid the stiuation where a the image and caption split across columns, you should use the page-break- properties:


 css
.item {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
}

It is even easier to build a responsive layout with Tailwind CSS, just use columns-{count} with breakpoint. For example, md:columns-3 will apply the columns-3 at only medium screen sizes and above.



<div class="columns-2 md:columns-3 lg:columns-4 gap-6">
  <div class="break-inside-avoid"></div>
  ...
</div>

The demo I built by Tailwind CSS, but idea is the same with pure CSS:

The only drawback of this approach is that the ordering of the masonry tiles are vertical — from top to bottom — rather than being shown horizontally from left to right.

2. CSS grid approach

The hard part of this approach is that CSS Grid creates two dimensional grids with strict rows and columns, whereas masonry is about letting elements fit themselves into space horizontally and vertically.

The trick is using grid-auto-rows property to sets the unit height for our masonry. Then adjusts each block's height to match the grid with a little bit of math to calculate how many rows they should span.
With H as the height of the block, if we set grid-auto-rows value to R, grid-row-gap value to G, an appropriate span number (S) for any given block can be calculated by:



S = H / (G + R)

For example:


 css
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 20px;
  grid-gap: 10px;
}

The value of grid-auto-rows is 20px, and value of grid-gap is 10px; so if the height of the element is 300px, it will span 10 rows.



.item{
  grid-row-end: span 10;
}

The ideas of this approach I borrowed from https://w3bits.com/css-grid-masonry/.

View details on demo:

View more about a side project I working on. It is called Mood Opus - a simple mood board that allows people to pin videos by link or upload images and display them in the Masonry layout.

https://github.com/hungle00/mood_opus

Rails nested form (new gem with Stimulus)

hungle00 — Sun, 18 Jun 2023 01:58:26 +0000

Nested forms are forms that handle nested models and attributes in one form; e.g. a project with its tasks or an invoice with its line items.

Before Rails 6, Cocoon is a good choice for creating dynamic nested forms. But Cocoon needs jQuery to work well, it's a very old library on modern-day frontend frameworks.
When Stimulus is came out, Rails devs is suggested to use Stimulus as Javascript library in their projects. So, I created a gem for handling dynamic nested forms with Stimulus JS.

hungle00 / rondo_form

Same as Cocoon, but using StimulusJS https://rubygems.org/gems/rondo_form

RondoForm

Handle dynamic nested forms, same as Cocoon, but using StimulusJS

Installation

Install the gem and add to the application's Gemfile by executing:

$ bundle add rondo_form

Or inside the Gemfile add the following

$ gem 'rondo_form', '~> 0.2.6'

Run the installation task:

$ rails g rondo_form:install

Usage

For example, you have Project model, which has has_many relationship with Task model:

rails g scaffold Project name:string description:string
rails g model Task description:string done:boolean project:belongs_to

You need to add accepts_nested_attributes_for to Project model:

class Project < ApplicationRecord
  has_many :tasks, dependent: :destroy
  accepts_nested_attributes_for :tasks, reject_if: :all_blank, allow_destroy: true
end

Sample with SimpleForm

The RondoForm gem adds two helper functions: link_to_add_association and link_to_remove_association. The example below illustrates the way to use it.

In your projects/_form partial:

<%= simple_form_for(@project) do |f| %>
  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :description %>
  </div

…

View on GitHub

Rondo Form is easy to use, it has the same tag helpers name as cocoon: link_to_add_association, link_to_remove_association.
This gem does not need JS dependencies to work with, when you run under command, it will generate nested_rondo_controller.js in your app/javascript/controllers/ folder:



rails g rondo_form:install

And auto import this controller into index.js.


 js
import NestedRondoController from "./nested_rondo_controller"
application.register("nested-rondo", NestedRondoController)

You must add data-controller="nested-rondo" to an element, that wraps fields_for and link_to_add_association helper.
For example, we have Project model, which has has_many relationship with Task model.
In your projects/_form partial:


 erb
<%= simple_form_for(@project) do |f| %>
  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :description %>
  </div>
  <h3>Tasks</h3>
  <div data-controller="nested-rondo">
    <%= f.simple_fields_for :tasks do |task| %>
      <%= render "task_fields", f: task %>
    <% end %>
    <div class="links">
      <%= link_to_add_association "Add Task", f, :tasks %>
    </div>
  </div>
  <%= f.button :submit %>
<% end %>

In your _task_fields partial:


 erb
<div class="nested-fields">
  <%= f.input :description %>
  <%= f.input :done, as: :boolean %>
  <%= link_to_remove_association "Remove Task", f %>
</div>

This sample I built with SimpleForm gem, but the idea is the same with Rails standard form.

Ruby - DIY accessor methods

hungle00 — Mon, 05 Jun 2023 06:06:58 +0000

1. Ruby accessor methods

Ruby does not allow instance variables to be accessed outside of methods for that object.

class Person  
  def initialize(name)
    @name = name
    @age = 10
  end
end
p = Person.new('steve')
p.name  # =>  undefined method `name=' for #<Person ..>

This design ensures OOP encapsulation - an object’s data is protected from the outside world.

In some languages like Java, to access private instance variables, you must define getter/setter methods for each attribute. But in Ruby, you can generate getter/setter methods by using one of the methods in the Module#attr_* family.

class Person
  attr_reader :name, :age      # getter 
  attr_writer :name, :age      # setter
  # attr_accessor :name, :age  # getter + setter
  # other code ....
end
p = Person.new('steve')
p.name  # =>  steve
p.age = 20
p.age # => 20

It just takes one or two lines for all of the attributes. These methods are called Class Macros which are class methods only used when in a class definition.

2. DIY accessor methods

There are advanced ways to access instance variables, like instance_variable_get, instance_eval.
For example:

p = Person.new('steve')
p.instance_variable_get(:@name)
p.instance_eval { @name }

Using some metaprogramming techniques, we can build attribute accessor methods by myself.

module GetterSetter
  def attr_getter(*attributes)
    attributes.each do |attribute|
      define_method attribute do
        instance_variable_get("@#{attribute}")
      end
    end
  end

  def attr_setter(*attributes)
    attributes.each do |attribute|
      define_method "#{attribute}=" do |value|
        instance_variable_set("@#{attribute}", value)
      end
    end
  end

  def attr_getter_and_setter(*attributes)
    attr_getter(*attributes)
    attr_setter(*attributes)
  end
end

For simplicity, I define getter/setter in separated module and include in Person class.

class Person
  extend GetterSetter

  def initialize(name)
    @name = name
    @age = 10
  end

  attr_getter :name, :age
  attr_setter :name, :age
  # or 
  # attr_getter_and_setter :name, :age
end

p = Person.new('Luke')
p.name = 'anakin'
p.name # => anakin

Summary

Class macros are one of Ruby's magic methods that help developers get rid of a lot of tedious, boilerplate methods. In rails, class macros are used a lot, for associations ( has_many, belongs_to ), validation, ...

You can learn more about Ruby class macros or other metaprogramming techniques in the Metaprogramming Ruby book ( https://pragprog.com/titles/ppmetr2/metaprogramming-ruby-2/)