José M. Pérez JMPerez

ServiceWorkers

	getStreamForCamera().then(streamCamera => {
	// we know have access to the camera, let's append it to the DOM
	appendCamera(streamCamera);
	getStreamForWindow().then(streamWindow => {
	// we now have access to the screen too
	// we generate a combined stream with the video from the
	// screen and the audio from the camera
	var finalStream = new MediaStream();
	const videoTrack = streamWindow.getVideoTracks()[0];
	finalStream.addTrack(videoTrack);

	<figure class="progressive-image featured-image size-extra-large">
	<!-- a picture element with intrinsic ratio -->
	<picture style="padding-bottom: 56.1875%; background-image: url(https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50);">
	<!-- the small image that will be blurred -->
	<img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50" class="progressive-image-thumbnail">
	<!-- a lazy responsive image with data-srcset -->
	<img
	itemprop="image"
	data-srcset="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320 320w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=640 640w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=940 940w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=1600 1600w, https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=3200 3200w"
	data-src="https://qzprod.files.wordpres

	<div class="qtext_image_wrapper">
	<!-- a canvas with a data-uri containing the thumbnail -->
	<!-- which is in PNG format and very small (in this page 6x10 px) -->
	<canvas class="qtext_image_placeholder portrait qtext_image zoomable_in zoomable_in_feed"
	width="499"
	height="874"
	data-src="data:image/PNG;base64,UklGRmgAAABXRUJQVlA4IFwAAADwAQCdASoGAAoAAUAmJYgCdEf/g…iD0z/yA/5ipcuk5xHSdrS38j8CkH7s+vKeZu9EwRy0f/KPIlo/+UifdfcpiRcJiRnXXAAAAA==">
	</canvas>
	<!-- a lazy image with src set as data-src and master_src -->
	<!-- data-src is a webp image (at least when requested using Chrome). -->

	// draw the data-uri image on the canvas
	function a(e) {
	if (e.getAttribute("data-src")) {
	var t = new Image;
	t.src = e.getAttribute("data-src");
	var i = e.getAttribute("width")
	, n = e.getAttribute("height")
	, o = e.getContext("2d");
	t.addEventListener("load", function() {
	o.drawImage(t, 0, 0, i, n)

	<figure>
	<div>
	<div/> <!-- this div keeps the aspect ratio so the placeholder doesn't collapse -->
	<img/> <!-- this is a tiny image with a resolution of e.g. ~27x17 and low quality -->
	<canvas/> <!-- takes the above image and applies a blur filter -->
	<img/> <!-- the large image to be displayed -->
	<noscript/> <!-- fallback for no JS -->
	</div>
	</figure>

	<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
	<div class="aspectRatioPlaceholder is-locked">
	<div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
	<div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
	<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
	<canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
	<img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1sg-uLNm73whmdOgKlrQdZA.jpeg">
	<noscript class="js-progressiveMedia-inner">&l

	<div class="hero image">
	<!-- the lazy loaded image -->
	<!-- thumb-src is a matrix of DCT coefficients -->
	<!-- note that a background-color is also set so -->
	<!-- it is rendered while the image is fetched -->
	<div thumb-lazy
	original-src="/images/graphical-web-2016.jpg"
	thumb-src="/images/graphical-web-2016-thumb.png"
	thumb-width="2880" thumb-height="1800"
	style="background-color:#121513;width:100%">

	<html>
	<body>
	<script src="https://spotify-player.herokuapp.com/spotify-player.js"></script>
	<script>
	var spotifyPlayer = new SpotifyPlayer();

	spotifyPlayer.on('update', response => {
	// render the track received
	});

	var observer = new PerformanceObserver(function(list) {
	var perfEntries = list.getEntries();
	for (var i = 0; i < perfEntries.length; i++) {
	// Process entries
	// report back for analytics and monitoring
	// ...
	}
	});

	// register observer for long task notifications