Snippet Share

Hey Tailwind enthusiasts, don‘t sleep on CSS. It‘s getting really good. Modern browsers now support features like custom variables, new pseudo selectors (e.g. :has(), :is()), and CSS nesting. You can do some sweet styling without need of a preprocessor like SASS. Here‘s a snippet from the footer nav on https://www.joyofrails.com.

footer.css
nav li:has(+ li) {
  &:after {
    margin: 0 var(--space-xs);
    content: ' / ';
  }
}
ShareDownload

For converting Markdown, Rubyists may default to Redcarpet or Kramdown. I suggest taking a look at Commonmarker, a Ruby gem built on top of comrak, a Rust of implementation the GitHub-flavored version of the CommonMark spec.

Why? One reason is you can parse Markdown into an abstract syntax tree (AST) which enables powerful customization of what you can do with the markdown source.

ruby
require 'commonmarker'
Commonmarker.to_html('"Hi *there*"', options: {
    parse: { smart: true }
})
# => <p>“Hi <em>there</em>”</p>\n

doc = Commonmarker.parse("*Hello* world", options: {
    parse: { smart: true }
})
doc.walk do |node|
  puts node.type # => [:document, :paragraph, :emph, :text, :text]
end
ShareDownload

Phlex and ERB play nice together!

If you’re curious about Phlex but unsure of whether you want to go "all in", you can start small. You can render a Phlex component in ERB and you can yield back to the ERB template from Phlex. You can adopt Phlex gradually.

This code snippet displays an ERB template that renders a Phlex component called Users::NewsletterSubscriptions::Banner. The first render call yields to a block that in turns renders another ERB partial called "users/newsletter_subscriptions/form". These features help demonstrate Phlex’s compatibility with ERB.

app/views/users/newsletter_subscriptions/_banner.html.erb
<%= render Users::NewsletterSubscriptions::Banner.new do %>
  <%= render "users/newsletter_subscriptions/form" %>
<% end %>
ShareDownload

An open secret about Rails and JavaScript: lots of apps are using Vite to bundle frontend assets via the excellent Rails integration provided by Vite Ruby. You may want to give it a try. #rails #vite

shell
bundle add vite_rails
bundle exec vite install
ShareDownload

I‘ve mentioned previously that Joy of Rails uses SQLite along with Rails support for multiple databases. Here's a snapshot of what the Joy of Rails config/database.yml file looks like in development. I’ve separated the database for each of the Rails "backends" running on SQLite, including ActiveRecord (primary), Rails cache, Solid Queue job queue, and Action Cable. Each simply maps to a different file on disk.

config/database.yml
default: &default
  adapter: sqlite3
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 3 } %>
  timeout: 5000

development:
  primary:
    <<: *default
    database: storage/development/data.sqlite3
  cache:
    <<: *default
    database: storage/development/cache.sqlite3
    migrations_paths: db/migrate_cache
  queue:
    <<: *default
    database: storage/development/queue.sqlite3
    migrations_paths: db/migrate_queue
  cable:
    <<: *default
    database: storage/development/cable.sqlite3
    migrations_paths: db/migrate_cable
ShareDownload
ruby
ApplicationController.render(
  inline: article.body,
  type: :"mdrb-atom",
  layout: false,
  content_type: "application/atom+xml",
  assigns: {
    format: :atom
  }
)
ShareDownload
app/javascript/controllers/screenshot.js
import { Controller } from '@hotwired/stimulus';
import * as htmlToImage from 'html-to-image';

export default class extends Controller {
  connect() {
    this.element.addEventListener(
      'turbo:before-fetch-request',
      this.prepareScreenshot,
    );
  }

  prepareScreenshot = async (event) => {
    event.preventDefault();
    if (event.detail.fetchOptions.body instanceof URLSearchParams) {
      const data = await htmlToImage.toPng(this.snippetTarget);
      event.detail.fetchOptions.body.append('screenshot', data);
    }
    event.detail.resume();
  };
}
ShareDownload