Fork me on GitHub

2021-08-25のJS: browser-compat-dataにDenoを追加、Mobile First and Desktop First、create-react-appからNext.jsに移行

Edit on GitHub 編集履歴を見る

JSer.info #554 - MDNなどが利用するブラウザ実装の互換データを管理している @mdn/browser-compat-data 4.0.0がリリースされました。

互換リストにDenoのデータが追加されています。

スキーマにpreviewaccepts_flagsの追加、XPathとXSLTのデータが不完全であるため削除などの変更も含まれています・


The State Of Mobile First and Desktop First - Ahmad Shadeedという記事では、CSSを書くときにMobileとDesktop向けのどちらを先に書くかについて書かれています。

MobileとDesktopのどちらかを先に書いて、もう一方をMedia Queryで上書きしたときのコード量や拡張性の違いについて比較しています。
また、ベースに加えてMobileとDesktopの対応をそれぞれ書いた場合の難しい点についても書かれています。
発展としてFlexboxやCSS Grid、Container Queriesなどの新しいCSS機能を使うことでより簡単に書けるようになっている話なども含まれています。


From Create-React-App to Next | Kitty Giraudelという記事ではCreate React App(CRA)からNext.jsへの移行をどのようにしたかについて書かれています。

<head>やスタイリングなどの項目ごとに、CRAからNext.jsにどのように移植したのかが書かれています。
また移行後に<Link>以外はどちらの環境でも実行できたため、移行の動作確認として両方の環境で動かしてテストする方法についても書かれています。


ヘッドライン


Announcing React Native 0.65 · React Native

reactnative.dev/blog/2021/08/17/version-065

React iOS Android

React Native 0.65リリース。
Hermes 0.8にアップグレードし、Hadesというガベージコレクタの実装、ECMAScript i18n APIのサポート、Apple M1のサポートなど。


Release v9.1.0 · mochajs/mocha

github.com/mochajs/mocha/releases/tag/v9.1.0

node.js testing library ReleaseNote

Mocha 9.1.0リリース。
--fail-zero--node-optionのサポート、JSONレポーターの追加など


Release Notes for Safari Technology Preview 130 | WebKit

webkit.org/blog/11958/release-notes-for-safari-technology-preview-130/

safari ReleaseNote

フラグ付きでArray.prototype.findLastArray.prototype.findLastIndexのサポート、WebAudioでWebM/Opusコンテナのサポートなど


Release v4.0.0 · mdn/browser-compat-data

github.com/mdn/browser-compat-data/releases/tag/v4.0.0

mdn JavaScript library ReleaseNote

MDNなどで使われるウェブ技術の互換性リストであるbrowser-compat-data 4.0.0リリース。
スキーマにpreviewaccepts_flagsの追加、Denoを追加、XPathとXSLTのデータが不完全であるため削除など


The npm registry is deprecating TLS 1.0 and TLS 1.1 | The GitHub Blog

github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

npm Github security news

npm registryでTLS 1.0とTLS 1.1を非推奨化し、2021年9月29日でサポートを終了する予定。
Node.js 0.10.0未満のバージョンを使っているケースやカスタムしたバイナリを使っているケースが対象となるがすでに99%はTLS 1.2を利用しているとのこと。


アーティクル


The State Of Mobile First and Desktop First - Ahmad Shadeed

ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/

CSS article

CSSを書くときにMobileとDesktop向けのどちらを先に書くかについて。
MobileとDesktopのどちらかを先に書いて、もう一方をMedia Queryで上書きしたときのコード量や拡張性の違いについて。
また、ベースとそれぞれを書いた場合やFlexboxやContainer Queryといった最近の機能を使って書いた場合についてなど


mouseover 中に表示される DOM のデバッグ | blog.jxck.io

blog.jxck.io/entries/2021-08-20/how-to-debug-mouseover.html

DOM debug article

mouseover中に表示されるDOM要素を開発者ツールでデバッグする方法について


'return await promise' vs 'return promise' in JavaScript

dmitripavlutin.com/return-await-promise-javascript/

Promises JavaScript article

return await promisereturn promiseで動作が異なるケースについて。
try...catchで囲まれている場合には、awaitによってthrowされると結果が異なる


複数リポジトリ間におけるeslint・prettierの設定共通化 - LIVESENSE ENGINEER BLOG

made.livesense.co.jp/entry/2021/08/24/083000

ESLint article

ESLintの設定を社内で共有管理するために、scoped packagesとして公開して利用方法について


Why WASM is not the future of Babylon.js | by Babylon.js | Aug, 2021 | Medium

babylonjs.medium.com/why-wasm-is-not-the-future-of-babylon-js-5832b09c9b10

WebAssembly article JavaScript

WebAssemblyはC++などのネイティブな言語をコンパイルして利用するのが目的であるため、TypeScriptで書かれたBabylon.jsをWasmにする正当な理由がまだないという話。
WasmとJS間のコミュニケーションコストやデバッグが難しい、メモリ管理なども含むためサイズが大きくなるなどの問題点について。
また、Babylon.jsの物理エンジンなどの一部領域ではWasmをすでに利用していることなどについても書かれている。


From Create-React-App to Next | Kitty Giraudel

kittygiraudel.com/2021/08/24/from-cra-to-next/

React Next.js article

Create-React-Appで書かれていたアプリをNext.jsに移行した話。
ボイラープレート、<head>、ルーティング、コンポーネントのDynamic Import、Styling、CSR/SSR、Lintなどについて。
また<Link>以外はどちらの環境でも実行できたため、移行の動作確認として両方の環境で動かしてテストする方法について


サイト、サービス、ドキュメント


SpeedVitals - Optimize your Website for Web Vitals

speedvitals.com/

webservice performance

ウェブサイトのパフォーマンス計測をしてCore Web Vitalsの改善方法を提示するウェブサービス。
計測結果からLCPのスコアの改善方法、レイアウトシフトの視覚化など改善に関する情報を提示する


@open-wc/semantic-dom-diff - npm

www.npmjs.com/package/@open-wc/semantic-dom-diff

DOM HTML JavaScript library

DOM/HTMLのassertionライブラリ。
HTML文字列を比較したテストができる。


Testing | Next.js

nextjs.org/docs/testing

Next.js React testing document

Next.jsにおけるテストについてのドキュメント。
Cypressを使ったE2EテストとJest + React Testing Libraryを使ったテストの方法について紹介している。


ソフトウェア、ツール、ライブラリ関係


geist-org/react: Modern and minimalist React UI library.

github.com/geist-org/react

React library

VercelのデザインをインスパイアしたReactのUIフレームワーク


johnsoncodehk/volar: ⚡ Fast Vue Language Support Extension

github.com/johnsoncodehk/volar

Vue TypeScript VSCode plugin

Vue 3をサポートするVSCode向けの拡張機能。
.vueファイルのTypeScriptの型チェックやテンプレートのlanguage serverを提供する


この記事へ修正リクエストをする
JSer.info Slackに参加する