フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Test
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、Web API の中でもかなり異質な命名である XHR が、XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、Microsoft の命名規則に「
corepack is 何?
追記: 2023-11-19 corepack v0.20.0 にて、CLI のコマンド体系が一新されて多少わかりやすくなりました (PR#291)。新しいコマンドは README を参照。 追記: 2022-02-03 Node.js v14.19.0 に corepack が標準バンドルされました。 corepack がバンドルされていない Node.js v12 系は 2022-04-30 に EOL を迎えるので、あと 3 ヶ月もすればアクティブな Node.js 環境には必ず corepack が揃っているという状態になりますね。引き続き experimental ステータスのままではありますが。 追記: 2021-09-08 Node.js v16.9.0 で corepack が標準バンドルされました。まだ experimental 扱いですが。 デフォルトでは yarn も
Dual Package Hazard - from scratch
この記事は Node.js Advent Calendar 2019 の 11 日目の記事です。 qiita.com 今回は全 Node.js で ES Modules を利用するユーザーが知っておくべき Dual Package Hazard について紹介します。 ESModules がフラグ無しでサポートに。 これまでは ES Modules は --experimental-modules フラグが無いと使えませんでしたが、 フラグ無しで Node.js v13.2.0 から使えるようになりました。ES Modules については CodeGrid の記事で詳しく書いているのでそれを一読していただけると理解がスムーズになると思います。逆に読んだ方は Conditional Exports / Dual Package Hazard の節まで飛ばしてもらって構いません。 www.cod
Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード ESM は非同期 ESM は静的解析可能 Node.js の ESM 対応について Dual Package（CJS/ESM）に対応した npm パッケージの開発 Conditional Exports によるファイルの指定 .mjs と .cjs require など CJS 特有の機能を使う ESMから CJS ファ
requestIdleCallback - Web API | MDN
HTML DOM APIWindowインスタンスプロパティcachesclosedcookieStorecredentialless Experimental crossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPicture Experimental event 非推奨; external 非推奨; fence Experimental frameElementframesfullScreen 非標準 historyindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenX 非標準 m
Hegel,新しいJavaScript型チェッカ
原文(投稿日：2020/05/19)へのリンク 新ライブラリのHegelは、JavaScriptで高度な静的型チェックを実現しようという試みだ。強い型推測と完全な型システムを提供するという。現在はまだアルファ版だが、専用のオンライン・プレイグラウンドで動作を確かめることができる。 Hegelは型アノテーションを備えたJavaScript用の型チェッカである。TypeScriptの場合のように、新たなプログラム言語構造を学ぶ必要はないが、アノテーション記法についての学習は必要だ。Hegelは強い、完全な型システム(Sound File System)を使うことで、実行時の型エラーを防止する。 const numbers: Array<number> = []; // HegelError: Type "Array<number>" is incompatible with type "Arr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
GitHub - serain/netmap.js: Fast browser-based network discovery module
GitHub - typicode/lowdb: Simple and fast JSON database
bestofjs.org
Storybook: Frontend workshop for UI development
GitHub - mathieuancelin/js-repaint-perfs: Playground to test repaint rates of JS libs
GitHub - benjamn/ast-types: Esprima-compatible implementation of the Mozilla JS Parser API
GitHub - brieb/ts-emit-clean: Remove TS-emitted files
GitHub - brieb/ts-add-module-exports
facebook/flow: Adds static typing to JavaScript to improve developer productivity and code quality.
GitHub - JSMonk/hegel: An advanced static type checker
GitHub - mmis1000/DOM-Proxy: A trasparent rpc for allowing web worker to access dom in mainland(and vise versa)