codesandbox ベースに移行させたい

[dynamis]

jsbin / jsfiddle の課題がいくつかあり codesandbox なら解消されそう:

• jsbin のお節介で無限ループ阻止 (#33)
  • 原因不明で処理が 1 土司か実行されませんという質問が結構出てくる
• iframe と feature policy の相性悪い (#16)
• syntax highlight の対応する構文が古い
  • async 未対応、arrow function 未対応あたりが痛い
• js 読み込みタイミングを理解する必要がある
  • onload で実行させようとすると jsfiddle はデフォルト onload だから被って実行されなくなる
• ローカルファイル編集に移行するのが面倒
  • zip ダウンロードとかしてさっと動かせない
  • ローカルとオンラインで html の js/css へのタグの有無やリンクパスが変わる
• さっと公開用サイトを作れない
• prettier などを動かせない

但し codesandbox にも懸念はある

• UI が IDE になって機能が豊富すぎて初めてさんに難しくなる
  • オンライン IDE であることを丁寧に説明する必要がある
  • github や netlify, now 連携とかはまぁ気にせず guest 利用する想定がよい
• ロード時間が jsbin などより明らかに長い
  • 5-10 秒。我慢できないほどではない
• polyfill が js module じゃないのに codesandbox はバリバリ import
  • 自分たちでテンプレ用意しておく分には自由に出来るから気にしないで良いか

[dynamis]

status: チュートリアルをすぐに更新する前に慶応大学の講義で試験利用して知見を貯めてから再検討。

[dynamis]

@kou029w さん情報:

CodeSandbox 用のリポジトリを別途用意せずとも、既存リポジトリの特定ディレクトリのコードをインポートして編集開始する機能があった https://codesandbox.io/docs/importing#import-from-github

package.json があるディレクトリなら何処でも直接指定して

https://codesandbox.io/s/github/chirimen-oh/chirimen-raspi3/tree/master/gc/path/to/dir

のような URL で import が可能 (編集して保存した瞬間にフォークが出来るから編集開始画面になる)

現状だと polyfill, drivers を含む必要があるため gc ディレクトリに package.json をおいてインポートリンクを使って編集・実行画面に誘導したくなるが、import した配下の特定ディレクトリ・ファイルをオープンするところまで指示できないし、ファイルが一杯すぎて初心者に辛くなる

polyfill, drivers が npm 管理になって package.json から読み込んで node_modules 配下にある状態に出来れば js で import 'chirimen-polyfill' または html タグの script src=node_modules/chirimen-polyfill/polyfill.js などとするだけで、個別の example のディレクトリだけを codesandbox に import 可能になる。

[dynamis]

todo checklist:

depends: https://github.com/chirimen-oh/chirimen-raspi3/issues/71

• [ ] 最初の方で codesandbox の使い方を説明
  • [ ] リンクを開いて編集、保存 (URL が自動発行されること)
  • [ ] 別ウィンドウで実行
  • [ ] ローカル保存して作業を継続
  • [ ] drivers は npm module を追加
• [ ] jsbin (jsfiddle) に加えて codesandbox へのリンク
  • [x] hellorealworld
  • [x] section0
  • [x] section1
  • [x] section2
  • [ ] section3
  • [ ] section4
  • [ ] section5
  • [x] section6
• 応用的な使い方を tips か何かに記載
  • [ ] now/netlify デプロイ
  • [ ] エディタの設定
  • and more?
• 利用上の注意
  • ログイン無しで保存できる sandbox は 10 まで。それ以上新しい sandbox で編集・保存しようとすると "You need to sign in to create more than 10 sandboxes" というエラーが出てくる。

[dynamis]

note: 比較的初心者さんの多い塩尻でチュートリアルを実施した際には、開発環境 (エディタ) が複数出てくることが分かりにくいというフィードバックを結構頂きました。

codesandbox だけにするのは raspi4 を待つべきかも知れませんが、jsbin/jsfiddle 両方があるのは jsbin のサービスが止まっていることがあるからとかいった経緯で、当面 jsbin に統一しておいて jsfiddle やローカルの vscode や csb については /js/editor.md あたりに独立したエディタ説明ページを作って参照させる形にした方が良いと思います。

[dynamis]

r.chirimen.org のサンプルコードリンクを default jsbin から csb に切り替えました。