CSS Archives

Thought of the day: huge amount of new things to process, not much time to digest them.

My notes from the class:

JavaScript:

1. In order to assign the property of an object to a variable you have to use bracket notation, e.g.:

var columns = {
left: true,
center : false,
right : false
}
var side = columns[’left’];
console.log(side);

2. Accessing properties of an object example 1:

var user = {
name: ”snoopy”,
age: 25,
size: ”small”,
toys: [”bone”, ”ball”],
address: {
street: ”bla”,
number: 23
}
}

console.log(user.toys[1]);
console.log(user.address)
console.log(user.address.street)

Accessing properties of an object example 2:

var book1 = { title: ”The Catcher in the Rye”, author: ”J.D Salinger”, isbn: ”0316769487”, category: ”Classic Literature” };
var book2 = { title: ”To Kill a Mockingbird”, author: ”Harper Lee”, isbn: ”0446310786”, category: ”Classic Literature” };

var library =[book1, book2]
console.log(library[1].title)

3. Accessing properties of an object containing an array:

var library= [
{ title: ”The Catcher in the Rye”, author: ”J.D Salinger”, isbn: ”0316769487”, category: ”Classic Literature” },
{ title: ”To Kill a Mockingbird”, author: ”Harper Lee”, isbn: ”0446310786”, category: ”Classic Literature” }
]

console.log(library[0].title)

4. If you use an array inside an object instead of an object inside an object it will be easier to access the respective properties. Example:

var classRoom = {
teacher: { firstName: ’Marcelino’, lastName: ’Padberg’, age: 25 },
students: [
{ firstName: ’Aliyah’, lastName: ’Schulist’, age: 18 },
{ firstName: ’Cleveland’, lastName: ’Towne’, age: 28 },
{ firstName: ’Jan’, lastName: ’Quitzon’, age: 18 },
{ firstName: ’Alaina’, lastName: ’Runolfsdottir’, age: 18 },
{ firstName: ’Gerhard’, lastName: ’Bergstrom’, age: 23 }
]
};

console.log(classRoom.students[2].firstName);
// ’Jan’

console.log(classRoom.teacher.age);
// 25

CSS:

1. Something I didn’t know about advanced selectors:

2. Useful site if planning to use transitions: http://cubic-bezier.com/

3. If planning to do css animations, you might find this site useful: https://daneden.github.io/animate.css/

4. For inspiration on how to use keyframes for css animations check e.g. https://codepen.io/tag/keyframes/

There are two kinds of students here: those who have spent years programming and/or have a science degree and the rest. I belong to the latter category. For the former group this bootcamp is a stroll in the park, for the latter it’s overwhelming. That’s just how it is, trying to face the music and hope I’ll come out of this experience with a bit more solid knowledge of web dev than what I’ve had before.

That being said here are my notes from day 2:

CSS:

Learned that the absolutely positioned div is relative to its parent if the latter is positioned relatively. If there’s no such parent, then it will be positioned relatively to the body.

JavaScript:

Learned i.a. about anonymous functions, recursion, high-order functions and forEach method, see details below.

1. Anonymous function:

var anon = function(){
console.log(”An0nym0us Funct10n”);
}

anon();

When calling this function the function itself will be printed, i.e. ”Function: anon”, instead of ”An0nym0us Funct10n”.

2. Recursion (function definitions that are implemented in a way they use their own definitions. It’s like function inception. Btw factorial of a non-negative integer n is the product of all positive integers less than or equal to n, e.g. 5 ! = 5 × 4 × 3 × 2 × 1 = 120):

function factorial(number) {
if (number === 0) { return 1; }
return number * factorial(number – 1);
}

3. High-Order Functions: functions can return functions or receive other functions as parameter.

var add = function (a) {
return function (b) {
return a + b;
};
};

var add2 = add(2);
add2(3);
// => 5

add(4)(5);
// => 9

4. forEach:
Example nr 1:
var raceResults = [’Hellen’, ’John’, ’Peter’, ’Mery’];
raceResults.forEach(function(elem, index){
console.log(elem + ’ finished the race in ’ + (index+1) + ’ position!’);
});

Example nr 2:
function averageWordLength(words) {
var sum = 0;
words.forEach(function(word){
sum = sum + word.length;
})
var average = sum/words.length;
return average;
}

var words = [
”seat”,
”correspond”,
”linen”,
”motif”,
”hole”,
”smell”,
”smart”,
”chaos”,
”fuel”,
”palace”
];
var averageLength = averageWordLength(words);
console.log(averageLength);

Syntax:
arr.forEach(function callback(currentValue, index, array) {
//your iterator
}[, thisArg]);

Kategoria: CSS

Ironhack Day 3

Ironhack Day 2