andyearnshaw

Abstract

Virtual Scrolling is a technique employed by web developers to achieve efficient rendering of components containing large datasets, without creating many thousands or millions of elements that the browser must render and keep in memory. It can also be used to scroll an element which is otherwise unscrollable, because it cannot be overflowed by children in its normal state.

Use cases

• HTML canvas element scrolling. Canvases have no overflow, so you either have to have a very big canvas that

andyearnshaw

Compatibility implementation of URLSearchParams, which is only supported in Firefox at the time of writing.

Notes

• When stringified, will group keys together instead of returning them in their original order. Values will remain in the right order, however.
• Aimed at ES5+ environments, e.g. not IE 8. Untested with polyfills.
• A private property is exposed in browsers that don't support Symbol. Don't use it unless you want unpredictable behaviour across browsers.

andyearnshaw

Recently, I've been working on a Smart TV application targeted at both LG and Samsung models. I had problems keeping the main code platform independent because the key codes on events generated by the remote controls differed between the vendors. While LG's remote control keys generated fairly sane codes, Samsung's didn't, with the codes for numeric keys seeming completely random (for example, the numeric key 1 has the key code 101, but 5 has 9).

I eventually decided to polyfill KeyboardEvent.key, and allow passing a map to the polyfill so that the platform-dependent code could define their own keysets.

The property exposes itself on both the KeyEvent (non-standard) and KeyboardEvent (standard) objects and is ideal for use in specific, targeted environments.

andyearnshaw

#!/bin/bash

soft_sep='';
hard_sep='';

reset='\[\033[0m\]';
txt='\[\033[38;5;252m\]';
txt_prf='\[\033[38;5;252m\]';
user_bg='\[\033[48;5;31m\]';
root_bg='\[\033[48;5;31m\]';

andyearnshaw

/**
 * Returns an object with properties representing the number of years, months, days, hours, minutes
 * and seconds between the `this` date and a passed date or Date.now
 */
Object.defineProperty(Date.prototype, 'diff', {
    writable: true,
    configurable: true,
    value: function (/*[ instanceof Date || instanceof Number ]*/) {
        var diff = new Date(),
            op   = arguments[0] == null ? new Date() : new Date(arguments[0]),

andyearnshaw

/**
 * focusClosestElement():  finds next closest focusable element in a given direction
 * @param dir:  0 = left, 1 = up, 2 = right, 3 = down
 */
function focusClosestElement(dir) {
    var
        // The increment for our radial distance
        space   = 25,

        // Sometimes the topmost element may not be focusable, but traversing all the way up to