Skip to content

Instantly share code, notes, and snippets.

Avatar

Ben Frain benfrain

View GitHub Profile
@benfrain
benfrain / wrap.ts
Last active Sep 10, 2018
Finds numbers and currency codes and wraps them in an element
View wrap.ts
/**
*
* @param inputString a string of text that may or may not include numbers and a currency unit
* @returns a string of text where a number followed by a currency unit is wrapped in spans for styling
*/
function wrapUnits(inputString: string) {
let regNum = new RegExp("([0-9]+)", "gm");
let regUnit = new RegExp("(GBP|EUR)", "gm");
// It needs to match the currency unit or we are not interested
if (inputString.match(regUnit)) {
@benfrain
benfrain / ISO-639-1-language.json
Created Apr 16, 2018 — forked from jrnk/ISO-639-1-language.json
ISO 639-1 Alpha-2 codes of languages JSON
View ISO-639-1-language.json
[
{
"code": "ab",
"name": "Abkhaz"
},
{
"code": "aa",
"name": "Afar"
},
{
@benfrain
benfrain / rand.js
Created Jan 30, 2018
Random Array Picker
View rand.js
// Feed it an array and it will return you one entry from the array
function rand(array) {
return array[Math.floor(Math.random() * array.length)];
}
// Example
var sausages = [
"Lincolnshire",
"Cumberland",
"Manchester",
@benfrain
benfrain / getClosest.js
Created Jan 12, 2018
Get Closest Selector from clicked item (starts on target and works up the tree)
View getClosest.js
// Adapted from https://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
/**
* Get the closest matching element up the DOM tree.
* @private
* @param {Element} elem Starting element
* @param {String} selector Selector to match against
* @return {Boolean|Element} Returns null if not match found
*/
var getClosest = function(elem, selector) {
// Get closest match
@benfrain
benfrain / Array.move.js
Created Oct 20, 2017
JavaScript Array move
View Array.move.js
// Append a move method to the Array prototype
Array.prototype.move = function(from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
return this;
};
// Start with an existing array
var orig = ["Sam", "Tom", "Ben", "Sophie"];
// Use the new method to move the last item in the array to the first position
@benfrain
benfrain / CSS-svg-with-fallback.css
Last active Apr 28, 2017
CSS SVG background and fallback including background size and positioning
View CSS-svg-with-fallback.css
/*I've seen a bunch of these around the net (e.g. http://pauginer.com/post/36614680636/invisible-gradient-technique and https://css-tricks.com/a-complete-guide-to-svg-fallbacks/) but they all lacked dealing with positioning of allowed two images to show (the first example).*/
.thing {
/* Setting source, position, size and no-repeat as per https://developer.mozilla.org/en/docs/Web/CSS/background */
background: url("../images/Account.png") center left / 22px auto no-repeat;
/* If you understand linear-gradients you will understand SVG too */
background: linear-gradient(transparent, transparent), url("../images/Account.svg") center left / 22px auto no-repeat;
}
/*However, old Android doesn't like size values in the shorthand (source: http://caniuse.com/#search=background-image) so instead we need to do this:*/
@benfrain
benfrain / .stylelintrc
Last active May 26, 2020
Latest Stylelint config for v7.9.0 (Work In Progress)
View .stylelintrc
{
"rules": {
"color-hex-length": "long",
"color-named": "never",
"color-no-invalid-hex": true,
"font-weight-notation": "numeric",
"function-linear-gradient-no-nonstandard-direction": true,
"function-name-case": "lower",
"function-url-scheme-blacklist": ["data:"],
"string-no-newline": true,
@benfrain
benfrain / fizzbuzz.js
Created Sep 4, 2015
FizzBuzz my arse!
View fizzbuzz.js
//“Write a program that uses console.log to print all the numbers from 1 to 100, with two exceptions. For numbers divisible by 3, print "Fizz" instead of the number, and for numbers divisible by 5 (and not 3), print "Buzz" instead.
//When you have that working, modify your program to print "FizzBuzz", for numbers that are divisible by both 3 and 5 (and still print "Fizz" or "Buzz" for numbers divisible by only one of those).”
for (var number = 1; number <= 100; number ++) {
if ((number % 3 === 0) && (number % 5 !== 0)) {
console.log("Fizz");
}
else if ((number % 5 === 0) && (number % 3 !== 0)) {
@benfrain
benfrain / mq-js.js
Created Jun 11, 2015
Linking JS and CSS for media queries
View mq-js.js
// @media all and (min-width: 45em) {
// body:after {
// content: 'Splus';
// display: none;
// }
// }
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size.indexOf("Splus") !=-1) {
View keybindings.json
// Place your key bindings in this file to overwrite the defaults
[
{ "key": "cmd+down", "command": "cursorBottom",
"when": "editorTextFocus" },
{ "key": "cmd+up", "command": "cursorTop",
"when": "editorTextFocus" },
{ "key": "cmd+t", "command": "workbench.action.tasks.terminate"},
{ "key": "cmd+r", "command": "workbench.action.tasks.runTask" }
]
You can’t perform that action at this time.