davatron5000

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.

davatron5000

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.

|   | Edge | Mobile Safari | Chrome |

davatron5000

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());
}

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

davatron5000

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');
   }
 }); 
}

davatron5000

<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();

davatron5000

// I have a list SVG icons that I'm using svg-store on, but I'd also like to 
// just throw out some JSON so I could loop through icons for my styleguide.

gulp.task('list-icons', function () {
  gulp.src('assets/icons/*.svg')
  // write list of matched filenames to icons.json
});

davatron5000

var cheerio = require('gulp-cheerio');
var svgmin = require('gulp-svgmin');
var svgstore = require('gulp-svgstore');

gulp.task('svgstore', function () {
  return gulp
    .src('assets/icons/*.svg')
    .pipe(svgmin())
    .pipe(svgstore({ fileName: 'icons.svg', prefix: 'icon-' }))
    .pipe(cheerio({

davatron5000

struct もじれつ: Printable {
    let description: String

    init(string: String) {
        var mutableString = NSMutableString(string: string) as CFMutableString
        if CFStringTransform(mutableString, nil, kCFStringTransformLatinHiragana, 0) == 1 {
            self.description = mutableString as NSString
        } else {
            self.description = string
        }

davatron5000

Things not being picked up by my critical CSS task that I have to manually update.

• h1 - excusable, being used on another page
• h2 - media-queries? - would need to confirm this.
• .archive-list - maybe because only the top of the module is in-view, not the whole module?
• @font-face included - slows the site down
• pre - codeblocks on posts have long, unbreaking strings. This was causing first layout paint to be 1600px wide on mobile.