Alice Kile elevenpassin

How to set up a basic Sinatra + React webapp in 2025

Let's say you want to use Ruby for the backend of a basic webapp but React on the frontend. Here's how.

(Note: All tested on January 13, 2025 with Ruby 3.3, Sinatra 4.1.1, and React 18.3. Configs may change over time.)

First, create the app folder and set up Sinatra:

mkdir my-sinatra-react-app

Use descriptive and obvious names.
- Don't use abbreviations, use full English words. player is better than plr.
- Name things as directly as possible. wasCalled is better than hasBeenCalled. notify is better than doNotification.
- Name booleans as if they are yes or no questions. isFirstRun is better than firstRun.
- Name functions using verb forms: increment is better than plusOne. unzip is better than filesFromZip.
- Name event handlers to express when they run. onClick is better than click.
- Put statements and expressions in positive form.
  - isFlying instead of isNotFlying. late intead of notOnTime.
  - Lead with positive conditionals. Avoid if not something then ... else ... end.

If we only care about the inverse of a variable, turn it into a positive name. missingValue instead of not hasValue.

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

I bundled these up into groups and wrote some thoughts about why I ask them!

If these helped you, I'd love to hear about it!! I'm on twitter @vcarl_ or send me an email [email protected]

Onboarding and the workplace

https://blog.vcarl.com/interview-questions-onboarding-workplace/

How long will it take to deploy my first change? To become productive? To understand the codebase?
What kind of equipment will I be provided? Will the company pay/reimburse me if I want something specific?

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

	# All my gist code is licensed under the terms of the MIT license.

	# Video demo: https://www.youtube.com/shorts/0zx4uSBUt_k

	# Add this somewhere in your ~/.bashrc

	# Use bash-preexec.sh (https://github.com/rcaloras/bash-preexec) to:
	# - disable the Ctrl-Z keybinding before printing the prompt
	# - enable the Ctrl-Z keybinding before executing a command
	#

	# based on https://github.com/amber-sixel/PythonCatPrinter.git

	# can be used as a raw postscript printer (a4, one page only) on port 9100
	#
	# status : curl --location --request GET 'localhost:5000'
	#
	# curl --location --request POST 'localhost:5000' \
	# --form 'image=@"/image.jpg"' \ #optional
	# --form 'text="hello world"' \ #optional
	# --form 'size="48"' \ #optional

	#!/usr/bin/env node
	const { exec } = require("child_process");
	const inquirer = require("inquirer");

	function runCommand(command) {
	exec(command, (error, stdout, stderr) => {
	if(!error) {
	console.log("Webpack-cli installed successfully");
	return true;
	}

	// See https://blog.isquaredsoftware.com/presentations/react-redux-ts-intro-2020-12/#/36 for slides
	// My basic render function structure:
	function RenderLogicExample({
	someBoolean, // 1) Destructure values from `props` object
	someList,
	}) {
	// 2) Declare state values
	const [a, setA] = useState(0);
	const [b, setB] = useState(0);

	<?xml version="1.0" encoding="UTF-8"?>
	<opml version="1.0">
	<head>
	<title>Graphics, Games, Programming, and Physics Blogs</title>
	</head>
	<body>
	<outline text="Tech News" title="Tech News">
	<outline type="rss" text="Ars Technica" title="Ars Technica" xmlUrl="http://feeds.arstechnica.com/arstechnica/index/" htmlUrl="https://arstechnica.com"/>
	<outline type="rss" text="Polygon - Full" title="Polygon - Full" xmlUrl="http://www.polygon.com/rss/index.xml" htmlUrl="https://www.polygon.com/"/>
	<outline type="rss" text="Road to VR" title="Road to VR" xmlUrl="http://www.roadtovr.com/feed" htmlUrl="https://www.roadtovr.com"/>