solo, paired, solo mini, group, solo tic tac toe rock paper scissors 1-2 weeks in duration feedback is expected to be implemented in your next project post your problems in the cohort channel first, then to ALL instructors you can post in the "problems" channel or in other cohort's channels student support fellows (tutors) Taryn + Jeremiah instructors as a last resort blue light glasses for evenings javascript favors configuration over convention - there is no one right way to accomplish a thing Boolean: do not put true or false in quotes
- can be a var = boolean or an expression that evaluates to true/false
read code right to left ("a value to true is assigned to the variable hasCats") if you reassign a var you don't need to use var to do so Concatenation & interpolation (template literals): both achieve the same results, use whichever you prefer (interpolation)
var name = `I have ${otherVariable}!`an expression is a statement that when read by the browser results in a single value
- var expression = 2 + 2;
- var statement = 4;
- var comparisonOperator = 3 > 5; //evaluates to false
- var logicOperators = (5 > 3) && (2 < 4); //evaluates to true
Function: a predefined and reusable group of behavior
function discriptiveFunctionNameVerbAction(/* parameters go here if needed */) {
// statements go here
}
OR
var varName = function() {
// statement
}Parameters: essentially when you are declaring variable(s) within the declaration of a function
function bakeCake(flavor, frosting, decoration) {
return `I am baking a ${flavor} cake with ${frosting}. It will be decorated with ${decoration}.`
}Arguments: when you pass a value to each parameter as you call the function
bakeCake("carrot", "cream cheese icing", "walnuts");use the keyword return to get a value back from our function (var or console.log will result undefined, and won't be able to use product in later code)
function performSimpleMath() {
return 2 + 2;
}
"I need " + performSimpleMath() + " pizzas!"function addTwoNumbers(num1, num2) {
return num1 + num2
}
addTwoNumbers(2, 5)return breaks function execution - does not move on Statement = do this Expression = evaluate this Conditionals = the expressions always evaluate to true or false Conditional:
if (expression) {
statement;
} else {
statement;
}function findLocation(nextLocation) {
if (nextLocation === "home") {
console.log("It's been a long day, let's go home!");
} else if (nextLocation === "work") {
console.log("Good morning, finding the fastest route to work!");
} else {
console.log("Finding location. Found it! Let's go!");
}
}
findLocation("home");they are meant to bundle two things: state (data) and behavior
var objectName = {
property1: "value1",
property2: "value2",
}
objectName.property1change value
objectName.property1 = "new value"arrays are ordered, but objects are not (i.e. .first, .last, .0 do not work)
Functions can be a value. The function is then called a method. and you can call that function using objectname.variablename()
var objectName = {
method1: function() {
return "Hello!";
},
}
objectName.method1()"this." references your object ("school" below)
var school = {
capacity: 250,
currentStudents: 75,
difference: function() {
return this.capacity - this.currentStudents
},
};
school.difference()Project Manager: Heather do not touch the test files except to edit skip.
check out chai & mocha documentation
- inititalized via
npm installbecause they are dependencies in our package.json file
write tests to anticipate problems, start with the "why" am I writing this code, to constrain your code to simplicity testing is important so that user experience is good, so that your website keeps it's high reputation, so that you don't lose income "if something is hard to test, it's probably not your test's fault"
an array is ordered = order matters name an array with a plural noun (ages vs ageArr) arrays can hold any data type! (including objects, arrays, and variables!)
var denver = "Denver, CO";
var raleigh = "Raleigh, NC";
var atlanta = "Atlanta, GA";
var locations = [denver, raleigh, atlanta];
// notice that the variable names aren't in quotes... this is how js knows it's a variable and not a stringliteral: giving a thing (array, object, etc) and it's values at the same time
// two ways to do the same thing:
var modOneLessons = ['JS: Data Types, Variables, Conditionals','JS: Intro to Functions','JS: Intro to Unit Testing']
var modOneLessons = [
'JS: Data Types, Variables, Conditionals',
'JS: Intro to Functions',
'JS: Intro to Unit Testing'
]{} = object, [] = array
var instructors = [
{ name: 'Will', program: 'FE', modsTaught: [1, 2, 3, 4] },
{ name: 'Hannah', program: 'FE', modsTaught: [1, 2] },
{ name: 'Heather', program: 'FE', modsTaught: [1] },
{ name: 'Ian', program: 'BE', modsTaught: [1, 2, 3, 4] },
];
var pets = [
{
name: 'Tilly',
type: 'cat',
favoriteTreat: 'cheese',
human: 'Leta',
},
]
// diff syntax
instructors[0];
// { name: 'Will', program: 'FE', modsTaught: [ 1, 2, 3, 4 ] }
console.log(instructors[1].name)
// 'Hannah'
instructors[1].name = 'Daphnie'
//reassignment of Hannah
instructors[2].modsTaught[0];
// 1loops aren't functions, they are programming constructs = to execute the same code repeatedly under certain conditions
// semicolons NOT optional here
for (var i = 0; i < variableName.length; i++) {
console.log(variableName[i]);
}
for (where do we initialize?; when do we stop condition?; update the value of the index after loop by how much?) {
do this;
}
//decrementing
var potatoNums = [2, 4, 6, 8, 2, 5, 8, 11, 2, 5]
for (var i = potatoNums.length; i > 0; i--) { console.log(potatoNums[i]); }Array prototype: methods specifically built for arrays
- unshift: adds one or more elements to the beginning of an array
- push: adds one or more elements to the end of an array
- shift: removes the first element from an array
- pop: removes the last element from an array and returns that element
- slice: returns a shallow copy of a portion of an array into a new array object selected from
starttoend(endnot included) - splice: changes the contents of an array by removing or replacing existing elements and/or adding new elements
- includes: determines whether an array includes a certain value among its entries, returning
trueorfalse - concat: used to merge two or more arrays into a new one
- join: creates and returns a new string by concatenating all of the elements in an array
make local files & folder system git init git add git commit -m "" go to GitHub and create repo and follow instructions git push origin main
invite collaborators
git clone https#addy git init git branch new_branch (creates new branch) git checkout new_branch (switches to that branch) OR git checkout -b branchName (creates a new branch and switches to that branch) make changes git push origin to-branchname or git push --set-upstream origin to-branchname (after this simply git push will work) create pull request on GitHub (only after bug smashing o -r creating a new full functional feature)
comment or approve pull request merge pull request to main branch (unless solo project never merge your own Pull Request)
(branch naming conventions) /-/-<issue#>_/- Branch types:
- Regular: Development, main, QA
- Temporary: Bug fix, hot fix, feature, experimental, wip
other commands git remote remove origin git remote add origin SSH#addy git branch -a (lists all branchs) git branch -d branchName (delets branch)
TERNARY: if/else shortcut if evaluating truthy/falsy
Truthy: === undefined,=== null,=== true,=== false,=== 0
Falsy:false,0,-0,"",null,undefined,NaN
!bang operator
Turn this:
if (pets.length > 0) {
return 'You have at least one pet!';
}
if (character === undefined) {
return 'No character found.';
}Into:
if (pets.length) {
return 'You have at least one pet!';
}
if (!character) {
return 'No character found.';
}what behaviors from others help you weel welcome, included, part of the team asking open ended questions, asking how I feel about something, pondering that actively engaging in different ways (breakout rooms)
what ^ cause you to feel disconnected, left out? when input is taken lightly or not at all
What ^ will ensure all feel qually welcome and safe and included? eliciting input via various methods, creating consensus about procedures and
self/group awareness: prioritize engaging with all group members/cohort at all times
collaboration: no "i" in team, helping each other along, participate conflict resolution: seek to understand before jumping into assumptions/judgements when dealing with conflicts or misunderstandings, We understand that healthy conflict leads to resolution
equity/inclusion: We consider our talking space by knowing when to step back in class and group settings, asking people for their opinions, and waiting until all voices are heard before making a decision.
We are people first. We start our time together by remembering we are people, not just screens working on the same thing
engagement & learning environment: We push ourselves out of our comfort zones when possible to engage in our learning environment We are self-accountable to push our own comfort zones to engage in the learning environment
We ask questions when we are confused or uncertain about our next steps. When a question is asked, we take time to slow down to answer it. We consider our talking space by knowing when to step back in class and group settings, asking people for their opinions, and waiting until all voices are heard before making a decision. We apologize when we have broken a norm and learn from it. We forgive each other and know we are all works in progress. We are people first. We start our time together by remembering we are people, not just screens working on the same thing. What are the behaviors from others that help you feel welcome, included, or a part of the team?
What are the behaviors from others that cause you to feel disconnected, left out, or like you can’t participate?
What are behaviors that will ensure all feel equally welcome and safe and included, even the most quiet/timid among us?
what does it look like when our values show up in each cagetory? what would violating or values in this context look like?
class NameOfClass {
}
var will = new NameOfClass()
var heather = new NameOfClass()every class has a default constructor method which will return the instance
class NameOfClass {
constructor() {
}
}create your own constructor method
class NameOfClass {
constructor() {
this.name = "Will"
}
}
var heather = new NameOfClass()the number of arguments in var name = new NameOfClass(argument) must be the same as the number of arguments in your constructor
class NameOfClass {
constructor(name) {
this.name = name
}
}
var heather = new NameOfClass("Heather")declare a method (i.e. function) inside of your Class
class NameOfClass {
constructor(name) {
this.name = name
}
sayMyName() {
return `My name is Will`
// use `My name is ${this.name}`
}
updateMod(newModule) {
this.module = newModule
}
}
heather.sayMyName()
var heather = new NameOfClass("Heather", "M1")
console.log(heather)
heather.updateMod("M2")
console.log(heather)function computeArea() {
console.log("in the room object", this);
return this.width * this.height;
}
var room = {
width: 800,
height: 400,
getArea: computeArea,
};
room.getArea()
//computeArea()assert.method(actual, expected)reference chai for the assertion methods
- When you were looking for your first software job, what strategies were successful for you? What strategies were not successful?
- What is the number one piece of advice you have for someone like me who is just starting out in this career?
- At your company, what do you look for in junior developers?
- What can junior developers do to help themselves stand out?
CSS selectors in javascript to target an element: p to target a class: .class-name to target an ID: #id-name in html we do not need to use "."class-name
<p></p>
<p class='blue'></p>
<p id=567></p>
var heading = document.querySelector('h1');
console.log(heading)var box = document.querySelector('.call-to-action');
var pageData = {
title: "Pizza is Tasty",
body: "Yum!"
}
box.innerHTML = `
<h3>${pageData.title}</h3>
<p>${pageData.body}</p>
`;CodePen example The prefered method is adding and removing classes of style button.classlist.add button.classlist.remove
document methods document event handlers document event listeners events "innerText is a property on the h1 object" because we're working with dot notation
if you don't need to pass in arguments you don't need to use anonymous or helper functions only reach for one or the other if you need one
function updatePage() {
changeSeason(seasonSelection.value);
}
function changeSeason(season) {
heading.innerText = season;
picture.src = imagePaths[season];
}pull request to main checkout to main git pull origin main git branch new_branch_name git checkout new_branch_name
function summation(num) {
var total = 0;
for (var i = 1; i <= num; i++) {
total += i;
}
}https://www.codewars.com/kata/590f5b4a7bbb3e246000007d https://www.codewars.com/kata/58f8a3a27a5c28d92e000144
Empty elements can have no children and thus need no closing tag Semantic elements typically uses classes for CSS styling and IDs for js
CSS Properties CSS Reference CSS * Selector = select all elements BEM vw x vh
Events MDN query selector all demo data model vs DOM
Node.js offers additional options and tools for configuring and debugging memory issues that may not be available for JavaScript executed within a browser environment. how to find memory leaks
- sessionStorage - gets reset whenever your browser session restarts
- localStorage - has no specified expiration date
- localStorage.setItem(); takes two arguments—a key and value (key must be string)—and stores the given value under the provided key
- localStorage.getItem(); gets an item from storage based on the key provided
- localStorage.removeItem(); takes a key and removes that key and its associated value from storage
- localStorage.clear(); removes all items from storage for that domain.
JSON has the following rules:
- Keys must be double quoted
- No trailing comma
- JSON.stringify(); turns any JavaScript object into a valid JSON string
- JSON.parse(); turns any valid JSON into a JavaScript object.
Dot notation only works if you have access to the exact property name. We can use bracket notation in our favor, by passing in the variable,
var phrases = {
greeting: 'hello',
departing: 'goodbye'
}
var lookupField = 'greeting';
console.log(phrases[lookupField]);Whenever we are accessing an object’s property using a variable, we must use bracket notation.
put the feedback into practice
instantioning two instances of Dragon passing two arguments string looks dynamic so using interpolation (Hi ${this.name}!) hungry = true not being passed through as an argument so going to
When talking about what should be tested, we say that we want to test the outcome or result of a particular piece of code execution.
https://www.chaijs.com/api/bdd/
You can use expect, should, and assert libraries interchangably
expect assert is not chainable though and should has some limitations
// Before anything can happen, we need a describe block to group related tests together // In this case, the tests within our describe block are all related to the 'Unicorn' class describe('Unicorn', function() {
// Next, an 'it block' contains the context of each specific test it('should add 100 calories after eating', function() {
// 1. "Setup"
// Instantiate an instance of our unicorn
var unicorn = new Unicorn('Susan');
// 2. "Execution"
// Run appropriate functions that execute the behavior indicated by our test title
unicorn.eat();
unicorn.eat();
unicorn.eat();
// 3. "Assertion"
// Make an assertion to verify that after executing certain functions, we end up with what we expect
expect(unicorn.calories).to.equal(300);
}); });mocha hooks before(), after(), beforeEach(), and afterEach()
function declariations vs function espressions and hoisting
array prototype methods
forEach vs for loops use forEach unless you need to break out of it under a certain condition... then use a for loop with an if statement forEach does NOT return anything (even if you have return statements). You can push element data into another array, but the array MUST exist outside of the forEach.
map MDN Although similar to forEach, each time the callback is executed in map, whatever is returned from the callback is added to the new array map will ALWAYS return a new array of the same length as the original array.
find MDN returns first item in array that meets condition
filter MDN Instead of returning the first match like find, filter will return a new array with all elements that match a condition.
reduce MDN Useful for turning an array into a single value more on reduce
callback functions, anonymous functions, arrow functions
object.keys returns an array of a given object's own enumerable property names
NPM dependency npm install
NPM dev dependency npm install <packageName --save-dev
Network requests can be synchronous or asynchronous, but most modern applications do them asynchronously to improve performance / the user experience.
MDN fetch examples (lots of syntax) By default, fetch performs a GET request.
Given that the default behavior of fetch is to GET data, in order to POST we need to utilize the options object and update the method to be a POST
fetch(url, { method:"POST", }) //do this for the previous method
block scope Variables declared in the block statement (if blocks, for loops, etc) using let or const can only be accessed by other code inside the block.
When you see { and }, those curly brackets are likely creating a scope
The scope chain (e.g. “What is the parent scope for this variable? The grandparent scope?”) is determined by where functions are defined in the code base…. not where functions are invoked
the differences between var, let, and const
We want to reiterate that the methods and properties are not copied from one object to another in the prototype chain. They are accessed by walking up the chain as described above.
If a function is executed and there is a . before the name of the function, this refers to whatever comes before the .
By default this refers to the global object (the browser window) unless it is running in strict mode and it is not inside an object instance, then it (this) will be undefined.
when not to use an arrow function if you do not need the arguments object or you do not need this
app.get('/welcome', (request, response) => {
response.send("Here's the information you requested")
})app.get app.get is a method that determines how our application should handle specific kinds of requests made with the GET verb. There are other types of requests than GET, but for now, we’re only going to concern ourselves with GET. When you type a web address into a browser, you are making a GET request to that address.
the path The app.get method takes two arguments, the first is a string, and we call this argument the path. In our example, the path is everything that comes after localhost:3000.
the callback function The second argument is a callback function, and this is where the meat of our server lives. Whenever our server hears a GET request to the /welcome path, it will execute this callback function. The function takes two parameters; request, which will contain information about the request that was sent from the client, and response, which will give our server the ability to send information back to the client.
response.send Finally, we see response.send("Here's the information you requested"). We’re using the response object, provided by Express, to send a string back to the client.
web content accessibility guidelines don't specify font color or background color(???) check contrast ratio of fonts and backgrounds low or no background audio text is no more than 80 characters across text can be resized without assistive technology up to 200 percent without loss of content or functionality. text is not justified (align left OR align right) line spacing is at least 1.5 include a background and text color picker All functionality of the content is operable through a keyboard interface timing events (think shows message for 2 seconds) can be paused or extended to allow time to read provide a breadcrumb trail provide a site map
https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 add skip links on tab that take the user past navigational elements and right into the body text see hiding content visually whenever you want to hide content visually and still make is accessible to assistive technology and search engines. you can use media queries to detect if high contrast mode is active and provide taylored styling (example: default border for inputs and buttons) differentiate links using at least underlines (color is fine as an additive but not a replacement) you can use (a):focus state in css to change styling when a user is manipulating focus do not use outline:0 or outline:none (removes focus styling for links when using tab) how to use outline:none for mouse users and not use it for keyboard users^^^
responsive typography declare base font sizing using viewport you can use calc() to declare min and max font sizing and can use calc() to have font-sizing scale responsively between to media query breakpoints
Implicit and Explicit ARIA semantics
Will sighted users see content that people with visual disabilities cannot? Otherwise, use sparingly.
Do use for icon anchors:
<a class="facebook-icon" aria-label="Link to Facebook"><a/>
We can create a "child class" that inherits keys and methods from a parent class using extends and super:
class TA extends Instructor {
constructor(name, module, traits) {
super(name, module, traits);
}
scheduleCheckIns() {
console.log('Scheduling checkins!');
}
}
//scheduleCheckIns is added as a method of the child class (TA) but not the parent class (Instructor)For similarly named methods, the child's method takes precedence over parent's method One can call super.method() within child to access super's methods
favor object composition over class inheritance
More on that^^^
But by inheriting and calling super, you don’t get to be selective about what you inherit. You inherit everything
when most people say “SASS” they are talking about SCSS modern CSS is valid SCSS Our browsers do not understand Sass SASS compiler: webpack
you can nest in SASS:
$grey-dark: #2f3640;
$grey-light: #dcdde1;
$red-dark: #FF0000;
header {
color: $grey-dark;
nav {
background-color: $red-dark;
a {
color: $grey-light;
}
}
}SASS-lang docs use @use to import SCSS file
how to structure a sass project
16 cool things you can do with SCSS
holy shit! you can pass in arguments with SASS (look up mixins) place mixins in a partial file seperate from other css (just like with js)
An approach to media queries using SASS
Another approach that I don't quite follow yet
PX to REM visualizer/converter
E-commerce design examples/templates
teletype.atom.io
control or comand c will stop infinite loop command+q quits everything .this is for class not ob lits
what was a library and what was an object dot notation to access keys within an object can not pass a variable using dot notation = must use bracket notation
-
Data TypeA kind of data, defined by the values it can hold and the operations that can be done on it -
Primitive typeA kind of data type. Primitives in Javascript are [string, number, boolean, null, undefined, symbol]. Also know as asimpledata type -
VariableA container for a value. The main building block for all programming -
DeclareCreating a new variable (distinct from assignment) -
AssignmentAssigning a value to a variable -
ConcatenationThe binding of multiple strings together using the+string operator -
InterpolationThe process of injecting a variable directly into a string. -
Template literalTemplate literals are string literals that provide an easy way to interpolate a variable or expression into a string. -
StatementA single piece of code that accomplishes one task or action -
ExpressionA statement that produces a value -
OperatorSymbols that are used to assign, compare, and perform operations -
FunctionA predefined and reusable group of behavior -
Declare/DefineThe initial writing of a function -
Call/InvokeRunning a function -
ParametersThe variables declared when a function is declared/defined -
ArgumentsThe variables passed to a function when it’s called/invoked -
ObjectA bundle of behavior (methods) and state (properties) -
KeyThe name used to reference a value on an object -
ValueThe data referenced by a key -
PropertyHow we refer to one of the key-value pairs of an object -
MethodA function on an object -
Dot NotationNotation to access a value on an object, explicitly specifies the key -
TDDTest Driven Development / Design -
AssertionAn expression containing some testable logic -
Assertion LibraryA package of assertion functionality. Usually distinct from aTesting Framework. Chai is an example. -
Testing FrameworkA library that determines how tests are organized and executed. Mocha is an example. -
Red/Green Testing- a workflow for testing your code, in which we write and fail tests (red) before we write any implementation code to pass the test (green) -
Unit TestA test that tests one function or one object in isolation to make sure that it behaves the way we were expecting it to behave -
Integration testA test that tests the interaction between two units to make sure that they play together nicely and work the way we expect them to work -
LiteralA way of declaring a data structure and its values at the same time -
ArrayUsed to store a collection of data items/multiple values under a single variable name -
ElementA single item stored in an array. An element can be of any data type. -
Bracket NotationHow we access individual elements of an array. Either to express the element, or assign a new element. -
ArrayUsed to store a collection of items/multiple values in a single variable -
ElementA single item stored in an array. An element can be of any data type -
LoopsA quick way to do something repeatedly -
Control FlowThe order in which the computer executes statements in a script. The order of execution can change whenever the computer runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops -
Bracket NotationHow we access individual elements of an array. Either to express the element, or assign a new element -
Array Prototype- methods that are built specifically for arrays. They help us change the arrays themselves or get certain information out of them. -
Mutator- methods that mutate, or change, the original array -
Accessor- methods that do not mutate the original array, rather just give us some information about the array -
ExpressionA statement that produces a value -
ConditionalAn expression that evaluates to true or false, or a control flow statement that executes code -
Truthy valuesIn JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. -
Falsy valuesIn JavaScript, a falsy value is a value that is considered false when encountered in a Boolean context. -
ObjectA bundle of behavior (methods) and state (properties) -
KeyThe name used to reference a Value on an Object -
ValueThe data referenced by a Key -
PropertyAnother word for a key-value pair on an object -
MethodA function on an Object -
Dot NotationNotation to access a Value on an Object, explicitly specifies the Key -
Bracket NotationNotation to access a Value on an Object, usually specifies a Key via a variable -
thisA JavaScript keyword with a value that changes depending on the context in which it’s used -
ClassA constructor that allows us to create multiple instances -
Object InstanceObjects that contain the data and functionality defined in the class -
HTML ElementA building block that makes up the structure of a web page. -
CSS SelectorA way to identify a set elements, typically using a tag, class or id. -
Interfacea shared boundary across which two separate components exchange information. -
DOMDocument Object Model, the JS interface used to interact with HTML -
EventAny event which takes place in the DOM, these can be generated by users or the browser. -
Event ListenerA function invoked on a DOM node which fires theevent handlerwhen a specified event occurs on the node or its children -
Event HandlerA function that will run when a specific event occurs