Skip to content

Instantly share code, notes, and snippets.

Avatar

Andy Earnshaw andyearnshaw

  • Anaplan
  • York, United Kingdom
View GitHub Profile
@andyearnshaw
andyearnshaw / README.md
Last active Feb 4, 2020
css-proposal-virtual-scrolling
View README.md

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
andyearnshaw / README.md
Created Apr 30, 2015
URLSearchParams.js
View README.md

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
andyearnshaw / README.md
Created Apr 26, 2014
Simple KeyboardEvent.key polyfill
View README.md

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
andyearnshaw / ps1.sh
Created May 3, 2013
Powerline-style PS1 written in pure Bash. Requires the Powerline-patched fonts. Why not just use Powerline, you ask? Well, I was using it on my NAS and it takes around 1500ms for the prompt to appear when the system is idle, but when doing something like compiling, it can take 5-15 seconds.
View ps1.sh
#!/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
andyearnshaw / Date#diff.js
Created May 2, 2013
Simple date diff in JavaScript. The ones I found out there were using division and modulus and would not represent 28 days between Feb and March as 1 month. None of them took into account daylight savings either.
View Date#diff.js
/**
* 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
andyearnshaw / focusClosestElement.js
Last active Dec 16, 2015
This snippet allows you to find a focusable element in a given direction from the currently active one. I wrote this because I'm currently working on an application for LG Smart TVs and, when you have only a TV remote, how else do you select focusable elements in a web page?
View focusClosestElement.js
/**
* 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