Skip to content

Instantly share code, notes, and snippets.

View andyearnshaw's full-sized avatar

Andy Earnshaw andyearnshaw

  • Anaplan
  • York, United Kingdom
View GitHub Profile
@andyearnshaw
andyearnshaw / focusClosestElement.js
Last active December 16, 2015 20:39
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?
/**
* 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
@andyearnshaw
andyearnshaw / Date#diff.js
Created May 2, 2013 14:19
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.
/**
* 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 / ps1.sh
Created May 3, 2013 08:39
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.
#!/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 / README.md
Created April 26, 2014 23:32
Simple KeyboardEvent.key polyfill

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 / README.md
Created April 30, 2015 12:14
URLSearchParams.js

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
Last active April 12, 2024 09:39
css-proposal-virtual-scrolling

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