José M. Pérez JMPerez

ServiceWorkers

	// the cache version gets updated every time there is a new deployment
	const CACHE_VERSION = 10;
	const CURRENT_CACHE = `main-${CACHE_VERSION}`;

	// these are the routes we are going to cache for offline support
	const cacheFiles = ['/', '/about-me/', '/projects/', '/offline/'];

	// on activation we clean up the previously registered service workers
	self.addEventListener('activate', evt =>
	evt.waitUntil(

	const observer = new PerformanceObserver((list) => {
	for (const entry of list.getEntries()) {
	// `name` will be either 'first-paint' or 'first-contentful-paint'.
	const metricName = entry.name;
	const time = Math.round(entry.startTime + entry.duration);

	ga('send', 'event', {
	eventCategory: 'Performance Metrics',
	eventAction: metricName,
	eventValue: time,

	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

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

	<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%">

	now dns add domain.com @ A 104.198.14.52
	now dns add domain.com www CNAME domain.netlify.com

	<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

	<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>