Running applications locally on your laptop is normally a doddle. Boot up a Rails app and point your browser at

http://localhost:3000

bash

Easy peasy. But what if your application is not your average application. Suppose it’s multi-tenanted app with a hostname for each tenant and you want to try that locally. Well you could whack a load of entries in your /etc/hosts

/etc/hosts

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1    demo.fossa-are-great.org
127.0.0.1    demo.fossa-are-ok.org
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost

bash

Then you could visit…

http://demo.fossa-are-great.org:3000/
http://demo.fossa-are-ok.org:3000/

bash

…with ease and everything would be fine, even if port 3000 is now a little jarring. It is possible to remove the port if we ran our own version of Nginx running on port 80 and configured it to proxy onto our running application on port 3000. I’m going to go out on a limb and say there are will be a high proportion of developers that won’t know how to configure Nginx to do this and it’s a bit overkill anyway. However, puma-dev makes pretty light work of this.

Puma-dev: A fast, zero-config development server for macOS and Linux - https://github.com/puma/puma-dev

On macOS it’s pretty easy to set up with brew

brew install puma/puma/puma-dev
# Configure some DNS settings that have to be done as root
sudo puma-dev -setup
# Configure puma-dev to run in the background on ports 80 and 443 with the domain `.test`.
puma-dev -install

bash

Then in order to configure our hostnames we create a file the ~/.puma-dev per hostname we want to support with the port of the running application.

~/.puma-dev/demo.fossa-are-great

3000

bash ~/.puma-dev/demo.fossa-are-ok

3000

bash

This time we have to visit our domain with the .test Top-Level Domain as Puma Dev, by default, supports that TLD. Puma-dev runs on port 80 and 443 as standard and so there is no need to supply a port.

http://demo.fossa-are-great.test/
http://demo.fossa-are-ok.test/

bash

The way this works is really neat and I’m a bit of a fan to be fair. Hostnames on macOS and Linux flavours uses /etc/resolver/. Puma creates a file /etc/resolver/test to indicate that name resolution for .test domains should use a local nameserver running on port 9253 to resolve hostname blah.test

# Generated by puma-dev
nameserver 127.0.0.1
port 9253

bash

In fact let’s try it

dig blah.test @127.0.0.1 -p 9253

; <<>> DiG 9.10.6 <<>> blah.test @127.0.0.1 -p 9253
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 2962
;; flags: qr rd; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 0
;; WARNING: recursion requested but not available

;; QUESTION SECTION:
;blah.test.			IN	A

;; ANSWER SECTION:
blah.test.		0	IN	A	127.0.0.1

;; Query time: 0 msec
;; SERVER: 127.0.0.1#9253(127.0.0.1)
;; WHEN: Mon Feb 05 15:42:26 GMT 2024
;; MSG SIZE  rcvd: 52

bash

Yep, this returns and resolves our domain to 127.0.0.1, however visiting http://blah.test will result in the following because we haven’t configured puma-dev to point at an internal port.

unknown app

bash

This is pretty neat huh? Well that’s not the end of the story. What if we wanted to use https://demo.fossa-are-great.test. Well that just works out of the box. Like I said it also runs on port 443. Puma manages the certificate authority for the .test domain locally and adds the certificate and key to the local keychain so now we have valid SSL. Magic.

% ls -la ~/Library/Application\ Support/io.puma.dev 
total 16
drwx------   4 rl  staff   128 16 Jan 09:03 .
drwx------+ 62 rl  staff  1984 29 Jan 02:06 ..
-rw-r--r--   1 rl  staff  1208 16 Jan 09:03 cert.pem
-rw-------   1 rl  staff  1679 16 Jan 09:03 key.pem

bash

I’ve been using this setup for years now and it has enabled us to run multiple applications locally and fully test running up to 5 different multi-tenanted Rails apps logging users in with the same cookie domain as an extreme example.

https://app1.blah.something.test
https://app1.club.something.test
https://app2.blah.something.test
https://app2.club.something.test
https://app3.blah.something.test
https://app3.club.something.test

bash

I have only ever found one issue with this setup and that was today.

SSL Certificate seemingly invalid

Today’s issue involved building PDFs with Grover that had missing styles and as it turned out the this was only over SSL so there was an issue with the certificate which was fixed by re-configuring Puma-dev to presumably re-add the certificate to the keychain.

puma-dev -uninstall
sudo puma-dev -setup
puma-dev -install
puma-dev -stop

bash

Thumbs up for puma-dev

This year has been a weird one. And life takes a turn.

At the end of last year, after 4 years, I decided to move on from SARD JV Limited they are lovely people and the team are great and we still talk but for varying personal reasons, it could not continue and I set out to seek my fortune elsewhere.

I landed with Builder.ai in January of this year and realised pretty quickly that the role I had taken was not for me. I’m not afraid of meetings, planning, mentoring, code reviews, far from it. But when I realised that I wasn’t writing any code myself that became a problem. With SARD JV I was in the heart of everything, guiding the development of the application and introducing new ways of restructuring code, adding in performance gains the whole package, I had code coming out of my ears and I was waking up thinking about code. Without being in the thick of it I was in a place where I wasn’t happy. This is the first time I felt like I’d made the wrong choice and it was wrong to continue for myself and for Builder.ai so I made a quick exit.

In April I joined Juniper Education and have for the past six months been working as a Senior Developer in an exceptional team on a pretty complex Assessment tracking system for UK schools. Plenty of performance problems to tackle and interesting UIs. We were on the verge of launching the product in the coming months. Sadly, however, the business has decided not to continue with Ruby. I mean I think Ruby is pretty great, but… that’s not our decision. That means a medium size team of developers were released in the wild on Tuesday of this week.

If only there was a startup that needed 5 to 10 developers to that were already comfortable working with one another to start on a new product. Wishful thinking I know.

So for now I’m on the hunt for work myself. I have all of my possessions wrapped in a hankerchief on the end of a stick and I am off to the end of our driveway to seek my fortune. That might be a lie.

So here goes “…I’m a seasoned but not salty Senior Software Engineer from Brighton, UK who’s been working with Ruby/Rails (remotely) for the past 15 years. I’m looking for a fully remote role that is hands-on focusing on code rather than people management although I love working with other developers and wish to continue code review and mentoring. I want to make a positive impact on the team I land in and inject my experience in a new project/adventure…”.

If you have a quest that needs a Tank, I’m available and ready to work with you. Feel free to take a look at my CV and any feedback positive or negative is very welcome.

It appears to be the wrong time of year to be looking for a new Ruby/Rails gig. But unfortunately my brain isn't ready to hibernate for the Winter. So if you have hard problems, horrible upgrades or just need a reliable, competent, conscientious Senior Ruby Dev... #ruby #rails pic.twitter.com/gKEJSfT5J1

— RobL (@braindeaf) November 27, 2023

Syntax Highlighting is important, it just makes code all warm and fluffy and more engaging. I currently use HighlightJS in my Rails 7 app.

./bin/importmap pin highlightjs

bash

Which adds the following to `config/importmap.rb`

pin "highlightjs", to: "https://ga.jspm.io/npm:highlight.js@11.4.0/es/index.js"

ruby

Over the years I have used a number of different ways to organise my code examples in blog posts. They are a mixture of RedCloth and HTML and I used to used to use CodeRay and then SyntaxHighlighter to render code blocks nicely.

<x-source:ruby>
class Cat; end
</x-source>

<pre>
  <code>
    class Rabbit; end
  </code>
</pre>

html

As an aside I never updated the old blog posts but created a renderer to update the body of the posts to comply to the new format, and even ensure that I could embed my pre > code html in examples too by escaping the contents of every pre > code element.

# frozen_string_literal: true
class Content
  def initialize(string)
    @string = string
  end

  def render
    ::Haml::Helpers.preserve(segments.join('')).html_safe
  end

  private

  def string
    @string.gsub(/<source(:[a-z]+)?>/, '<pre><code>')
      .gsub(%r{</code></pre>}, '</code></pre>')
      .gsub(%r{<code>([\s])+}, "<code data-controller='highlight'>")
  end

  def segments
    string.split(/(<pre><code>.*?<\/code><\/pre>)/m).map do |s|
      if s =~ /<pre><code>.*?<\/code><\/pre>/m
        s.gsub(/<pre><code>(.*)?<\/code><\/pre>/m) { "<pre><code data-controller='highlight'>#{CGI::escapeHTML($1)}</code></pre>" }
      else
        RedCloth.new(s).to_html
      end
    end
  end
end

ruby
I could then use just a turbo:load EventListener to apply the highlight the code blocks.
app/javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"

// Turbo.session.drive = true

import HighlightJS from "highlightjs"
window.HighlightJS = HighlightJS

document.addEventListener('turbo:load', (event) => {
  console.log('turbo:load')
  document.querySelectorAll('pre code').forEach((el) => {
    HighlightJS.highlightElement(el);
  });
});

javascript

However, this doesn’t work with Turbo-Frame, the `turbo:load` callback is only run on full page loads and I want to use them in Turbo-Frame(s). I am sure there is another callback I could run but honestly I’d prefer to use a Stimulus Controller and know that it will always trigger when the DOM changes and my code block is added to the DOM.

app/javascript/controllers/highlight_controller.js

import { Controller } from "@hotwired/stimulus"
import HighlightJS from "highlightjs"

export default class extends Controller {
  connect() {
    HighlightJS.highlightElement(this.element)
  }
}

javascript

With code blocks looking like

<pre>
  <code data-controller="highlight">
    class Rabbit; end
  </code>
</pre>

html

This seemed to work in development but failed in production. AS it turns out I was caching the content of every blog post, so it wouldn’t need to re-render every

Rails.cache.clear

ruby

For bonus points I’ve added support for triple back-tick ```language delimited blocks for code.

# frozen_string_literal: true
class Content
  def initialize(string)
    @string = string
  end

  def render
    ::Haml::Helpers.preserve(segments.join('')).html_safe
    # rescue => e
    #   'BROKEN'
  end

  private

  def string
    @string.gsub(/<source(:[a-z]+)?>/, '<pre><code>')
      .gsub(%r{</code></pre>}, '</code></pre>')
  end

  def segments
    rewritten = string.split(/(

[a-z]?\n.*?

)/m).map do |segment|

      if segment =~ /

/m

        segment.gsub(/

#{CGI::escapeHTML($2)}

" }
else
segment
end
end.join(’’)

]+?>.*?<\/code><\/pre>)/m).map do |s|
      if s =~ /
.*?<\/code><\/pre>/m
        s.gsub(/<pre><code>(.*)?<\/code><\/pre>/m) { "<pre><code data-controller='highlight'>#{CGI::escapeHTML($1)}
[^
" }

      elsif s =~ /
.*?<\/code><\/pre>/m
        s
      else
        RedCloth.new(s).to_html
      end
    end
  end
end
```

However, I should just bulk update the content of the blog bodies to not use the old tag syntax I implemented years ago anyway.
Fun Thursday.