URLシェアを支える技術 lz-string
WebアプリでURLシェアを実装する際に、URLにすべての情報を持たせてしまいたい場合があります。そのとき、情報をそのままクエリ文字列に渡してしまうとURLの文字数制限に引っかかってしまうかもしれません(厳密にはURLに上限はないようですが、現実はいつもブラウザ実装依存)。 そんなときURLセーフな文字列形式で圧縮してくれるライブラリがあります。lz-sringです。 変換の例 ライブラリで compressToEncodedURIComponent というAPIが提供されているのでこれを使用します。標準のencodeURIComponentでURLセーフな文字列に変換した場合とサイズ比較をしてみましょう。 import lzstring from "lz-string"; const rawData = "Lorem ipsum dolor sit amet, consectetur a
Web 標準と、その限界
JavaScript、たくさんバックエンドで使われてますよね、あなたも使ったことはありませんか？ そんな バックエンドでも使われている JavaScript。そこに標準で組み込まれている Web 標準な API 。それを考えていきます。 Web 標準 とは何か Web を構成するための技術として、主に HTML/CSS/JavaScript があります。 どのブラウザでサイトを見ても同じ結果が得られるように、その HTML/CSS/JavaScript をまとめている仕様のことです。 例えば、 HTML の仕様は HTML Living Standard が主流で、 WHATWG という団体が決めています。 JavaScript では、構文や基本的な機能 (Arrayなどの言語使用) は ECMA という団体が ECMAScript を策定しています。この中にはfetchは含まれていないの
Web技術を駆使してユーザーの画面を「録画」する
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
BunはNodeより速いのか？ Misskeyで検証 | gihyo.jp
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はNode.js互換のJavaScriptランタイム、Bunのパフォーマンスについて、Misskeyのコードベースを用いて検証を行います。 Bunとは Bunは、Node.js（以下Node）互換である後発のJavaScriptランタイムです。 JavaScriptエンジンにNodeで採用されているV8ではなくJavaScriptCoreを採用しているほか、TypeScriptを事前コンパイルなしに実行することもできます。 肉まんのようなマスコットキャラクターが特徴です。 モチベーション そんなBunの公式サイトではNodeよりも大幅に性能上のアドバンテージがあるように紹介されていますが、こうした競合ソフトウェアとの一方的な比較は得てして限られた条件での有利な
Webプッシュ通知を5分で導入 - 効果を求めるならPush7
どのようなサイトでも導入マニュアル通りにコードをコピーアンドペーストするだけで導入でき、最短3分でWebプッシュ通知を体験することができます。
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なSUM計算から複雑なクエリまで、シート上でのあらゆる計算を始め、ピボットテーブルの作成、条件付きフォーマットなどさまざまな処理が高速になるとのことです。 この性能向上は、JavaScriptで構築されていた計算エンジンをWebAssemblyに最適化したことで実現していると説明されており、そのためにWebAssemby GC（ガベージコレクション）機能を用いたとのことです。 そのため現時点ではChromeとMicrosoft
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行われた。 マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 We are proud to announce that Babylon.js 7.0 has officially been released! The ne
ポップオーバー API の使用 - Web API | MDN
ポップオーバー API は、他のページコンテンツの上に表示するポップオーバーコンテンツを表示するための、標準的な、一貫性のある、柔軟な仕組みを開発者に提供します。ポップオーバーコンテンツは、HTML 属性を用いて宣言的に、または JavaScript を用いて制御することができます。この記事では、この機能のすべてを使用するための詳細なガイドを提供します。
Dart 3.3がFlutter Webに与える影響について
2024年2月16日、Flutter 3.19.0がリリースされました。 同時に、Dart 3.3.0がリリースされています。 この、Dart 3.3の目玉機能がextension typeです。この機能は、ぱっと見だと「どこで利用するんだろう」という印象のある機能なのですが[1]、Flutter Webにおいては非常に大きな影響を与える機能となっています。 以下、公式の紹介テキストです。 Evolving JavaScript Interop Dart 3.3 introduces a new model for interoperating with JavaScript libraries and the web. It starts with a new set of APIs for interacting with JavaScript: the dart:js_interop
Array.prototype.with による不変の配列の更新 | Blog | web.dev
最近、配列に対して呼び出すことができる、相互運用可能な新しいメソッドがブラウザに導入されました。 Array.prototype.with()。 対応ブラウザ <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 110 回 <ph type="x-smartling-placeholder"></ph> 115 <ph type="x-smartling-placeholder"></ph> 16 ソース この記事では、このメソッドの仕組みと、このメソッドを使用して配列を更新する方法について説明します。 コピーされます。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value)
まだinputに一々disabledかけている？
フォーム送信中にinput要素やbutton要素をdisableにしてデータが帰って来たら有効に戻すというのは多分よくやっていると思いますが、fieldset 要素一つで一括でdisabledにできる方法を最近知ったので、シェアしておきたいと思います。 普段👇 <div> <input disabled={loading} type="email" name="name" /> </div> <div> <input disabled={loading} type="password" name="password" /> </div> <div> <input disabled={loading} type="submit" value="submit" name="button" /> </div> <fieldset disabled={loading}> <div> <input
Fetch APIは「PATCH」だけ大文字と小文字の挙動が異なる
const url = "https://fetch-api-normalization.deno.dev"; await fetch(url, { method: "PATCH" }); await fetch(url, { method: "patch" }); 実行すると、次のようなエラーを得るはずです。 PATCH を小文字で書いた際のエラーの一例 さて、どのような条件でこのエラーが発生するのでしょうか？これが意図されたものなのだとしたら、 GET や POST は大文字・小文字を無視してよくて PATCH は無視できない理由がなにかあるのでしょうか？以下でその理由を探ってみましょう。 いつエラーが発生するか このエラーは、 Fetch API を利用して外部の HTTP サーバーに対してリクエストを行う時に、 PATCH と書くべきところを patch と書いていると発生します。
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
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
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応
Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応 Webアプリケーションフレームワーク「SvelteKit 1.0」が正式リリースとなりました。 SvelteKitは、Web UIフレームワークの「Svelte」と、ビルドツールの「Vite」を基盤としたWebアプリケーションフレームワークです。 It's here.https://t.co/mP8vD5zcta — Svelte (@sveltejs) December 14, 2022 Svelteは、読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。 仮想DOMを使わず、コンパイル時に状態が変化する箇所を特定し、その変更のためのJavaScriptを生成することで実行時の高速な状態変更を実現することも大きな特徴です。 J
.NET 7ではWebAssembly製.NETランタイムを単独で利用可能にし、WebブラウザやNode.jsなどでJavaScriptから.NETを簡単に呼び出せるように
.NET 7ではWebAssembly製.NETランタイムを単独で利用可能にし、WebブラウザやNode.jsなどでJavaScriptから.NETを簡単に呼び出せるように マイクロソフトはWebブラウザ上でC#などで書かれた.NETのWebアプリケーションを実行できる「Blazor WebAssembly」を2020年5月にリリースしています。 Blazor WebAssemblyは、WebAssembly製の.NETランタイムを用いることでWebブラウザ上で.NETアプリケーションの実行を可能にしています。 参考：［速報」Blazor WebAssemblyが正式リリース。C#/.NETでWebアプリケーションを開発可能に。Microsoft Build 2020 今年の11月に正式リリースが予定されている「.NET 7」では、このWebAssembly製.NETランタイムを単独で使え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜
yagisan-reports JavaScriptで動くWebフレンドリーな帳票発行エンジン
GitHub - farm-fe/farm: Extremely fast Vite-compatible web build tool written in Rust
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
