JSer.info #333 - npm v5.0.0がプレリリースされました
npm i -g npm@5
でnpmだけを更新することができます。
(Windowsの場合はfelixrieseberg/npm-windows-upgrade: Upgrade npm on Windowsを利用したほうが安全だとは思います。)
npm@5は2017-05-30リリース予定(日本時間だと明日)のNode.js 8.0.0に同梱される予定となっています。
- Node.js 8.0.0 Tracking Issue · Issue #10117 · nodejs/node
- Node.js 8.0.0 has been delayed and will ship on or around May 30th
追記: Node v8.0.0 (Current) | Node.jsリリースされました。
npm@5の変更点としてはインストール速度の改善され、npm installの--saveオプションがデフォルト化しています。
加えて従来のshrinkwrapとは別のロックシステムとしてpackage-lock.jsonの導入されています。
package-lock.jsonはnpm installする際にデフォルトで作成/更新される点はYarnと同様です。
Gitで依存してるモジュールもprepareが呼ばれるように、--offline/--prefer-online/--prefer-offline、sha512のサポートなどが追加されています。
npm install ../のように相対パスでインストールした時の挙動が変更されています。
従来は相対パス先のディレクトリをまるごとコピーする挙動でしたが、npm@5からはsymlinkを貼るようになりました。
この相対パスのインストールは将来的にはlink:という識別子に変更される可能性がありそうです(今はfile:のまま)
Yarnも同様の仕組みをサポートする予定です。
sha512についてもnpm registryの都合でYarnもSHA1を使っていましたが、こちらも追従するようです。
Notes: Yarnは今1.0に向けてIssueのtriageとyarn workspace(Lernaみたいなもの)のサポートを進めています。
What's New In DevTools (Chrome 60) | Web | Google Developersという記事ではChrome 60の開発者ツールの機能について紹介されています。
AuditパネルがLighthouseを使ったものに変更され
third party badgesの表示、ブレークポイントでContinue to hereの追加、コードカバレッジ表示の改善、Asyncスタックトレースがデフォルト化などデバッグ周りの改善が含まれています。
Google Chrome Canaryなどを使うと試すことができます。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
[WIP] 8.0.0 Release Proposal by jasnell · Pull Request #12220 · nodejs/node
github.com/nodejs/node/pull/12220#issuecomment-303699926
Node.js 8.0.0 RC1リリース
Release v5.0.0 · npm/npm
github.com/npm/npm/releases/tag/v5.0.0
npm v5.0.0プレリリース。 ローカルパスのnpm installはsymlinkとなるように、--saveがデフォルト化、Gitで依存してるモジュールもprepareが呼ばれるように、package-lock.jsonの導入、インストール速度の改善、--offline、sha512のサポートなど
アーティクル
All About Recursion, PTC, TCO and STC in JavaScript
lucasfcosta.com/2017/05/08/All-About-Recursion-PTC-TCO-and-STC-in-JavaScript.html
JavaScriptの末尾呼び出し最適化についての解説記事。
Proper Tail Calls (PTC)、Syntactic Tail Calls (STC)について
Altering the DOM with JavaScript | Zell Liew
DOM APIの基本的な使い方のついての記事。
querySelectorでの要素選択、addEventListenerでのイベント登録、classListでのクラス処理、要素の追加/更新などについて
TypeScriptのInterfaceとType aliasの比較 - Qiita
qiita.com/tkrkt/items/d01b96363e58a7df830e
TypeScriptのinterfaceとtype aliasについての比較まとめ
Node.js Streams: Everything you need to know – freeCodeCamp
medium.freecodecamp.com/node-js-streams-everything-you-need-to-know-c9141306be93
Node.jsのStreamについての解説記事
What's New In DevTools (Chrome 60) | Web | Google Developers
developers.google.com/web/updates/2017/05/devtools-release-notes
Chrome 60の開発者ツールについて。
AuditがLighthouseを使ったものに変更。
third party badgesの表示、ブレークポイントでContinue to hereの追加、コードカバレッジ表示の改善、Asyncスタックトレースがデフォルト化など
Using Fetch | CSS-Tricks
Fetch APIの使い方についての解説。
データの取得、エラーハンドリング、レスポンスの処理、FetchのラッパーであるzlFetchについて
Event Bubbling in JavaScript? Event Propagation Explained
www.sitepoint.com/event-bubbling-javascript/
DOMのイベントバブリングとキャプチャフェーズについての解説。
target、currentTarget、eventPhaseeを使ってイベントの動きを可視化してる
スライド、動画関係
ReactEurope 2017 - Day 1 - YouTube
www.youtube.com/playlist?list=PLCC436JpVnK3ruJeDWd-xWIMb0l47VcxD
ReactEurope 2017の動画一覧
What I Learned Benchmarking React - Dominic Gannaway aka @trueadm at @ReactEurope 2017 - YouTube
www.youtube.com/watch?v=djOc1EK07Tk
JavaScriptライブラリのベンチマーク結果を改善する方法について。
Rollupを使ってflat bundleすることでサイズとロード時間の削減、使わないモジュールの削除、ベンチマークツールについて。
lighthouseを使ったモジュールのベンチマークについて
Keynote - Andrew Clark aka @acdlite at @ReactEurope 2017 - YouTube
www.youtube.com/watch?v=QW5TE4vrklU
Reactの今後のロードマップについての発表。
React v16ではFragmentsサポート、Portal、Fiber(opt-in)、エラーハンドリングの強化が行われる。
それ以降は可視領域の優先度スケジューラ、Code Spilittingの改善など
How Streaming Can Supercharge React - Sasha Aickin aka @xander76 at ReactEurope 2017 - YouTube
www.youtube.com/watch?v=UhdGiVy3_Nk
Reactとサーバサイドレンダリングについての発表動画。
SSRには表示を早くするメリットがあるがTTIは長くなる問題がある。
これを解決するために、一定のブロックでコンポーネントをプログレッシブにレンダリングすることでTTIを改善する案について。
また、ReactにReactDOMServerStreamが追加されたことについて。
- deepanjanroy/tti-polyfill: Polyfill for Time to Interactive
- HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
- Add package builds for new server renderer and enable tests by sebmarkbage · Pull Request #9710 · facebook/react
ECMAScript 2017: what’s new for JavaScript? // Speaker Deck
speakerdeck.com/rauschma/ecmascript-2017-whats-new-for-javascript
ECMAScriptのProposalのプロセスとES2017についてのスライド。
ES2017で追加されるAsync Function、Shared Array Buffer、Object/Stringの追加メソッド、関数の引数における末尾カンマの許容について。
また現在Proposal段階の仕様の紹介
CSS and the First Meaningful Paint - Sessions by Pusher
pusher.com/sessions/meetup/london-css/css-and-the-first-meaningful-paint
CSSとFirst meaningful paintについての発表動画。
Inline CSSのメリット/デメリット、RTTとレイテンシー、クリティカルパスなリソースについて。
リソースのpreload、Server Pushについて
サイト、サービス、ドキュメント
ngryman/speedracer: Collect performance metrics for your library/application.
Chrome DevTools protocolを使いCLIでページの表示にかかる時間などのパフォーマンステストを行えるツール
What does my npm module cost?
cost-of-modules.herokuapp.com/
npmパッケージのサイズ/gzip、ダウンロードにかかる時間や依存などを表示してくれるサービス
ソフトウェア、ツール、ライブラリ関係
photopea/UPNG.js: Fast and advanced PNG encoder (lossy / lossless) and decoder
小さなPNGエンコード/デコードライブラリ
scssfmt - Standard SCSS code formatter
sass(SCSS)のコード整形ツール
developit/preact-cli: 😺 Your next Preact PWA starts in 30 seconds.
github.com/developit/preact-cli
preactのCLIツール。
preactを使ったScaffoldingツールで、create/build/watch/serveなどの開発用のサブコマンドを持っている
