Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
新しいプロジェクトに参加してローカル環境を作り始めると、何かとエラーに遭遇します。 また、設計や実装について開発者に相談したり、コードレビューを依頼することもありますね。 開発者が近くにいれば、（それなりに、程よいタイミングを見計らって）話しかけて、エラーの原因を調べてもらったり、設計方法をホワイトボードにスケッチしながら相談できますが、リモート開発ではそうはいきません。 リモート開発で成果を上げるためには、このブログのように何の装飾もインタラクティブ性もない文章で、自分の状況や相談したい事柄を正確に伝える必要があります。 とはいえ私は昔、「文章がわかりにくい」と毎日、毎日上司にフィードバックをもらうくらいには文章を書くのが下手くそでした。今もわかりやすい文章が書けている自信はありません。 それでも、これまでに何度か、議論が好転したり、プロジェクトが前に進むきっかけとなる文章を書けたことが
前回のブログから90日以上経ってしまったので広告が載ってしまったから短文でもアウトプットしておく。 プログラマとして仕事をしているとコードと向き合っている時間の9割以上は既存のコードを読んでいる、だから読みやすさは重要である、という言説は耳にタコができるほど誰もが言っている。 仕事で書かれるコードが誰のレビューも通ること無くマージされている現場は凄惨だが、自分より明らかに経験を積んだ人たちが何度もレビューを重ねたコードが読みやすいかというとそうとは限らない。良いコードが守るべきルールをすべて守っていても不可解なコードはあるし、どんなに読みやすいコードでも数千行の規模になってくるとやはり脳内からこぼれて一度に覚えておける範囲からはみ出る。 変数名や関数名をわかりやすくするとか不必要な技巧を凝らさないとかわかりやすい設計にするとか主観的な事を偉そうに語る本は山ほどあり、それらの本を崇める事は悪
OSS 観光名所を貼るスレ - ぽ靴な缶
これは はてなエンジニアアドベントカレンダー2023 2日目の記事です。 はてなエンジニア Advent Calendar 2023 - Hatena Developer Blog はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita トップバッターは緊張するけど、順番が回ってくるまで長い間ソワソワするのも嫌、という理由で例年2日目を狙うようにしている id:pokutuna です。今年も成功しました。 観光名所とは 目を閉じれば思い出す、あのコード... あの Issue... あなたが Web 系のエンジニアであれ、趣味で開発している方であれ、必要に応じてライブラリやフレームワークのコードを読むのはよくあることでしょう。公開の場で開発されているソフトウェアは、ソースコードだけでなく、開発コミュニティでの議論やバグ報告なども見ることができます。 リポ
FirefoxがついにChromeよりも高速なブラウザに
Treeherderは、Mozillaの開発するソフトウェアのテスト結果や、ウェブサービスや外部ツールで取り込んだデータを抽出・加工するETL機能などを有するウェブサイトです。このTreeherderに、Google ChromeとFirefoxのベンチマークテスト結果をまとめたデータが公開されました。これによると、FirefoxはChromeよりも高いスコアを出している、つまりは高速なブラウジングが可能なブラウザということのようです。 Perfherder https://treeherder.mozilla.org/perfherder/graphs?timerange=31536000&series=mozilla-central,3735773,1,13&series=mozilla-central,3412459,1,13 Firefox has surpassed Chrome
learning-webrtc_2023-05.md 時雨堂 WebRTC 入門 (講師資料) v2023-05 これは時雨堂が開催しているオンラインイベントである WebRTC 入門の 講師用 の資料であり、 参加者用の資料ではありません。 時雨堂 WebRTC 入門 オンラインイベント 概要 ChatGPT がある今、学ぼうと思えば好きなだけ学べる時代がきています。 ただ「正しい情報」をなんとなく知っている事はとても重要だと考えています。 進め方 今回の WebRTC 入門はまず最後まで大まかに話をしていきます。 その後、残り時間を利用して、細かく話をしていきます。 資料表示用の画面と iPad を画面共有してホワイトボード的な使い方をしていきます。 お願い 是非 Discord にメモを残していってください。 後から振り返るとき、参加者の皆に有用だと思います。 ライセンス Creat
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)
ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。 私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。 そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。 これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目
モノレポにすべきか、レポジトリを分割すべきか
先日 フロントエンドの Monorepo をやめてリポジトリ分割したワケ というブログがバズっていた。そのおかげか、Twitter でもモノレポに関する言及がちょこちょこあった。一家言あるドメインなので書きたい。ただの一家言(a.k.a お気持ち)なのでぜひ皆さんの意見も聞いてみたい。 tl;dr 別に自分はどっち派とかではなく、どっちも選ぶ。強いて言うならリポジトリ分割派で、依存更新がしんどくなったら monorepo 派。 免責 モノレポに対する一家言を書きたいだけであって、内容自体はフロントエンドの Monorepo をやめてリポジトリ分割したワケ と全く関係なく、そのブログで述べられている施策については何も言及しません。ただ一つ言及するとしたら肉の部位がコードネームに採用されているのは良いと思いました。🍖🍖🍖 モノレポにしたくなる状態の前提にあるもの 前提は元記事と同じように
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表しました。 テスト自動化フレームワーク「Playwright」 Playwrightは、マイクロソフトが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワークです。 実行環境、対象ブラウザ、対応言語が幅広く、テスト実行時にはWebブラウザの動作を自動的に待つ機能を備えるなど、柔軟で精度の高いテスト自動化が実現できる点を特長としています。 具体的には、デスクトップ向けのWebア
ちなみに jq がインストールされている必要はありません。 jnv does not require users to install jq on their system, because it utilizes j9 Rust bindings. https://github.com/ynqa/jnv#installation JSON navigator and interactive filter leveraging jq Usage: jnv [OPTIONS] [INPUT] Examples: - Read from a file: jnv data.json - Read from standard input: cat data.json | jnv Arguments: [INPUT] Optional path to a JSON file. If not prov
YouTubeは広告ブロッカーをブロックするためのアンチ広告ブロッカーの展開を本格化しており、Adblock PlusやuBlock Originといった人気広告ブロッカーがYouTubeで機能しなくなっています。そんな中でもYouTubeで問題なく使えることをアピールしている広告ブロッカーが「FadBlock」です。 GitHub - 0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox. https://github.com/0x48piraj/fadblock 開発者のPiyush Raj氏によると、FadBlockは広告を検知・削除できるように設計された広告ブロッ
余らせたラズパイの使い道 - Qiita
about みんなだいすきRaspberry Pi(以下ラズパイ)、せっかく買ったのに、仮想化基盤を家に用意して不要になったり、電子工作に飽きてもう使わなくなりがち… 買ったときは数千円〜1万円以上出したのにね… そんな可哀想なラズパイ、家に転がってませんか？もったいなくないですか？ 僕も ラズパイ初代 ラズパイB+ ×2(マジでいらない…) ラズパイ4B(2GB) ラズパイ4B(4GB) が家に転がってます。 そこで、使い道を考えてみました。というか実際に運用しているものもあります。 使い道 Magic Mirror2 Magic Mirror2をご存知でしょうか？ なんかいい感じに、「鏡よ鏡、世界で一番美しいのは誰？」的なのをすることができます。 実際にどういった使い方を想定しているかは、「スマートミラー」を検索してみればいいかな〜と。(適当でごめんなさい) 直近の自分のタスクとかをい
Intro 以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ ストアやペイメントの緩和もあるが、ここでは WebKit に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。 筆者が公開情報を読んで解釈したものなので、内容は保証しない。 前提 iOS/iPadOS に入れられるブラウザには、 WebKit を用いる必要が
これをどう作ったかの解説。 PWA まず、上のスクリーンショットのアイコンはSafariの「ホーム画面に追加」で作られたものである。タップするとフレームなしのブラウザが立ち上がって、xsystem4（ゲームエンジン）のWebAssembly版が起動する。xsystem4のWebAssembly移植についてはこちらの記事に書いた。 この種のWebアプリはプログレッシブウェブアプリ (PWA)と呼ばれる。最近さっくり廃止されかかったりして、いつまで使えるかは少し心配でもあるが…。 iOS / iPadOS SafariにおけるPWA SafariのPWA対応は他プラットフォームのChromium系ブラウザと大きく違っている点が一つあって、SafariとインストールされたPWAはストレージを共有しない。つまり、例えばSafariでログインしたユーザーがホーム画面にサイトをインストールしてそちらを
yagisan-reports開発チームリーダーのterurouです。 デンキヤギでは yagisan-reports という「Webで使うことを前提とした」商用の帳票エンジンを開発しています（厳密にはyagisan-reportsはエンジン単体の製品ではなくクラウドサービスとして開発していますが、この記事では帳票エンジンとして記載しています）。 yagisan-reportsとは 「Webブラウザ単体で動作すること」にこだわっている帳票エンジン です。 2023年11月現在、アーリーアクセス版を提供しています。既に3社5システムで本番稼働しており、一番長いものでは3年ほど本番稼働を続けています。開発中のシステムも含めると、さらに数社あります。 元々はアーリーアクセス版の公開から早めにパブリックベータに移行する計画だったのですが、ありがたいことに早期から大口の導入相談が複数あり、こちらを優
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
セキュリティを盾に一点突破。どうもかわしんです。最近 Rust で SQLite を実装してます。 以前の記事で HTTP Parser を Rust で実装しようとしたものの、すでに実装されていたので断念しましたが、いい題材を見つけました。SQLite です。開発中のリポジトリはこれです。 github.com 今の時点では、Read Only で1つの WHERE 句を持った SELECT 文しか処理できないですが、以下の機能を実装しています。 sqlite3 で生成された database ファイルの読み取り (cursor.rs, btree.rs, record.rs) SQL 文の解析 (token.rs, parser.rs) テーブルとインデックスのメタデータのパース (schema.rs) 動的なファイルの読み込み (pager.rs) SQL クエリとスキーマ情報を元に
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
プログラマーがソースコード内に書いた「アスキーアート」図2000点以上を収集 使われ方を分析しデータベース化【研究紹介】 レバテックラボ（レバテックLAB）
米カリフォルニア大学サンディエゴ校に所属する研究者らが発表した論文「Taking ASCII Drawings Seriously: How Programmers Diagram Code」は、ソースコード内で使用するアスキーアート（ASCII art）を収集し分析した研究報告である。 ▲ソースコード内で活用されたアスキーアートの一例 keyboard_arrow_down 研究背景 keyboard_arrow_down 研究内容 オープンソースのソフトウェア開発では、プログラマーがコードの中にアスキーアートを使って図を描き、アイデアを視覚的に表現することがよくある。アスキーアートはコードや自然言語では表現しにくい概念を視覚的に明快に説明でき、またコードよりも詳細度は低いものの、コードを理解するうえで「サムネイル」のような役割を果たす。 こうしたアスキーアートは、実際のソフトウェア開発
ウェブブラウザ・Braveが非難されまくっているGoogleの「Web Environment Integrity」を無効化してリリースすることを発表
Googleが「健全なインターネット」のために策定を進めている「Web Environment Integrity(WEI)」に対して反対を表明している、ウェブブラウザ・Braveが、WEIを無効化する方針であることを明らかにしました。 Disables WebEnvironmentIntegrity feature and origin trials. by mkarolin · Pull Request #19476 · brave/brave-core · GitHub https://github.com/brave/brave-core/pull/19476 Google’s Plan To DRM The Web Goes Against Everything Google Once Stood For | Techdirt https://www.techdirt.com/2
偏りに満ちたWayland時代のLinux Desktopおすすめアプリ 2024 - joker1007’s diary
最近、wayland移行も大分安定して、デスクトップで利用するアプリも多少変化したので、最近利用しているものをまとめておこうと思う。 基本的にGNONEやKDE Plasmaみたいな重厚なデスクトップ環境は使わないタイプなので、そういうラインナップになっている。 開発で必須、みたいなやつはこの記事には余り入れてない。 ウインドウマネージャー Hyprland waylandで動作するタイル型ウインドウマネージャー。ヌルヌル動くのが気持ち良いだけでなく、機能的にもよく出来ている。開発が活発なのも良い。 waylandで画面共有のために利用されるxdg-desktop-portalのために独自実装を持っていてswayでは出来なかったウインドウ単位の画面共有が出来る。 という訳でwaylandのタイル型ウインドウマネージャーといえばswayがメジャーだが、最近はHyprlandを利用している。
" class=code-demo loading=lazy style=height:350px>これを突き詰めると、スプリングアニメーション（Spring Animation）のような、従来は JavaScript でフレームごとに描画していたアニメーションも CSS アニメーションで実装できます。 iOS のスプリングを CSS 数式アニメーションで再現する この記事では数式を使ったアニメーションを CSS で行う方法について、実際にデモを実装しながら解説します。 数式でアニメーションを表現できることの利点 #数式でアニメーションを表現すると聞いて、ピンとこない人もいると思います。以下の画像はこの記事のはじめのデモで使っている数式をグラフにしたものです。このグラフの形がイージング関数に似ていると気づいた方もいるかもしれません。 このようなグラフを描く数式を作ることができればイージング
TwitterのアイコンをXから鳥に戻すchrome拡張機能をつくりました - きつねこの週刊デイリー寿司ニュース
みんなでたのしくツイッター ※本ページの方法はPCブラウザでの利用を想定しています。スマホアプリには対応しません。スマホでXを鳥に戻す方法はこちら※ ki2neko.hateblo.jp ※本拡張にはtwitterやX.com、イーロンを貶めたり敵対する意図はありません。本拡張の紹介は歓迎ですが、RT・引用RTの際、twitterやX.com、イーロンに対する過度なdisや中傷はやめてください。そういうとこやぞ。みんなでたのしくツイッター※ ※Nothing in this extension is intended to discredit or antagonize twitter, X.com, or Elon. You are free to use or introduce this extension, but please do not use excessive dispa
Intro Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。 ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。 レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。 まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。 関連サイト 始めて取り組もうとすると、まずどこを見ればわからないところから始まる。 似たようないくつかのサイトがあり、使い分けがされているからだ。 code search https://source.chromium.org/chromium/chromium/src コードをインタラクティブに検索するためのサイト Workspace 風の U
一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ
寺田 学（@terapyon）です。2024年4月の「Python Monthly Topics」は、Python Web UIフレームワークの1つであるStreamlitを使ってWindowsやmacOSのデスクトップアプリを作る方法を解説します。 目的・モチベーション Pythonで自動化のスクリプトを作ったり、JupyterLabやColaboratoryでデータの可視化を行うことがあります。これらを作成者以外の多くの方に利用してもらう方法として、Webシステムやデスクトップアプリとして提供する方法が考えられます。 Webシステムの構築やデスクトップアプリの作成となると、技術的なハードルがあります。他には、時間的なコストに見合わないという状況もあり得ます。 Python Web UIフレームワークを使うことで、比較的少ないコードでWeb UIからスクリプトの実行や可視化をするアプリ
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。 システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
数年悩まされているが解決できていない問題。解決に向けて雑なメモ。固まるとGUIからの強制終了も効かずひたすら待つしかないのでかなりのストレス。 症状 MacOSのGoogle Chromeで下記のようなサイトで文字入力を行おうとするとレインボーカーソル状態のまま数秒から数十秒固まりブラウザが操作できなくなる コピペ操作でも起こる レインボーカーソルは表示されない場合もある 動き出すとタイプしていたキーが一気に入力されるような感じ 事象が発生すると別ウィンドウのGoogle Chromeも固まる Google Chrome以外のプロセスには影響してなさそう 常に発生するわけでもなく軽い時もある。ただ毎日は発生している 何をすると一時的にでも解消するのかは不明 Mac再起動直後は発生しない気がする Chrome再起動直後は発生しない気がする 発生するサイトと箇所 どのサイトとかは関係ない気もす
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ Rust製のWebブラウザエンジンとして開発が進められている「Servo」は、Servoをアプリケーションに組み込み可能なクロスプラットフォーム対応WebVeiwとする方向で開発を進め、それをアプリケーションフレームワークのTauriと協力してTauriがサポートする予定であることを発表しました。 TauriはElectronの代替を目指す、Web技術を用いてアプリケーションを開発するためのフレームワークです。 参考：Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 現在のTauriは、UIのレンダリングエンジンとして、Windo
Chrome for Testing: reliable downloads for browser automation | Blog | Chrome for Developers
Today we’re happy to announce Chrome for Testing, a new Chrome flavor that specifically targets web app testing and automation use cases. This article explains why the Chrome team felt this was needed, and walks through concrete examples where Chrome for Testing might benefit you as a developer. Background Browser testing is a vital component of creating a high-quality web experience, regardless o
AppleがiOS 17.4でWebkit以外のブラウザエンジンを許可し、ChromeやFirefox、OperaなどSafari以外のブラウザを完全に動作させることを可能にしたことが明らかになりました。これはEUのデジタル市場法(DMA)施行を受けての対応で、EU圏のユーザーにのみ適用されます。 Apple announces changes to iOS, Safari, and the App Store in the European Union - Apple https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ Update on apps distributed in the European U
URL バーの表示の変遷 | blog.jxck.io
Intro ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、 Chrome から発表された。 思えば、 URL バーの見た目も、だいぶ変わってきたように思う。 URL バーの表示の変遷を一度まとめておく。 URL バーの再現 本当なら古いブラウザのスクショを集めたいところだったが、これは非常に難しい。ネットで色々落ちてるものをかき集めても、ライセンスや解像度や表示されている URL などを考えると、使い勝手は決して良くない。 試しに古い Chromium をビルドしてみたが、一定より古いものはうまく開くことすらできなかった。開くことができたバージョンもあったが、どうやらそれだけでは当時の URL バーの UI までは再現されないようだ。 そこで、実物のスクショはあきらめ「一般的な URL バーのイメージ」を書いた図で、おおまかな変遷を辿る。あくまで架空の図であること
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
「Operaは変わり果てたのでもう使うな」と有識者が語る
ノルウェー発のウェブブラウザのOperaは、「Opera最強伝説」で知られるなど、ニッチながら根強い人気に支持されているブラウザです。テクノロジージャーナリストのコービン・ダベンポート氏が、「素晴らしいウェブブラウザだったが見る影もなくなった」としてOperaや派生ブラウザのOpera GXを使うのをやめることを宣言し、その理由をブログを説明しました。 Stop using Opera Browser and Opera GX https://www.spacebar.news/stop-using-opera-browser/ ◆これまでのOperaの足取り Operaは1995年にリリースされたウェブブラウザで、当初は有料ソフトウェアだったということもあり、当時主流だったInternet ExplorerやNetscape Navigatorに比べてユーザーは少なく、全盛期でさえニッチ
Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？ スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？ 比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージ や GitHub Actions の actions/cache を使用する場合など コミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可能です。スタイルクエリを使えるようになると、どんな風に便利になるかを紹介します。 Add Superpowers to Your CSS Variables with Style Queries by Jared White 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スタイルクエリを使えるようになると スタイルクエリは変数と組み合わせると、さらに強力 スタイルクエリを使えるようになると CSSはスタイルクエリの登場により、さらなる
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
リモート開発を助ける「思いやりのある文章」の書き方 - ROUTE06 Tech Blog
きれいなコードを書けという話について - Software Transactional Memo
時雨堂 WebRTC 入門 (講師資料) v2023-05
JSON をプレビューしながら jq のフィルタを書くことができる「jnv」を試してみる
広告ブロッカーのブロックを本格化するYouTubeでも使える検出不能な広告ブロッカー「FadBlock」
Apple によるブラウザエンジン規制の緩和 | blog.jxck.io
iPadに18禁ゲームをインストールする（ためのWebアプリを作る）
なんで今さら帳票エンジンを新規開発しているのか
BudouX: 読みやすい改行のための軽量な分かち書き器
Rust で SQLite を再実装している - kawasin73のブログ
jQuery 4.0.0 BETA! | Official jQuery Blog
CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く - Katashin .info
Chromium にコントリビュートするための周辺知識 | blog.jxck.io
Python Web UIフレームワークで作るデスクトップアプリ | gihyo.jp
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
Cookie Store API による document.cookie の改善 | blog.jxck.io
MacのChromeで文字入力する際にブラウザが固まる問題 - njo
AppleがついにChromeとFirefoxのフルバージョンをiPhone上で動かすことを許可
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
GitHub Actions のみで、actions/cache も使わない最軽量の VRT
CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる