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 / quora-js-progressive-image-loading.js
Created March 5, 2017 18:57
// 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)
@JMPerez
JMPerez / quora-html-progressive-image-loading.html
Created March 5, 2017 18:56
<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). -->
@JMPerez
JMPerez / quartz-progressive-image-loading.html
Last active March 5, 2017 18:55
<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
@JMPerez
JMPerez / mediarecorder-api-screenflow-record.js
Created December 17, 2016 14:45
Creating a media stream with the combination of camera and window
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);
@JMPerez
JMPerez / mediarecorder-api-screenflow-permission.js
Created December 17, 2016 14:43
Asking for permission to get access to window recording and camera
// we ask for permission to record the window
// mediaSource could also be 'screen' if we wanted
// to record the entire screen
const getStreamForWindow = () => navigator.mediaDevices.getUserMedia({
video: {
mediaSource: 'window'
}
});
// we ask for permission to record the audio and video from the camera
const getStreamForCamera = () => navigator.mediaDevices.getUserMedia({
@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 / universal-data-fetching-iso-http.js
Created July 16, 2016 19:09
Using the "browser" property in package.json (iso-http)
{
"name": "iso-http",
...
"main": "js/node/Http.js",
"browser": "js/browser/Http.js",
...
}
@JMPerez
JMPerez / universal-data-fetching-superagent.js
Created July 16, 2016 19:08
Using the "browser" property in package.json (superagent)
{
"name": "superagent",
...
"browser": {
"./lib/node/index.js": "./lib/client.js",
...
},
...
"main": "./lib/node/index.js",
...
@JMPerez
JMPerez / index-1.html
Created March 8, 2016 16:36
<html>
<body>
Here is my SPB
<iframe src="https://open.jperez.cloud.spotify.net/embed/track/0TTGOEUDTC9oNsVZrpOk7s"></iframe>
</body>
</html>
@JMPerez
JMPerez / test.html
Created January 28, 2016 10:26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Coldplay on Spotify</title>
<meta http-equiv="X-UA-Compatible" content="IE=9">