Skip to content

Instantly share code, notes, and snippets.

Ben Frain benfrain

Block or report user

Report or block benfrain

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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 27, 2019
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" }
]
@benfrain
benfrain / postCSS-logic.js
Created Apr 23, 2015
Example of PostCSS adding rules/logic seperation
View postCSS-logic.js
// Define a name for the 'plugin' (this could live in a seperate file to Gulp)
var dataHeading = corepostcss.plugin('data-heading', function () {
return function (css) {
// Start your loop JS style
for (var i = 1; i < 20; i++) {
// Then just specify the selector and properties using the iteration where needed
var rule = corepostcss.rule({selector: '[data-position="' + i + '"] a:nth-child(' + i + ')'});
rule.append(corepostcss.decl({prop: 'border-color', value: '#f90'}));
rule.append(corepostcss.decl({prop: 'color', value: '#555'}));
rule.append(corepostcss.decl({prop: 'background-color', value: '#fafafa'}));
View pseudo-elements.md

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@benfrain
benfrain / cat-colors.json
Created Feb 20, 2015
PostCSS basic setup and test with Gulp
View cat-colors.json
{
"colorList": {
"c1" : ["#000000", "#000011"],
"c2" : ["#000011", "#000022"],
"c3" : ["#000022", "#000033"],
"c4" : ["#000033", "#000044"],
"c7" : ["#000044", "#000055"],
"c8" : ["#000055", "#000066"],
"c9" : ["#000066", "#000077"],
"c10" : ["#000077", "#000088"]
@benfrain
benfrain / inject-css.js
Created Jan 15, 2015
Inject CSS with JavaScript
View inject-css.js
function loadCSS(filename){
var file = document.createElement("link");
file.setAttribute("rel", "stylesheet");
file.setAttribute("href", filename);
if (typeof file !== "undefined") {
document.getElementsByTagName("head")[0].appendChild(file);
}
}
You can’t perform that action at this time.