CSS

Organization

• What preprocessors do you use and why?
• Do you have experience, opinions on BEM, OOCSS, Atomic CSS or any other authoring approach?
• What takes precedence in CSS specificity, how do you override it, how should you avoid overriding it?

What CSS conditions make an element invisible?

• direct attributes
• parent conditions

Build a sample card layout in codepen

Use flexbox for the text node layout

Make the card move around

Performance

List some things that negatively effect initial load time

• What tools can you use to find these issues
• How do you address them?

What issues cause interaction delays

• what are some of these issues specific to mobile devices
• how do you troubleshoot repaints, reflows, memory leaks
• what resources do you read to stay up to date on front end performance concerns

javascript

Title Text

myCalculator.add(2,3)

What code is needed to make this return 5?

Title Text

window.addEventListener('scroll',function() {
    console.log('scrolling');
});

This is a very noisy event, how do you get it to log only once when a user is done scrolling?

Title Text

// if you execute the following in a console:

console.log(this)

// you get: the window object
//what do you get here?

document.body.addEventListener('click',
    function() { 
        console.log(this); 
    }
)

/* how do you change the above to make 
this 
the window object in the listener function?
*/

Event binding