Skip to content

Commit

Permalink
Update map, filter, reduce slides to be less wordy (#36)
Browse files Browse the repository at this point in the history 
- Update Map slides with less wordy slides and emoji example
- Update Filter slides with less wordy slides and emoji example
- Update Reduce slides with less wordy slides and emoji example
- Add ".prettierrc"
  • Loading branch information
Shaun Lloyd authored Sep 4, 2018
1 parent 90bb8e7 commit 45055e7
Show file tree
Hide file tree
Showing 10 changed files with 299 additions and 237 deletions.
9 changes: 9 additions & 0 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"printWidth": 120,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true,
"trailingComma": "all"
}
126 changes: 59 additions & 67 deletions src/slideDecks.js
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,68 @@
// divide slides into modules

import {
FAnatomyParameterSlideSet,
FAnatomyReturnSlideSet,
ArrowSlideSet,
FCallbackSlideset,
FAnatomyPureSlideSet,
FPFilterSlideSet,
FPMapSlideSet,
immutabilitySlideSet,
OrderOfOperationsSlideSet,
PromisesSlideSet,
reactComponentsIntroSlideSet,
functionComponentSlideSet,
classComponentSlideSet,
reactPropsSlideSet,
lifecycleSlideSet,
reactStateSlideSet,
reduxIntroSet,
reduxThunksIntroSet,
} from './slides';
import { ReduceSlideSet } from './slides/functional-programming-reduce';

// FUNCTIONS
const functionsSlideList = [
...FAnatomyParameterSlideSet,
...FAnatomyReturnSlideSet,
...ArrowSlideSet,
...FCallbackSlideset,
...FAnatomyPureSlideSet,
];
FAnatomyParameterSlideSet,
FAnatomyReturnSlideSet,
ArrowSlideSet,
FCallbackSlideset,
FAnatomyPureSlideSet,
FPFilterSlideSet,
FPMapSlideSet,
immutabilitySlideSet,
OrderOfOperationsSlideSet,
PromisesSlideSet,
reactComponentsIntroSlideSet,
functionComponentSlideSet,
classComponentSlideSet,
reactPropsSlideSet,
lifecycleSlideSet,
reactStateSlideSet,
reduxIntroSet,
reduxThunksIntroSet,
} from './slides';
import { ReduceSlideSet } from './slides/functional-programming-reduce';

// FUNCTIONAL PROGRAMMING
const functionalProgrammingSlideList = [
...FPFilterSlideSet,
...FPMapSlideSet,
...ReduceSlideSet,
...immutabilitySlideSet,
];
// FUNCTIONS
const functionsSlideList = [
...FAnatomyParameterSlideSet,
...FAnatomyReturnSlideSet,
...ArrowSlideSet,
...FCallbackSlideset,
...FAnatomyPureSlideSet,
];

// INTERPRETER
const interpreterSlideList = [
...OrderOfOperationsSlideSet,
];
// FUNCTIONAL PROGRAMMING
const functionalProgrammingSlideList = [
...FPMapSlideSet,
...FPFilterSlideSet,
...ReduceSlideSet,
...immutabilitySlideSet,
];

// PROMISES
const promisesSlideList = [
...PromisesSlideSet,
];
// INTERPRETER
const interpreterSlideList = [...OrderOfOperationsSlideSet];

// REACT
const reactSlideList = [
...classComponentSlideSet,
...lifecycleSlideSet,
...reactComponentsIntroSlideSet,
...functionComponentSlideSet,
...reactPropsSlideSet,
...reactStateSlideSet,
];
// PROMISES
const promisesSlideList = [...PromisesSlideSet];

// REDUX
const reduxSlideList = [
...reduxIntroSet,
...reduxThunksIntroSet,
];
// REACT
const reactSlideList = [
...classComponentSlideSet,
...lifecycleSlideSet,
...reactComponentsIntroSlideSet,
...functionComponentSlideSet,
...reactPropsSlideSet,
...reactStateSlideSet,
];

export {
functionsSlideList,
functionalProgrammingSlideList,
interpreterSlideList,
promisesSlideList,
reactSlideList,
reduxSlideList
};

// REDUX
const reduxSlideList = [...reduxIntroSet, ...reduxThunksIntroSet];

export {
functionsSlideList,
functionalProgrammingSlideList,
interpreterSlideList,
promisesSlideList,
reactSlideList,
reduxSlideList,
};
87 changes: 57 additions & 30 deletions src/slides/functional-programming-filter/function-programming-array-filter.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,63 @@
import * as filterCode from "!raw-loader!./functional-programming-filter.example";
import {
BasicCodeSlideMaker,
ListSlideMaker,
ReplClassSignup,
ReplFrameSlide
} from "../../tools";
import { FILTER } from "../../links";
import React from 'react';
import * as filterCode from '!raw-loader!./functional-programming-filter.example';
import { BasicCodeSlideMaker, ReplClassSignup, ReplFrameSlide } from '../../tools';
import { FILTER } from '../../links';
import { Slide, Heading, Text, List, ListItem } from 'spectacle';

const Slide1 = ListSlideMaker("Array Filter", [
"Iterates through a list of items in an array and applies a provided function to each item to determine whether to put the result into the new array",
"The .filter() method can be called on any array",
"The .filter() method expects a function 'callback'",
"This function is fired for each item in the array - if there are three items, the function will run three times",
"Each time the function is run, it is passed the current array item as the first parameter"
]);
export class Slide1 extends React.Component {
render() {
return (
<Slide bgColor="primary" transition={['slide']} {...this.props}>
<Heading textSize="75" textColor="secondary">
Filter
</Heading>
<Text textColor="secondary" textSize="42">
To <strong>remove</strong> unwanted data
</Text>
</Slide>
);
}
}

const Slide2 = ListSlideMaker("Array Filter", [
"The callback function should return a 'truthy' or 'falsy' value",
"If the function returns a truthy value, the current item will be added to the result array. If not, it will be ignored.",
"Filter will always return a new array that is the same length or shorter than the original",
"The original list will -not- be changed or mutated"
]);
export class Slide2 extends React.Component {
render() {
return (
<Slide bgColor="primary" transition={['slide']} {...this.props}>
<Heading textSize="75" textColor="secondary">
Array.filter()
</Heading>
<Text textColor="secondary" textSize="42">
[
<span role="img" aria-label="Array with a popcorn emoji, burger emoji, and fried egg emoji">
🍿, 🍔, 🍳
</span>
].filter(isVegetarian) => [
<span role="img" aria-label="Array with a popcorn emoji and fried egg emoji">
🍿, 🍳
</span>
]
</Text>
<List>
<ListItem textSize="32" margin="0 0 1.5rem 0">
Takes a filter function
</ListItem>
<ListItem textSize="32" margin="0 0 1.5rem 0">
Does not change the given array
</ListItem>
<ListItem textSize="32" margin="0 0 1.5rem 0">
Returns a new array
</ListItem>
<ListItem textSize="32" margin="0 0 1.5rem 0">
New array values are the values of the original array that passed the test of the filter function
</ListItem>
</List>
</Slide>
);
}
}

const Slide4 = ReplClassSignup("Array Filter", FILTER.invite);
const Slide4 = ReplClassSignup('Array Filter', FILTER.invite);
const Slide5 = ReplFrameSlide(FILTER.exercise1);
const Slide6 = ReplFrameSlide(FILTER.exercise2);

export const FPFilterSlideSet = [
Slide1,
Slide2,
BasicCodeSlideMaker(filterCode),
Slide4,
Slide5,
Slide6
];
export const FPFilterSlideSet = [Slide1, Slide2, BasicCodeSlideMaker(filterCode), Slide4, Slide5, Slide6];
13 changes: 3 additions & 10 deletions src/slides/functional-programming-filter/functional-programming-filter.example.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
const listOfNumbers = [3, 1, 6, 2, 9];

// the callback function passed into filter expects the first argument to
// represent the current value being iterated over in the array.
// ex. the function fires 5 times in this case and the first time it fires
// num is equal to 3, the second time, it's equal to 1
const lessThan5 = listOfNumbers.filter(function(num){
return num < 5;
});

// or with an arrow function
const lessThan5 = listOfNumbers.filter(num => num < 5);
// Fitlers listOfNumbers array for number less than 5
// Returns a new array [3, 1, 2]
const numberLessThanFive = listOfNumbers.filter(num => num < 5);
85 changes: 57 additions & 28 deletions src/slides/functional-programming-map/function-programming-array-map.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,63 @@
import * as mapCode from "!raw-loader!./functional-programming-map.example";
import {
BasicCodeSlideMaker,
ListSlideMaker,
ReplClassSignup,
ReplFrameSlide
} from "../../tools";
import { MAP } from "../../links";
import React from 'react';
import * as mapCode from '!raw-loader!./functional-programming-map.example';
import { BasicCodeSlideMaker, ReplClassSignup, ReplFrameSlide } from '../../tools';
import { MAP } from '../../links';
import { Slide, Heading, List, ListItem, Text } from 'spectacle';

const Slide1 = ListSlideMaker("Array Map", [
"Iterates through a list of items in an array and applies a provided function to each item before putting the result into a new array",
"The .map() method expects a function 'callback'",
"This function is fired for each item in the array - if there are three items, the function will run three times",
"Each time the function is run, it is passed the current array item as the first parameter"
]);
export class Slide1 extends React.Component {
render() {
return (
<Slide bgColor="primary" transition={['slide']} {...this.props}>
<Heading textSize="75" textColor="secondary">
Map
</Heading>
<Text textColor="secondary" textSize="42">
To <strong>transform</strong> a value from one value to another
</Text>
</Slide>
);
}
}

const Slide2 = ListSlideMaker("Array Map", [
"The result of the callback function will be added to the new array at the same index as the input from the original",
"Map will always return a new array that is the same length of the original",
"The original list will -not- be changed or mutated"
]);
export class Slide2 extends React.Component {
render() {
return (
<Slide bgColor="primary" transition={['slide']} {...this.props}>
<Heading textSize="75" textColor="secondary">
Array.map()
</Heading>
<Text textColor="secondary" textSize="42">
[
<span role="img" aria-label="Array with a corn emoji, cow emoji, and chicken emoji">
🌽, 🐮, 🐔
</span>
].map(cook) => [
<span role="img" aria-label="Array with a popcorn emoji, burger emoji, and fried egg emoji">
🍿, 🍔, 🍳
</span>
]
</Text>
<List>
<ListItem textSize="32" margin="0 0 1.5rem 0">
Takes a transform function
</ListItem>
<ListItem textSize="32" margin="0 0 1.5rem 0">
Does not change the given array
</ListItem>
<ListItem textSize="32" margin="0 0 1.5rem 0">
Returns a new array
</ListItem>
<ListItem textSize="32" margin="0 0 1.5rem 0">
New array values are the values of the original array after applying the transform
</ListItem>
</List>
</Slide>
);
}
}

const Slide3 = ReplClassSignup("Array Map", MAP.invite);
const Slide3 = ReplClassSignup('Array Map', MAP.invite);
const Slide4 = ReplFrameSlide(MAP.exercise1);
const Slide5 = ReplFrameSlide(MAP.exercise2);

export const FPMapSlideSet = [
Slide1,
Slide2,
BasicCodeSlideMaker(mapCode),
Slide3,
Slide4,
Slide5
];
export const FPMapSlideSet = [Slide1, Slide2, BasicCodeSlideMaker(mapCode), Slide3, Slide4, Slide5];
2 changes: 1 addition & 1 deletion src/slides/functional-programming-map/functional-programming-map.example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@ const listOfNumbers = [1, 2, 3, 4, 5];

// this results in the array [2, 4, 6, 8, 10] - and this does NOT effect the original
// listOfNumbers is still [1, 2, 3, 4, 5]
const addIndexToNumber = listOfNumbers.map(num => num * 2);
const doubleNumbers = listOfNumbers.map(num => num * 2);
Loading

0 comments on commit 45055e7

Please sign in to comment.