Rasmus Fløe phloe

Keybase proof

I hereby claim:

I am rasmusfl0e on github.
I am rasmusfl0e (https://keybase.io/rasmusfl0e) on keybase.
I have a public key ASDsAUrlKDKsRp5uwjRwQbbS0DJGdS4Hb_pTzxjB9IgCmgo

To claim this, I am signing this object:

Proper separation of concerns

Let's say you need to add a button to a subscription form.

The naive pee-your-pants way

<button style="background-color: red; width: 200px;">Subscribe</button>

A nice clean example of the revamped picture proposal:

<figure>
	<picture>
		<source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x">
		<source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x">
		<source srcset="small-1.jpg, small-2.jpg 2x">
		<img src="small-1.jpg" alt="" width="200" height="200">
	</picture>

TL;DR

<img src="/path/to/foo-320w-240h-1x.jpg" width="320" height="240"
    srcoptions="/path/to/foo-{width}-{height}-{dpr}.{format},
    320w 480w 640w, 1x 1.33x 2x, webp jpg"/>

DRY - Expose url pattern and avaliable options for images - not full urls - in markup. Browser picks best options - builds url.
Responsive images need CSS to get layout. Browser preloading is a pre-RWD optimization. Preloading doesn't make sense with upcoming postpone and lazyload attributes anyway.
Client Hints can't be used exclusively. Has server requirement and needs alt. way of handling CH - anyway - when server req. can't be met.

	@media (min-width: 768px) {

	.dredition .dredition-desktop-style-100-40 .dredition-item-image, .dredition .dredition-desktop-style-50-40 .dredition-item-image, .dredition .dredition-desktop-style-33-40 .dredition-item-image, .dredition .dredition-desktop-style-66-40 .dredition-item-image {
	min-width: 200px;
	flex: 1 0 calc((0.38197 * 100%) - 20px);
	}

	.dredition .dredition-item .dredition-item-header {
	flex: 1 0 calc((0.61803 * 100%) - 20px);
	}

	import URL from "url-parse";

	import ratioHelper from "./ratioHelper";
	import { quantize, interpolate, normalize, clamp } from "./math";

	var dprMin = 1; // min dpr to get highest quality
	var dprMax = 2; // max dpr to get lowest quality
	var dprRanges = [
	/*{
	min: 3,

	{
	"articleHits": 25,
	"totalHits": "25",
	"articles": [
	{
	"origId": "5f9a0b76-8621-4605-a232-355082314ce2",
	"imageId": null,
	"title": "Dansk og svensk forsvar vil samarbejde",
	"tags": [

	(function (global, doc) {

	// expose a function to recieve data via JSONP
	global.getBattle = function getBattle (data) {
	// calculate ranks of songs. ("questions" are songs)
	var rankedData = rankData(data.reply.battle.questions);
	// make the data more readable...
	var sanetizedData = sanetizeData(rankedData);

	// do stuff with sanetizedData here...

	<dr-section headline="Prioriterede nyheder" muteheading>
	<dr-layout span="12">
	<dr-layoutcolumn span="8">
	<dr-teaser span="8" imagespan="8" model="" />
	</dr-layoutcolumn>
	<dr-layoutcolumn span="4">
	<dr-teaser span="4" imagespan="4" model="" />
	<dr-teaser span="4" imagespan="4" model="" />
	</dr-layoutcolumn>
	</dr-layout>

	slayout: 10px 4 / 4 2 2,
	(min-width: 640px) 20px 12 / 6 (+3) 3 (-3) 3;