今週読んだもの 2020/6/22週
Vue Composition API を使ったライブラリの紹介記事
Vue2/Vue3どちらでも使えるみたい。
VueUseの公式サイトがStorybookでできているのも面白い。
DenoがTypeScriptの使用をやめた5つの理由
1. ファイルを変更する際のTypeScriptのコンパイル時間が数分かかるため、連続的なコンパイルはひどく時間がかる。
2. 実際のDinoの実行ファイルでユーザーインターフェイスのAPIを作るソースファイル内で使っているTypeScriptの構造が実行時のパフォーマンスの問題になっている。
3. TypeScriptはDenoのコードを構築することの助けになるとは示されていない。それどころかDenoチームは逆効果だと実感している。言及されている課題の一つは、複製された独立したBodyクラスが2箇所あるに至っていることだ。
4. 内部のコードと実行環境のTypeScript宣言はコンパイラがd.tsファイルの生成に役立たないとき手動で同期する必要がある。
5. 彼らは2つのTSコンパイラの提供をメンテナンスしている。1つはDenoの内部コードのためでもう一つは外部ユーザーのコードで、両者とも似たような目的を持っている。
以上から、内部コードからTypeScriptを削除したようです。
もっと詳細な説明とか具体例はこのドキュメントにあるみたい。
TypeScript開発チームのリーダーへのインタビュー
長くて最初の方しか読めなかった。
JSのワンライナーユーティリティ関数のスニペット集
単純にちょっとした処理のスマートな書き方集として参考になる。
Webページのスクロール関連のテクニックまとめ
JSつかった模擬的な動きの紹介と、スクロール実装に使える技術の話。CSSのscroll-behaviorプロパティを使ったテクニックは簡単だけど、ページ内検索したときなど、その動きが使い勝手の妨げになる場合もある。
汎用的なスクロール制御の技術のプロポーザルもあるみたいだけど、現状はJSでIntersectionObserverのスクロールイベントを監視する方法でやるしかない。その他スクロールを扱うライブラリ数種の紹介とこの記事で紹介したテクニックの組み合わせ可否の表がある。
Styling Layout Wrappers In CSS
CSS レイアウトでよく使われる .wrapper (場合よっては .container だったりする) についての考察。
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}こういうのを、paddingを使わないでやる方法とか、CSS Gridを使った場合とか、横幅いっぱいにしたセクション内で同様のレイアウトを実現したい場合とか、 CSS variablesでカスタマイズしたり、wrapper に指定したくない子要素へのレイアウト情報を display: contents で親要素に委譲させるテクニックとか、paddingをcalc()関数で可変にして同様のコンテンツエリアの確保をする方法とか。
Githubのデザインシステム
CSS ライブラリとReactコンポーネント、アイコン集、ガイドライン、デザイン素材の集合。
全体的にCSSのユーティリティの集合体のような設計を土台として、基本的な振る舞いと構造以外はpropsでマージンとかフォントサイズとか渡して汎用的にカスタマイズできる感じになっている。GridとかPositionとかFlexとかCSSを表示用のユーティリティ機能としてのコンポーネントもある。
レスポンシブなレイアウト情報を配列で渡すプロパティの設計はなるほど、と思った。
iPad OSのポインターの設計
WWDC2020のセッション動画。実際のポインターとコンテンツの位置関係によって適切に振る舞うように設計されているという説明。
iOS14の変形カーソルを、自前でゼロから実装するアルゴリズム
前のビデオの説明にあるような実ポインターと仮想ポインターとボタンの重心にスプリングを2つかまして仮想ポインタのシェイプを変形させるロジックの考察。サンプルつき。
SF Symbols 2
Appleのシステムフォント(San Francisco)のアイコンの設計の解説、SwiftUIでの使い方など。
最後の方のアイコンとテキストをベースラインで合わせるようになってる話とか参考になる。
「ぷよぷよ」のプログラミング教材、セガが無料提供 “ぷよ”の移動や色指定でゲーム制作体験
アプリ開発によるプログラミング教育サービスのMonaca Educationの教材らしい。普通にやりたい。
iPhoneのNFCシールでの自動化が便利すぎてシール貼りまくった
アプリケーションやWebサービスだけがIT技術の活用ではないと感じさせるアイディア。生活や仕事の空間の中に上手に組み込む工夫は必要ですね。
「プログラミングは工作」 高齢者向けスマホゲーム 独学で開発８５歳
ルーペ使いながら開発しているのすごい。
Introducing Amazon Honeycode – Build Web & Mobile Apps Without Writing Code
AWSで新たに追加されるノンコードでモバイルアプリ開発サービスのβ版。スプレッドシートのようなデータストアを持っていて入力や表示のUIをGUIで構築できる感じ。Glideの仕組みをAWS版という感じなのかな。
JKが接触確認アプリ「Cocoa」の開発に貢献した話。〜1日でXamarinを学びアプリ改善〜
話題のアプリの改善に貢献した経緯と、コードのざっくり解説。
マシな作り方の作り方を作る
Lipsベースでベクタグラフィックを描画できるプログラムを作っている話。
コードで実装したあとでグラフィック側を調整したらコード側の値に反映される感じが楽しそう。(Lipsかけないけど)
記事後半の「よりマシな作り方の作り方」のくだりが興味深い指摘だと思いました。人はツールでできることでやれることを考えてしまいがちで、道具と使う人の関係が逆転してしまうという話。やりたいことのために道具をふくめて作り方を作るという点はとても同意するけど、たしかにツールが便利かどうかで作れたり作れなかったりしたり、便利になるとみんなそれで似たようなものを作りがちになるのもそうだと思った。
道具を作るときにその役割や可用性を考える良いテーマだなと思う。
