José M. Pérez JMPerez

## netlify-zeit-domain.txt
now dns add domain.com @ A 104.198.14.52
now dns add domain.com www CNAME domain.netlify.com

## service-worker.js
// 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(

## cfp.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                JMPerez
                / cfp.md
            
            
              Created
              February 4, 2018 11:14
            
              
                Resources and listings for Call For Papers / Proposals
              
          
http://lanyrd.com/calls/ | http://lanyrd.com/topics/javascript/calls/
https://www.papercall.io/events
https://github.com/softwaremill/it-cfp-list
https://github.com/matteofigus/awesome-speaking
https://www.cfplist.com/


## performance-observer-ga.js
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,

## performance-observer.js
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

## resources.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                JMPerez
                / resources.md
            
            
              Created
              May 31, 2017 07:15
            
              
                WeCodeSign
              
          
    ServiceWorkers


The Offline Cookbook
Mozilla's ServiceWorker Cookbook

Progressive Web Apps


Progressive Web Apps: Great Experiences Everywhere (Google I/O '17)

Futuro de la Web


Growing Up, Getting Serious – Peter Gasston | Render 2017


## spotify-player.html
<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
  });

## clicktorelease-html-progressive-loading-image.html
<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%">

## medium-example-progressive-image-loading.html
<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/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&l

## medium-skeleton-progressive-image-loading.html
<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>
	now dns add domain.com @ A 104.198.14.52
	now dns add domain.com www CNAME domain.netlify.com
	// 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%">
	<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>