dom-to-image is a library which can turn an arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image, written in JavaScript.
1 2 3 4 5 6 7 8 9 10 11 |
var node = document.getElementById('my-node'); domtoimage.toPng(node) .then(function (dataUrl) { var img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch(function (error) { console.error('oops, something went wrong!', error); }); |
More uptodate and faster than html2canvas, which I used before in a couple of projects.
With Chrome 56, web apps can now communicate with nearby Bluetooth Low Energy devices using the Web Bluetooth API, position sticky is back – making it easy to create elements that scroll normally until sticking to the top of the viewport. And HTML5 by Default is enabled for all users.
Chrome 56 on iOS also adds the ability to scan QR codes directly within Chrome. So many thought QR-Codes were dead, well not so much !
Rocket.Chat is am impressive Open Source Web Chat Platform, with a huge amount of features:
Canvas based dial that adds mouse click, wheel mouse, keyboard and finger / touch events.
Really nice :)
Paw is a full-featured HTTP client that lets you test the APIs you build or consume. It has a beautiful native OS X interface to compose requests, inspect server responses and generate client code out-of-the-box.
This is one of my go-to tools, when test-driving my API endpoints.
Flatdoc is a small JavaScript file that fetches Markdown files and renders them as full pages. Essentially, it’s the easiest way to make open source documentation from Readme files.
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.
1 2 3 4 5 6 7 |
$("#sticky_item").stick_in_parent() .on("sticky_kit:stick", function(e) { console.log("has stuck!", e.target); }) .on("sticky_kit:unstick", function(e) { console.log("has unstuck!", e.target); }); |
onmount allows you to detect when a DOM element appears and when it exits. No dependencies!
1 2 3 4 5 6 7 |
onmount = require('onmount') onmount('.push-button', function () { $(this).on('click', function () { alert('working...') }) }) |