Weekly Tech News
JJ2021/01/22
githubのdefault branchを変更する君
jsの関連ツールの2020年版ランキング
surveyをしてその結果をまとめたもの
ref: https://zenn.dev/korosuke613/articles/productivity-weekly-20210120
jser.info10周年(すごい)
情報の集め方やどんな人へ向けて書いてるかなどまとめた記事
パフォーマンスのチェックリスト
Nodeの15.6.0がリリース
server.listenなどでAbortSignalが使えるようになった
これがあると例えばgcloudみたいにcliで認証だけwebでやりたいみたいなのをやるときに認証するためのサーバーをNodeで立ててタイミングが来たらcloseするがそう言うのを簡単にできたりするのだろうか(以前実装した時はどうにか無理矢理graceful shutdownを実装した気がする)
adobeのflash playerが2021/1/12でサポートが切れた
denoの2020年に行った変更などをまとめたやつ
内部でesbuildを使いながらesm,cjs,iifeにbundleしてくれるbundler
egoist先生の新作かな
tailwind cssをcss-in-jsで行うライブラリとビルドするためのツール
SnowpackとPreactを使ったNext.jsライクなディレクトリ構造のルールを持った静的サイトジェネレーター
GitHubのlit-htmlインスパイアなテンプレートレンダリングライブラリ。
WHAWG HTMLで提案中のTemplate Partsの実装を含んでいる
template partsとは
https://github.com/github/template-parts かな？
ref: http://jser.info/2021/01/18/snowpack-3.0-front-end-performance-checklist-state-of-js-2020/
便利なhooksのutility
useBatteryなどadaptive loadingに使えそうな実装が色々ありそう
adaptive loadingとは
https://web.dev/adaptive-loading-cds-2019/
それっぽいデータを作ってくれるやつ
例えば名前や住所、画像などもサポートしてる
もちろん日本語もある
言語チャレンジ系のvanilla js版
JJ2021/01/29
意外と便利なコマンド。git checkoutとかにも使えるね
techではないがclubhouse人気っぽい
確かに人の話を聞いてる限りはわりとぶっちゃけた話をしてて面白い
webpackを例にどのようにモジュールグラフを作っているのかを解説してくれてるスライド
基礎的なHTTPのお話
ブラウザの作り方
mkcertで署名してlocalhostや好きなドメインでhttps(over tls)環境を作る。
またいつhttpsがlocalhostで使うのか
webpack 5.17.0がリリースされた。内容として experiments.lazyCompilation がはいった。これは遅延でビルドをすることにより初回の環境の立ち上げとかのタイミングでのビルド時間を小さくすることで早く立ち上げられるようにする目的がある
Denoの1.7がリリースされた。1.6の時にはいったdeno compileが1.6の時はコマンドを実行した環境に対して実行可能なバイナリをつくるようになってたが、1.7でクロスコンパイルが可能となった。(また最適化をしたらしい)
Open Web DocsというプロジェクトがGoogleやMozilla、W3Cなどで立ち上げられた。MDNのようなウェブプラットフォームのドキュメントに対して長期的に取り組んでいくためのプロジェクト
ブラウザ上でビルドするmizchi先生の新作
puppeteerの実装をtypescript実装にする
Chromium で <popup> 要素が試験的に実装される。
webRTCがW3C & IETFがやっていくことになった(?)(今までそうじゃなかったんだ感)
inlineでmoduleを定義することができるようになる新しい構文
Context APIでとってきたやつをSelectorで処理して再レンダリングを抑制してくれる君
JJ2021/02/05
Zenn joins Classmethod 🎉
Chromiumとsafari TPとFirefox NightlyでCSSの aspect-ratio がサポートされた！
ただ Android Browser とかどうなんだろう...browser capabilityの壁つらい
npm@7 が stable になった。v7では yarn.lock のサポートやworkspaceのサポート、peerDepsを自動でインストールするなどのnew featureがある。(peerDepsの挙動の変更はbreaking change)
またpackage-lock.jsonがv2のformatになる。
リリースとしては7.5がリリースされて7.5では npm diff コマンドが追加された
tc39のmeetingがあった。ここで Intl.DateFormta.prototype.formatRange がstage4へ。その他色々なproposalのstageがupdateされてる。個人的に早く欲しいのはjson modulesとmodule block
Http Headerを構造的に扱えるようにするための仕様(RFC)
Chrome89ベータのリリース。top-level awaitのサポートなど。
Firefox85のリリース。top-level awaitやatメソッドのサポートなど。
at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/at
バズってしまってたSEOに強いマークアップみたいなツイートに対する記事。
先週か先々週に紹介したWasmerの1.0リリースに対してベンチを取った記事。
JJ2020/2/12
OTPのautocompleteの話
web otp
去年OTになったけどそこから延長されたっぽい。QuicTransportはWebTransportのquic実装である。
ref: https://blog.jxck.io/entries/2020-06-09/quic-transport.html
Reactで動画を書ける(文字通り動画を書ける)やつ。結構すごい
Rust Foundationが作られた。ここにはMozillaはもちろん、GoogleやMicrosoft、AWS、Huaweiなどが参画し、よりメンテナンスやサポートを出来るようになった
W3CとWHATWGで分かれてたのがWHATWGに統一されて有効な仕様はHTML Living Standardだけになりました。
githubがやってるパフォチュー。Intersection Observerを使ったりなどなど
github.comのgithubの後ろに1sをつけたドメインを開くとVSCodeでそのリポジトリのコードが読めるやつができてる
PRのAuto Mergeがきた！
GitHubでタイトルとかbodyとかを書く場所で : でautocompleteが出るようになった
いいtipsがまとまってる
12月以前のもzennにあるので確認してみてもいいかも
WebKitのwebサイトを跨いでiosアプリからwebサイトへの広告クリックを測定するためのPCM(Private Click Measurement)と呼ばれる新機能の紹介
訳しました: https://zenn.dev/jj/scraps/1f4c10accb6c98
amp-imgがDeprecateされる。理由はwidth/heightやloading=lazyなどは標準のimgで出来るのに、amp-imgを持ってしまうと標準のimgのupdateにamp-imgがついていかないといけないから。
JJ2020/02/19
CSSのCascadingに新しく Layer という概念がはいるかも。Layerとは何かを書いてくれているブログ
TailwindCSSの記法でCSSを記述できて、Tailwindを使うのとの違いはWindi CSSはコンパイラなのでコンパイルすることができて、purgeとかautoprefixerとかそういう設定をまるっとやっとくれるっぽい？
遊戯王カードをdrawするGitHub Action
静的サイトジェネレーター
github actionsで [ci skip] できるようになった
これ僕らが使うことはないですが、例えばSemantic Releaseのbotとかは CHANGELOG.md をcommitするために [ci skip] してたりします。
Google検索のqueryの書き方
Google TypeScript Style Guide
webpackでdynamic importをした時に挿入されるscript要素のappendChildをrICでlazyしてパフォチューしたやつ
Declarative Shadow DOMがShipされたっぽい
Go1.16 がリリースされた
画像などのファイルをバイナリに埋め込めるembedという機能が増えたっぽい。@lifinaに聞きましょう
JJ2021/04/23
Markup tipsっぽい
expressのルーティングを一覧するcli
Appleの新製品発表会
font読み込みの最適化
tc39 proposals
deno 1.9.0のまとめ
cross-originやcross-siteのまとめ
lit
たかもそさんのtips
figjam
Chrome 90のリリース
デフォルトのprotocolがhttpsになったり、declarative shadow domのサポートなど
headless-ui 1.0のリリース
Styled Componentsを使ったCSS-in-JSと
linaria を使ってCSSファイルに分離した場合のパフォーマンスを比較した記事。
Web VitalsのメトリクスをJavaScriptで取得して、実際にどの要素がスコアに影響してるのかをデバッグする方法について
SentryをTSにしたよって記事
CLSのデバッグツール
httpのcache-control: must-understand
PSLの用途と今起こっている問題について
JJ2021/04/30
のりぴーさんのLitの解説記事
uhyoがHTMLで記述するプログラミング言語をつくったよって話
Fastlyのwasmのコンパイラ&ランタイムlucetを試した記事
いいコードとは何か
大津さんの質問の仕方を教えるためのリポジトリ
Next.js 10.2
デジタル庁のページがJSを無効にすると見れない件について
InstagramのStoryみたいなのを実装できるWeb Components
多言語対応のテキストのセグメンテーションを可能にするproposal
pixel perfectのためのmarginやpaddingの値を確認できるやつ
FLocについて
optをcross-originなiframeでも受けれるようにするための実装例
JJ疲れちゃった（）