Skip to content

Instantly share code, notes, and snippets.

View JMPerez's full-sized avatar

José M. Pérez JMPerez

1k followers · 138 following
View GitHub Profile
@JMPerez
JMPerez / service-worker.js
Created October 27, 2018 20:21
An example of a service worker for serving network first, cache second
// 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(
@JMPerez
JMPerez / performance-observer-ga.js
Created June 17, 2017 08:24
An example of Performance Observer reporting data to Google Analytics
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,
@JMPerez
JMPerez / netlify-zeit-domain.txt
Created May 1, 2019 05:28
Setting up DNS for Netlify to work on a Zeit domain
now dns add domain.com @ A 104.198.14.52
now dns add domain.com www CNAME domain.netlify.com
@JMPerez
JMPerez / directions-map.js
Last active September 24, 2019 23:17
HTML5 geoposition + Google Geocoder as a fallback, used to show directions from user's current position to a given destination. See http://jmperezperez.com/google-maps-geolocation-directions-specific-destination/
(function() {
'use strict';
var map, //the google map
directionsService, //service that provides directions to reach our destination
directionsDisplay, //renderer that draws directions on map
destinationName = 'Ventorro del Cano, Madrid'; //our destination. Set yours!
// providers
var html5Provider = function() {
return {
@JMPerez
JMPerez / cfp.md
Created February 4, 2018 11:14
Resources and listings for Call For Papers / Proposals
@JMPerez
JMPerez / performance-observer.js
Created June 17, 2017 08:21
Performance Observer example
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
@JMPerez
JMPerez / resources.md
Created May 31, 2017 07:15
WeCodeSign
@JMPerez
JMPerez / spotify-player.html
Created April 21, 2017 21:07
An example of how to use the spotify-player wrapper
<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
});
@JMPerez
JMPerez / universal-deep-linking.html
Last active April 10, 2017 07:27
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
a {
display: block;
padding: 1em;
}
</style>
</head>
@JMPerez
JMPerez / clicktorelease-html-progressive-loading-image.html
Created March 22, 2017 06:20
<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%">