Press "Restart" to restart rendering the Gopher demo.
Gopher
Gopher was introduced in 1991 as a way to organize and distribute information
across the Internet before WWW became dominant.
It was especially popular at universities in the U.S.,
where departments used it to publish course materials, research archives,
and campus resources in a simple, menu-driven format.
Long before browsers, Gopher offered a coherent way to "browse" information
using nothing more than text.
Gopherは、WWWが主流になる以前に、インターネット上の情報を整理し配信する手段として、1991年に登場しました。
特にアメリカの大学で広く利用され、各学部や部署が、授業資料、研究アーカイブ、学内リソースなどを、
シンプルなメニュー形式で公開するために使われていました。
ブラウザが登場するはるか以前から、Gopherはテキストだけを用いて
情報を「閲覧」できる、一貫した仕組みを提供していたのです。
Gopher được giới thiệu vào năm 1991 như một cách để tổ chức và phân phối thông tin trên Internet, trước khi WWW trở nên phổ biến và thống trị.
Nó đặc biệt được ưa chuộng tại các trường đại học ở Mỹ, nơi các khoa dùng nó để đăng tải tài liệu môn học, kho lưu trữ nghiên cứu và các tài nguyên trong khuôn viên trường dưới dạng menu đơn giản, dễ dùng.
Từ rất lâu trước khi trình duyệt ra đời, Gopher đã cung cấp một cách “duyệt” thông tin mạch lạc, chỉ bằng văn bản thuần túy.
#!/usr/bin/perl
use strict;
use warnings;
use IO::Socket::INET;
my $host = "gopher.floodgap.com";
my $port = 70;
my $selector = ""; # empty means root menu
my $sock = IO::Socket::INET->new(
PeerHost => $host,
PeerPort => $port,
Proto => "tcp",
Timeout => 5,
) or die "Cannot connect\n";
# Send selector + CRLF
print $sock "$selector\r\n";
while (my $line = <$sock>) {
chomp $line;
last if $line eq "."; # end of menu
my ($type, $rest) = ($line =~ /^(.)(.*)$/);
my ($label, $sel, $h, $p) = split /\t/, $rest;
printf "[%s] %s\n", type_name($type), $label;
}
close $sock;
sub type_name {
return {
'0' => 'TEXT',
'1' => 'MENU',
'7' => 'SEARCH',
'9' => 'BINARY',
'g' => 'GIF',
'I' => 'IMAGE',
}->{$_[0]} || "OTHER";
}
Above is a Gopher client written in Perl, designed to show how early Internet services were often explored directly, without layers of abstraction. It opens a raw TCP connection to a Gopher server, sends a simple selector request, and prints the returned menu in a human-readable form. No libraries beyond basic socket support — just text flowing over the network. Programs like this were common in the early days of the Internet.
上記はPerlで書かれたGopherクライアントで、初期のインターネットサービスが、抽象化の層を重ねることなく、直接的に探求されていたことを示すためのものです。
このプログラムはGopherサーバーに対して生のTCP接続を開き、シンプルなセレクタ要求を送信し、返ってきたメニューを人間が読める形で表示します。
基本的なソケット機能以外のライブラリは一切使わず、ネットワーク上を流れるのはただのテキストだけです。
このようなプログラムは、インターネットの黎明期にはごく一般的な存在でした。
Ở trên là một Gopher client được viết bằng Perl, nhằm minh họa cách mà các dịch vụ Internet thời kỳ đầu thường được khám phá trực tiếp, không qua nhiều lớp trừu tượng phức tạp.
Nó mở một kết nối TCP thô đến máy chủ Gopher, gửi một yêu cầu selector đơn giản, rồi in ra menu trả về theo cách dễ đọc cho con người.
Không dùng thư viện gì ngoài socket cơ bản — chỉ có văn bản chảy trực tiếp qua mạng.
Những chương trình kiểu như thế này rất phổ biến trong những ngày đầu của Internet.
Thanks for visiting. Enjoy!
ご訪問いただき、ありがとうございます！
Cảm ơn đã ghé qua. Chúc bạn vui!
-;WebKit;desktop;-;-;-;bot;-
Web Components
When you view source for this website,
you will notice that I Have many custom tags.
These tags are "Web Components".
• <menu-90s> - Menu in header
• <lang-switch> - Language in header
• <breadcrumbs-90s> - Breadcrumbs in header
• <translate-content> - Translations in page contents
<cookie-consent-widget> is written with
solid-element
but all the other web components are written as ES6 modules.
ウェブ・ページのソースを見ると分かりますが、
このサイトではカスタム・タグを多用しています。
これらは Web Components です。
• <menu-90s> - ヘッダーのメニュー
• <lang-switch> - ヘッダーの言語切り替え
• <breadcrumbs-90s> - ヘッダーのパンくず
• <translate-content> - ページ内の各言語コンテンツ
<cookie-consent-widget> は
solid-element
を使っていますが、それ以外は ES6 モジュールで書いています。
Khi bạn xem mã nguồn của website này,
bạn sẽ nhận thấy rằng tôi có khá nhiều thẻ tùy chỉnh.
Những thẻ này được gọi là “Web Components”.
• <menu-90s> - Menu ở phần header
• <lang-switch> - Chuyển ngôn ngữ ở header
• <breadcrumbs-90s> - Breadcrumbs ở header
• <translate-content> - Bản dịch trong nội dung trang
<cookie-consent-widget> được viết bằng
solid-element,
còn tất cả các web component khác thì được viết dưới dạng module ES6.
Main Contents
Main Contents
Airport Experiment
For a program I wrote back in 2021, I ported the program into ES6.
Awesome Vietnam
A few thoughts to share about Vietnam.
Solfeggio Frequencies
Let you play certain frequencies.
Artwork
Wouldn't call them art but a series of doodles.
Links
Links to web pages that I found useful.
Daily Log
What I've been doing in Vietnam lately.
About
What is this website about?
Who?
In case you are interested who maintains the website.
Search
Search the content provided in this website.
Contact
Give me messages
空港シミュレーション
2021年に書いたプログラムをES6にポートしたものです
ベトナムいいね
ベトナムについて思うこと色々
ソルフェジオ周波数
再生ボタンを押すと周波数を出せます
イラスト
いたずらがき置き場です
古本のこと
古本について思うこと
リンク集
便利そうなウェブサイトをシェア
日誌
ベトナムでの生活のことなど
このサイトについて
ここって何のウェブサイトなの？
運営者のこと
サイトの運営者はどこの誰なのか
サイト内検索
キーワードでサイト内コンテンツを検索できます。
お問い合わせ
お気軽にお問い合わせ下さい
Thí nghiệm sân bay
Một chương trình tôi viết vào năm 2021, sau đó tôi port nó sang ES6.
Việt Nam tuyệt vời
Một vài suy nghĩ tôi muốn chia sẻ về Việt Nam.
Tần số Solfeggio
Cho bạn phát thử một số tần số nhất định.
Tranh vẽ
Không hẳn là nghệ thuật, chỉ là mấy bức vẽ nguệch ngoạc thôi.
Liên kết
Các trang web mà tôi thấy hữu ích.
Nhật ký hằng ngày
Dạo này tôi đang làm gì ở Việt Nam.
Giới thiệu
Trang web này nói về điều gì?
Ai vậy?
Trong trường hợp bạn tò mò ai là người duy trì trang web này.
Tìm kiếm
Tìm kiếm nội dung có trên trang web này.
Liên hệ
Gửi cho tôi lời nhắn
Perlin Noise
Using Parlin noise to move 150 particles around.
This is a demo app written in WebAssembly.
Visit my Github repo for the source.
Perlin Noise を使って 150 個の粒子を動かす、デモ用の WebAssembly アプリです。興味のある方は私の Github リポジトリ をみて下さいね。
Dùng nhiễu Perlin để điều khiển 150 hạt chuyển động.
Đây là một ứng dụng demo được viết bằng WebAssembly.
Ghé thăm repo Github của tôi để xem mã nguồn.
Github Repos
Check out my Github repos!
cloudflare-workers-d1-rust-example
A sample code for Cloudflare Worker written in Rust using D1.
Cloudflare Worker
D1
Rust
resize
A very simple CLI program written in Rust for resizing an image with specified width.
Rust
image
resize
CLI
perlin-experiment-2
Another attempt in using Perlin noise. Last time, only the noise calculation was done in WASM, and a canvas animation was done in JS. This time, everything is done in WASM. To better serve as an introductory WASM sample app, I made the codes as simple as possible.
Rust
wasm-pack
wasm-bindgen
js-sys
web-sys
Perlin Noise
jsdoc-for-type-safety
Use JSDoc comments, and run a type-check using TypeScript.
JSDoc
TypeScript
type-safety
simple-i18n-solution
A simplified version of what I have for my website for i18n localization.
i18n
NodeJS
Javascript
very-simple-wasm-2023
A sample WASM app using wasm-pack-plugin prepared as a learning material.
Rust
wasm-pack
wasm-bindgen
js-sys
web-sys
wasm-pack-plugin
widgets-react-vs-solidjs
Comparing widgets implemented with React vs SolidJS.
This is more about using Emotion CSS and Tailwind CSS for React and SolidJS apps.
This is more about using Emotion CSS and Tailwind CSS for React and SolidJS apps.
Web Components
SolidJS
React
Emotion & Tailwind
latest-ts-setup-2022
Let me have a boiler plate for Babel + TypeScript.
Babel
TypeScript
React
Emotion & Tailwind
flight-pack
A demo app using wasm-pack-plugin, drawing flight information on Google Map.
Rust
wasm-pack
wasm-bindgen
js-sys
web-sys
wasm-pack-plugin
sowngwala
A library for calculating sun's position.
"sowng" stands for "sun" in Belter language (from sci-fi movie "The Expanse").
"wala" for "one who is professional at".
"sowng" stands for "sun" in Belter language (from sci-fi movie "The Expanse").
"wala" for "one who is professional at".
Rust
mikaboshi
A Rust library for 風水 (风水) (Feng-Shui) providing basic Chinese astrological concepts such as 八卦 (Ba-Gua), 干支 (Gan-Zhi), 九星 (Jiu-Xing), 二十四节气 (Er-Shi-Si Jie-Qi), 二十四山向 (Er-Shi-Si Shan-Xiang), 生死衰旺 (Sheng-Si Shuai-Wang), etc. When bundled into a WASM (WebAssembly) app, you could associate the library with your Javascript apps as well.
Rust
perlin-experiment
This WASM app creates canvas elements for 2 divs, and runs animations. The WASM app is one, but handles 2 canvas elements. You may pass configs at initial startup. Clicking the upper canvas, you may toggle among 3 visualization modes. If you are only interested in Perlin Noise, see my JS project perlin-noise-world-map (which is quite old) which auto-generates geographic landscapes (source or demo). Or, see rust-perlin-wasm-test-2 (which is even much older) for particles moving in organic manner (source or demo).
Rust
wasm-pack
wasm-bindgen
js-sys
web-sys
Perlin Noise
react-widget-airport
Bundling a React app into UMD library, embedded into another app. You can pass arguments at initial startup, or you can dynamically send/receive messages using SharedWorker.
React
UMD library
SharedWorker
react-widget-setup-2021
Just like the above react-widget-airport, but much simpler!
React
UMD library
SharedWorker
