Let's make a Teeny Tiny compiler, part 1 5/5/2020 This is the first post in a three part series. Check out part 2 and part 3 when you are ready. It is a beautiful day outside, so let's make a compiler. You don't need any knowledge of how compilers work to follow along. We are going to use Python to implement our own programming language, Teeny Tiny, that will compile to C code. It will take about

ゲームレビューの営みは人間の不思議なエネルギーで駆動する。 遊ぶのが好きなら読み書きの時間で実際にプレイした方が楽しめるし、感触を知りたいだけならゲーム配信や実況動画の方が役立つ。発売前後にメディアが一斉公開するものならまだしも、数ヶ月、数年、数十年経った作品でも読み書きされるのは人間がつねに共感を欲し、そこに深い意味をもとめざるをえないからだ。 この記事では、ゲームレビューの読み書きをとおして感じてきた固有の難しさをまとめる。ひとつひとつにもっと掘り下げるべき奥深さがあるが、僕が目指したのは見取り図の作成だ。 結論を先にいうと、ゲームレビューを書くのがなぜ難しいかには以下の３つの要因がある。 プレイングの困難：ゲームを遊ぶことは作品ごとやジャンルごとに一定量の学習を要求し、課題構造がそのプレイングを可視化するため巧拙の誤魔化しがきかない 文章表現の困難：動画媒体のコンテンツが人気を博して

はじめに 2024年4月1日から障害者差別解消法の方針が改定される。この法律は「障害を理由とする差別の解消を推進する」ために、以下の3つを行うこととしている。 不当な差別的取扱いの禁止 合理的配慮の提供 環境の整備 「合理的配慮の提供」とは、障害のある人から「社会の中にあるバリア(障壁) を取り除くために何らかの対応が必要」との意思が伝えられたときに、行政機関等や事業者が、負担が重すぎない範囲で必要かつ合理的な対応を行うこと。 「合理的配慮の提供」は、これまで行政機関等は義務、事業者は努力義務とされていたが、改正法により、2024年4月1日から事業者も義務化されることとなる。 これによって、事業者のWebページにも何らかの配慮が義務となる。「合理的配慮の提供」が義務化されることで、Webサイトやアプリケーションの分野では、どのような対処が必要となるのか、2024/4の方針改定までに取り組む

いまさら気づいたけど Headless 系のUIライブラリが一番 AI と相性いいのではないか。 ロジックはプログラマで書けて自由度高いし、コンポーネントのネスト構造から意図を読み取れるだろうし、class 名は自由に書けるから意図を表明しやすい。 それをプロンプトとして ChatGPT or Codex にそのまま投げて書かせる、ができる。 というわけで vite + react + radix-ui + vanilla-extract で実験してみた。 プロンプト あなたは凄腕のマークアップエンジニアです。 radix-ui は Headless UI ライブラリで、UIとしてのセマンティクスのみを持っています。 次のコードは React + radix-ui + vanilla-extract で書かれた React コンポーネントです。 // Popover.tsx import

TypeScriptの型定義ファイルから積極的な圧縮を行うための @mizchi/optools をリリースした。まだ実験中だが、結構動くはず。使う場合は自己責任で。 追記: optools を packelyze に rename した。これは optools という CLI 名が ImageMagick の提供するコマンドとぶつかったため。 試行錯誤の過程は https://zenn.dev/mizchi/scraps/1bdf01f5efb147 にある。 このライブラリは、自分の所属する Plaid の業務時間中に作成した。 想定ユーザー ライブラリ作者 ビルドサイズ厳しいフロントエンド開発者(サードパーティスクリプト等。自分が業務で作った理由がここ) リスクとってでもビルドサイズを縮めたいフロントエンド作者 動機 世の中な TypeScript で書かれたコードは、その型情報を使

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

10秒で概要 10万件のデータをサジェストするAutocompleteなSelectBoxを作りたい。 しかし、1万件を超えたあたりから通常のAutocompleteではレンダリングに時間がかかる。 以下の方針が有る。 react-windowによるレンダリング以外の範囲の仮想化 フロントエンドではデータを保持せず、入力値に応じてSearchのAPIコールを実施する Reactのレンダリングによる課題 Reactのレンダリングは、大まかに以下のフローで行われます。 Triggering a render 新規画面への描画時、またDOM要素の差分を検出したことをTriggerがとして、レンダリングが発生します。 Committing to the DOM 描画要素に違いがあるDOM要素のみ、DOMノードを変更します。 Autocompleteで表示するデータである<li>要素についても当然D

作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, type Infer, type Valid

// Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, $record, type Infer, type Validator, } from "lizod"; const validate = $object({ name: $string, age: $number, familyName: $opt($string), abc: $enum(["a", "b", "c"]), nested: $object({ age: $number, }), static: $const("st

The Workers Browser Rendering API allows developers to programmatically control and interact with a headless browser instance and create automation flows for their applications and products. Since the private beta announcement, based on the feedback we've been receiving and our own roadmap, the team has been working on the developer experience and improving the platform architecture for the best p

自分のブログを辿ってみたところ Rust を 2020 年には書いているようだが、初心者を名乗らせていただく。なぜならブログのネタにする以外で Rust 書いたことないし、これも調べながら書いているからだ。もっと練習したい、どこかに Rust を書ける機会ないかな〜ﾁﾗｯﾁﾗｯ 👀 なぜありふれていそうな題材で書くか 題材はありふれているし解説もたくさんあるが、それらを読んで理解できるのか？という疑問がある。というのも、所有権、借用、ライフタイム自体についての説明は至る所で見るが、これらが無いと何が大変なのか、導入することで何が解決されるかがよく分からないと思うからだ。勿論、そのような点まで解説してくれているものもたくさんあるが、正直なところ Not for Me だった。何が Not for Me だったかというと、C++ の知識やコンピュータサイエンスの知識があることが前提になってい

まだライブラリ化してないのと、フルパス対応してないけど、いじれば使えると思う。 これは何 こういう感じに fetch に型がついて動く import { type TypedFetch, JSON$StringifyT, JSON$ParseT } from "./typed-fetch"; const stringifyT = JSON.stringify as JSON$stringifyT; // こんな感じの記法で型情報を与える const fetch = window.fetch as TypedFetch<{ "/api/:xxx": { method: "GET"; bodyType: { text: string; number: number; boolean: boolean }; headersType: { "Content-Type": "application/

アソビズムは5月16日、『ShapeHero Factory』を発表した。Steamストアページも公開されている。発売時期は2023年秋を予定している。 『ShapeHero Factory』は、工場、ローグライト、タワーディフェンスを融合させたゲームだという。舞台となるのは、とある地下室。机の上に広げた真っ白なスクロール（巻物）の上を舞台に戦いが繰り広げられるようだ。 ゲームプレイとしては、工場を整備し、ヒーローを量産し、ゲートの破壊阻止を目指すという。図形をコンベアで運び出し、キャンバス上で組み立てることでヒーローを生産。バトルはウェーブ制にて展開される。ヒーローは中央にあるゲートの破壊を阻止するという。プレイヤーはヒーローに指示することはできず、できることは工場をビルドするのみ。ヒーローたちの戦いを見守るのだ。 またウェーブをクリアするとさまざまな報酬を獲得。報酬で獲得したアーティフ

Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from the community, it died. Well, great news — it’s back. And it’s so much better than the previous version. Even better, the W3C spec is mostly stable, and there’s a working prototype in Chrome now. We just need a little interest from the commun

Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ