Contents:

• Client Tricks
  • Detect the Brave Browser
  • Detect Dark Mode
  • Detect Dark Reader (browser extension)
• Browser benchmarks
  • For testing ads-blocking
• Progressive Web Apps (PWAs)
  • Wrap web pages as desktop apps

Client Tricks #

Detect the Brave Browser #

(navigator.brave && await navigator.brave.isBrave() || false)

Credit: https://stackoverflow.com/a/60954062

Detect Dark Mode #

From JavaScript:

"matchMedia" in window && 
window.matchMedia('(prefers-color-scheme: dark)').matches

From CSS:

@media (prefers-color-scheme: dark) {
    /* ... */
}

Detect Dark Reader (browser extension) #

For detecting the Dark Reader browser extension:

"querySelector" in document &&
!!document.querySelector("meta[name=darkreader]")

Browser benchmarks #

• https://browserbench.org/
  • https://browserbench.org/Speedometer2.0/
  • https://browserbench.org/JetStream/
  • https://browserbench.org/MotionMark/
• https://krakenbenchmark.mozilla.org/
• https://www.wirple.com/bmark/
• https://web.basemark.com/

For testing ads-blocking #

WARN: some of these websites may distribute malvertising, pirated or NSFW content. Load at your own risk!

• adblock-tester.com
• coveryourtracks.eff.org
• google.com
  • Features first-party ads, blockable via generic cosmetic rules in uBlock Origin
• youtube.com
  • video sample
  • Features first-party ads
• bild.de
  • Features anti-ad-blocking tech
• nytimes.com
  • Features annoying cookies / trackers banner
• forbes.com
  • Features annoying cookies / trackers dialog, and huge ad banners
• businessinsider.com
  • Trackers/cookies dialog, notification spam
• g4media.ro
  • Trackers/cookie dialog, notification spam, Google ads
• technoreels.com
  • WARN: malvertising, intrusive ads, anti-ad-blocking tech (kicking in after several seconds)
• lookmovie.io
  • WARN: pirated content, illegal software; anti-ad-blocking tech
• lostmediawiki.com
  • Anti-ad-blocking tech
• multics.eu
  • Anti-ad-blocking tech

Progressive Web Apps (PWAs) #

• https://web.dev/progressive-web-apps/
• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

Wrap web pages as desktop apps #

Using: https://github.com/jiahaog/nativefier

nativefier \
    --maximize \
    -u "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:76.0) Gecko/20100101 Firefox/76.0" \
    --internal-urls ".*.google.com.*" \
    --name "YouTube Music" \
    "https://music.youtube.com/"

nativefier \
    -u "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:76.0) Gecko/20100101 Firefox/76.0" \
    --maximize \
    --counter \
    --name "Twitter" \
    "https://twitter.com"

nativefier \
    -u "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:76.0) Gecko/20100101 Firefox/76.0" \
    --maximize \
    --counter \
    --name "Gitter" \
    "https://gitter.im"