Brotli Compression

If you look at HTTP Headers as often as I do, you’ve likely noticed something different in Firefox 44 and Chrome 49. In addition to the usual ‘gzip’, ‘deflate’ and ‘sdhc’ , a new value ‘br’ has started to appear for HTTPS connections.

Request:

Accept-Encoding:br

Response:

Content-Encoding:br

Compared to gzip, Brotli claims to have significantly better (26% smaller) compression density woth comparable decompression speed.

The smaller compressed size allows for better space utilization and faster page loads. We hope that this format will be supported by major browsers in the near future, as the smaller compressed size would give additional benefits to mobile users, such as lower data transfer fees and reduced battery use.

Advantages:

  • Brotli outperforms gzip for typical web assets (e.g. css, html, js) by 17–25 %.
  • Brotli -11 density compared to gzip -9:
  • html (multi-language corpus): 25 % savings
  • js (alexa top 10k): 17 % savings
  • minified js (alexa top 10k): 17 % savings
  • css (alexa top 10k): 20 % savings


NOTE: Brotli is not currently supported Apache HTTPd server (as of 2016feb10), but will likely be added in an upcoming release.

http://mail-archives.apache.org/mod_mbox/httpd-users/201601.mbox/%[email protected]%3E

Until there is native support, you can pre-compress files by following instructions here…
https://lyncd.com/2015/11/brotli-support-apache/

REFERENCES:

Firefox 41+ extension signing

In the never-ending quest for browser security, Firefox has started implementing safeguards to only allow signed extensions. I found this out after upgrading to Firefox 41 as my installed version of “Deque FireEyes” stopped working. Thankfully, there is a workaround in Firefox 41, but it goes away in Firefox 42.

  • Firefox 40: warning only!
  • Firefox 41: workaround, via:

    about:config:
    xpinstall.signatures.required = false
  • Firefox 42: BLOCKED! unless signed

REFERENCES:

Deque FireEyes accessibility testing plugin

I’ve done a lot of accessibility testing and development work over my career. One of the many free tools that I use in that role is FireEyes. Deque also has some commercial packages for developer use.

FireEyes adds a new tab on the Firebug tab bar and adds the ability to analyze a web site for WCAG 2.0 Level A and AA and Section 508 accessibility violations. The Stand-Alone version of FireEyes is a browser plugin to the FireFox browser. It requires that the FireBug plugin already be installed

Requirements:

  • Firefox 31-41

    As of 2015aug21, the current version of the extension is NOT signed and will not execute on later versions. [See my later post on this topic]

  • FireBug 2.x – Do NOT install Firebug v3 alpha as the tab will not show.

NOTE: should be on Firebug tab labeled “Worldspace Fireyes”, but does not seem to be available in Firebug3.

NOTE: if you try to download in MSIE, you must rename the .zip to .xpi, and then open with Firefox.

REFERENCES:

Mozilla Firefox Tracking Protection

While “Do Not Track” (DNT) was an HTTP Header used to “request” that the browser sent to a server, it was not guaranteed to be honored. New versions of Firefox support “Tracking Protection” that automatically block many common tracking mechanisms.

  • Type “about:config” in the URL line.
  • Toggle “privacy.trackingprotection.enabled” from false to true.
  • Done!

REFERENCES:

Selenium Firefox modifyheaders

A few of my tests require access to modify the HTTP Request headers. Unfortunately, Selenium hides access to them to allow for portability, and to better emulate what “users” generally can change. To work around this a Firefox extension can be used and configured at runtime for this purpose.

NOTE: for Maven, you need to place a copy of the .xpi file referenced into the /src/test/resources folder for Selenium to locate it.

In the example below, I’m setting the HTTP Header for “DNT” to “1”.

public FirefoxDriver createFirefoxDriver() throws URISyntaxException, IOException {
// Specify the install location (if not default)
System.setProperty("webdriver.firefox.bin","C:\\path\\to\\Firefox.exe");
// Prevent Console log "noise" from the Selenium Firefox plugin
System.setProperty("org.apache.commons.logging.Log", "org.apache.commons.logging.impl.SimpleLog");
System.setProperty("org.apache.commons.logging.simplelog.log.httpclient.wire", "OFF");
System.setProperty("org.apache.commons.logging.simplelog.log.org.apache.commons.httpclient", "OFF");

final FirefoxProfile profile = new FirefoxProfile();
final URL url = this.getClass().getResource("/modify_headers-0.7.1.1-fx.xpi");
final File modifyHeaders = modifyHeaders = new File(url.toURI());

profile.setEnableNativeEvents(false);
profile.addExtension(modifyHeaders);

profile.setPreference("modifyheaders.headers.count", 1);
profile.setPreference("modifyheaders.headers.action0", "Add");
profile.setPreference("modifyheaders.headers.name0", "DNT");
profile.setPreference("modifyheaders.headers.value0", "1");
profile.setPreference("modifyheaders.headers.enabled0", true);
profile.setPreference("modifyheaders.config.active", true);
profile.setPreference("modifyheaders.config.alwaysOn", true);

final DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.setBrowserName("firefox");
capabilities.setPlatform(org.openqa.selenium.Platform.ANY);
capabilities.setCapability(FirefoxDriver.PROFILE, profile);
return new FirefoxDriver(capabilities);
}

opensearchdescription.xml

OpenSearch is a relatively obscure topic that I’ve only crossed a few times, here is the premise.

A simple tag can be added to your content, in this case HTML, but a feed can also contain this element.

<link rel="search" href="http://www.giantgeek.com/opensearchdescription.xml" type="application/opensearchdescription+xml" title="giantgeek.com" />

That link refers to a file that resembles the one below, in it you can specify the URL to the search facilities on a website, or as in the case below, use the parameters for a Google search of your website.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE OpenSearchDescription>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>GiantGeek.com</ShortName>
<Description>Use Google to search our web site.</Description>
<InputEncoding>UTF-8</InputEncoding>
<Tags>giantgeek skotfred</Tags>
<Contact>[email protected]</Contact>
<Image width="16" height="16" type="image/x-icon">http://www.giantgeek.com/favicon.ico</Image>
<!-- NOTE: this uses Google, you can give your own search url instead -->
<Url type="text/html" method="GET" template="http://www.google.com/search?q=site:giantgeek.com {searchTerms}"/>
<Url type="application/opensearchdescription+xml" rel="self" template="http://www.giantgeek.com/opensearchdescription.xml"/>
</OpenSearchDescription>

Many modern browsers that provide a ‘search box’ in the browser interface, can then add the capability to perform a search of your website even when the user is not there already.

REFERENCES and Additional Reading:

Prevent Firefox browser auto update

Often you find a neeed to keep an old copy of Firefox around for testing or to use a specific plugin (Example: Selenium). In these cases it can often prove problematic to allow the browser to auto-update. Here are some simple steps to prevent this behavior.

Enter “about:config” into the Firefox URL bar, then change the following values. You can click on them to toggle.

app.update.auto = false
app.update.enabled = false

Alternately, on Windows you can edit the config file at: %APPDATA%\Mozilla\Firefox\Profiles\.default\prefs.js

REFERENCES:

Killing hung, frozen or zombie programs

As a web developer, I’m often doing new (and interesting) things to stretch the boundaries of the browser. Sometimes, in doing so, the browser can hang or freeze, remaining in a state that makes it unresponsive.

Here are a few simple methods to force-close the browser on Windows and Linux, they can be expanded for other software executables as needed.

Windows:
taskkill /f /im iexplore.exe
taskkill /f /im firefox.exe
taskkill /f /im chrome.exe
taskkill /f /im safari.exe

Linux/Unix:
for i in `ps -A | grep firefox | awk '{print $1}'`; do kill -9 $i; done

Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

Firefox Beta and Aurora Release Channels

With the rapid release cycle (currently every 6 weeks) for Firefox, it’s a good idea for developers and testers to use the upcoming release versions before they are released to the general public.

For Windows users, you can download and install an appropriate version from:
http://www.mozilla.org/en-US/firefox/channel/

On Ubuntu, it’s a little more difficult, but rater straight-forward:

  1. Open a new Terminal window
  2. sudo add-apt-repository ppa:mozillateam/firefox-next
  3. sudo apt-get update
  4. sudo apt-get install firefox

REFERENCES:

That’s all…. Happy Testing!