Enabling HTTP/3 (QUIC) in browsers for improved network performance

Back in 2015, Google introduced SPDY as a method of improving TCP connections. HTTP/3 now improves upon that by removing the blocking of TCP with the use of UDP (QUIC).

Firefox: currently disabled by default in version 85, to enable use about:config and set network.http.http3.enabled = true

IOS Safari 14+: currently disabled by default, but can be enabled under Settings > Safari > Advanced > Experimental Features > HTTP/3

Chrome/Chromium: current versions 88+ are currently implementing by default.

Chromium Edge: as new versions are based upon Chromium, support should follow Chrome.

MSIE: was never and will never be implemented.

REFERENCES:

Windows Vista EOL

As of April 11, 2017, Windows Vista customers are no longer receiving new security updates, non-security hotfixes, free or paid assisted support options, or online technical content updates from Microsoft. Microsoft has provided support for Windows Vista for the past 10 years

https://support.microsoft.com/en-us/help/22882/windows-vista-end-of-support

The most recent version of Internet Explorer in Windows Vista was IE 9.0.8112.16421 (9.0.57)

Even Apple, Google and Mozilla Firefox have ceased to maintain browsers for this operating system, dropping support for Windows XP and Vista at the same time.

Chrome 49.0.2623.112
https://chrome.googleblog.com/2015/11/updates-to-chrome-platform-support.html

Firefox 52.9.0 ESR
https://support.mozilla.org/en-US/kb/end-support-windows-xp-and-vista

Safari 5.1.7
https://apple.stackexchange.com/questions/68836/where-can-i-download-safari-for-windows

Windows XP EOL

I recently crossed paths with a customer that was still using Windows XP and experiencing problems with a website.   This led me to evaluate their options for continuing to use this once very common, but now unsupported operating system.

After 12 years, support for Windows XP ended April 8, 2014. Microsoft will no longer provide security updates or technical support.

https://www.microsoft.com/en-us/windowsforbusiness/end-of-xp-support

The most recent version of Internet Explorer in Windows XP was IE 8.0.6001.18702

Even Apple, Google and Mozilla Firefox have ceased to maintain browsers for this operating system, dropping support for Windows XP and Vista at the same time.

Chrome 49.0.2623.112
https://chrome.googleblog.com/2015/11/updates-to-chrome-platform-support.html

Firefox 52.9.0 ESR
https://support.mozilla.org/en-US/kb/end-support-windows-xp-and-vista

Safari 5.1.7
https://apple.stackexchange.com/questions/68836/where-can-i-download-safari-for-windows

An additional problem with use of IE8 on Windows XP is that it only supports up to TLS1.0 which is currently being replaced by TLS1.2  in many web applications.

 

meta viewport minimal-ui… a good idea in it’s time, just not useable…

Apple added this capability for fullscreen browser applications in Safari for IOS 7.1, unfortunately, they removed it in IOS 8.0


<meta name="viewport" content="width=device-width, minimal-ui" />

REFERENCES:

Preventing IOS/Safari from formatting numbers

There are many cases where your application may display numbers that “resemble” phone numbers, but are not, unfortunately Safari’s default behavior is for it to be “helpful” and format them into clickable/callable links for the user of Apple IOS devices.

Adding the following META tag can prevent that default behavior:

<meta name="format-detection" content="telephone=no" />
.

NOTE: I’ve seen some mention of using this method for ‘address=no’ and ’email=no’, but have not looked into or verified those implementation yet!

REFERENCES:

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>s[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:

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

Defining word-break and word-wrap in CSS

I recently found a case where WebKit (Chromium, and Safari) was acting as if ‘overflow-x:visible;‘ was set in cases where text could not be wrapped inside a DIV due to a lack of spaces or hyphenation as it was a java stack trace. In this case I had to explicitly set the ‘word-wrap:break-word;‘ attribute for the problematic DIV.


.breakword { word-wrap: break-word; }

Also, for Unicode languages where there are other rules to complex to describe here…

.wordbreak { word-break: keep-all; }

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:

Safari/WebKit background flash on page load

I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.

Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.

The simplest fix, while not elegant, is to an explicit ‘style’ attribute on the <html> tag.

<html style=”background-color:black;”>

Reference: