Mark Perkins allmarkedup

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.

Dell XPS 9310 Linux install notes (Ubuntu/Xubuntu 20.04)

My NL i7/16GB XPS 9310 has a Killer AX1650s WiFi chip, which eventually worked. Other Killer chips may not work.

I ordered the Windows Home edition, because developer edition with Linux was not available in my country. Apparently you can reclaim €100 from Dell if you don't use Windows.

Install

Bios:
Change the SATA Mode from the default "RAID" to "AHCI"

DaBi: data binding library that keeps it simple

DaBi (short for Data Binding) is a dead simple yet complete and self-contained DOM-to-JS and JS-to-DOM data binding library in just 25 lines of pure ES5 and 454 bytes when minified.

How to obtain

Download it right here or include it into your HTML:

	module Clsx
	def clsx(*args)
	process_args = args.map do \|arg\|
	if arg.is_a?(Array)
	clsx(*arg)
	elsif arg.is_a?(Hash)
	arg.map do \|key, value\|
	key if value
	end
	else

	class Dollar
	attr_reader :cents

	def initialize(cents:)
	@cents = cents
	end

	def hash
	[self.class, cents].hash
	end

	import _ from "lodash"
	import { StateEffect, StateField } from "@codemirror/state"
	import { EditorView, Decoration } from "@codemirror/view"

	/**
	* Plugin that makes line wrapping in the editor respect the identation of the line.
	* It does this by adding a line decoration that adds padding-left (as much as there is indentation),
	* and adds the same amount as negative "text-indent". The nice thing about text-indent is that it
	* applies to the initial line of a wrapped line.
	*

	import React from 'react';

	export interface IPreviewEnv {
	reactClass: string;
	publicPath: string;
	}

	export interface IPreviewTargetMeta {
	previewDisplay?: React.StyleHTMLAttributes<HTMLBodyElement>;
	}

	<!DOCTYPE html>
	<html class="no-js" lang="{{ language }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<link rel="apple-touch-icon" sizes="180x180" href="{{ '/inc/favicon/apple-touch-icon.png'\|path }}">
	<link rel="icon" type="image/png" sizes="32x32" href="{{ '/inc/favicon/favicon-32x32.png'\|path }}">
	<link rel="icon" type="image/png" sizes="16x16" href="{{ '/inc/favicon//favicon-16x16.png'\|path }}">
	<link rel="manifest" href="{{ '/inc/favicon/manifest.json'\|path }}">

	const fractal = require('@frctl/fractal').create()
	require('./setup')(fractal)

	const server = require('./server')(fractal, {
	port: 4000,
	sync: true,
	watch: true,
	syncOptions: {
	files: [
	'files-i-want-to-watch-also.css',

	// https://gist.github.com/MoOx/1eb30eac43b2114de73a
	const generic = {
	title: /<title>.*<\/title>/gi,
	desc: /<desc>.*<\/desc>/gi,
	comment: /<!--.*-->/gi,
	defs: /<defs>.*<\/defs>/gi,
	width: / +width="\d+(\.\d+)?(px)?"/gi,
	height: / +height="\d+(\.\d+)?(px)?"/gi,
	sketchMSShapeGroup: / +sketch:type=\"MSShapeGroup\"/gi,
	sketchMSPage: / +sketch:type=\"MSPage\"/gi,