Skip to content

Instantly share code, notes, and snippets.

@mizchi
mizchi / singlefile-frontend.md
Created November 23, 2023 10:27
How to run a minimal front-end stack in Single-File for prototyping.

Original(japanese) https://zenn.dev/mizchi/articles/standalone-html-frontend

Mostly translated by deepl


How to run a minimal front-end stack in Single-File for prototyping.

Note: Do not use in production, tailwind is running in CDN mode and esm.sh builds scripts dynamically, so performance is not good.

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, DarkMode, Button, LightMode } from "@chakra-ui/react";
import type { ApplicationProps } from "../../shell/src/types";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
function Root(props: ApplicationProps) {
return (
<>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@tailwind base;
@mizchi
mizchi / backpack-battles-first-round.md
Last active October 24, 2023 13:04
Backpack Battles の1,2 ラウンドの考察

1~2 ラウンドの勝敗を分けるものはなにか。

Backpack Battles で 1~2R でスタミナが切れない想定で、ダメージ/回復/ブロックを同じ価値としてゴールドあたりの効率を計算する。 初期バッグや石は考慮しない

野菜の比較

Banana          0.26/gold
Banana(Sale) 0.40/gold
import ts, { factory } from "typescript";
export function transformerFactory(context: ts.TransformationContext) {
function visitNode(node: ts.Node): ts.Node {
const newNode = ts.visitEachChild(node, visitNode, context);
if (
ts.isJsxOpeningElement(newNode) ||
ts.isJsxSelfClosingElement(newNode)
) {
return appendSourceMapAttribute(newNode.getSourceFile(), newNode);
import { test, expect } from 'vitest';
import { build, splitVendorChunkPlugin } from 'vite';
import path from 'path';
import { OutputAsset, OutputBundle, OutputChunk, RollupOutput } from 'rollup';
import ts from 'typescript';
const root = path.join(__dirname, "__fixtures")
test("nested", async () => {
const a = 'export default Math.random()';
import {test, expect} from 'vitest';
test("nested", async () => {
const a = 'export default Math.random()';
const b = `export default () => import('data:text/javascript;base64,${btoa(a)}')`;
const bmod = await import(`data:text/javascript;base64,${btoa(b)}`);
const amod = await import(`data:text/javascript;base64,${btoa(a)}`);
expect(await bmod.default()).not.toBe(await amod.default);
});
/*
Grid css layout utilities for [x, y, w, h] grid areas.
Example:
export default function App() {
return (
<>
<Grid
rows={["32px", "1fr", "1fr", "1fr", "1fr"]}

Atomコードリーディングメモ

ビルド方法

script/build

起動したらsrc/window-bootstrap.coffeeが起動時間のログを出してるので、そいつをgrepすると/src/broweser/atom-application.coffee が引っかかる。

src/broweser/atom-application.coffee は、 src/browser/main.coffee に呼ばれている

#!/usr/bin/env -S deno run -A
/*
$ edit ~/bin/cmd
$ chmod +x ~/bin/cmd
$ cmd -f
# Run
$ ls -al
total 24
drwxr-xr-x 10 kotaro.chikuba staff 320 Sep 22 20:16 .
drwxr-xr-x 9 kotaro.chikuba staff 288 Sep 22 20:01 .git