Faster JavaScript Builds with Metro
How Airbnb migrated from Webpack to Metro and made the development feedback loop nearly instantaneous, the largest production build 50% faster, with marginal end-user runtime improvements. By: Rae Liu IntroductionIn 2018, the frontend Airbnb infrastructure relied on Webpack for JavaScript bundling which had served us well up until then; however, with our codebase almost having quadrupled in the pr
2022-05-24のJS: Deno 1.22、Storybook 6.5(webpack Lazy Compilation)、Next.js Layouts RFC
JSer.info #593 - Deno 1.22がリリースされました。 Deno 1.22 Release Notes Denoには、3つの型チェックモードがあります。 Full: ローカルとリモートの依存関係を含めた全ての型をチェックする Local: ローカルの型のみをチェックする None: 型をチェックしない 1.21まではコマンドによっては"Full"モードで型チェックをしていましたが、1.22からは"Local"モードで型チェックをするのがデフォルトとなりました。 また、次のリリース予定である1.23では、deno runとdeno cacheはデフォルトで"None"モードとなり型チェックをしなくなる予定となっています。 そのほかの変更として、Deno.emit()を削除、Worker内でもDeno名前空間がデフォルトで有効化、--no-configフラグの追加などが行わ
JavaScript／TypeScriptランタイム環境「Deno 1.22」がリリース
Denoでは、これまで型チェックモードとして、直接制御（依存関係）外のコードについて型エラーが報告されることのある「Full」が用いられていたが、今回リリースされた「Deno 1.22」では、デフォルトの型チェックモードとして、プロジェクト内のコードの型エラーをチェックするものの、すべての依存関係の型チェックはスキップされる「Local」に変更されている。 従来バージョンに付属していた、ソースコードをトランスパイルおよびバンドルするためのAPIであるDeno.emit()が不安定であることを理由に削除され、代替としてユーザーのニーズにより適したAPIの開発を可能にするユーザーランドモジュールが提供されるようになった。 さらに、Webワーカーを更新してDeno名前空間をデフォルトで有効にすることで、必要な権限が設定されていればデフォルトでWebワーカーによって名前空間APIが使用できるように
Deno、Node.js、Cloudflare Workersなど、非Webブラウザ系JavaScriptランタイムのコード互換を目指す「Web-interoperable Runtimes Community Group」（WinterCG）が発足
Deno、Node.js、Cloudflare Workersなど、非Webブラウザ系JavaScriptランタイムのコード互換を目指す「Web-interoperable Runtimes Community Group」（WinterCG）が発足 JavaScriptはWebブラウザで実行することを想定して開発されたプログラミング言語ですが、現在ではNode.jsやDenoなどに代表されるようにWebブラウザ以外の環境でも実行されるようになってきました。 そこで、こうした非Webブラウザを中心としたJavaScriptランタイムにおける相互運用性の改善を目指したコミュニティグループ「Web-interoperable Runtimes Community Group」（WinterCG）がW3Cで発足しました。 設立メンバーはDeno、Cloudflare、Shopify、Vercel
JavaScriptで独自機能も追加できる無料のWebデザインエディタ「Vev」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、直感的な操作で高度なWebデザインを誰でも実現できるサービスをご紹介します。 Webサイトを構成するインタラクティブなコンテンツが豊富に用意されており、それらを組み合わせるだけで最適なWebサイトを誰でも簡単に構築できます。 また、提供されていないコンテンツや機能などは、JavaScriptで好きなように拡張できる設計になっているので無限の可能性も秘めています。Webサイトの作成にご興味ある方はぜひ参考にしてください。 【 Vev 】 ■「Vev」の使い方 それでは、「Vev」をどのように使えばいいのか詳しく見ていきましょう！ まずはトップページの黄色いボタンから無料のユーザー登録を済ませておきます。 利用可能なメールアドレスを入力してエンターキーを押してください。 すると登録したメールアドレス宛に、ログイン用のリンクが送付されるのでク
2022-05-17のJS: Solid v1.4.0、playwright v1.22.0、Safari 15.5
JSer.info #592 - Solid 1.4.0がリリースされました。 Release v1.4.0 - Level Up! · solidjs/solid Solid v1.4.0リリース。 createStoreでトップレベルの配列をサポート、deferStreamオプションの追加、createResourceで常に最新の値を取得する.latestプロパティが追加されています。 また、Custom Renderersを複数組み合わせて利用できるようになっています。 playwright v1.22.0リリースされました。 Release v1.22.0 · microsoft/playwright Playwright TestにComponent Testingを試験的に実装されています。 Experimental: components | Playwright WAI-A
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 Pythonの主要なディストリビューション「Anaconda」などを提供しているAnaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to h
Next.js で JS バンドルサイズを削減して高速化する方法
こんにちは！ Syuu（ @syuu_n18）です。 Lighthouse を回していると Remove unused JavaScript という表記がでてスコアが下がってしまう場合があります。 これは JS バンドルサイズが大きいことが原因で発生している可能性がありますので、今回は Next.js で作成したアプリの JS バンドルサイズを確認する方法とその最適化について紹介していきます。 バンドルサイズを確認する Use `webpack-bundle-analyzer` in your Next.js project. Latest version: 14.1.1, last published: 2 days ago. Start using @next/bundle-analyzer in your project by running `npm i @next/bundle-
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などのまとめ
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などを紹介します。 今使用しているものはどんな感じか、これから勉強するならどれがよいか、知らない便利なツールや機能はないかなど、フロントエンドの制作で参考になる資料です。 State of frontend 2022 State of frontend 2022は、125か国のフロントエンドデベロッパーにアンケートをおこない、注目されているフレームワーク・ライブラリ・ツール・機能などをまとめたものです。 ここ2年のコロナ禍により、勤務形態が大きく変化しました。データは2022年と2020年の状態も比較できます。 あなたの勤務形態は？ 56%の人がリモートワークをしており、オフィスで働いている人はわずか5%でした。2020年の調査ではこのアンケートをおこなっていませんが、
#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可） - Qiita
#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可）JavaScriptNode.jswebsocketScratchtoio デフォルトでは外部と自由に通信をする機能がない 「公式版の Scratch（ https://scratch.mit.edu/ ）」 や、 「toio Do（ https://toio.github.io/toio-visual-programming/beta/?category=do ）」 を、以下のようにリアルタイム通信で連動させることができたりする仕組みの話を、この記事で取り扱います。詳細は続きの記事で書こうと思っていて、今回は概要を記事化してみます。 今回の仕組みに関係してくる主なキーワードは、以下のとおりです。
2022-05-03のJS: Node.js 12はEOLとなりサポート終了、pnpm v7.0.0、Mocha v10.0.0、Cypress 9.6.0
JSer.info #590 - pnpm 7.0.0がリリースされました。 Release v7.0.0 · pnpm/pnpm コマンドラインフラグの変更やデフォルト値の変更などの破壊的な変更が中心となっています。 Node.js 12のサポート終了、root packageはpnpm -r execなどの対象からデフォルトで除外するように変更。--filterがglobをサポート、@types/*を自動的にhoistしないようになるといった変更が含まれています。 その他には、strict-peer-dependenciesがデフォルトで有効となる変更も含まれています。 Mocha 10.0.0がリリースされました。 Release v10.0.0 · mochajs/mocha こちらもサポート終了した機能を削除するといった破壊的な変更が中心となっています。 Node.js 12のサ
JavaScriptを大きく変えうる Dataflow Proposals の概要と論点(Call-this, Pipe Operator)
Dataflow Proposals とは 以下の5つのプロポーザルをまとめて Dataflow Proposals と呼んでいる。 Stage 2: Pipe operator Stage 1: Call-this operator Stage 1: Partial application(PFA) Stage 1: Extensions Stage 0: Function.pipe and flow 例えば Pipe operator, Call-this operator, Partial application を組み合わせると、以下のように書けるようになる。（提案段階なので変わる可能性アリ） import { getAuth, getIdToken } from "firebase/auth"; function isPublic(article) { return articl
CI/CDパイプラインをポータブルにする「Dagger」登場／マイクロソフト、「Windows 365 Boot」発表／JavaScriptの高速フォーマッター「Rome Formatter」ほか、2022年4月の人気記事
CI/CDパイプラインをポータブルにする「Dagger」登場／マイクロソフト、「Windows 365 Boot」発表／JavaScriptの高速フォーマッター「Rome Formatter」ほか、2022年4月の人気記事 毎日愛用しているiPadの電源スイッチが壊れてしまいました。ソフトウェアスイッチを画面に表示させることで機能を代替できるので使用上は問題ないのですが、半導体不足がこのまま長引くと、いつか新しいiPadが欲しいときに買えなくなるのが心配なので、この連休中にでも買おうかなと思っています。 先日、電気屋さんの店頭に行ったらデジカメ類がほとんど売り切れで注文停止になっていてちょっと驚きました。半導体不足、長引きそうで心配ですよね。 さて、4月の人気記事を紹介していきましょう。 1位から3位 1位 Docker創始者らが開発、ビルド／テスト／デプロイの自動化をポータブルにするツー
Rust from 0 to 80% for JavaScript Developers - Michael Salim | Senior Full Stack Freelancer and Startup Founder
This is a list of topic that will help you understand Rust quickly if you are a JavaScript developer. There are a lot of tutorial that start from scratch. But if you already know something else, why not compare them? These are differences that I wished I could refer to before starting Rust, kept short. Disclaimer! I’m very far from being well versed in Rust. These are how I interpret them and no m
How we employed the new ECMAScript Module Support in typescript - Yonatan Kra
Why use ECMAScript modules (import) instead of CommonJS (require)? The most obvious difference between ESM and CommonJS is the use of import and export vs the use of require and module.exports. But that is not all… In regards to performance, with ESM import you can selectively load only the pieces you need. This can save you runtime memory or package size. CommonJS (require) loads the modules sync
【JavaScript】Angular, React, Vue.js とフロントエンドの本まとめ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JSフレームワークの本まとめ まだJavaScriptがHTMLページのオマケ扱いでセキュリティ面からも忌み嫌われていた不遇の時代、2005年にGoogle Mapの衝撃が走りAjaxのワードが流行ったフロントエンド元年。その後徐々にJavaScriptの復権が始まりました。 jQueryなどのフレームワーク未満のライブラリが流行ったのが第1世代。その後サーバーサイドのMVCアーキテクチャの思想をクライアントサイドに適用しようとしたり様々なフレームワークが試行錯誤し、そして結局は滅んでいったのが第2世代。 その後表舞台に立ったJavaS
Next.js、Nuxt.js、Gatsby.jsなどフロントエンドフレームワークがあり、Svelteも出てきており一体どれを学べば良いか分かりません。それぞれの特徴と今後の展望を教えて頂けませんか？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Croquet Woos JavaScript Devs with a Web-Based Metaverse
yisibl/resvg-js: A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs. - Realtime JSer.info
How to make your own programming language in JavaScript
