Dave Rupert davatron5000

Every browser is the new IE (to me)

There's been a lot of talk lately about "the New IE". Heck, the Verge even tried to blame all their performance problems on it. There's also been a lot of great (and not-so great) criticism about it.

	IE/Edge	Firefox	Chrome	Opera	Safari	Mobile Safari	Opera Mini
`<picture>`	X				X	X	X
`<svg><use>`	X					X	X
CORS Support for `<use xlink:href>`	X	X	X	X	X	X	X
Service Worker	X	X			X	X	X

Question on JS testing for Polyfills

First off, I'm not great at testing; I'll come right out and say that. But I've had a few issues lately and am curious how I'd automate testing to safeguard features. Here's the scenario:

On the beta signup form for DayTrip, I wanted to use the new fetch() API as a replacement for jQuery and $.ajax. Using this across all browsers requires two polyfills, a Fetch Polyfill and a Promises Polyfill. The form has has broken twice now which is not ideal for a new product.

First time was just ignorance, didn't realize I needed a Promise polyfill for some modern browsers, even tho that's documented on the Fetch polyfill.
Second time was a botched Asset Pipeline. The polyfills weren't included in my home.js, maybe due switching to rails_12factor, still not sure.

The State of Container Queries

tl;dr Developers would like the idea to style components based on a parent's width rather than depend solely on the viewport media query. This would allow modular components to style themselves while being agnostic to the viewport.

There is currently a lot of developer interest in getting a feature like Container Queries (née "Element Queryies") shipped in a browser.

2-min Catchup

Here are official'ish documents to outline the developer community's desires.

	<div id="styleguide-icon-grid"></div>
	<object data="/assets/icons.svg" id="svgembed" height=0; width=0></object>

	<script>
	var grid = document.querySelector('#styleguide-icon-grid');
	var tmpl = '<div class="item"><svg class="icon"><use xlink:href="/assets/icons.svg#{id}"></use></svg><span>#{id}</span></div>';

	function svgloaded() {
	var svgEmbed = document.querySelector("#svgembed");
	var svg = svgEmbed.getSVGDocument();

	var inputs = document.querySelectorAll('input, textarea');
	for(var i=0;i<inputs.length;i++) {
	inputs[i].addEventListener('blur', function(){
	if(!this.checkValidity()) {
	this.classList.add('has-error');
	} else {
	this.classList.remove('has-error');
	}
	});
	}

	var letters = ["q","w","e","r","t","y","u","i","o","p","a","s","d","f","g","h","j","k","l","z","x","c","v","b","n","m"];

	function southwestSort( arr ) {
	var a = arr.slice( 0, Math.floor(arr.length / 3) );
	var b = arr.slice( Math.floor(arr.length / 3), Math.floor(arr.length / 3)*2 );
	var c = arr.slice( Math.floor(arr.length / 3)*2, arr.length );

	return a.sort().concat(b.sort()).concat(c.sort());
	}

	// Vanilla version of FitVids
	// Still licencened under WTFPL
	//
	// Not as robust and fault tolerant as the jQuery version.
	// It's BYOCSS.
	// And also, I don't support this at all whatsoever.

	;(function(window, document, undefined) {
	'use strict';

	# Make a bash prompt that looks like this:
	# λ directory [master !?] $

	# get current branch in git repo
	function parse_git_branch() {

	BRANCH=`git branch 2> /dev/null \| sed -e '/^[^]/d' -e 's/ \(.*\)/\1/'`

	if [ ! "${BRANCH}" == "" ]; then
	STAT=`parse_git_dirty`

	# - title:
	# subtitle:
	# author:
	# img: https://images-na.ssl-images-amazon.com/images/P/#.01._SCLZZZZZZZ_.jpg
	# url:
	# rating:
	# notes:
	- year: 2018
	books:
	- title: Showa 1953-1989