Fork me on GitHub

2020-09-21のJS: Moment.jsのステータス、PostCSS 8.0.0、Vue 3.0.0、DOMの順序と表示順序の一致

Edit on GitHub 編集履歴を見る

JSer.info #506 - Moment.jsのウェブサイトにProject Statusが追加されています。

Moment.jsに新しい機能の追加などはしないメンテンスモードであることが書かれています。
互換性保ちつつ新しい機能や仕組みを入れるのは難しい状態であるため、別のライブラリの利用を推奨しています。

代替となるライブラリとしてLuxonDay.jsjs-jodadate-fnsについて紹介されています。
また、Intl APIや現在策定中のTemporalについても書かれています。

このプロジェクトステータスの明示の発端は、Chrome Dev ToolsのLighthouseにmoment.js利用の警告を表示したことに起因しています。

今まで、Moment.jsのステータスは少し暗黙的でしたが、今回の件でLuxonなどの後継や代替ライブラリがあることを示して、Moment.jsを新しく使うことは非推奨であることを明示するようになりました。

関連


JavaScriptでCSSを変換/拡張するツールであるPostCSS 8.0.0がリリースされました。

Node.js 8以下のサポート終了、ES2015のコードをそのまま配布するように、postcss.vendor APIの削除などが行われています。
また、PostCSS Plugin APIの変更、パーサの改善、Source Mapサポートの改善、TypeScriptのサポートなども行われています。

Plugin APIの変更とマイグレーションについてはついては、次の記事で解説されています。

また、PostCSS 8.0.0に対応したAutoprefixer 10.0もリリースされています。


Vue 3.0.0が正式にリリースされました。

コードベースをTypeScriptで書き直し、コアモジュールのパッケージ化が行われています。
新しくComposition API、Teleport、Fragmentsのサポートをしています。
実験的なAPIとして<script setup><style vars>をサポートしています。

2.xからの破壊的な変更としてVue.*以下のグローバルAPIをインスタンスAPIに移動、Template Directiveの挙動の変更、ライフサイクルオプション名のリネーム、Filterの削除などが行われています。

削除されたAPIや変更されたAPIについては次のマイグレーションガイドにかかれています。

また、Vue 3.0.0時点ではIE 11のサポートは含まれていませんが、今後のminorアップデートでサポートしていくようです。


ヘッドライン


Moment.js | Docs

momentjs.com/docs/#/-project-status/

JavaScript news library

Moment.jsのプロジェクトステータスについてのドキュメントが追加された。
Moment.jsに新しい機能の追加などはしないメンテンスモードであるということについてや代替となるライブラリとしてLuxon、Day.js、date-fns、js-jodaの紹介をしている。
また、ECMA-402のIntlオブジェクトとTemporal Proposalについて紹介している


Release 8.0 “President Ose” · postcss/postcss

github.com/postcss/postcss/releases/tag/8.0.0

CSS library ReleaseNote JavaScript

PostCSS 8.0リリース。
Node.js 8以下のサポート終了、ES2015のコードをそのまま配布するように、postcss.vendor APIの削除。
PostCSS Plugin APIの変更、パーサの改善、Source Mapサポートの改善、TypeScriptのサポートなど


Release v3.0.0 One Piece · vuejs/vue-next

github.com/vuejs/vue-next/releases/tag/v3.0.0

Vue 3.0.0リリース。
コードベースをTypeScriptで書き直し、コアモジュールのパッケージ化。
Composition API、Teleport、Fragmentsのサポート。
実験的なAPIとして<script setup><style vars>のサポート。
破壊的な変更としてVue.*以下のグローバルAPIをインスタンスAPIに移動、Template Directiveの挙動の変更、ライフサイクルオプション名のリネーム、Filterの削除など。
また、Vue 3.0.0時点ではIE 11のサポートは含まれていない。


Announcing TypeScript 4.1 Beta | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/

TypeScript ReleaseNote

TypeScript 4.1 Betaリリース。
Template Literal Types、Mapped TypesでKeyのRemappingをサポート、再帰的なConditional Typesのサポート。
インデックスアクセス時にundefinedとなる可能性を考慮するnoUncheckedIndexedAccessオプションの追加、baseUrlなしでpathsオプションを指定できるように。
破壊的な変更として、new Promiseにおけるresolve関数の引数がOptionalではなくなるなど


Kea 2.2: The TypeScript Release | Kea 2.2

kea.js.org/blog/kea-2.2/

React JavaScript library ReleaseNote

React向けのステート管理ライブラリであるKea 2.2リリース。
TypeScriptのサポート


アーティクル


JSchallenger

www.jschallenger.com/

JavaScript tutorial

JavaScriptのテストを通るように関数を実装するJavaScriptの練習問題集


How to Simplify SVG Code Using Basic Shapes | CSS-Tricks

css-tricks.com/how-to-simplify-svg-code-using-basic-shapes/

SVG tutorial

SVGを手書きするチュートリアル


Working with JavaScript Media Queries | CSS-Tricks

css-tricks.com/working-with-javascript-media-queries/

JavaScript CSS article

JavaScriptでのMediaQueryの利用方法について。
window.matchMediaの使い方、resizeイベントを見る場合とのパフォーマンスの違いについて


Introducing Source Order Viewer in the Microsoft Edge DevTools - Microsoft Edge Blog

blogs.windows.com/msedgedev/2020/09/15/source-order-viewer-edge-devtools/

MSEdge Chrome debug article accessibility

MSEdge/Chrome 85に実験的な機能として要素のソースコードにおける順番を表示する機能が追加された。
CSS Grid/FlexboxなどのCSSの機能で要素の順番を変更しやすくなったため、スクリーンリーダーなどの読み上げで問題が起きるケースを分かりやすくデバッグする機能。
WCAG C27の"DOMの順序を表示順序と一致させる"の実装をデバッグする目的の機能。


How to detect fullscreen mode using CSS – Amit Merchant – A blog on PHP, JavaScript and more

www.amitmerchant.com/how-to-detect-fullscreen-mode-using-css/

CSS JavaScript article

CSS Media Queryを使ってブラウザがフルスクリーンであるかを判定する方法について。
display-mode: fullscreenをMedia Queryを使い判定することでフルスクリーンとなった場合の処理やCSSを実装できる


Managing several displays with the Multi-Screen Window Placement API

web.dev/multi-screen-window-placement/

JavaScript Chrome article WebPlatformAPI

Chrome 86でOrigin Trialとして実装されているMulti-Screen Window Placement APIについて。
複数のスクリーンかの判定、それぞれのスクリーン情報の取得、スクリーン変更の検知、フルスクリーン化するスクリーンの指定についてなど


Rewriting Facebook's "Recoil" React library from scratch in 100 lines

bennetthardwick.com/blog/recoil-js-clone-from-scratch-in-100-lines/

JavaScript React library article

Recoil的なObserver Patternのステート管理を実装しながら仕組みを見ていく話


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


flareact/flareact: Edge-rendered React framework built for Cloudflare Workers

github.com/flareact/flareact

React cdn library

Cloudflare WorkerのEdgeで動くReactフレームワーク


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


nextauthjs/next-auth: Authentication for Next.js

github.com/nextauthjs/next-auth

React library OAuth

Next.js向けのAuthentication library。
Auth0、Apple、Facebook、Googleなどいろいろなプロバイダーに対応している。


web-padawan/vanilla-colorful: A tiny color picker custom element for modern web apps

github.com/web-padawan/vanilla-colorful

JavaScript library color

依存がないカラーピッカーの実装ライブラリ


BGJar | Free svg background image generator for your websites

bgjar.com/

SVG Tools

SVGでパターン背景を生成するジェネレーターツール


pmndrs/jotai: 👻 Primitive, flexible state management for React

github.com/pmndrs/jotai

JavaScript React library

RecoilインスパイアなReact向けのステート管理ライブラリ。
プリミティブな値をAtomでwrap、unwrapするAPIをもつ。
UtilsとしてAtomを使ったHigh Level APIを提供する


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