Fixed-sticky: a CSS position:sticky; polyfill

CSS position: sticky; is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6. In Chrome it is locked behind a chrome://flags setting. Fixed-sticky is a polyfill to enabling this in browsers that don’t support it yet. position: sticky; is one very handy addition to …

Building an HTML5 Text Editor with the FileSystem APIs

// Save a file in the FileSystem. function saveFile(filename, content) { filesystem.root.getFile(filename, {create: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { // Update the file browser. listFiles(); // Clean out the form field. filenameInput.value = ”; contentTextArea.value = ”; // Show a saved message. messageBox.innerHTML = ‘File saved!’; }; fileWriter.onerror = function(e) { console.log(‘Write …

TogetherJS

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 …

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 …

Custom HTML Elements

<template id=”sdtemplate”> <style> p { color: orange; } </style> <p>I’m in Shadow DOM. My markup was stamped from a &lt;template&gt;.</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 …

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 …