Bootstrap Modal with Dynamic Content

For context, I was working on a feature to to allow users to preview the associated thread (in a modal) of each notification from the notifications index page. While the notifications were paginated, the post threads could be very large. The naive approach of just having a modal for each notification was very ineffecient when threads were large and made the page load slow.

To increase the performace, I wanted to render just one modal and have the content change depending on which notification was clicked.

This was a little tricky to get timings right for when and what content to load, but this article helped me a lot.

https://philonrails.substack.com/p/loading-dynamic-content-on-opening

Eventually I added an auto-scroll to the exact part of the thread that was related to the notification to.

Truncate HTML without cutting off HTML tags

I ran into an issue trying to truncate a users post in a notification email. Posts can contain markdown and thus HTML so it was difficult to style the truncated text because if the post contained HTML I could cut off a closing tag which would mess up the formatting of the rest of the email.

I wanted a way to truncate just the text part of the String and not the HTML tags.

The only gem I found that worked was Truncato. See this SO question.

In the end, I created a view helper that also sanitized the HTML so I could create an “allowlist” of tags that I could keep in the output. Truncato has effectively a “denylist” option, but it felt like that could get too large.

It looked like this:

def truncated_sanitized_html(html, **options)
  sanitized_html  = sanitize(html, tags: options[:tags])
  Truncato.truncate(sanitized_html, max_length: options[:max_length]).html_safe
end


truncated_sanitized_html(post.to_html, tags: %w(p div span code table td tbody tr pre), max_length: 1000)

Skip Git Commit Hooks

Occasionally I find myself in situations where I want to make a commit, but I don’t want git commit hooks to run because it will format the code and I don’t want it to.

(I plan to eventually format the code, but sometimes, especially when the commit is a work in progress, I don’t want to format anything since I haven’t solidified what I want to do yet)

The easiest way to do this is to use the --no-verify flag.

git commit -m "WIP" --no-verify

— Soure

Ruby Array Intersection

TIL you can find the intersection of two Arrays easily with &.

a = [18, 22, 33, 4, 5, 6]

b = [5, 4, 22, 1, 88, 9]

c = [18, 22, 33, 40, 50, 6]

# a intersecting b
puts "intersection of a and b : #{a & b}\n\n"
# => intersection of a and b : [22, 4, 5]

# a intersecting c
puts "intersection of a and c : #{a & c}\n\n"
# =>intersection of a and c : [18, 22, 33, 6]

# b intersecting c
puts "intersection of b and c : #{b & c}\n\n"
# => intersection of b and c : [22]

— Source

Beware— Default Headless Browser Size

Ran into a hard-to-debug error where a nav link was unable to be clicked on because it wasn’t “visible”. Printing the HTML of the page and turning off headless proved to me that the link was both present and visible, so I was confused for a while.

Apparently, the default browser size for headless chrome is Something like 800, 600 which almost certainly will activate a responsive layout that could cause some elements (like navbar links) to become “invisible”.

The browser has a wider default size in non-headless mode, so it was not immediately obvious to me that an element could be invisible when the browser is headless.

This makes me think that it should be best practice to always specify a default browser size for tests 🤔