Andrew Seroff aseroff

The Unofficial 37signals/DHH Rails Style Guide

About This Document

This style guide was generated by Claude Code through deep analysis of the Fizzy codebase - 37signals' open-source project management tool.

Why Fizzy matters: While 37signals has long advocated for "vanilla Rails" and opinionated software design, their production codebases (Basecamp, HEY, etc.) have historically been closed source. Fizzy changes that. For the first time, developers can study a real 37signals/DHH-style Rails application - not just blog posts and conference talks, but actual production code with all its patterns, trade-offs, and deliberate omissions.

How this was created: Claude Code analyzed the entire codebase - routes, controllers, models, concerns, views, JavaScript, CSS, tests, and configuration. The goal was to extract not just what patterns are used, but why - inferring philosophy from implementation choices.

Stimulus cheatsheet

Website: https://stimulusjs.org/
GitHub repo: https://github.com/stimulusjs/stimulus
Handbook: https://stimulusjs.org/handbook/introduction
Discourse: https://discourse.stimulusjs.org/

Lifecycle callbacks

initialize: once, when the controller is first instantiated
connect: anytime the controller is connected to the DOM

	# bin/ci

	#!/usr/bin/env bash

	set -e

	echo "=========================================="
	echo "[ bin/ci ] Starting CI Pipeline"
	echo "=========================================="
	echo ""

	<%= form_with model: citizen, class: "card flex flex-col gap", data: { controller: "form" } do \|form\| %>
	<div class="flex flex-col gap mb-2">
	<div class="flex flex-col gap-half">
	<% countries = Country.order(:name) %>
	<%= label_tag :country_id, "Country", class: "text-sm font-medium leading-none" %>
	<%= select_tag :country_id, options_from_collection_for_select(countries, :id, :name, citizen.country_id), include_blank: "Select one", class: "input", data: { action: "form#submit", form_submitter_param: "on_country_change" } %>
	</div>

	<div class="flex flex-col gap-half">
	<% states = State.where(country_id: citizen.country_id).order(:name) %>

	#!/usr/bin/env ruby

	require 'bundler/inline'

	gemfile do
	source 'https://rubygems.org'
	gem 'premailer'
	gem 'nokogiri'
	gem 'base64'
	gem 'mail'

	# frozen_string_literal: true
	# config/initializers/colorized_logger.rb

	# This initializer adds color to the Rails logger output. It's a nice way to
	# visually distinguish log levels.
	module ColorizedLogger
	COLOR_CODES = {
	debug: "\e[36m", # Cyan
	info: "\e[32m", # Green
	warn: "\e[33m", # Yellow

	class AsyncMethodJob < ApplicationJob
	queue_as :default

	def perform(target:, method_name:, args:, queue_name: :default)
	self.class.queue_as(queue_name)
	# `target` could be either an instance or a class
	target = target.constantize if target.is_a?(String) # Convert class name to class object if needed
	target.send(method_name, *args)
	end
	end

	require 'fileutils'

	# Loop through all .jpg and .png files in the current directory
	Dir.glob("{.jpg,.png}").each do \|img\|
	# Construct the output filename with .webp extension
	output_filename = "#{File.basename(img, File.extname(img))}.webp"

	# Execute ffmpeg command to convert the image
	system("ffmpeg -i '#{img}' '#{output_filename}'")
	end

	# config/initializers/public_importmap.rb
	Rails.application.config.public_importmap = Importmap::Map.new
	Rails.application.config.public_importmap.draw(Rails.root.join("config/public_importmap.rb"))

	# app/helpers/application_helper.rb
	# copied from importmaps replacing javascript_inline_importmap_tag
	#
	# !!! No longer needed after this change https://github.com/rails/importmap-rails/pull/187
	#
	# def javascript_public_importmap_tags(entry_point = "application", shim: true)

	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var elements = document.body.getElementsByTagName('*');
	var items = [];
	for (var i = 0; i < elements.length; i++) {
	if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) {
	items.push(elements[i]);
	}
	}