Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場
Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場 クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、WebブラウザだけでNext.jsやAstroなどを実行可能にする新しいソフトウェア「Sandpack 2.0」を発表しました。 WindowsやMacなどのデスクトップPC用のWebブラウザだけでなく、iOS上のSafariでもNode.jsが実行可能。ただし現時点でのiOS版Safariへの対応は、メモリリークなどが発生するためβ版だと説明されています。 先週、StackBlitzからはWebブラウザ上で実行できるWe
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど
Webブラウザ上でWebAssemblyベースのNode.js環境を実現する「WebContainer」がAPI提供開始。ブラウザ内ファイルシステム、HTTPサーバ、Node.js CLIなど WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerにアクセスできるAPIの提供を開始したと発表しました。 Today, after years of battle testing by millions of developers, in collaboration with browser vendors: WebContainer API is now available to everyone. Start building the next generation of inte
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
CSS Containment によるパフォーマンス改善 — HACK The Nikkei
この記事はNikkei Advent Calendar 2020 19日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment はDOMのレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 webサイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layout p
Web 標準化のフィードバックサイクルを円滑にする Origin Trials について | blog.jxck.io
Intro ブラウザに追加される新しい機能に対して、 Vender Prefix の代替となる Origin Trials の導入が徐々に始まっている。 今回は、これまでの Vender Prefix の問題点と、代替として提案された Origin Trials のデザインや導入方法などについて記す。 Avoid Breaking the Web Web が壊れることは、避けねばならない。 Web に関する、特にブラウザが実装するような機能については、その仕様や実装を変更することにより、既存の資産の挙動が壊れることがある。 これを Breaking the Web といい、プロトコルにしても API にしても、標準化団体やブラウザベンダなどは、これを避けることを念頭に置いて作業を行っている。(セキュリティ的な理由など、例外は多く有る。) 一方で、新しく提案される仕様はフィードバックを集めな
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
「WebDriver」がW3Cの勧告に到達。Webブラウザのテスト自動化などを実現
Web技術の標準を策定するWorld Wide Web Consortium（W3C）のBrowser Testing and Toolsワーキンググループは、「WebDriver」が6月5日付けで勧告に到達したことを発表しました。 WebDriverは、Webブラウザを外部から操作することを可能にし、Webアプリケーションのテストなどの自動化を実現する技術です。 主要なWebブラウザにはすでにこのWebDriverの機能が用意されています。Seleniumに代表されるWebブラウザ自動化ライブラリを利用することで、WebDriverを用いてWebアプリケーションのUIテストなどを自動化することが可能です。 SeleniumからW3Cへ もともとWebブラウザには外部から操作を行うAPIなどはなく、WebページやWebアプリケーションをWebブラウザで表示した際に画面が正常に表示されている
Webブラウザの作り方 - Qiita
この記事は何？ ほとんどタイトル通りです。 順番に読み進めていけば簡単なWebページが表示できるレベルのWebブラウザを作ることができるように執筆していく予定です。 またアルゴリズムだけをなるべくわかり易く解説していきたいので、記事内で紹介するコードは誰でも読める程度の擬似コードです。 自分で実装したい方は、面倒かもしれませんがそれぞれの言語に翻訳してください。 必要な知識としては: HTML/CSSが困らない程度に読める やる気 これだけです。 (あとこれはただの宣伝ですが、個人的にWeb ブラウザを作ってるので(http://github.com/maekawatoshiki/naglfar) スターをつけてもらえると喜びます) いろいろとパースする Webページは基本的にHTMLで書かれていますね。あとCSSも。 HTMLもCSSもそのままではただの文字列であって扱いづらいので、パー
Chrome、バックグラウンドでデータを送受信する「Background Sync」APIが登場。ブラウザを閉じていてもデータ同期
Chrome、バックグラウンドでデータを送受信する「Background Sync」APIが登場。ブラウザを閉じていてもデータ同期 GoogleはこのBackground SyncをChromeの新しいAPIとして実装したと、開発者向けのサイト「Google Developers」の記事「Introducing Background Sync」で明らかにしました。 Background Syncは、バックグラウンドでスクリプトを実行するService Workerを用いています。 このドキュメントでGoogleは、Background Syncを用いた2つのデモを紹介しています。 1つはチャットアプリ。左のAndroidデバイスと右のMacのChrome同士でチャットを行います。 Androidを機内モードにしてオフラインの状態でAndroidのChromeからチャットを入力。そのままWe
そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
W3C、マウス、タッチ、ペン入力などを同一コードで統合的に扱える「Pointer Event」を勧告に。しかしChromeは実装しない方針
W3C、マウス、タッチ、ペン入力などを同一コードで統合的に扱える「Pointer Event」を勧告に。しかしChromeは実装しない方針 W3Cは2月24日、マウス、タッチ、ペン入力などを統合的に扱える「Pointer Events」を勧告にしたと発表しました（CSSのpointer-eventsとは別のものです）。 Web標準では、以前からマウスを想定したイベントが用意されており、2013年にはタッチ操作によるイベントを扱う「Touch Event」の標準化も行われました。 入力手段としてのマウスやタッチ、ペンにはそれぞれ異なる特性があります。マウスの場合にはクリックやダブルクリックがあり、タッチでは同時に複数の指による操作があり、ペンでは筆圧の属性があるといった具合です。 Pointer Eventsはこうしたそれぞれの特性を持つ入力手段を統合的に扱えるようにした仕様です。 Inte
asm.jsとかPNaClとかLLVMに興味あったので調べて回ったら少しだけ理解できた話 - hdk_embeddedの日記
このエントリーは以下の「Webの未来 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること〜」というスライドへのアンサーエントリーです。 ひょんなことからまとめはじめたのですが、とりあえずタイトルにあがっているようなasm.js（あせむじぇいえす）やPNaCl（ぴなくる）、LLVMという単語が知らない人でもわかないひとがわかった気になれるように書きました。つまりわかってないやつとはエントリを書いている本人のことだよ！ PNaClとasm.jsでカワルミライ Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること from Kei Nakazawa 結構ブクマが多いのでみんな気になっているんだろうなぁ、という雰囲気があります。 でも読んでみると良く分からない単語があったり、業界背景を理解して
OTOYとMozilla、プラグイン不要のJavaScriptライブラリ「ORBX.js」発表
OTOYとMozilla、プラグイン不要のJavaScriptライブラリ「ORBX.js」発表：HTML5対応の全ブラウザに対応 米OTOYとMozillaは5月3日、ネイティブアプリや動画などのコンテンツを、HTML5対応のブラウザでシームレスに実行できるようにしたJavaScriptライブラリ「ORBX.js」を発表した。 米ソフトウェア会社のOTOYとMozillaが手を組んで、デスクトップPC向けのネイティブアプリや動画などのコンテンツを、HTML5対応のあらゆるブラウザでシームレスに実行できるようにしたJavaScriptライブラリ「ORBX.js」を5月3日に発表した。 ORBX.jsではWindowsやLinux、Mac OS X向けのPCアプリをクラウドで仮想化し、モバイルブラウザを含むHTML5対応のあらゆるブラウザにストリーミングできるという。 ORBX.jsに含まれる
TechCrunch | Startup and Technology News
Yellow, an asset financier for solar energy and digital devices in Africa has raised $14 million series B funding in a round led by Convergence Partners with participation from the Energy Entrepreneur Fisker, the electric carmaker founded by the Danish auto designer Henrik Fisker, is gearing up to enter the Chinese market where competition is increasingly cut-throat, following in the footsteps of
Firefox の最新版に開発者向けの開発ツールバーを追加しました | Mozilla Japan ブログ
Windows、Mac、Linux 版および Android 版 Firefox の最新版を公開しました。 デスクトップ版の主な新機能Web 開発者向け 開発ツールバー: Firefox 開発者ツールに簡単にアクセスできる機能を追加しました。Firefox ボタンの「Web 開発」メニューから「開発ツールバー」を選択すると、ウィンドウ下部に、様々な Firefox 開発者ツールへすばやく簡単にアクセスできる開発ツールバーが表示されます。このツールバーにはコマンドラインインターフェイスも含まれており、キーボードから素早く各ツールを操作できます。 安定機能はベンダー接頭辞無しに: 次の CSS 機能では、ベンダー接頭辞を付けて記述する必要がなくなります: CSS の Animations、Transitions、Transforms、Image Values の Gradients、Value
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
JavaScript無効でWebを見ている人はどれぐらい? Web担で実際に調べてみた | 初代編集長ブログ―安田英久
C++ on the Web: Run your big 3D game in the browser
http://blk.jp/archives/765