Adam Ziółkowski zettadam

Based on Evan You's comparison which included Svelte and Vue. https://github.com/yyx990803/vue-svelte-size-analysis

For Preact, React, and Solid I took their official TodoMVC and ran them through Vite (2.3.6) to get vendor. For the components I grabbed the unminified source, ran it through Terser Repl, removed the imports, and ran through Brotli.

I wanted to use hooks for React and Preact since those are much smaller but all the official demos use classes. Adding Hooks adds library weight to Preact but it is worth it for this comparison(Preact with classes was 1.60kb and 3.81kb). Honestly I couldn't find a good hooks implementation for React/Preact that was small so I made one myself based on Solid.

	Preact	React	Solid	Svelte	Vue
component size (brotli)	1.21kb	1.23kb	1.26kb	1.88kb	1.10kb

Podman with docker-compose on MacOS.

Podman an alternative to Docker Desktop on MacOS

Getting podman installed and started is super easy.
Just use brew to install it.

> brew install podman

Now since podman uses a VM just like the Docker Client on MacOS we need to initialize that and start it.

Everything I Know About UI Routing

Definitions

Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

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/

	FROM --platform=${BUILDPLATFORM:-linux/amd64} golang:1.16 as builder

	ARG TARGETPLATFORM
	ARG BUILDPLATFORM
	ARG TARGETOS
	ARG TARGETARCH

	WORKDIR /app/
	ADD . .
	RUN CGO_ENABLED=0 GOOS=${TARGETOS} GOARCH=${TARGETARCH} go build -ldflags="-w -s" -o yourapplication main.go

	function useAbortController() {
	const abortControllerRef = React.useRef()
	const getAbortController = React.useCallback(() => {
	if (!abortControllerRef.current) {
	abortControllerRef.current = new AbortController()
	}
	return abortControllerRef.current
	}, [])

	React.useEffect(() => {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute</title>
	</head>
	<body>

	<h2>Add React in One Minute</h2>
	<p>This page demonstrates using React with no build tooling.</p>

	const md5File = require('md5-file');
	const path = require('path');

	// CSS styles will be imported on load and that complicates matters... ignore those bad boys!
	const ignoreStyles = require('ignore-styles');
	const register = ignoreStyles.default;

	// We also want to ignore all image requests
	// When running locally these will load from a standard import
	// When running on the server, we want to load via their hashed version in the build folder

	const timing = store => next => action => {
	performance.mark(`${action.type}_start`);
	let result = next(action);
	performance.mark(`${action.type}_end`);
	performance.measure(
	`${action.type}`,
	`${action.type}_start`,
	`${action.type}_end`
	);
	return result;