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 / rest_parameters.js
Created May 2, 2018 20:53
Example of ES6 Rest Parameters
/* ES5 */
function catFight (action) {
var moreActions = Array.prototype.slice.call(arguments, 1);
return action + '! ' + moreActions.join('! ') + '!';
}
catFight('Slash', 'Hiss', 'Yowl');
// > 'Slash! Hiss! Yowl!'
/* >= ES6 */
function catFight (action, ...moreActions) {
return action + '! ' + moreActions.join('! ') + '!';
@sarahquigley
sarahquigley / spread_operator__copying_object_properties.js
Created May 2, 2018 20:51
Example of ES2018 Spread Operator - Copying Object Properties
/* < ES2018 */
var coat = { color: 'tabby', mittens: true };
var catMaru = Object.assign({ name: 'Maru', likes: 'boxes'}, coat);
// > { name: 'Maru', likes: 'boxes', color: 'tabby', mittens: true }
/* >= ES2018 */
var coat = { color: 'tabby', mittens: true };
var catMaru = { name: 'Maru', likes: 'boxes', ...coat };
// > { name: 'Maru', likes: 'boxes', color: 'tabby', mittens: true }
@sarahquigley
sarahquigley / spread_operator__string_splitting.js
Created May 2, 2018 20:45
Example of ES6 Spread Operator - String Splitting
/* ES5 */
var lol = "cats";
var chars = lol.split("");
// > [ "c", "a", "t", "s" ]
/* >= ES6 */
var lol = "cats";
var chars = [ ...cats ];
// > [ "c", "a", "t", "s" ]
@sarahquigley
sarahquigley / spread_operator.js
Created May 2, 2018 20:42
Example of ES6 Spread Operator
/* ES5 */
var cats = [ 'Maru', 'Colonel Meow', 'Grumpy Cat' ];
var moreCats = [ 'Shironeko', 'Zarathustra'].concat(cats);
// > [ 'Shironeko', 'Zarathustra', 'Maru', 'Colonel Meow', 'Grumpy Cat' ]
/* >= ES6 */
var cats = [ 'Maru', 'Colonel Meow', 'Grumpy Cat' ];
var moreCats = [ 'Shironeko', 'Zarathustra', ...cats ];
// > [ 'Shironeko', 'Zarathustra', 'Maru', 'Colonel Meow', 'Grumpy Cat' ]
@sarahquigley
sarahquigley / default_function_parameters.js
Created May 2, 2018 20:39
Example of ES6 Default Function Parameters
/* ES5 */
function dogExplainsCats (behaviour, reason) {
if (reason === undefined) {
reason = 'evil';
}
return 'Why cats ' + behaviour + '? Because cats ' + reason + '.';
}
dogExplainsCats('poke you in face when sleeping');
// > 'Why cats poke you in face when sleeping? Because cats evil.'
@sarahquigley
sarahquigley / multiline_strings.js
Created May 2, 2018 20:27
Example of ES6 Multiline Strings
/* ES5 */
var message = 'The internet is for cat videos.\n' +
'A chorus of cats meows from every screen!\n' +
'The cuteness is overwhelming.';
/* >= ES6 */
var message = `The internet is for cat videos.
A chorus of cats meows from every screen!
The cuteness is overwhelming.`;
@sarahquigley
sarahquigley / string_interpolation.js
Last active May 2, 2018 20:23
Example of ES6 String Interpolation
/* ES5 */
var purpose = 'cat videos';
var message = 'The internet is for ' + purpose + '.';
/* >= ES6 */
var purpose = 'cat videos';
var message = `The internet is for #{purpose}.`;
@sarahquigley
sarahquigley / for_loops.html
Last active March 22, 2016 01:22
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<title>ScriptEd WCHS + For Loops - 3/22/16</title>
<style>
div { padding: 1em; }
#vader-example { background-color: yellow; }
@sarahquigley
sarahquigley / index.html
Created January 7, 2016 04:39
BB-8 is great
<html>
<head>
<title>BB-8 is great</title>
<style>
body{
background: black;
color: white;
width: 700px;
margin: auto;
}
@sarahquigley
sarahquigley / dividclass.html
Created January 4, 2016 21:25
HTML & CSS: div tags, ids and classes
<html>
<head>
<title>HTML & CSS: div tags, ids and classes</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Add ids to these paragraphs so that the first has a green background and the second has a red background. -->
<!-- HINT: look at the stylesheet to figure out what the correct ids to add are -->
<p>I should have a green background!</p>
<p>I should have a red background!</p>