HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？ - Qiita
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.3.3?bundle&target=esnext"; import {minify_sync} from "https://esm.sh/terser@5.27.0?bundle&target=esnext"; for(const {type, textContent} of document.getElementsByTagName("script")){ if(type !== "text/typescript" || !textContent){ continue; } const js = transpile(tex
CSSの@counter-styleがSafari 17でも対応、すべてのブラウザでサポートへ | gihyo.jp
CSSの@counter-styleがSafari 17でも対応、すべてのブラウザでサポートへ iOSやiPadOSが18日にリリースされ、同OS向けにSafariが更新されてSafari 17.0もあわせてリリースされた。なお、macOSのSafari 17.0は現在パブリックベータ版であり、9月26日にリリースされる予定となっている。 Safari 17.0の新機能の詳細は公式ブログを参照してもらうとして、ここでは、このバージョンのSafariからCSSの@counter-styleに標準で対応したことを取り上げたい。 @counter-styleを使うことで、順序付き箇条書きの連番（マーカー）や章タイトルの見出しなどで出てくる章番号などのカウンタースタイルが単純ではない場合の指定を設定できるようになる。 そして、擬似要素で使われるcontentプロパティで指定できるcount
Webアプリケーション開発でArc(ブラウザ)を使ってみた感想
ArcというブラウザをWebアプリケーション開発で利用してみました。使ってみて便利だったので、機能を紹介しようと思います。 Arcについて MacとiOSで利用できるWebブラウザです。執筆時点ではWindowsは対応していませんでした。 また、Chromiumを使用しているためChrome拡張も利用できます。 便利だった機能 Splite View ひとつのウィンドで同時に複数のサイトを開けます。 なので、左半分はChatGPTを常駐させ、右半分ではGithub、localhostなどを開くことができます。 Developer Mode Developer Toolが使えるのはもちろんですが、ArcのUIを開発者に適した状態にする「Developer Mode」が存在します。Developer Modeを有効化すると、上部にアドレスバーとショートカットボタンが表示されます。 上部にあるシ
桃太郎電鉄 教育版Lite ～日本っておもしろい！～ (桃鉄教育版) 公式サイト
3月15日(金)に実施したメンテナンスは、予定どおり終了いたしました。詳細は こちら 引き続き、教材として幅広くご活用いただけるよう、改修・最適化をすすめてまいります。 桃鉄で 駅や地理を覚えて勉強になった！日本全国の観光名所や物産 に詳しくなった！ ─ そんな皆様の声に応え、『桃太郎電鉄 ～昭和 平成 令和も定番！～』に、 学校などの教育現場のカリキュラムを想定して 学習機能を追加した ブラウザ版『桃太郎電鉄 教育版Lite ～日本っておもしろい！～』が登場！ 授業で活用できるよう、WEBブラウザやタブレット等でプレーできます！ しかも学校教育機関への 導入は無料！ 新ジャンルの桃鉄を、授業に取り入れてみませんか？ 学校教育機関への提供を開始しました！ ご利用のお申し込みは こちら！
Playwrightでテスト実行中の動画を撮る - テストウフ
この記事は自動テスト Advent Calendar 2020 - Qiitaの12日目です。 アドベントカレンダーが Puppeteer, Playwright, Cypress, TestCafe, CodeceptJS, など自動テストに関する技術・ノウハウを書いていきましょう。 ということなので、Playwrightのちょっとしたネタを一つ。 前段 自動テストやっていると、テストが失敗（結果がFailになったり、テスト自体が途中で例外吐いて止まったり）したときに テスト対象でほんとうに問題があるのか 自動テスト側に問題があるのか いわゆる「タイミングの問題」などなのか（） を切り分ける必要があります。これが割と大変な作業になることも多く、 そもそもテストが想定外の理由で失敗しないように、例外処理や待機やリトライ処理などを工夫しておく 失敗の原因を特定する手間をなるべく少なくするよう
WebAssembly製のx86仮想マシン「WebVM」が登場、Webブラウザ上でLinuxや各種コマンド、アプリがそのまま実行可能
WebAssembly製のx86仮想マシン「WebVM」が登場、Webブラウザ上でLinuxや各種コマンド、アプリがそのまま実行可能 Leaning Technologiesは、Webブラウザ上でx86バイナリをそのまま実行できるWebAsesmbly製の仮想マシン「WebVM」を発表しました（同社による紹介記事「WebVM: server-less x86 virtual machines in the browser」）。 Google ChromeやMicrosoft Edge、Firefox、Safariなどのモダンブラウザであれば、上記のURLにアクセスすることで誰でもWebブラウザ上にx86仮想マシンを走らせることが出来ます。 WebVMではx86仮想マシンの上でLinux OSのDebianがバイナリが変更なしにそのまま稼働し、さまざまなコマンドも実行可能。 Linuxアプリ
2022年1月においてCSRF未対策のサイトはどの条件で被害を受けるか
サマリ2020年2月にGoogle ChromeはCookieのデフォルトの挙動をsamesite=laxに変更しましたが、2022年1月11日にFirefoxも同様の仕様が導入されました。この変更はブラウザ側でCSRF脆弱性を緩和するためのもので、特定の条件下では、ウェブサイト側でCSRF対策をしていなくてもCSRF攻撃を受けなくなります。この記事では、デフォルトsamesite=laxについての基礎的な説明に加え、最近のブラウザの挙動の違いについて説明します。 （2022年1月29日追記） 本日確認したところ、Firefoxにおけるデフォルトsamesite=laxはキャンセルされ、従来の挙動に戻ったようです（Firefox 96.0.3にて確認）。デフォルトsamesite=lax自体は先行してGoogle Chromeにて実装されていましたが、細かい挙動の差異で既存サイトに不具合が
User-Agent Reduction
Updates May 11th, 2023: the Phase 6 rollout is enabled for 100% of Android clients on M110 and above via Finch. April 25th, 2023: the Phase 6 rollout is enabled for 50% of Android clients on M110 and above via Finch. April 4th, 2023: the Phase 6 rollout is enabled for 10% of Android clients on M110 and above via Finch. March 21st, 2023: the Phase 6 rollout is enabled for 5% of Android clients on M
Compat 2021 mid-year update: Flex gap everywhere | Blog | web.dev
Compat 2021 mid-year update: Flex gap everywhere Stay organized with collections Save and categorize content based on your preferences. Mid-year update on Compat 2021—an effort to eliminate browser compatibility problems in five key focus areas: CSS flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms. It's time for the mid-year update on Compat 2021—an effort to eliminate browser
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 なページとのコミュニ
Improving user privacy and developer experience with User-Agent Client Hints | Privacy & Security | Chrome for Developers
Client Hints enable developers to actively request information about the user's device or conditions, rather than needing to parse it out of the User-Agent (UA) string. Providing this alternative route is the first step to eventually reducing User-Agent string granularity. Learn how to update your existing functionality that relies on parsing the User-Agent string to make use of User-Agent Client
Move users to Microsoft Edge from Internet Explorer - Microsoft Edge Developer documentation
Many modern websites have designs that are incompatible with Internet Explorer. When an Internet Explorer user visits an incompatible public website, the user may be instructed by the website that the website is incompatible with Internet Explorer, and that the user must switch to a more modern browser in order to use the website. To minimize disruptions, Microsoft Edge supports a new capability t
ブラウザのキーボードを制御する inputmode
October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava
アンカー上の target=_blank が rel=noopener を暗示するようになりました | Firefox サイト互換性情報
リリース: Firefox 79 カテゴリー: DOM, HTML, プライバシー & セキュリティ 概要Firefox 79 以降、target="_blank" を伴った <a> や <area> 要素は、現行の HTML 仕様 に従い、rel 属性が設定されていない限り暗黙的に rel="noopener" を適用します。noopener リンクタイプは新たに開かれたウィンドウ内の window.opener を null とすることで、この DOM プロパティが信頼できない第三者のサイトによって悪用されるのを防ぎます。必要な場合は、rel="opener" を明示的に設定することで挙動を反転させられます。 Apple は 2019 年 3 月公開の Safari 12.1 で最初にこの変更を行いました。Firefox では、Firefox 65 以降の Nightly と早期 Be
Station • One app to rule them all
One app to rule them allStation is the first open-source smart browser for busy people. A single place for all of your web applications.
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chr
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
same-site/cross-site, same-origin/cross-originをちゃんと理解する
Chrome Music Lab
My Browser Information