7歳の娘がHTMLで作ったウェブサイト

 (naya.lol)
2 ポイント 投稿者 GN⁺ 2024-07-19 | 1件のコメント | WhatsAppで共有
  • 最初の画面は、Animals というタイトルの下に動物ページへのリンクを集めた、シンプルなHTMLリンクハブで構成されている
  • 動物セクションでは、cats、dogs、cheetahs のページへ移動できる
  • 別途 Technology セクションもあり、tabletとcomputerページへのリンクが並んでいる
  • 各リンクは「click here to go to the … page」という形式の文章リンクとして提供されている
  • 確認できる本文は最初の画面のリンク構造に限られ、下位ページの内容は含まれていない

最初の画面のリンク構造

Technology セクション

  • 別のタイトルとして Technology がある
  • 技術関連ページへ移動するリンクが2つある

確認できる範囲

  • 本文で確認できる内容は、最初の画面のリンク一覧である
  • リンク先は相対パスで提供されており、下位ページの実際の内容は含まれていない

関連記事

1件のコメント

 
GN⁺ 2024-07-19
Hacker News のコメント

  • 私たちのような古参が何年、何十年とかけて冷めてしまった技術のガラクタで、子どもが楽しそうに遊んでいるのを見るのはいいものだ。この先もずっとワクワクして楽しみ続けてほしい
    SICP の献辞ページにある Alan J. Perlis の引用のように、コンピュータサイエンスではコンピューティングの楽しさを守ることが本当に大事だと思う。私たちには、機械を完璧に、誤りなく、うまく使わせる責任があるというより、機械を拡張し、新しい方向へ押し出し、その楽しさを家の中に残しておく責任がある

    • 職場でのソフトウェア開発の楽しさが恋しい。20年ほど前に始めたころは、新しく学んだことがうれしくて他の人のところへ走っていって教えたりしていたのに、今はみんな陰鬱で、忙しくすり減らされながら「可視性の管理」に没頭していて、楽しさを表に出さない
      自分や友人たちが年を取ったせいなら仕方ないと思えるけれど、今の若い同僚たちも同じように、いやそれ以上に陰鬱に見える。たとえば Parquet ファイルから何かを取り出す必要があって、同僚があとでスクリプトを書くと言ったので、duckdb を起動して1分もかからず答えを見せたら、「初めて見ました。便利そうですね」という平板な反応だけだった。「わあ、すごい」とか「いいですね」でもなく、その存在を知ったことがむしろ不快そうに見えた
    • Steve Jobs の映画の引用を思い出す。地球上で最も効率のよい動物はコンドルで、最も非効率なのは人間だが、自転車に乗った人間は最も効率のよい動物になる、という内容だ
      きちんとしたコンピュータ、つまり親しみやすく、簡単で、見苦しくなく、机の上に美しく置けるコンピュータは、心のための自転車になり得るし、パーソナルコンピュータは人と人をつなぐコンピュータになり得る、という話だった
    • Swift で変数名に Emoji を使えないようにしようという提案が出たとき、コードの中で気まぐれさ、もどかしさ、ユーモアのような感情を表現できないように決めるのは、あまりに思い上がりだと返した
      iPad の Playgrounds を使っている8歳の子どもが、ただ面白いからという理由で変数名を :pig: にできないようにする必要はない。あらゆるものから楽しさを踏みにじる必要はない
    • この楽しさをずっと生かしておけるといい。Knuth の最新巻にはパズルがぎっしり詰まっていて素晴らしい
      ところが HN の別の上位スレッドでは、一日中机に向かって問題を解いているのに人口の99.9%より多く稼げないと不満を言う人たちがいる。たまに、そういう人たちはこの仕事をする資格がないのではと思うこともある
    • いい引用だ。昔は Kraftwerk のカバーに “ITS MORE FUN TO COMPUTE” と書かれたデスクトップ壁紙を使っていたけれど、今はなくしてしまった
      こういうリマインダーは定期的に必要だ。うちの子は、1年間、何かを手に入れるにはタイピングしなければならなかったおかげで、コマンドラインを覚えているところだ。あとでコンピュータを好きでなくなったとしても、少なくともタイピングという役立つスキルを身につけたのだから、惜しくはないと思う

  • 7歳だったら、まさにこう作っていたと思う。CSS とセマンティックマークアップの利点が何であれ、こういうものは楽しさの邪魔になる。あとで学べばいい

    • このやり方の問題は、適切な現代の HTML と CSS が持つ意味とスタイルの分離がないことだ
      あの混沌を google.com のような最先端ウェブページの優雅な意味構造と比べてみればいい
    • 完全に同意。フロントエンド開発者ではないし、検索履歴には「div を中央揃えする方法」のいろいろなバリエーションがある。検索語に怒りの罵倒語が付いたバージョンもいくつかある
    • これが今でも動くのが本当にうれしい。自分もこうやって学んだ
    • 今日初めて知ったけど、center タグがあって、background をインライン属性で指定できるんだな
    • 逆に、楽しさは CSS から始まる

  • すごくいい。本当によくできている
    ここ数年、米国ネブラスカ州を拠点とする非営利団体 Girls Code Lincoln を作って、幼い女の子たちにコーディングを教えてきたので、これは本当に気に入った。お子さんに共有できそうな、年齢に合った資料がある
    生徒たちが STEM 分野の女性にインタビューした YouTube シリーズ: https://www.youtube.com/playlist?list=PL-32uv45Ln4VJGhVr_jr6...
    歴史上の STEM 女性と現在の STEM 女性について話したポッドキャスト: https://girlscodelincoln.buzzsprout.com/
    必要ならいつでも連絡してよい: aakriti@TheNonprofiting.Org / info@GirlsCodeLincoln.org
    娘に STEM への関心を持たせる方法についての TED 講演: https://www.youtube.com/watch?v=guoLTuW8AX4&t=10s

    • 追加で、Pixar には Pixar in a Box という、かなり良くてしっかりしたコーディング授業がある: https://www.khanacademy.org/computing/pixar
      お子さんの年齢にぴったりの資料かはわからないが、将来のために取っておくとよさそうだ。興味を持ち続けられるよう、必要な資料を探すのは喜んで手伝える

  • ページは素早く表示され、コードに目立つバグはなく、構成は一貫していて筋が通っており、文章は簡潔ながら情報と作者の独自の声を伝えている
    甘めに見ても、インターネット上の95%よりよくできたウェブサイトだ。お子さんの気概が気に入った。素晴らしい仕事だ

  • 「猫は約2フィートなので、身長の6倍なら約12フィートです。それはとても恐ろしい猫でしょう」
    その通り。社会が望む形に完全に整えられる前の心が探索する道筋には、何か素敵なものがある。よくやった

    • 「最も一般的な犬の色は、たぶん茶色か黒です」
      gPT より信用できる
    • その部分で吹き出した。頭の中には「そうだね、本当に怖いだろうね！」しか浮かばなかった。このサイト最高
    • 表現がとてもいい。7歳というのは、おそらく一生の中で最も本当の自分に近い時期なのだと思う

  • 「コンピュータはとても重要な技術の形です。コンピュータがなければ、ウェブサイトも、Roblox studio も、何もありません」
    子どもたちの世界の見方って本当に愛らしいと思わないか。かわいすぎる

    • 今まさにそういう機械で、家からすべての請求書を払っている。本当にそれがなければ何もない。Naya の言葉に嘘はない
    • この文で完全に笑ってしまった。すごくいい

  • 子どもが幼いころに作った作品の記録として、HTMLファイルをバックアップしておくことを勧める。後で家族の宝物になるはず
    家族のドメイン配下に置いて保管してもよい

    • 1995年ごろに作った自分のWebサイトのバックアップがあればよかった。でも、もしかすると記憶のほうが平凡な真実よりも素敵なのかもしれない
    • GeoCities扱いされる前に、ぜひやっておくのがいい。子どものころに作ったものをバックアップしていなかったことを後悔している
    • さらに言えば、Webサイトを印刷し、コードも印刷しておくとよい
    • 「家系図？ いや、うちの家族には成果と思い出のgitログがある」

  • これは本当にいい。この小さなサイトは、私がときどき懐かしく思うインターネットの時代へ連れていってくれる
    90年代、美大を卒業したばかりのころ、ポートフォリオサイトが必要だと思ってBorders Booksへ行き、HTMLとNetscape Navigator内蔵ツールでサイトを作る方法を扱った厚さ4〜5インチの本を買った。1週間ほどかけて、元記事のサイトと機能的にはとてもよく似たサイトを作った。違いはコンテンツだった
    ホームページには自分が描いた絵を1枚載せた。巨大な体格の男性がジョックストラップを着け、ずる賢い笑みでこちらを見る色鉛筆画だった。入るには彼の腹をクリックする必要があり、そのとき初めてイメージマップを学んだ。クリックすると「おお、くすぐったい」と言ってから、ポートフォリオとナビゲーションに入る仕組みだった
    すべてHTML 4で、JavaScriptもCookieもフォームもない、ごく基本的なものだった。だがそのサイトのおかげで、Adobeの競合だったMicrografxで、デザイン分野で初めての本当の仕事を得ることができた。あとは歴史の通り。ありがとう、Netscape

  • 「コンピューターはとても重要な技術の形です。コンピューターがなければ、WebサイトもRoblox studioも、何もありません。コンピューターがなければ、タブレットを使わなければなりません。タブレットはあまり役に立ちません。ええと、コンピューターにできることをするには、ですが」
    アーメン

    • 「タブレットは非常に有用な技術の形です」
      すごく混乱する。いったい何が現実なんだ

  • とても良いWebサイトだ。速く、シンプルなユーザー体験で、JavaScriptなし、コンテンツに集中している

    • チーム全体で作った「プロが開発した」Webの大半よりも、性能とアクセシビリティが明らかに上
      NayaはRedditのエンジニアリング担当VPになるべきだ。このアプローチを使えば、サイトは実際に改善されるはず
    • うちのフロントエンド開発チームが使っているどれよりも、はるかに容量効率がいい。ReactアプリをビルドするDockerイメージが6GBだった。「自分たちのせいではなくNPMのせい」だと言っていた
      コンテンツも有益だ