Frontend

What is layout shift, why does it happen, and how to avoid it?

What does the Mobile First approach mean in layout design?

Implement a product search in an Angular scaffold: uncomment the input with label, handle input with debounce, call searchProducts function, and display results. Use Angular Signals, not only RxJS/Subject.

How do arrow functions differ from regular function declaration/function expression?

[name] asked: What can you say about the pros and cons of working at Yandex?

var a = { firstName: 'Bill', lastName: 'Ivanov', sayName: function() { console.log(this.firstName); }, sayLastName: () => { console.log(this.lastName); } }; a.sayName(); // var b = a.sayName; b(); // a.sayName.bind({ firstName: 'Boris' })(); // a.sayName(); // a.sayLastName(); // a.sayName.bind({ firstName: 'Boris' }).bind({ firstName: 'Tom' })(); // a.sayLastName.bind({ lastName: 'Petrov' })(); //

What React hooks have you used? Which versions of React have you worked with, and do you have experience with vanilla JavaScript?

console.log(allo); var allo = 'Я var'; function allo() { console.log('Я function declaration'); } console.log(allo); Explain the output of this code snippet.

The application is unresponsive or hangs, scrolling and clicks work with lag. How would you diagnose the problem?

```typescript var a = { firstName: 'Bill', lastName: 'Ivanov', sayName: function() { console.log(this.firstName); }, sayLastName: () => { console.log(this.lastName); } }; a.sayName(); // var b = a.sayName; b(); // a.sayName.bind({ firstName: 'Boris' })(); // a.sayName(); // a.sayLastName(); // a.sayName.bind({ firstName: 'Boris' }).bind({ firstName: 'Tom' })(); // a.sayLastName.bind({ lastName: 'Petrov' })(); // ``` The containing arrow function captures the global value of 'this'.

What does the CSS property will-change do?

Refactor the given React code to improve its structure and readability. The code includes a product list with search functionality, a cart count, and a sum of prices. Implement the fetchProducts function to simulate fetching products with a delay and possible error. Use React hooks such as useState, useEffect, and useCallback appropriately. Ensure the UI updates correctly when adding products to the cart and clearing the cart.

What utility types in TypeScript do you know, for example Pick, Partial, Omit?

There is a search filter with debounce: the first request goes for one word, then the second — for a new word, but the first response arrives last and overwrites the UI. How to deal with this in Angular?

What do you usually add and describe in Storybook?

[name] asked: What independent ideas did you propose to achieve the goals or improve the product? Provide a specific example of a result.

There is a product showcase with many widgets that starts to lag on mobile devices. What and how will you optimize?

What does your typical Git flow look like when working on a task: from receiving the task to merging?

What is race condition?