Mozillaへのコントリビュート方法 - blog.keiya01.dev
OverviewMozilla へのコントリビュート方法をまとめます。How To Contribute Code To Firefoxという記事にまとまっているといえばまとまっているのですがわかりにくいのでメモしておきます。 Firefox Contributors’ Quick Referenceという記事が実際に commit などする際にわかりやすかったです。 諸々のサービスへ登録まずBugZillaに登録します。 次にPhabricatorというコード管理サービスへのアクセスを許可します。 諸々のツールのインストールMercurialというバージョン管理ツールをダウンロードページに従ってインストールします。 macOS を使用している場合はbrewでインストールできます。 brew install mercurial Mercurial は git のようなツールです。git と
Prerender2 という機能について
作成日 2022-11-24 更新日 2022-11-24 author @bokken_ tag Web, browser, Prerender2 はじめに Prerender2 という機能の実装が Chrome/Chromium で進んでいる。この機能はページのレンダリングを予め行うことでページを高速に閲覧できるようにするための機能だ。この記事ではなぜ Prerender2 なのか、どうすれば適用できるのか、使う際の注意点はなにかを 2022/11/23 時点での情報についてまとめる。最新の情報については、それぞれの文書を参照されたい。¶ もくじ (click で開く) Prerender とは Legacy Prerender とはなにか Prerender2 Prerender2 を使う方法 feature detection Prerender2 の検討事項など Privacy
Improving Firefox stability with this one weird trick – Mozilla Hacks - the Web developer blog
The first computer I owned shipped with 128 KiB of RAM and to this day I’m still jarred by the idea that applications can run out of memory given that even 15-year-old machines often shipped with 4 GiB of memory. And yet it’s one of the most common causes of instability experienced by users and in the case of Firefox the biggest source of crashes on Windows. As such, at Mozilla, we spend significa
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
Automate an isolated browser instance with just a few lines of code
Automate an isolated browser instance with just a few lines of code11/16/2022 If you’ve ever created a website that shows any kind of analytics, you’ve probably also thought about adding a “Save Image” or “Save as PDF” button to store and share results. This isn’t as easy as it seems (I can attest to this firsthand) and it’s not long before you go down a rabbit hole of trying 10 different librarie
MPArch(Multiple Page Architecture) project in Chromium | Gyuyoung Weblog
This article is written by referring to the Multiple Page Architecture document. Motivation According to the Google Chromium team, some years ago it turned out that the BFCache(Back/Forward cache), Portals, Guest Views, and Prerender faced the same fundamental problem of having to support multiple pages in the same tab, but were implemented with different architecture models. BFCache and pending d
WebKit Features in Safari 16.1
ContentsWeb Push for macOS VenturaAnimated AVIFPasskeysNew viewport sizes on iPadOSHover on iPadOS with Apple PencilScroll to Text FragmentScreen capture improvementsAnd MoreFixes and PolishFeedback Today, Safari 16 arrives for macOS Ventura and iPadOS 16. Numbered Safari 16.1, this release is also available for iOS 16, macOS Monterey, and macOS Big Sur. To update to Safari 16.1 on macOS Monterey
What's New In DevTools (Chrome 106) | Blog | Chrome for Developers
Group files by Authored / Deployed in the Sources panel The Group files by Authored / Deployed is now shown under the 3-dot menu. Previously, it showed directly on the navigation pane. Open this demo. Enable the Group files by Authored / Deployed setting to view your original source code (Authored) first and navigate to them quicker. Chromium bug: 1352488 Improved stack traces Linked stack traces
New to the web platform in August | Blog | web.dev
New to the web platform in August Stay organized with collections Save and categorize content based on your preferences. Discover some of the interesting features that landed in stable and beta web browsers during August 2022. Stable browser releases In August, Firefox 104, Chrome 104, and Chrome 105 became stable. Individual transforms Chrome 104 includes individual properties for CSS Transforms.
iOS Privacy: Announcing InAppBrowser.com - see what JavaScript commands get injected through an in-app browser
Last week I published a report on the risks of mobile apps using in-app browsers. Some apps, like Instagram and Facebook, inject JavaScript code into third party websites that cause potential security and privacy risks to the user. I was so happy to see the article featured by major media outlets across the globe, like TheGuardian and The Register, generated a over a million impressions on Twitter
Using :has() as a CSS Parent Selector and much more
ContentsThe basics of how to use :has() as a parent selectorA practical example using :has() with CSS GridUsing :has() with the child combinatorUsing :has() with sibling combinatorsStyling form states without JSDark mode toggle with no JSAnd moreThe :has() revolution It’s been a long-standing dream of front-end developers to have a way to apply CSS to an element based on what’s happening inside th
iPhoneの省電力モードをJavaScriptで判定する方法
<video>が省電力モードだと自動再生されない罠 動画を背景で自動再生する案件に携わったのですが、iPhoneの省電力モードだと自動再生されず、代わりに再生ボタンが表示されることを初めて知りました。
User Agent文字列を使ったブラウザ判定の事例 2022年版 - yigarashiのブログ
やむを得ず、User Agent文字列を使って特定のブラウザ向けにJavaScriptの処理を分岐する必要が生まれてしまったので、調査・検討のログを記事にまとめます。 基本的にはバッドプラクティスである ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN まずはMDNがドキュメントを公開しているので読みましょう。要点は以下です。 基本的にUser Agent文字列に基づいて処理を出し分けるのはバッドプラクティス 多くのケースではUser Agent文字列を使うよりも良い手段がある 例えば特定の機能の実装状況に基づく分岐を行いたければそれを直接検出する それでもやむを得ない場合、User Agent文字列からブラウザ名、レンダリングエンジン、バージョン、OS、端末といった情報を取得することができる ただし各ブラウザのUser Agent文字列は嘘をついていることもあ
Content Security Policy Level 3におけるXSS対策 - pixiv inside
こんにちは、セキュリティエンジニアのkoboです。ピクシブには2018年4月に入社しており、セキュリティ観点でのアプリケーション開発や脆弱性報奨金制度の運用などを行っています。 本記事では、現在ピクシブの一部のサービスで取り組んでいるContent Security Policyについて知見を共有します。 概要 Content Security Policy (CSP) は、XSSを主としたウェブアプリケーションセキュリティの問題を軽減するために考案されたブラウザのセキュリティ機構です。 ウェブアプリケーションは、 Content-Security-Policy ヘッダをHTTPレスポンスに含めることで、意図していないJavaScriptの実行やリソースの読み込みをブラウザ側で制限することができます。 CSPは2012年頃よりブラウザに実装されていますが、2016年のGoogleの調査によ
Webブラウザのレンダリングの仕組みを理解する
どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht
Debug the web in 3D with the 3D View tool
Microsoft Edge DevTools has had a 3D View tool for some time already, and it’s a really great way to visualize how web pages are constructed. The tool is becoming even better! We’ve recently added new functionality to it and updated the navigation interface to make it more powerful and easier to use. In this article, we’ll look at some of the great ways you can use the 3D View tool to solve common
How we think about browsers
Chrome, Edge, and Firefox all have similar release cycles with releases every four weeks. Graphing Chrome traffic by version from January through April shows us how quickly older versions of these evergreen browsers fall off. We see peak-to-peak traffic around every four weeks, with a two week period where a single version represents more than 80% of all traffic for that browser. This shows us tha
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
web-platform-tests dashboard
| After half a year, what now?
Everything You Need to Know About JavaScript Import Maps
