Random Notes Flashcards
Code reading for html-relative-links:
anchor tag href=”../about-me/about-me.html”
There is an opening tag for the anchor element and there is an href attribute with a value of a relative URL pointing to the about-me.html file within the about-me directory within the parent directory (..).
- The forward slash is read as “within” and we start with the file we are trying to actually read (subject first)
- We call them folders day to day, but it’s really called the directory”
Should you use divs or br to change up the document flow
Use divs to change document flow
br elements should only be used for breaking up text.
Do you need a label element for form control elements?
Not always. If there’s no text labeling the input area then you don’t need labels. You can just use placeholder attribute.
Code reading for CSS-colors
CSS selector { *background-color: rgb(244, 249, 251)}
we have a property with a CSS function, rgb, with the ARGUMENTS (244, 249, 251)
CSS: How background-colors work?
thead
tr
th
tr
thead
“Hey dude! Great question, that is because if you apply the styling to thead, the background color you are applying to the tr element will overlay that background color, and it would not be visible”
The child elements overlay the parent elements
CSS: Code reading for pseudo class and descendants and children.
table.striped thead > tr:nth-child(odd)
A new css rule set with a selector for the tr element with a pseudo class (nth-child) with an argument odd which is a direct child of thead and is a descendant of the table element with a class striped.
TIP:
CSS Layout control rules
Container should always be the external layer
Containers only hold rows
Rows should only hold columns
Guide to make classes for HTML and CSS
Utility classes = named after the desired behavior. It’s made to be used multiple times, things that repeat. It should only have one or two things it does. They shouldn’t be changed. Instead make a new class with the desired behavior.
Semantic classes = named after what it’s holding. Add as last attribtute after all the utility classes
Two things container should always have?
Width or max width AND margin: auto;
What is the only thing that should be in the row class?
display: flex;
What are the only things in a column class?
Only width
Position absolute has to be a child of relative.
Most of the time, but not always.
Width:100% or offset properties of top, bottom. right. and left set to a value of 0?
Both work.
Offset values of 0 will make it take all available width.
Primary use of absolute positioning?
If you need to layer something on top of something else.
CSS Layout classes for row, column, and container.
Row = display flex; column= width container = width (with hard px val) and margin auto
JavaScript code reading:
console.log(‘value of:’, typeof fullName);
the log method of the console object is being called with two arguments, the string, value of, and the result of the expression typeof fullName
JavaScript code reading ‘.’ is read how?
How is vehicle[‘color’] = ‘white’ read?
the dot (period symbol) is read as of
the string white is being assigned to the variable vehicle at string color (brackets are read as ‘at’)
Good thing to note about objects and primitive data
var me = {name: "john", age:"20"};
undefined
var otherMe = me
undefined
otherMe.name = 'chad'
'chad'
me
{name: 'chad', age: '20'}
var a = 1
undefined
var b = a
undefined
var a = 12
undefined
a
12
b
1Square brackets [ ] =
Curly brace { } =
square is for array literal
curly brace is for object literal
Data Modeling, think about data what you need and how to store it
It’s best to create a diagram or something to plan out the data.
What is a javascript expression?
Chunk of code that is being evaluated and returning a value
JavaScript code reading:
function convertMinutes(minutes) {
var seconds = minutes * 60;
return seconds;
}
var convertMinutes = convertMinute(5);
a function is being defined with the name convertMinutes with one parameter named ‘minute’
the value of minutes is being multiplied by the number 60 and the result of that expression is being assigned to the variable seconds
the variable seconds is being returned FROM the function.
the function convertMinutes is being called with one argument, the number 5, the return of that function call is being assigned to var convertMinutes
CSS E-commerce challenge (due Monday, probably can be done by Friday)
strikethrough element? s
background color on current price
LV picture is a different sized picture on purpose (challenge)
object-fit (css property) - useful to adjust height/width without messing up aspect ration on images
How to read:
var something = math.floor(randomValues)
var firstBook = library.shift();
the floor method of the math object is being called with one argument, the variable randomValues and the return of that method is being assigned to the variable something
the shift method of the library object is being called with no arguments and the return of that method is being assigned to the variable firstBook
JavaScript If Code reading:
function isUnderFive(number) {
if (number > 5) {
return true;
} else {
return false;
}
there is a function being defined with the name isUnderFive, with one parameter NAMED ‘number’ and then the opening curly brace for the function code block. We have an if statement with the condition ,variable number is greater than 5. then opening curly brace for the if statement.
the boolean value true is being returned from the function
the boolean true is being returned from the function
closing curly brace for the if statement,
Note that from “if” to the closing curly brace is the “conditional”
JavaScript for loops code reading: for (var i = 0; i < string.length; i++)
for (var key in object) {
keys.push(key)
}
return key;
for loop with an initialization of the number 0 being assigned to the variable i, a condition of i being less than the length property of the string object, and a final expression of the variable i being incremented by 1
for in loop with the var key in object, object then opening
push method of the keys object is being called with one argument the value of variable key
value of the variable key being returned from the function
@media rule code reading
@media only screen and (min-width: 768px) {
.card-wrapper {
flex-basis: 50%;
}
}
There is a new @media rule for only media type screen and a media feature of min-width: with a value of 768px followed by the opening curly brace for the @media rule set. Then read as normal
*Note: min-width in the @media rule is not a property, it is a media feature
Template literal code reading
const hello = `Hi my name is ${firstName}
There is a template literal with (just say the string as if reading) with a javascript expression, with the value of the variable firstName, and the result of that expression is being assigned to variable const hello.
es6-destructuring code reading
const { title, author, libraryID } = book1;
const [book3, book4, book5] = library;
const [, , , book6] = library;
// if it's an array you say 1st, 2nd, 3rd element is being destructured
// if it's an object you say properties names
// third option just say it's the 4th element
// Code Reading for destructuring:
// 1. What is being destructured
// 2. Where is it being destructured from
// 3. Where is it being assigned toLibrary vs framework
Answer is that all libraries are frameworks, but not all frameworks are libraries. Frameworks have inversion of control
all libraries are frameworks, but not all frameworks are libraries (called inversion of control - who calls who)
- Using framework if you define functions, but never call them (some exceptions) instead hand them over it means your library is a framework (DOM is a framework for the events)
- If library has a bunch of functions and methods, and your code calls it then it is just a library
Gray area exists (meaning it could be more library-heavy or library-light).
Node.js is a runtime environment that comes with a library
If you convert an object into a string, what does it return
it returns object Object
node-require example answers
subtract function which is exported
function subtract (x, y) {
return x - y;
}
module.exports = subtract
node-require code reading
const add = require(‘./add’);
console.log(‘result:’, add(x, y));
the require function is being called with one argument, a string, and the return of that function is being assigned to the variable const add
the log method of the console object is being called with 2 arguments, a string and the RETURN of the function add with two arguments, x and y
