TogetherJS is a free, open source JavaScript library by Mozilla that adds collaboration features and tools to your website. By adding TogetherJS to your site, your users can help each other out on a website in real time! TogetherJS → Introducing TogetherJS → Yes, that looks familiar indeed as it’s the rebranded version of the …
Tag Archives: javascript
Gone In 60fps – Making A Site Jank-Free
To highlight how widespread rendering is a performance bottleneck, we’re going to walk through a detailed case study of Pinterest.com. Learn about common paint issues in modern sites and equally as importantly — how to diagnose them. We’ll also look at changes Pinterest made to get up to a 40% improvement in rendering times. A …
At.js, a github-like autocomplete library
Custom HTML Elements
<template id=”sdtemplate”> <style> p { color: orange; } </style> <p>I’m in Shadow DOM. My markup was stamped from a <template>.</p> </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = document.querySelector(‘#sdtemplate’); this.createShadowRoot().appendChild(t.content.cloneNode(true)); } } }); document.register(‘x-foo-from-template’, {prototype: proto}); </script> Custom Elements allow web developers to define new types of HTML …
Stacksort
5 Minutes With Yeoman
Photoshop Google Maps Tile Cutter Script Update (Again)
Five days after the previous update PS_BRAMUS.GoogleMapsTileCutter — a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps — has been updated again. With this new version one can now choose to place all tiles into one and the same folder (as it was before), or use subfolders …
Continue reading “Photoshop Google Maps Tile Cutter Script Update (Again)”
CHOC — Traceable Programming
Magnific Popup
Image masking using canvas
All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png"> Canvas Masking Demo → Canvas Masking Source →