Skip to content

Instantly share code, notes, and snippets.

@HZ-labs
HZ-labs / index.js
Created September 17, 2017 17:52 — forked from shospodarets/Chrome headless Puppeteer- capture DOM element screenshot using
Capture DOM element screenshot using Chrome headless
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Adjustments particular to this page to ensure we hit desktop breakpoint.
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});
await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});
@HZ-labs
HZ-labs / L.CanvasOverlay.js
Created May 23, 2016 18:06 — forked from Sumbera/L.CanvasOverlay.js
Leaflet Canvas Overlay
/*
Generic Canvas Overlay for leaflet,
Stanislav Sumbera, April , 2014
- added userDrawFunc that is called when Canvas need to be redrawn
- added few useful params fro userDrawFunc callback
- fixed resize map bug
inspired & portions taken from : https://github.com/Leaflet/Leaflet.heat
License: MIT
@HZ-labs
HZ-labs / app.coffee
Created May 13, 2016 09:00 — forked from lancejpollard/app.coffee
head.js, coffeescript, coffeekup
# https://gist.github.com/835458
head.js(
"/javascripts/vendor/plugins/coffeekup.js",
"/javascripts/vendor/plugins/jquery.js",
"/javascripts/vendor/plugins/underscore.js",
"/javascripts/vendor/plugins/backbone.js",
"/javascripts/app/deals.js"
)
html_head = ->
@HZ-labs
HZ-labs / index.html
Created February 1, 2016 10:20 — forked from anonymous/index.html
JS Bin // source http://jsbin.com/dixifab
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
html {
font: 14px Helvetica, sans-serif;
background: black;
color: white;
@HZ-labs
HZ-labs / app.js file
Last active August 29, 2015 14:27 — forked from saniko/app.js file
a very simple bootstrap boilerplate for building backbone.marionette based on require.js
define([
'jquery',
'underscore',
'backbone',
'marionette',
'handlebars',
'text!templates/app_view.html',
'modules/mainMenuView/mainMenuView',
/* Original is in LESS and can be found here: https://gist.github.com/gefangenimnetz/3ef3e18364edf105c5af */
@mixin material-shadow($level:1){
@if $level == 1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
@else if $level == 2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
@HZ-labs
HZ-labs / cl.js
Last active August 29, 2015 14:11 — forked from azproduction/cl.js
console.log($LINE$);
// LINE = lineNumber()
@HZ-labs
HZ-labs / dabblet.css
Created September 11, 2014 18:04 — forked from LeaVerou/dabblet.css
Pounding heart animation
/* Pounding heart animation */
@keyframes pound {
to { transform: scale(1.4); }
}
.heart {
display: inline-block;
font-size: 150px;
color: #e00;

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

  • Create new instance of ImageEnhancer
  • Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
    • We set the width & height HTML attributes of the image to the required size
    • We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
    • We then set a class of image-replace onto each newly created transparent image
  • We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe