JSer.info #462 - フロントエンド周りのツールについてのアンケート行うFront-End Tooling Survey 2019の結果が公開されています。
3,005人の開発者にCSS、JavaScriptなどに関するアンケートを行った結果を去年の結果と比較したものが掲載されています。
CSSのプリプロセッサ、フレームワーク、命名規則/CSS-in-JS。
JavaScriptのフレームワーク/ライブラリ、Bundler、Transpiler、テスト。
また、パフォーマンステスト、アクセシビリティテストなどについても項目もあります。
興味がある人は見てみると良さそうです。
Build your own Reactという記事では、スクラッチでReactのようなDOMレンダリングの仕組みを実装していっています。
createElement、renderというようにStep by Stepで実装していき、Hooks APIの仕組みまでを実装していくチュートリアル的な内容になっています。
記事ではCode Surferを使ったコードと文章が同期して進む形で表示されています。
また、React上でその仕組みを見ていきたい人は、React上でカスタムレンダラーを実装するという次の動画が面白いかもしれません。
ヘッドライン
Bytecode Alliance
bytecodealliance.org/articles/announcing-the-bytecode-alliance
Mozilla、Fastly、Intel、Red Hatが中心となってWebAssemblyのセキュアなエコシステムを作ることが目的のBytecode Allianceという団体が発足した。
npmを例にした現在のエコシステムでの攻撃事例、Nanoprocessと呼ばれるSandboxの仕組みについても書かれている。
アーティクル
Upcoming notification permission changes in Firefox 72 - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2019/11/upcoming-notification-permission-changes-in-firefox-72/
Firefox 72で通知の許可ポップアップはユーザーインタラクション起因じゃないと表示されなくなる件について
Build your own React
Reactのようなコンポーネントのレンダリングの仕組み、Hooksの仕組みを実装しながら見ていく記事
Handling Errors in Express | Zell Liew
zellwk.com/blog/express-errors/
Expressのエラーハンドリングについての記事。
express-async-handlerを使ったasyncのエラーハンドリング、http-errorsを使ったエラーオブジェクトの作成、カスタムエラーハンドリングやFallbackについてなど
The Front-End Tooling Survey 2019 - Results - AshleyNolan.co.uk - Blog and Portfolio for Ashley Watson-Nolan
ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results
JavaScriptやCSSのツールに関するアンケートをするThe Front-End Tooling Survey 2019の結果が公開された。
プリプロセッサ、フレームワーク、Lint、Bundler、Testing、Performance、Accessiblityなどについてのアンケート
Building a native add-on for Node.js in 2019 - Sqreen Blog
blog.sqreen.com/building-a-native-add-on-for-node-js-in-2019/
Node.jsのネイティブアドオンの作り方。
N-APIのバージョンとNode.jsの対応表、NANを使ったネイティブアドオンの書き方について
Publishing Typings to DefinitelyTyped - Level Up Coding
levelup.gitconnected.com/publishing-typings-to-definitelytyped-d4e0777e40f5
@typesパッケージの作成方法、削除方法、DefinitelyTypedへのPull Requestの出し方、テストについてなど
スライド、動画関係
Chrome Dev Summit 2019 - All Sessions - YouTube
www.youtube.com/playlist?list=PLNYkxOF6rcIDA1uGhqy45bqlul0VcvKMr
Chrome Dev Summmit 2019の動画一覧
フロントエンドエンジニアのためのセキュリティ対策 ~XSS編~ / #frontkansai 2019 - Speaker Deck
speakerdeck.com/masashi/number-frontkansai-2019
XSSについてのスライド。
XSSの種類(Reflected、Stored、DOM Based)の紹介とそれぞれの典型的な対策。
また、CSPやTruested Typesなどの予防策についてなど
サイト、サービス、ドキュメント
Integrate your data, APIs, and cloud services in minutes - Pipedream
Node.jsでコードとして書けるIFTTT的なウェブサービス。
SlackやGitHubなどからイベントを受け取り、コードで処理して、別のサービスにデータを送ることができる
Metrics
ウェブサイトのパフォーマンスメトリクスについての解説。
FCP、LCP、FID、TTI、TBT、CLSについてそれぞれの解説、計測方法、改善方法が書かれている。
ソフトウェア、ツール、ライブラリ関係
NodeBB/NodeBB: Node.js based forum software built for the modern web
Node.js製のフォーラムウェブアプリ
NeekSandhu/onigasm: Oniguruma regex library on the web using WebAssembly
正規表現エンジンであるOnigurumaのWebAssembly版
