JSer.info #373 - TestCafe v0.19.0がリリースされました。
ファイルの変更を監視し、更新されたら再実行できるtestcafe-liveコマンドの追加されています。
Cypressもそうですが、テストを書く際にトライアンドエラーがしやすい機能を持ったテストフレームワークが増えている印象です。
また、セレクタの結果をフィルターするfilterVisibleとfilterHidden、テキストマッチした要素を取得するwithExactTextの追加などが行われています。
typewizというTypeScriptの型付を補助するツールが公開されています。
このツールでtypewiz-node、typewiz-webpackで変換して実行して得た実行時の型情報を元に、コードベースに型を付けるツールです。
ASTを使ったコード変換したコードの実行時に関数の引数/変数/返り値にどのような値が入るかを記録し、その情報を元にstring/number/boolean/null/undefinedといった型を推測します。
anyで型を付けされたTypeScriptのコードに対して型を付けることが目的のツールです。
詳細は次の記事で解説されています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Prettier 1.11: CSS fixes and new TypeScript feature support · Prettier
prettier.io/blog/2018/02/26/1.11.0.html
Prettier 1.11リリース。
Facebookのコードベースは100% Prettierを通すようになった。
PostCSSの対応改善、TypeScript 2.7の対応、pluginでオプションのサポートなど。
Google Developers Blog: Announcing Flutter beta 1: Build beautiful native apps
developers.googleblog.com/2018/02/announcing-flutter-beta-1.html
Dartを使いモバイルアプリを作るフレームワークのFlutter β1がリリースされた。
Node v9.7.0 (Current) | Node.js
nodejs.org/en/blog/release/v9.7.0/
Node.js 9.7.0リリース。
util.getSystemErrorNameの追加、immediate.ref()とimmediate.unref()の追加など
moment/CHANGELOG.md at develop · moment/moment
github.com/moment/moment/blob/develop/CHANGELOG.md
moment 2.21.0リリース。
バグ修正やロケールの追加など
jasmine/3.1.0.md at master · jasmine/jasmine
github.com/jasmine/jasmine/blob/master/release_notes/3.1.0.md
jasmine 3.1リリース。 matcherにtruthy、falsy、empty、notEmptyの追加など
TestCafe v0.19.0 Released - Rapid Test Development Tool, Screenshots of Page Elements, etc | TestCafe
devexpress.github.io/testcafe/blog/testcafe-v0-19-0-released.html
TestCafe 0.19.0リリース。 ファイル監視し保存されたら再実行できるtestcafe-liveコマンドの追加。 セレクタの結果をフィルターするfilterVisibleとfilterHiddenの追加、テキストマッチした要素を取得するwithExactTextの追加など
アーティクル
Demystifying ES6 Classes And Prototypal Inheritance ― Scotch
scotch.io/tutorials/demystifying-es6-classes-and-prototypal-inheritance
ES2015のclass構文についての解説。
クラスの定義や使い方、継承について
Exploring different GraphQL Clients – ITNEXT
itnext.io/exploring-different-graphql-clients-d1bc69de305f
GraphQLクライアントの紹介記事。
FetchQL、GraphQL Request、Apollo Fetch、Lokka、Micro GraphQL React、URQL、Apollo Client、Relay Modernについて
Manual Typing is No Fun: Introducing TypeWiz! – Uri Shaked – Medium
medium.com/@urish/manual-typing-is-no-fun-introducing-typewiz-58e3e8813f4c
TypeScriptの型付けを補助するツール。
webpackやnode hookを使い変換したコードを実行し、実行時の関数の引数、返り値、変数へ実際に入った値から型を推測する。
その推測した型をTypeScriptのコードに対して適応することで型付けを補助する。
Announcing Capacitor 1.0.0 Alpha | The Official Ionic Blog
blog.ionicframework.com/announcing-capacitor-1-0-0-alpha/
Ionicからクロスプラットフォームで動作するアプリ開発フレームワークのCapacitorがα版公開された
Angular v6で導入されるTree-Shakable DIの紹介 - らこらこブログ
lacolaco.hatenablog.com/entry/2018/03/01/150847
Angular 6で導入される新しいDependency Injectionの仕組みと目的について。
bundleする際のdead codeを削除し易い依存関係にしたDIの仕組み
React.js Frequently Faced Problems – Samer Buna – Medium
medium.com/@samerbuna/react-js-frequently-faced-problems-45e7060ef884
初めてReactを使うときのRact/JSXのつまりどころについて
🌏 Hello World! Progressive Web-Blog!!
blog.uskay.io/article/001-pwa-blog-loading
Web Componentsを使ったブログの開発とPRPL Patternでのパフォーマンス最適化について。
hyperHTMLやlit-htmlが効率的に再描画を行う仕組み - Qiita
qiita.com/rikuba/items/92da6d99e2b0f831cc65
hyperHTMLやlit-htmlのDOM更新の仕組みについて。
タグ付きテンプレート関数を使い、初回時に更新時はどの位置の要素を更新するかをマッピング、更新時はマッピングを元に要素/値の更新だけを行う。
またテンプレートのキャッシュを利用し無駄なパースを避けるなどの工夫について。
Loading Third-Party JavaScript | Web Fundamentals | Google Developers
サードパーティスクリプトのパフォーマンスへの影響について。
開発者ツールを使っての可視化、開発者ツールやWebPageTestでリクエストをブロックしての影響度の確認方法、Long Taskの確認方法、Resource Hintなどを使った改善方法について
The npm Blog — Introducing `npm ci` for faster, more reliable...
blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable
pacakge-lock.jsonから常にクリーンインストールするnpm ciについて。
現在の存在するnode_modulesディレクトリを削除し、pacakge-lock.jsonを元にインストールするCI環境向けのインストールコマンド。
What's New In DevTools (Chrome 66) | Web | Google Developers
developers.google.com/web/updates/2018/02/devtools
Chrome 66の開発者ツールの変更点について。
ネットワークパネルからブラックボックススクリプト化を選択できるように、CSSファイルの変更のみだったLocal OverridesがHTML内のCSSにも対応など
webpack4への簡単なマイグレーションガイド - 技術探し
abouthiroppy.hatenablog.jp/entry/migrate-to-webpack4
webpack 4の変更点とマイグレーションのために必要な変更について。
スライド、動画関係
Web Components で 社内 UI ライブラリを作っている話
speakerdeck.com/jmblog/web-components-de-she-nei-ui-raiburariwozuo-tuteiruhua-1
プリミティブなコンポーネントをWebComponentとして作成することに関するスライド。
ReactやAngularなど各種ライブラリから利用できる共通コンポーネントとして作成。
lit-htmlを使ったコンポーネントとスタイル、コンポーネントの配布の問題についてなど
サイト、サービス、ドキュメント
Bit - The fastest way to share code
JavaScriptのコード/コンポーネントシェアサービス。
コンポーネントを管理/公開するCLIが用意されている。
コンポーネントの公開/管理/発見の難しさの問題の解決を意図したサービス。
ソフトウェア、ツール、ライブラリ関係
fabiandev/ts-runtime: Runtime Type Checks for TypeScript
github.com/fabiandev/ts-runtime
TypeScriptのコードをランタイムチェックできるように変換するツール
