はてなブックマーク

WebAssembly での Ruby on Rails、フルスタックのブラウザ内開発 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 1 月 31 日 ブラウザで、フロントエンドだけでなくバックエンドも含めて、完全に機能するブログを実行するとします。サーバーやクラウドは不要です。必要なのは、ユーザー、ブラウザ、WebAssembly だけです。WebAssembly は、サーバーサイド フレームワークをローカルで実行できるようにすることで、従来のウェブ開発の境界を曖昧にし、新しい可能性を開いています。この投稿では、Vladimir Dementyev（Evil Martians のバックエンド ヘッド）が、Ruby on Rails を Wasm とブラウザに対応させるための進捗状況を共有します。 15 分で Rails をブラウ

実際のユーザーデータを使用してベースラインを行動につながるものにする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 2 月 10 日 ユーザーのブラウザが最新のウェブ機能をサポートしているかどうか不明なため、最新のウェブ機能の実装を遅らせたことはありませんか？または、重いポリフィルを必要以上に長く保持していたでしょうか？一人で悩まないでください。ベースラインは、グローバルなブラウザのサポートについて明確なシグナルを提供しますが、お客様のユーザーが実際にサポートしているものを把握することはできませんでした。 RUMvision チームは、ベースライン データとリアルユーザー モニタリング（RUM）データを組み合わせることで、この問題を解決しました。その結果は非常に興味深いものでした。チームは、最新の機能を予定より数か月早く導入できる

ローカルでの開発に HTTPS を使用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ほとんどの場合、http://localhost は開発目的で HTTPS のように動作します。ただし、カスタム ホスト名やブラウザ間での安全な Cookie の使用など、特別なケースもあります。このような場合は、本番環境でのサイトの動作を正確に表すために、開発サイトを HTTPS のように動作するように明示的に設定する必要があります。（本番環境のウェブサイトで HTTPS を使用していない場合は、HTTPS への切り替えを優先してください）。 このページでは、HTTPS でサイトをローカルに実行する方法について説明します。 簡単な手順については、mkcert クイック リファレンスをご覧ください。** mkcert を使用して HTTPS でローカルでサイトを実行

CSS scrollbar-color と scrollbar-gutter がベースラインで新たに利用可能に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 2 月 1 日 scrollbar-color プロパティを使用すると、スクロールバーに使用される色を変更できます。サムネイルの色と、それに伴うカラートラックを指定できます。scrollbar-width を使用すると、スクロールバーを狭くしたり、スクロール可能に影響を与えることなくスクロールバーを完全に非表示にしたりできます。 スクロールバーとそのスタイル設定について詳しくは、スクロールバーのスタイル設定をご覧ください。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.

2025 年 1 月のベースライン マンスリー ダイジェスト コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 1 月 30 日 2025 年が本格的に始まり、ウェブ デベロッパーは新しいプロジェクトに取り組んでコミュニティと連携しています。Chrome のデベロッパー リレーションズでは、デベロッパーの意見や、ウェブの状況とウェブの構築に使用されるツールの進化に注目しています。ベースラインもその一環です。 このダイジェストは、Baseline の最新情報を毎月まとめたシリーズの第 1 回です。たとえば、ベースライン、ベースライン関連のツール、ベースラインの機能に関する Google のカンファレンス トークや、Google が見つけ出したその他の情報などです。 ベースライン 2024 のまとめ 2024 年はベースラインにとって重要

Published: Feb 1, 2025 With the scrollbar-color property you can change the colors used for scrollbars. You can specify the color of the thumb and the color track with it. Using scrollbar-width you can opt-in to a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability. Learn more about scrollbars and how to style them in scrollbar styling.

ベースライン 2024: ウェブ デベロッパーを支援するツールの追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2024 年 12 月 10 日 2024 年は、ベースライン プロジェクトにとってエキサイティングな年でした。基盤となるデータセットの作成はほぼ完了しており、ウェブ プラットフォームのステータス ダッシュボードやベースライン ステータス ウィジェットなどのツールをリリースしました。RUM アーカイブなどの他のプロジェクトでも、ベースラインの導入が始まっています。この記事では、2024 年のベースラインを振り返ります。 ベースラインとは ベースライン ラベルは、パソコンとモバイルの両方ですべてのコア ブラウザでサポートされているウェブ機能を示します。使用している機能がベースラインの一部である場合は、ブラウザの互換性レベルを信頼でき

Published: January 31, 2025 Imagine running a fully functional blog in your browser—not just the frontend, but the backend, too. No servers or clouds involved—just you, your browser, and… WebAssembly! By allowing server-side frameworks to run locally, WebAssembly is blurring the boundaries of classic web development and opening up exciting new possibilities. In this post, Vladimir Dementyev (Head

Interop 2024 でベースラインにさらに多くの機能が追加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 1 月 22 日 Interop 2024 が終了するにあたって、この投稿では、プロジェクト史上最も成功した年を振り返ります。最終的に、すべての試験運用版ブラウザが 99 点のスコアを報告し、安定版もそれほど差はありませんでした。この成功により、多くの機能がベースラインで新たに利用可能になりました。 Interop 2024 ダッシュボード（2025 年 1 月 22 日時点） ベースラインの機能の追加 ベースラインの新規機能として扱われるには、相互運用性が確保されている必要があります。そのため、Interop 2024 がそのラインを超えて ベースライン 2024 に多くの機能をもたらしたことは驚くべきことではありませ

WebLLM を使用してローカルおよびオフライン対応の chatbot を作成する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 これは、LLM と chatbot に関する 3 部構成のシリーズの第 2 回です。前回の記事では、オンデバイス LLM とブラウザ内 LLM のメリットとデメリットについて説明しました。 クライアントサイド AI について理解が深まったところで、ToDo リスト ウェブ アプリケーションに WebLLM を追加しましょう。コードは GitHub リポジトリの web-llm ブランチにあります。 WebLLM は、ML コンパイルが提供する LLM 用のウェブベースのランタイムです。WebLLM をスタンドアロン アプリケーションとして試すことができます。このアプリケーションは、Gemini などのクラウド バックアップのチ

Promise.try がベースラインで新たに利用可能に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2025 年 1 月 17 日 ウェブで非同期処理を行うことは困難な場合があります。ウェブで行う多くの処理には非同期処理が伴います。fetch 呼び出しやその他の非同期オペレーションが関係しているかどうかにかかわらず、組み込みメソッドで堅牢なエラー処理が提供されている場合、ブラウザによってその処理方法が容易になります。これは、then、catch、finally メソッドを使用する Promise ですでに提供されています。 それでも、アプリケーションのコードベースを設計する方法は柔軟である必要があります。アプリケーションで行うすべての処理が非同期である必要はありません。Promise に渡したコールバックが同期的か非同期かに関係なく、コール

loading 属性を使用すると、カスタムの遅延読み込みコードを記述したり、別の JavaScript ライブラリを使用したりすることなく、画像を遅延読み込みできます。この機能のデモは次のとおりです。 遅延読み込みされた画像は、ユーザーがページをスクロールするときに読み込まれます。 このページでは、ブラウザで遅延読み込みを実装する方法について詳しく説明します。 ブラウザレベルの遅延読み込みを使用する理由 HTTP Archive によると、画像はほとんどのウェブサイトで最もリクエストされるアセット タイプであり、通常は他のリソースよりも多くの帯域幅を消費します。90 パーセンタイルでは、サイトはパソコンとモバイルで 5 MB を超える画像を送信しています。 以前は、画面外の画像の読み込みを遅らせる方法が 2 つありました。 Intersection Observer API の使用 scr

ブラウザのプリロード スキャナに対抗しない コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ページ速度の最適化で見落としがちな点の 1 つは、ブラウザの内部についてある程度理解することです。ブラウザは、デベロッパーが行えない方法でパフォーマンスを改善するために、特定の最適化を行います。ただし、その最適化が意図せず妨げられていない場合に限られます。 内部ブラウザの最適化として、ブラウザのプリロード スキャナがあります。この記事では、プリロード スキャナの仕組みと、スキャナの妨げにならないようにする方法について説明します。 プリロード スキャナとは すべてのブラウザには、元のマークアップをトークン化してオブジェクトモデルに変換するメインの HTML パーサーがあります。<link> 要素で読み込まれたスタイルシートや、async 属性または defer 属性の

LLM のサイズを理解する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 大規模言語モデル（LLM）の「L」は大規模なスケールを示していますが、実際のところはより微妙な意味合いを持ちます。LLM には数兆個のパラメータが含まれているものもあれば はるかに少ないパラメータで効果的に機能するものもあります いくつかの実際の例と、さまざまなモデルサイズの実際の影響を確認します。 LLM のサイズとサイズクラス ウェブ デベロッパーにとって、リソースのサイズはダウンロード サイズと考える傾向があります。モデルのドキュメント化されたサイズは、代わりにパラメータの数を参照します。たとえば、Gemma 2B は 20 億個のパラメータを持つ Gemma を意味します。 LLM には、数十万、数百万、数十億、場合によっては数兆のパラメータがある場合があります。 大規模な

東急がパスキーでログインのスピードを 12 倍にした方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 公開日: 2024 年 10 月 14 日 東急株式会社は、利用者が 550 万人に及ぶ鉄道路線を中心とした複合企業であり、年間利用者数は約 10 億人に達しています。このグループは 200 社以上で構成されており、交通、不動産、スーパーマーケット、ホテル、その他のライフスタイル サービスなど、多様なビジネスを運営しています。2021 年 7 月、東急はまちづくりにおけるデジタル トランスフォーメーションを推進するため、「URBAN HACKS」という新しい組織を設立しました。 多様なユーザー ベースでのログイン ユーザー エクスペリエンスの課題 2023 年、東急はグループ全体でサービス間ログインを可能にすることを目的とした全社共通の ID サービス

JavaScript での Base64 エンコード文字列の微妙な違い コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 base64 エンコードとデコードは、バイナリ コンテンツをウェブセーフなテキストとして表現するための一般的な方法です。通常は、インライン画像などのデータ URL に使用されます。 JavaScript の文字列に base64 エンコードとデコードを適用するとどうなりますか。この投稿では、微妙な違いと回避すべき一般的な注意点について解説します。 btoa() と atob() JavaScript で Base64 エンコードとデコードを行うコア関数は、btoa() と atob() です。btoa() は文字列から base64 エンコード文字列に変換され、atob() はデコードされて戻ります。 簡単な例を次に示します。 // A

Show Baseline status on your blog posts and presentations Stay organized with collections Save and categorize content based on your preferences. Published: October 23, 2024 In this post, learn how you can use the new <baseline-status> web component on your own site, and the Baseline logos in presentations, whenever you write or talk about web platform features. Most developers have had the experie

The nuances of base64 encoding strings in JavaScript Stay organized with collections Save and categorize content based on your preferences. base64 encoding and decoding is a common form of transforming binary content to be represented as web-safe text. It's used commonly for data URLs, such as inline images. What happens when you apply base64 encoding and decoding to strings in JavaScript? This po