DEV Community: Cristian Molina

Basic painting with Ruby: implementing a flood-fill algorithm with DragonRuby GTK

Cristian Molina — Wed, 22 May 2024 00:10:14 +0000

Continuing with my learning and experimentation with DRGTK, I wanted to implement a flood-fill algorithm on a canvas with some drawings.

This idea came from an old interview exercise I did some years ago.

The Flood Fill algorithm is commonly used in graphics software to fill an area with a specific color. It’s what powers the paint bucket tool.

So having a canvas and a pair of coordinates on that, the initial color is the one located in this location and the plan is to change it to another color, filling all adjacent pixels with the original color with the new one until a different one from the original one is reached.
My implementation is a recursive one:

 def paint(x:, y:, base_color:, new_color:, sleep_time: 0)
   return if new_color == base_color

   coords_inside_matrix = y >= 0 && y < map.size && x >= 0 && x < map[0].size

   pixel_should_be_painted = coords_inside_matrix && map[y][x] == base_color

   return unless pixel_should_be_painted

   map[y][x] = new_color  # paint the cell

   paint(x: x+1, y: y, base_color: base_color, new_color: new_color)
   paint(x: x, y: y+1, base_color: base_color, new_color: new_color)
   paint(x: x-1, y: y, base_color: base_color, new_color: new_color)
   paint(x: x, y: y-1, base_color: base_color, new_color: new_color)
 end

I worked on my solution using TDD, with Minitest spec tests, so it was easier to start with basic scenarios and also printed it while it moved the brush position recursively.

# Running:

paint(2-1)
  changing x:2 y:1
[0, 0, 0, 0, 0]
[0, 0, 8, 0, 0]
[0, 0, 2, 3, 8]
[2, 2, 2, 0, 0]
[0, 0, 2, 0, 5]
paint(2-2)
  changing x:2 y:2
[0, 0, 0, 0, 0]
[0, 0, 8, 0, 0]
[0, 0, 8, 3, 8]
[2, 2, 2, 0, 0]
[0, 0, 2, 0, 5]
paint(2-3)
  changing x:2 y:3
[0, 0, 0, 0, 0]
[0, 0, 8, 0, 0]
[0, 0, 8, 3, 8]
[2, 2, 8, 0, 0]
[0, 0, 2, 0, 5]
paint(2-4)
  changing x:2 y:4
[0, 0, 0, 0, 0]
[0, 0, 8, 0, 0]
[0, 0, 8, 3, 8]
[2, 2, 8, 0, 0]
[0, 0, 8, 0, 5]

On the Dragon Ruby side, I drew the matrix as a canvas and queried the mouse functions to get the cell position to paint or to change the color of the brush by clicking on a color palette box.
There is no pencil functionality so the canvas starts with a default drawing to play with it:

...and that's basically it. Not sure what will be next on this series. There is a game jam with Dragon Ruby starting soon, maybe I could participate on it :) .

Links to the app and code:

Happy hacking!

Playing with DragonRuby Game Toolkit (DRGTK)

Cristian Molina — Mon, 06 May 2024 23:20:30 +0000

Last week I was working on a very simple game to test DragonRuby Game Toolkit and learn its API.

This Ruby implementation is based on mruby and LLVM and it’s commercial software but cheap.

The game toolkit has a simple API to handle sprites with animations, sound/music, inputs, basic drawing primitives like lines or rectangles, allows for HTTP requests and other niceties. It also has a fixed resolution and 60 times a second game loop.

The engine has a game loop that calls to a #tick method where you draw, check inputs and update game logic.

The code is structured in a couple of classes, the main one is the MyGame, that contains other classes like the Player, the list of FloorFires and the Coin to collect.

When it detects a collision it plays a sound. The game is paused when the window loses focus.

For collision detection, it uses some builtin rectangle intersection primitives.

For Input handling, the keyboard, arrows/WASD are handled the same.

And that’s pretty much it. There are a lot to improve the game but I think I’ll start a new project with a better idea to start doing something funnier and more polished.

Besides the official docs, I learnt a lot from this post series, kudos to Justin!, and also the official discord is super friendly and helpful when you get stuck on something.

The start screen:

In-game:

The source is about 360 lines and available on GitHub. The assets are free.

You can download or play it online here at Itch.io (DRGTK includes a great tool to deploy to Itch.io)

Happy hacking!

Adding an inline delete action on the listing page

Cristian Molina — Sat, 30 Mar 2024 18:33:01 +0000

This is the part III of the Phlex, htmx combo for building UIs.

Pretty similar to the insert action,
it consist of:

Edit ArticleComponent to add a delete button code.
Add a delete route, if needed (not here).
Add a controller method to handle the removal of the article using the id received.

  def template
    article(class: ARTICLE_STYLE, id: "article-#{@article.id}") {
      h3(class: HEADER_STYLE) {
        i { "#{@article.id} - #{@article.name}" }
      }
      p(class: "bg-slate-200 p-4 basis-3/4") { @article.details || "No description" }
        button(class: DELETE_BUTTON_STYLE,
          **hx(delete: article_path(@article), confirm: "Delete Article?", target: "#article-#{@article.id}", swap: "outerHTML swap:.5s")) {
          "X"
        }
      }
    }
  end

The new button inside the Phlex Article component

  def destroy
    Article.delete params[:id]
    render plain: ""
  end

The controller action

article.item-article.htmx-swapping {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

Some CSS for htmx effect

Note that it should return an empty string or it would not do the removal effect in the UI and JS would be needed.

It felt pretty easy to add this functionality. It start to looks good.

Next will be that inline edit action or some inline filtering of the items in the list.

Happy hacking!

Adding lazy loading of items using htmx

Cristian Molina — Mon, 25 Mar 2024 23:11:08 +0000

This is a continuation of some testing of these front-end libraries.
I used the lazy load example here to add lazy loading of the articles on this index page.

This is how it looks like:

Previous to this change, I created an Articles Active Record model, ran migrations, and changed the insert action to create new records.

I added a GET htmx definition in the index view code to fetch the items' partial and added a route and a controller action for this new response.

You can see that there is an extra logic in the Articles::IndexView to discern between displaying the lazy load code or the fragment with the list of articles. This is based on an initialization parameter. I'd probably refactor this later, maybe extracting the list block into a new component.

Here is the important code changes:

Route definition



  resources :articles do
    get "items", on: :collection
  end

Controller changes



  def index
    render Articles::IndexView.new(nil)
  end

  def items
    articles = Article.all.order(id: :desc)
    sleep 1 # this is to simulate a slow response and should be removed in a real scenario
    render Articles::IndexView.new(articles), layout: false
  end

Changes in the index view class



class Articles::IndexView < ApplicationView
...
  def template
    if @articles.nil?
      title_with_add_button
      load_indicator_placeholder
    else
      load_articles_section
    end
  end

  def load_indicator_placeholder
    div("hx-get": items_articles_path, "hx-trigger": "load", class: "flex justify-center") {
      img(alt: "Loading items...",
        class: "htmx-indicator", width: "150", src: "/bars.svg")
    }
  end

  def load_articles_section
    section(id: "article-list", class: "grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4") {
      articles.each { |el| render el }
    }
  end

Also available in the GitHub repo

Happy hacking!

Experimenting with Modern UI Alternatives in Rails

Cristian Molina — Thu, 14 Mar 2024 23:31:33 +0000

I embarked on an experiment with a Rails application using modern alternative tools and libraries. In this post, I'll walk you through the steps I took to set up a Rails template repository with the following technologies:

Configuration with Bun JS runtime for efficient JavaScript management.
Integration of TailwindCSS for sleek UI design.
Utilization of Phlex library to build views entirely in Ruby, eliminating the need for mixed template languages and replacing partials and view helpers with components.
Implementation of HTMX actions for dynamic content swapping without full page refresh.

Setup Steps:

Installed bun js runtime (I used mise, btw)
Added necessary gems and generated some configurations:

Edited Procfile to remove bun css watch line and use tailwindcss:watch task.
Edited application_layout.rb to remove javascript_importmap_tags line.

This is how it looks:

The Rails bin/dev command starts the three processes defined in the Procfile file. The Rails server, the Bun js runtime, and the TailwindCSS watcher.

Some code highlights:

The main application layout, in Ruby, has some header and footer definitions and a call to a Ruby block in the tag.

The controller has an action for listing the Articles and the method to handle the POST to add a new Article.

The Index view has a title, an Add button, and the list of Articles. In a real app these Articles would probably be passed on initialization from a DB query outside this class.

The Article component just generates some random data. In a real app it would probably be populated from an Active Record object on initialization.

The full source repository is available here.

By following these steps, I was able to leverage a modern UI frontend for a Rails application in a hopefully more maintainable way.

I plan to continue experimenting with these tools on more advanced topics like forms, websockets & SSE updates, filters, pagination, using JS interactivity, and more complex components.

Happy coding!

Heroku, I stream you!

Cristian Molina — Mon, 09 Aug 2021 23:44:15 +0000

The problem: timeouts on generated content exported as CSV or other formats.

It's a very common feature to have export functionality on the page to formats like CSV, XLSX, PDF, etc.

This is a simple thing on Rails inside a #respond_to:

def index
  @records = ...
  respond_to do |format|
    format.html # index.html
    format.csv { some_csv_generation_code }
  end
end

However, some day, errors start to appear from users when they try to download a lot of information.

The server responds with timeout errors after a certain amount of seconds and that stops the request that was generating the file.

In a PaaS like Heroku this time limit is at 30 seconds of no content generated. Also there is another timeout of 55’’ between each new fragment of output. Citing the official information:

An application has an initial 30 second window to respond with a single byte back to the client. However, each byte transmitted thereafter (either received from the client or sent by your application) resets a rolling 55 second window. If no data is sent during the 55 second window, the connection will be terminated.

Rails seems to have streaming functionality to handle this kind of output generation in the ActionController::Live. Also in Rails edge (future v7) there is a #send_stream method that seems to achieve this functionality so I copied it to my Rails 5.2 app into a controller concern and changed the CSV generation logic to implement the Enumerable #each method.
It was not working until I also override the Last-Modified header. See this issue discussion.

This is the full code of the controller concern:

require 'content_disposition'

module Streamable
  extend ActiveSupport::Concern
  include ActionController::Live

  # Almost verbatim copy of new Rails 7 method.
  # See https://edgeapi.rubyonrails.org/classes/ActionController/Live.html#method-i-send_stream
  def send_stream(filename:, disposition: 'attachment', type: nil)
    response.headers['Content-Type'] =
      (type.is_a?(Symbol) ? Mime[type].to_s : type) ||
      Mime::Type.lookup_by_extension(File.extname(filename).downcase.delete('.')) ||
      'application/octet-stream'

    response.headers['Content-Disposition'] = ContentDisposition.format(disposition: disposition, filename: filename)
      # with rails 6 remove content_disposition gem and use:
      #  ActionDispatch::Http::ContentDisposition.format(disposition: disposition, filename: filename)

    # Extra: needed for streaming
    response.headers['Last-Modified'] = Time.now.httpdate

    yield response.stream
  ensure
    response.stream.close
  end
end

For Rails 5.x I needed an extra gem to set the Content-Disposition header:

gem 'content_disposition', '~> 1.0' # Not needed on Rails 6

A testing example of a controller that generates slow dummy data:

class ExporterController < ApplicationController
  include Streameable

  def index
    respond_to do |format|
      format.html # index.html
      format.js   # index.js
      format.csv do
        send_stream(attachment_opts) do |stream|
          stream.write "email_address,updated_at\n"

          50.times.each do |i|
            line = "pepe_#{i}@acme.com,#{Time.zone.now}\n"
            stream.write line
            puts line
            sleep 1  # force slow response
          end
        end
      end
    end
  end

  private

  def attachment_opts
    {
      filename: "data_#{Time.zone.now.to_i}.csv",
      disposition: 'attachment',
      type: 'text/csv'
    }
  end
end

Finally, if you use something like curl you will see the output generated second by second.

curl -i http://localhost:3000/exporter

Now your app can stream big amounts of data like a champ!.

I have deployed this app in a Heroku app and the code is on this github repo.

An extra performance tip. When using ActiveRecord to fetch tons of records from the DB consider using #find_each instead of #each so it will fetch the records in batches.

Let me know if this was helpful for you.
Happy Rails hacking!

A very short intro to the Roda web toolkit

Cristian Molina — Fri, 04 Oct 2019 16:25:35 +0000

Introduction

There are several "lightweight" Ruby web & API libraries out there.
Sinatra is probably the most known but there are others that are newer, faster, cleaner, more flexible and/or better maintained.

One of those is Roda, created by Jeremy Evans, the creator of the Sequel gem. It started as a Cuba fork but then evolved a lot. It is specially notably by its speed and plugin system, shared characteristics with its sibling Sequel gem, where everything can be overridden.

It is auto-defined as a "Routing tree web toolkit". Why is that? Because of the way the routes are defined & run. Let me show you an example:

require "roda"

class App < Roda
  plugin :render
  plugin :all_verbs

  route do |r|
    r.root do
      view :index
    end
    r.is "artist", Integer do |artist_id|
      @artist = Artist[artist_id]
      check_access(@artist)
      r.get do
        view :artist
      end
      r.post do
        @artist.update(r.params["artist"])
        r.redirect
      end
      r.delete do
        @artist.destroy
        r.redirect  "/"
      end
    end
  end
end

If you compare with other libraries like Sinatra, instead of setting the @artist variable and checking the access is allowed in all three of the actions, the variables are set as soon as that branch of the tree is taken, and can be used in all routes under that branch. This is why Roda is called a routing tree web toolkit.

More examples of the routing flexibility:

  route do |r|
    # array matchers
    r.on %w[hello hi]do |greeting|
      "#{greeting}, world!"
    end
    # method matchers
    r.is  "hello", method: [:post, :put, :patch] do
      "All your base are belong to us"
    end
    # Regexp matchers
    r.on  "users" do
      r.get /(\d+)/do |user_id|
        "Your id is #{user_id}"
      end
    end
  end

Roda's plugin system design is shared with the Sequel gem but also copied in other projects, like in the Shrine file attachment toolkit, Cuba(v3).

You can start with a small, compact core of an application and grow complexity over time and learning as you go, having fine grained control on features and performance.

For instance, wants websockets, checked:

plugin :websockets

route do |r|
  r.get "room" do
    # Matches if it's a websocket request
    r.websocket do |ws|
      ws.on(:message) { ... }
      ws.on(:close) { ... }
      # ...
    end
    # If the request is not a websocket request, we render a template
    view "room"
  end
end

Do you want a JSON API? The json plugin responds with JSON automatically for arrays & hashes:

plugin :json

route do |r|
  r.root do
    [1, 2, 3]
  end
  r.is "foo" do
    { "a" => "b"}
  end
end

But you can customize it easily, for example, adding ActiveRecord relations:

plugin :json, classes: [Array, Hash, ActiveRecord::Base, ActiveRecord::Relation],
  serializer: proc { |object|
    case object
    when Array, Hash
      object.to_json
    else
      Serializer.new(object).as_json
    end
  }

route do |r|
  r.get "albums/recent" do
    Album.recent
  end
  r.get "albums/:id" do |id|
    Album.find(id)
  end
end

The complete list of bundled plugins is huge, more than 90, and there are several community extensions, so you are pretty much covered here. In case you want to do one, this is the structure:

class Roda
  module RodaPlugins
    module MyPlugin
      module ClassMethods
      end
      module InstanceMethods
      end
      module RequestClassMethods
      end
      module RequestMethods
      end
      module ResponseClassMethods
      end
      module ResponseMethods
      end
    end
    register_plugin(:my_plugin, MyPlugin)
  end
end

Performance

An image is worth a thousand words. Compare the request per second and the memory usage:

Pretty close to raw Rack values, but with a nicer DSL.

Maintenance

Jeremy responses in the mailing list are quick & he resolves any issues, too:

(Look Ma, no issues)

Some disadvantages

No routes introspection (although there is a plugin that helps with this).
Less gems, as many are tightly coupled with default framework.
Less community support vs Rails or Sinatra.
Some reinventing the wheel may be unavoidable.
The routing structure may not be your style (but there is a plugin to use a Sinatra like class route definitions)

Extra links:

This is a nice free Roda book.
The official mailing list.
If you want to know more about this plugin system pattern, check this post from the Shrine's creator.
Other benchmarks: ruby web frameworks micro benchmarks project, the famous TechEmpower web benchmarks (filtered for Ruby frameworks) and also this project.

asdf version manager

Cristian Molina — Wed, 02 Oct 2019 18:43:00 +0000

Asdf-vm

An extendable version manager

Introduction

When you work as a developer, it is the norm to have projects made with different languages & storages. Even if you only use a specific language or tool, every project could use a different version of it.

A version manager allows you to easily install, use and switch between several versions of the same language or program.

This is necessary mainly because most OS don't provide an effective way to have several versions of the same program or library (at a system level or per user account). For example, having several versions of the Ruby language at the same time in Linux with deb or rpm packaging systems.

To overcome this limitations some scripts or "language version managers" like chruby, RVM or rbenv for Ruby, nvm & n for Node.js and dozens more started to appear. Each one with its own commands, setup instructions and peculiarities. Most of this version managers work installing all the things inside the user's home directory. As you can imagine, this may present some scaling & usability issues.

Enter asdf-vm

asdf is "generic" version manager, that with same interface of commands & one setup you can handle a lot of languages & tools versions altogether and it is extendable via plugins.

Advantages, Why use asdf-vm?

single CLI for multiple languages (& others)
consistent commands to manage all your languages
single global config keeping defaults in one place
single .tool-versions config file per project
support for existing config files .node-version, .nvmrc, .ruby-version for easy migration
automatically switches runtime versions as you traverse your directories
simple plugin system to add support for your language of choice
completion scripts managed by the plugin, not you!

The extensive list of plugins can be found here. As you can see, there are a lot of languages like Python, Ruby, Go, Node.js, PHP, Java, .NET Core, Rust, Lua; stores like SQLite, Postgres, Redis, MongoDB, MySQL; and tools like ElasticSearch, ImageMagick, RabbitMQ, Vault, Terraform, k9s. Also, it is pretty easy to create a plugin.

The install instructions for OSX & Linux are here. It supports Bash, ZSH, Fish. They are quite simple and involves downloading a git repository or using brew and adding a couple of lines in your shell configuration file.

Example usage:

Let's say your new assigned project "Alpha" requires Ruby v2.4.2, Postgresql > v9.x, Redis 4.x, ElasticSearch 6.7 and ImageMagick tooling and you have the plugins for all except imagemagick don't have anything of that installed. You could setup it with:

$ asdf install redis 4.0.14
$ asdf install postgres 9.6.15
$ asdf install ruby 2.4.2
$ asdf install elasticsearch 6.7.1
$ asdf plugin-add imagemagick
$ asdf install imagemagick 7.0.8-66

Then you setup the local configuration for your project with:

$ asdf local redis 4.0.14
$ asdf local postgres 9.6.15
$ asdf local ruby 2.4.2
$ asdf local elasticsearch 6.7.1
$ asdf local imagemagick 7.0.8-66

This creates a ".tool-versions" file, that you can add to the version control system, with the rest of your project files.

If you switch to another project, when entering the directory, the local versions will be setup automatically.

Other command examples:

Just type "asdf" if you want to see the complete list of commands.

List all available plugins for installation:

$ asdf plugin-list-all

List your currently installed plugins:

$ asdf plugin-list

Installing a new plugin:

$ asdf plugin-add elixir

What I am currently using (local or global):

$ asdf current

Set a global version for Ruby language:

$ asdf global ruby 2.4.7

List your current installed versions for the Ruby plugin:

$ asdf list ruby
  2.4.7
  2.5.6
  2.6.4
  jruby-9.2.8.0

List the available to install Postgresql versions:

$ asdf list-all postgres
  1.08
  …CUTTED…..
  11.4
  11.5

A nice feature is "Tab" completion for commands & version numbers, for instance, try typing

$ asdf <TAB><TAB> current install local plugin-list-all reshim update global list plugin-add plugin-remove shell where help list-all plugin-list plugin-update uninstall which

$ asdf install imagemagick <TAB><TAB> 7.0.8-38 7.0.8-41 7.0.8-44 7.0.8-47 7.0.8-50 7.0.8-53 7.0.8-56 7.0.8-59 7.0.8-62 7.0.8-65 7.0.8-39 7.0.8-42 7.0.8-45 7.0.8-48 7.0.8-51 7.0.8-54 7.0.8-57 7.0.8-60 7.0.8-63 7.0.8-66 7.0.8-40 7.0.8-43 7.0.8-46 7.0.8-49 7.0.8-52 7.0.8-55 7.0.8-58 7.0.8-61 7.0.8-64 continuous

And that's basically it. In contrast to Docker, where you have an isolated filesystem, libraries, ports & users and runs a specific process inside it utilizing the docker command or composing the application parts with some other tool like docker-compose, which is great for creating reproducible & isolated environments for deploying, asdf allows you a more natural & lightweight development workflow.

Summarizing, asdf tool lets me work without worry about conflicts between several moving parts, with speed and a minimum extra overhead. As an extra, it allows me to experiment with a new language (or a specific implementation like jruby or stackless Python) every now and then.

Links:

Project site & docs: asdf-vm.com.

Github projects.

Lastly, I want to mention an alternative to asdf I used previously called anyenv.

Happy hacking!