Skip to content

Instantly share code, notes, and snippets.

View sarahquigley's full-sized avatar
🐙
Adventuring finitely.

Sarah Quigley sarahquigley

🐙
Adventuring finitely.
33 followers · 39 following
View GitHub Profile
@sarahquigley
sarahquigley / shiny-hover.css
Last active November 7, 2020 02:14
CSS Lab: Shiny Gradient Hover Effect 3
/* Where the magic begins: */
.shiny {
background-image: -webkit-linear-gradient(left, white 25%, #fde071 37.5%, #ef9671, #996a6e 62.5%, white 75%);
background-image: linear-gradient(90deg, white 25%, #fde071 37.5%, #ef9671, #996a6e 62.5%, white 75%);
background-position: right center;
background-size: 400% auto;
-webkit-background-clip: text;
background-clip: text;
color: white;
@sarahquigley
sarahquigley / shiny-hover.css
Created June 6, 2018 13:34
CSS Lab: Shiny Gradient Hover Effect 2
/* Where the magic begins: */
.shiny {
background-image: -webkit-linear-gradient(left, white 25%, #fde071 37.5%, #ef9671, #996a6e 62.5%, white 75%);
background-image: linear-gradient(90deg, white 25%, #fde071 37.5%, #ef9671, #996a6e 62.5%, white 75%);
background-position: right center;
background-size: 400% auto;
color: white;
}
@sarahquigley
sarahquigley / shiny-hover.css
Last active June 7, 2018 15:58
CSS Lab: Shiny Gradient Hover Effect 1
/* Just for flavour: */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
html, body {
height: 100%;
margin: 0;
}
body {
@sarahquigley
sarahquigley / object_destructuring_assignment__spread_operator.js
Created May 2, 2018 21:08
Example of ES2018 Object Destructuring Assignment - Spread Operator
/* < ES2018 */
var catMaru = { name: 'Maru', mittens: true, color: 'tabby' };
var name = catMaru.name;
var coat = {};
coat.mittens = catMaru.mittens;
coat.color = catMaru.color;
/* >= ES2018 */
var catMaru = { name: 'Maru', mittens: true, color: 'tabby' };
var { name, ...coat } = catMaru;
@sarahquigley
sarahquigley / object_destructuring_assignment__defaults.js
Created May 2, 2018 21:07
Example of ES6 Object Destructuring Assignment - Defaults
/* ES5 */
var catMaru = { name: 'Maru', mittens: true };
var name = catMaru.name;
var mittens = catMaru.mittens;
var likes = catMaru.likes === undefined ? 'boxes' : catMaru.likes;
/* >= ES6 */
var catMaru = { name: 'Maru', mittens: true };
var { name, mittens, likes = 'boxes' } = catMaru;
@sarahquigley
sarahquigley / object_destructuring_assignment__deeply_nested_objects.js
Created May 2, 2018 21:05
Example of ES6 Object Destructuring Assignment - Deeply Nested Objects
/* ES5 */
var catMaru = {
name: 'Maru',
appearance: {
mittens: true,
coat: 'tabby'
}
};
var name = catMaru.name;
var color = catMaru.appearance.coat;
@sarahquigley
sarahquigley / object_destructuring_assignment.js
Last active May 2, 2018 21:05
Example of ES6 Object Destructuring Assignment
/* ES5 */
var catMaru = { name: 'Maru', mittens: true, likes: 'boxes' };
var name = catMaru.name;
var mittens = catMaru.mittens;
var likes = catMaru.likes;
/* >= ES6 */
var catMaru = { name: 'Maru', mittens: true, likes: 'boxes' };
var { name, mittens, likes } = catMaru;
@sarahquigley
sarahquigley / array_destructuring_assignment__defaults.js
Created May 2, 2018 21:00
Example of ES6 Array Destructuring Assignment - Defaults
/* ES5 */
var cats = [ 'Maru', 'Colonel Meow' ];
var yayCat = cats[0];
var lolCat = cats[2] === undefined ? 'Grumpy Cat' : cats[2];
/* >= ES6 */
var cats = [ 'Maru', 'Colonel Meow' ];
var [ yayCat, , lolCat = 'GrumpyCat' ] = cats;
@sarahquigley
sarahquigley / array_destructuring_assignment.js
Created May 2, 2018 20:59
Example of Es6 Array Destructuring Assignment
/* ES5 */
var cats = [ 'Maru', 'Colonel Meow', 'Grumpy Cat' ];
var yayCat = cats[0], lolCat = cats[2];
var tmpCat = yayCat;
yayCat = lolCat;
lolCat = tmpCat;
/* >= ES6 */
var cats = [ 'Maru', 'Colonel Meow', 'Grumpy Cat' ];
var [ yayCat, , lolCat ] = cats;
@sarahquigley
sarahquigley / rest_parameters__arguments.js
Created May 2, 2018 20:55
Example of ES6 Rest Parameters - Arguments for Variadic Functions
/* ES5 */
var actions = [ 'Slash', 'Hiss', 'Yowl'];
catFight.apply(undefined, actions);
// > 'Slash! Hiss! Yowl!'
/* >= ES6 */
var actions = [ 'Slash', 'Hiss', 'Yowl'];
catFight(...actions);
// > 'Slash! Hiss! Yowl!'