Wev.dev LIVE: Implementing Structure data with JavaScript
- Google検索した時に一覧ページでも商品の詳細情報とかが綺麗に表示されていることがあるけど、あれを出すために何をしているかと言う話。RichResultだかRichContentだか言ってた。基本的にはJSON LDと言うものでデータを埋め込んでおく感じにになる。フレームワークを使った例だとAPI呼んだ結果をJSで動的に埋め込んでたけど、あれクローラー待っててくれるんだろうか？
Wev.dev LIVE: What's new in Devtools
- 昨日まとめに出てきた感じの内容。Issuesと言うタブが増えたりとか色々している様子
- WebAssemblyのデバッグで、バイナリコードを追うのはもちろん無理なのでブレークポイントがおいたりできるように、今まではJSと同じSourceMapと言うものを使っていたけど、DWARFと言うものに変更する。詳しくは知らないけど、この形式？自体は前からあるもので、これを使うとSourcemapではできない変数のinspectとかができるようになるらしい。(でもまだ対応中でできてないとのこと)。
Wev.dev LIVE: Building better in the world of build tools!
- まとめにもあった、最適なビルドツールを探せるツールの紹介のためにそれぞれのツールの違いなどが紹介されている。
- たとえば、なんでもJSを基準にして捉えて、例えば画像ファイルやcssもJSに変換するか、HTMLを主体として捉えているかなど。
- 同じものをそれぞれでビルドしてどう変わるか見てみたくなった
Wev.dev LIVE: 10 modern layouts in 1 line of CSS
place-items: centerで縦横まとめて中心位置に設定できるgrid-template: auto 1fr auto/ auto 1fr autoのようにrowとcolumnをまとめて設定できる- flexのcolumnで
justify-content: space-betweenを使うといい感じにコンテナ内のアイテムの高さを統一できる。例えば説明が短いカードがあっても、画像の開始位置が他のカードと一緒になるように、とか。(説明書くより動画見た方が早い) clampでmax(MIN, min(VAL, MAX))と同等の設定ができる。便利そう！- stableのブラウザでの対応がまだないらしいけど、
aspect-ratio: <width> / <height>と言うのがあって、これを使うと比率が保持されるから今までwidth:100%,height:100%で頑張って画像をレスポンシブにしてたのがいらなくなりそう
Wev.dev LIVE: How to stay fast and fresh with Angular
- 特に目新しい情報はなかったけど、とにかく最新版に追従しようって言うのはほんとそう、と思った。毎度結構バージョン上げるだけでバンドルサイズ下がるので努力が感じられる。
