misc

There are 38 posts filed in misc (this is page 1 of 8).

Aerospace as Windows Manager for OS X

Recently I discovered Aerospace as a Window Manager. This is the first manager I really like. Tried loop, Rectangle and several others.

Aearospace just feels right when your a (Neo)Vim user. Using Alt + VIM keys to navigate the windows. Please checkout this youtube video to get an idea how it works.

What I didn't like is that everything was tiled directly.
By default I would like to keep the OS X Behaviour of the windows. (I'm very used to it).

To prevent Aerospace from tiling new Windows I let them float by default. (default OS X Behaviour)
With Alt-F when I can toggle the float status to tiling (and back).

I'm using the default configuration file. With the following adjustments
I added the following line to the bottom of the configuration file:

[[on-window-detected]]
run = 'layout floating'

Then I added two shortcuts to make unfloat / floating easier. (Remember to remove the other alt-f / alt-shift-f bindings). Also add a fullscreen toggle key.

alt-f = "layout floating tiling"
alt-shift-f = "fullscreen"

Further I added the tool Yanky Borders to show a nice border around the active windows. Which is nice to know where the keyboard focus is.

after-startup-command = [
  'exec-and-forget borders active_color=0xffFF4488 inactive_color=0xff444444 width=5.0'
]

Further I added some other visual improvements, like adding some padding in between windows.

inner.horizontal = 10
inner.vertical =   10
outer.left =       10
outer.bottom =     10
outer.top =        10
outer.right =      10

And i disabled backspace key to close all other windows.
I trigger it to often by accident. Which isn't a nice experience ;-)

# backspace = ['close-all-windows-but-current', 'mode main']

Other Keys I disabled are the following. (Using alt-e / alt-u can be usefull to create accented characters (é, ä, .. etc) in OS X)

# alt-e = 'workspace E'
# alt-f = 'workspace F'
# alt-u = 'workspace U'
# alt-v = 'workspace V'

# alt-shift-e = 'move-node-to-workspace E'  
# alt-shift-f = 'move-node-to-workspace F'
# alt-shift-u = 'move-node-to-workspace U' 
# alt-shift-v = 'move-node-to-workspace U'

FreeBSD 14 pkg upgrade PHP – PHP Warning: PHP Startup: Unable to load dynamic library ‘imagick.so’

Upgrading the PHP packages on FreeBSD 14 results in the following warningf when restarting the php server (php_fpm or mod_php)

PHP Warning:  PHP Startup: Unable to load dynamic library 'imagick.so' (tried: /usr/local/lib/php/20220829/imagick.so (/usr/local/lib/libMagickWand-7.so.10: version VERS_10.0 required by /usr/local/lib/php/20220829/imagick.so not defined), /usr/local/lib/php/20220829/imagick.so.so (Cannot open "/usr/local/lib/php/20220829/imagick.so.so")) in Unknown on line 0

The reason is that the phpXX-pecl-imagick isn't updated automaticly.

Workaround for it is to reïnstall the phpXX-pecl-imagick package. (Check your php version with php --version) 

pkg install -f  php82-pecl-imagick

ActiveStorage SVG Analyzer

For My Hero's Journey, we're building a new feature to show/hide layers of an SVG image depending on the progress you make. It's used for pretty large/complex images. (see previous post for a custom svg variant transformer)

The backend of the app, attaches layer names to certain tasks that need to be done. When finishing the task, the layer becomes visible.

The frontend is going to show this SVG, with all layers hidden that aren't available yet. (Pretty easy to do with CSS classes)

To make this performant the layer names need to be extracted from the SVG. A good place to make this happen is via an ActiveStorage Analyzer.

A Custom SVG Analyzer

The ActiveStorage::Blob model contains a metadata field, that receives the metadata. The default image analyzer only extracts width and height from the SVG.

Registering a custom anlyzer can be done with an initializer. During development I noticed ActiveStorage only runs one analyzer. The first analyzer that's valid for a given file, is being used.
That's the reason our custom analyzer is prepended to the analyzers array. (The delete/prepend squence is for development-mode reloading)

config/initializers/active_storage_svg_analyzer.rb

ActiveSupport::Reloader.to_prepare do
  Rails.application.config.active_storage.analyzers.delete ActiveStorage::CustomSvgAnalyzer

  # Important! Needs to be prepended to be placed before the othe analyzers. It seems active storage only runs a single analyzer
  Rails.application.config.active_storage.analyzers.prepend ActiveStorage::CustomSvgAnalyzer
end

The interface for an analyzer is pretty simple, the accept? class method needs to return true if the analyzer supports the given file.

The metadata method should return a hash with all metadata, this metadata is placed in the active storage blob record.

A SVG file is just a XML file, so parsing this is pretty easy with for example Nokogiri. In the example below all id's are extracted. (Affinity Designer exports the layer names as id's).

Because only 1 analyzer is run, I also included the width/height metadata attributes. (Though I don't think these are being used)

app/lib/active_storage/custom_svg_analyzer.rb

class ActiveStorage::CustomSvgAnalyzer < ActiveStorage::Analyzer
  def self.accept?(blob)
    blob.content_type == 'image/svg+xml'
  end

  def metadata
    download_blob_to_tempfile do |file|
      doc = Nokogiri::XML(file)
      width, height = extract_dimensions(doc)
      { width:, height:, layer_names: layer_names(doc) }.compact
    end
  end

  private def layer_names(doc)
    doc.xpath("//*[@id]").map { |e| e[:id] }
  end

  private def extract_dimensions(doc)
    view_box = doc.root.attributes["viewBox"]&.to_s
    return [] unless view_box

    left, top, right, bottom = view_box.split(/\s+/).map(&:to_i) # => 0 0 4167 4167

    [right - left, bottom - top]
  end
end

The result

The active_storage_blobs.metadata record now contains the following data:

{"identified":true,"width":4167,"height":4167,"layer_names":["island","island-plant-3","island-plant-2","island-plant-1","island-color-overlay","house","mask","water-well","drum2","drum1","vase3","vase2","vase1","woman-and-child","tree","racoon-tower","racoon1","racoon2","racoon-top-back","_clip1","racoon-middle-back","racoon-bottom","racoon-middle","racoon-top","single-orange","oranges"],"analyzed":true}

Data that is is pretty easy to acces, via the blob.metadata hash. See the asset model below.

models/asset.rb

class Asset
  has_one_attached :file

  def image_layer_names
    content_type_svg? ? Array(file.blob.metadata['layer_names']) : []
  end
end

That's all, thanks for reading!

Install ruby 2.7.8 on FreeBSD 14 (with rbenv)

Yeah I know, it's very old. But unfortunately i needed to use this ruby version for running errbit. (the self hosted error handler)

Trying to install install an older ruby-version on FreeBSD results in the following error (is found in the ruby-build log file )

util.c:236:1: error: expected identifier or '('
ruby_qsort(void* base, const size_t nel, const size_t size, cmpfunc_t *cmp, void *d)
^
./include/ruby/util.h:59:21: note: expanded from macro 'ruby_qsort'
-# define ruby_qsort qsort_r

This is an issue in the ruby code compiling on FreeBSD 14. The issue is mentioned for ruby 3.1 See: https://bugs.ruby-lang.org/issues/20151.
Problem is that the solution isn't backported. There isn't a ruby 2.7.9.

Quick Solution

Create the file ./rbenv/plugins/ruby-build/share/ruby-build/2.7.8-freebsd-14, with the following content

install_package "openssl-1.1.1w" "https://www.openssl.org/source/openssl-1.1.1w.tar.gz#cf3098950cb4d853ad95c0841f1f9c6d3dc102dccfcacd521d93925208b76ac8" openssl --if needs_openssl:1.0.1-1.x.x
install_package "ruby-2.7.8" "https://www.blommersit.nl/downloads/ruby-build/ruby-2.7.8-freebsd-14.tgz#58beea1e9e954efb2e7c27a3dcf5817d739049b50ae718c78d4fffe9a1e11c0b" warn_eol enable_shared standard

And install it:

rbenv install 2.7.8-freebsd-14

Further changes to run errbit:

  • remove the ruby-version from the Gemfile
  • change .ruby-version file to match 2.7.8-freebsd-14
  • bundle update puma to a later version (issue with nio4r)

Details

The issue happens because util.c file contains some q_sort function logic, which resolves incorrectly in FreeBSD 14.

The source contains the following patch (Note this is not a correct solution for all platforms, but a quick hack to make it work in FreeBSD 14).

Around line 222 a few defines are undefined

#undef HAVE_BSD_QSORT_R
#undef HAVE_QSORT_S

The patched ruby version is here for download:

The download https://www.blommersit.nl/downloads/ruby-build/ruby-2.7.8-freebsd-14.tgz#58beea1e9e954efb2e7c27a3dcf5817d739049b50ae718c78d4fffe9a1e11c0b

Turbo Frame Reload Error: “element has a source URL which references itself”

I love Marco's turbo_power library for adding some extra actions to turbo. For example the turbo_frame_reload which should reload a given turbo frame.

But the turbo_frame_reload didn't work in my situation.

I've got an index view which renders all orders in a turbo-frame (with pagination).
Pressing a button next to an order should tag the order and reload the orders page.
Tagging is an action in other controller, which doesn't know anything about this order screen. But after tagging it should refresh the turbo frame with the orders.

I thought this could be easy by refreshing the turbo_frame with a turbo_stream action turbo_frame_reload. This only works if the frame has a src attribute in it.

When I set src on the this frame I get the error: element has a source URL which references itself. So this isn't working.

Workaround I created for now is the following.

I add an extra turbo_stream action named: turbo_frame_reload_with_data. This sets the source on the attribute data-src when the src attribute is empty/missing. (that's on the initial load).

So define the turboframe like this:

<%= turbo_frame_tag :orders, data_src: request.original_url do %>
.. content .. 
<% end %>

To make this work the following code is added to the application.js, adding a custom turbo-stream action.
This action sets the src of the turbo-frame when a turbo_frame_reload_with_data action is invoked

Turbo.StreamActions.turbo_frame_reload_with_data = function() {
  this.targetElements.forEach((element) => {
    let src = element.getAttribute('src') || element.getAttribute('data-src')
    element.src = ''
    element.src = src
  })
}

Note: Always setting src with data-src doesn't work. The data-src isn't updated on turbo-frame updates, only the src-flag is.

To make the rails experience nicer, a helper is added to the turbo_stream tag builder.

module TurboStreamActionsHelper
  def turbo_frame_reload_with_data(target = nil, **attributes)
  custom_action :turbo_frame_reload_with_data, target:, attributes:
  end
end
Turbo::Streams::TagBuilder.prepend(TurboStreamActionsHelper)

In the controller performing the action, I render the following turbo-stream action. To refresh after this, the following can be returend.

render turbo_stream: turbo_stream.turbo_frame_reload_with_data('orders'),

References