JSer.info #332 - Safari Technology Preview Release 30がリリースされました。
Subresource Integrity(SRI)のサポート、X-Content-Type-Options:nosniff
がサポートされました。
- How to implement SRI in your build process ★ Mozilla Hacks – the Web developer blog
- X-Content-Type-Options: nosniff · Issue #2758 · Fyrd/caniuse
- Firefoxも50でサポートしたので主要ブラウザの
nosniff
サポートが揃った
- Firefoxも50でサポートしたので主要ブラウザの
また、Promiseのrejectionhandled
とunhandledrejection
のイベントサポートされています。
Polymer 2.0.0とpolymer-cli 1.0.0がリリースされました。
ES2015のクラスベースで書けるようになり、Dirty checkingをopt-outする手段が用意され、1.xとの互換レイヤーなども提供されています。
1.xからのマイグレーションについては次のドキュメントにまとめられています。
また、Polymerをインストールする方法としてBowerを使う方法が公式となっています。
(polymer-cliもBowerをベースにしている)
しかし、数日前にBowerは正式に非推奨となりました。
Bower is deprecated. pic.twitter.com/XkIxOKhfBc
— azu (@azu_re) May 21, 2017
そのため、Polymerもnpm/yarnサポートへと移行中です。
philipahlberg 5:52 PM
Hi everyone, with Bower being depreciated and pointing to Yarn now, should an issue be filed for the Polymer CLI to make the switch at some point in the future?
fresnizky 7:47 PM
@philipahlberg I think they're already working on it.
https://github.com/Polymer/polymer/issues/3903#issuecomment-279180914
- Polymerのslackより https://polymer.slack.com/archives/C03PF4L4L/p1495270338490522
次のIssueでnpmサポートについて議論されていて、現在@polymer/polymerがα版として公開されています。
ReactのScaffoldingツールであるCreate React App 1.0がリリースされました。
webpack 2、ランタイムエラーの表示、Service Workerの対応、Jest 20、Dynamic importを使ったコード分割などさまざまな変更が含まれています。
0.9.5からのマイグレーション方法については次のリリースノートに書かれています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- 💸 GitHub Sponsorsで@azuのスポンサーになる
- 🐦 Twitterで@jser_infoをフォローする
- 🔁 JSer.infoについての最新のTweetをRetweetする
ヘッドライン
Release Notes for Safari Technology Preview 30 | WebKit
webkit.org/blog/7614/release-notes-for-safari-technology-preview-30/
Safari Technology Preview Release 30リリース。
Subresource Integrity(SRI)、X-Content-Type-Options:nosniff
に対応、PromiseのUnhandled rejectionのイベントをサポート。
document.cookie
のアクセスを厳密化、WAI-ARIA周りの修正など
Time for 2.0 - Polymer Project
www.polymer-project.org/blog/2017-05-15-time-for-two
Polymer 2.0リリース。
クラスベースで書けるように、Polymer CLIも併せてメジャーアップデートされた
Release 7.0 “Coelestem adspicit lucem” · postcss/autoprefixer
github.com/postcss/autoprefixer/releases/tag/7.0.0
Autoprefixer 7.0リリース。
PostCSS 6.0、Browserslist 2.0、caniuse-liteを利用するように。
Node.js 0.12のサポート終了、Grid Layoutのサポートをデフォルトではオフに、コードベースがCoffeeScriptからBabelへ移行など
ESLint v4.0.0-beta.0 released - ESLint - Pluggable JavaScript linter
eslint.org/blog/2017/05/eslint-v4.0.0-beta.0-released
ESLint 4.0.0βリリース。
Add yarn and webpack recommendation from bower.io to readme Fixes #2298 by graingert · Pull Request #2458 · bower/bower
github.com/bower/bower/pull/2458
Bowerがnpm deprecate
となり正式に非推奨となった。
メンテナンスは続けられるが、Bowerの将来に興味がある人はメールで連絡をくださいとのこと。
Release v1.0.0 · facebookincubator/create-react-app
github.com/facebookincubator/create-react-app/releases/tag/v1.0.0
create-react-app v1.0.0リリース。
webpack 2、ランタイムエラーの表示、Service Workerの対応、Jest 20、Dynamic importを使ったコード分割など
アーティクル
ZEIT – Next 3.0 Preview
Next 3.0 プレビューリリース。
next export
で静的なHTMLとして出力できるように、コンポーネントのdynamic importをサポートなど
Developer Edition 54: New inspector and debugger features, MDN help in the netmonitor, and more ★ Mozilla Hacks – the Web developer blog
hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features/
Firefox 54の開発者ツールの変更点紹介。
CSS Inspectの改善、Debuggerパネルで整形版が別タブで開けたり、ツールチップで変数の表示、Network PanelでMore Infoからヘルプへの移動、JSON Viewなど
JavaScript のもう一つの「関数名」 —— name プロパティ - Qiita
qiita.com/8x9/items/34272b59b5aa68e33256
JavaScriptのFunctionのname
プロパティについて。
ES2015から無名関数やArrow Functionなど関数自体が名前を持ってなくても、変数宣言側の名前がname
プロパティで参照できることや、writable
属性の仕様についてなど
The Many Faces of Functions in JavaScript - Bocoup
bocoup.com/blog/the-many-faces-of-functions-in-javascript
JavaScriptの色々な"関数"についての解説
スライド、動画関係
A Modern Front-End Workflow – Umar Hansa | Render 2017 - YouTube
www.youtube.com/watch?v=v5r_n6Tq0uk
Chrome開発者ツールのTipsやデバッグワークフローについての発表動画
The Future of Audio and Video on the Web (Google I/O '17) - YouTube
www.youtube.com/watch?v=z9unKFzAj1w
ウェブサイトにおける動画や音楽のPWA対応についての発表動画。
ServiceWorkerを使ったオフライン対応、回転とフルスクリーン、 Media Capabilitiesを使った再生判定、MediaSession APIでのカバー表示など
- GoogleChrome/sample-media-pwa: A sample video-on-demand media Progressive Web App
- Customize Media Notifications and Handle Playlists | Web | Google Developers
- google/shaka-player: JavaScript player library / DASH client / MSE-EME player
Web Performance: Leveraging the Metrics that Most Affect User Experience (Google I/O '17) - YouTube
www.youtube.com/watch?v=6Ljq-Jn-EgU&index=71&list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
パフォーマンスとメトリクスについての発表動画。
ロード完了ではなくインタラクティブになった時間(TTI)を計測、Hero Elements。UXとメトリクス
Long Tasks(50ms)をPerformanceObserverで検出、操作の遅延の計測、改善のパターンについて
CSS Houdini- the bridge between CSS, JavaScript and the browser by Serg Hospodarets
slides.com/malyw/houdini-codemotion#/
CSS Houdiniについてのスライド。
CSS/JavaScript/ブラウザの連携、Workletについて
Google I/O 2017 - All Sessions - YouTube
www.youtube.com/playlist?list=PLOU2XLYxmsIKC8eODk_RNCWv3fBcLvMMy
Google I/O 2017の動画まとめ
JSConf EU 2017 - YouTube
www.youtube.com/playlist?list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_
JSConf EU 2017の動画一覧
サイト、サービス、ドキュメント
Don't Overcomplicate Javascript – Bits from Nikola Ristic ∞ ƒront-end ∆eveloper
bits.ristic.io/dont-overcomplicate-javascript-0
JavaScriptにおけるカーゴカルトについての連載。よく理解しないでコードの習慣を持ち込むことは技術的負債や複雑性を持ち込む可能性があることについて。
ReduxにおけるActionの定数のパターンについて。import * as Constants from "./constants"
の問題点についてなど
HN PWA - Hacker News readers as Progressive Web Apps
Hacker Newsを色々なViewフレームワークで実装したまとめ。
ソフトウェア、ツール、ライブラリ関係
diegomura/react-pdf: Create PDF files using React
github.com/diegomura/react-pdf
Reactコンポーネントとしてレイアウトなどを書きPDFを生成するライブラリ
書籍関係
Complete Redux Book by Ilya Gelman et al. [PDF/iPad/Kindle]
Reduxについての電子書籍