Frontend Interview - собеседования по Javascript / Html / Css

Юнит-тестирование в Angular: лучшие практики и инструменты

В этой статье я хочу поделиться опытом, который накопил за годы работы с юнит-тестами в Angular. Вот о чём пойдёт речь:

- Почему важно писать юнит-тесты
- Зачем мокать зависимости и каковы плюсы и минусы
- Что такое SIFERS и почему это важно
- Что такое Angular Testing Library (ATL)
- Как тестировать с помощью SIFERS
- Как получать элементы DOM и генерировать события
- Что такое jest-auto-spies и observer-spy

👉 @frontendInterview

Загрузка файла с прогресс-баром

Загрузка пользователем файлов на сервер — часто встречающаяся задача при создании сайтов и приложений. Если файлы большие, то хорошей практикой будет показывать пользователю прогресс и результат загрузки файла. Для этого можно использовать прогресс-бар.

Организовать полный процесс загрузки файла возможно только с использованием серверной части, реализация которой выходит за рамки данной статьи. Поэтому в статье будет рассмотрена организация отправки файла на стороне клиента: HTML-разметка, стилизация элементов и JS-код для передачи файла на сервер.

👉 @frontendInterview

👉 @frontendInterview

​В чем различие методов call apply bind?

Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.

Сall
Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

Пример:

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

Здесь он используется для вызова функции greet с this, установленным в "Earth", и двумя дополнительными аргументами "Hello" и "Alice".

Apply
Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

В этом случае он вызывает функцию greet с this, установленным в "Earth", и аргументами, переданными в виде массива.

Bind
Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

Пример:

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

Здесь он используется для создания новой функции greetEarth, которая при вызове выводит тот же результат, что и предыдущие примеры, но с тем отличием, что контекст this и аргументы были заранее заданы.

👉 @frontendInterview

Largest 5 digit number in a series

В следующем 6-значном номере:

283910

91 - наибольшая последовательность из 2 цифр подряд.

В следующем 10-значном числе:

1234567890

67890 - наибольшая последовательность из 5 последовательных цифр.

Заполните решение так, чтобы оно возвращало наибольшую последовательность из пяти последовательных цифр, найденных в заданном числе. Число будет передано в виде строки, состоящей только из цифр. Решение должно вернуть пятизначное целое число. Передаваемое число может быть до 1000 цифр.

👉 @frontendInterview

React быстро

«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.

👉 @frontendInterview

Как оптимизировать сайт?

Оптимизация сайта включает в себя несколько стратегий и техник, направленных на улучшение производительности, скорости загрузки и пользовательского опыта.

Оптимизация изображений
Используйте инструменты для сжатия изображений (например, TinyPNG, ImageOptim) без значительной потери качества. Используйте современные форматы изображений, такие как WebP, которые обеспечивают лучшее сжатие по сравнению с JPEG и PNG. Загружайте изображения по мере их появления в области видимости пользователя (атрибут loading="lazy" в HTML).

Минификация и объединение файлов
Уменьшите размер CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS, CSSNano, HTMLMinifier. Сократите количество HTTP-запросов, объединив несколько CSS или JavaScript файлов в один.

Использование CDN (Content Delivery Network)
Храните копии вашего сайта на серверах по всему миру, чтобы уменьшить время загрузки для пользователей из разных регионов.

Кэширование
Настройте заголовки кэширования HTTP, чтобы браузеры могли хранить копии статических ресурсов (CSS, JavaScript, изображения). Используйте технологии, такие как Varnish или Nginx, для кэширования страниц на сервере.

Оптимизация CSS и JavaScript
Используйте атрибуты async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.

Улучшение производительности сервера
Включите сжатие gzip или Brotli на сервере для уменьшения размера передаваемых данных. Переход на HTTP/2, который поддерживает мультиплексирование запросов, позволяет загружать несколько ресурсов одновременно через одно соединение.

Использование современных технологий
Используйте Service Workers для создания прогрессивных веб-приложений (PWA), обеспечивающих офлайн-работу и улучшенное кэширование. Используйте техники предзагрузки (preload) и предзапросов (prefetch) для ресурсов, которые понадобятся в ближайшее время.

Мониторинг и анализ
Используйте Google Lighthouse, PageSpeed Insights и WebPageTest для анализа производительности и поиска узких мест. Применяйте сервисы, такие как Google Analytics, New Relic, для отслеживания реальной производительности и пользовательского опыта.

<img src="example.jpg" loading="lazy" alt="Пример изображения">

👉 @frontendInterview

Я: устраиваюсь на работу с опытным коллективом

Тем временем их тимлид 2010-го года рождения:

👉 @frontendInterview

Плюсы ИТ

В пику современным трендам на упадничество и негатив, рассказываю о плюсах индустрии информационных технологий — почему несмотря на весь стеб над нердами и сильно просевшие зарплаты народ все также ломится в эти двери, в попытках «вкатиться».

Честно и без рекламы обучающих курсов.

👉 @frontendInterview

Как работает position: sticky и почему он часто не прилипает

position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.

Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из <thead> и не упрётесь в кейс с вложенными скролл-контейнерами.

👉 @frontendInterview

👉 @frontendInterview

Отслеживаемые свойства, что такое, как использовать?

В контексте разработки приложений, отслеживаемые свойства (observable properties) относятся к свойствам объектов, изменения которых можно отслеживать. Это полезно для автоматического обновления пользовательского интерфейса или выполнения других действий при изменении данных. В JavaScript для реализации отслеживаемых свойств часто используются библиотеки, такие как MobX, или встроенные механизмы, такие как Proxy.

Использование Proxy для отслеживания свойств
Встроенный объект Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.

const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

Использование MobX для отслеживания свойств
Это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

Пример использования MobX

import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
    count: 0,
    increment() {
        this.count++;
    }
});
autorun(() => {
    console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
    <div>
        <p>Count: {appState.count}</p>
        <button onClick={() => appState.increment()}>Increment</button>
    </div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));

Плюсы отслеживаемых свойств
- Автоматическое обновление UI
Изменения данных автоматически отражаются в пользовательском интерфейсе.
- Централизованное управление состоянием
Легче управлять состоянием и следить за его изменениями.
- Повышенная производительность
При правильной настройке обновляются только те части интерфейса, которые зависят от измененных данных.

Примеры реального использования
Простой счетчик с использованием Proxy

const handler = {
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        document.getElementById(property).innerText = value;
        return true;
    }
};
const state = {
    count: 0
};
const proxyState = new Proxy(state, handler);

document.getElementById('increment').addEventListener('click', () => {
    proxyState.count++;
});

<div>
    <p id="count">0</p>
    <button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>

👉 @frontendInterview

Fix string case

В этом задании вам будет дана строка, в которой могут быть смешанные прописные и строчные буквы, и ваша задача - преобразовать эту строку в строчную или прописную, основываясь на следующем:

- Делайте как можно меньше изменений.
- Если строка содержит равное количество прописных и строчных букв, преобразуйте строку в строчную.

Например:

solve("coDe") = "code". Строчных символов больше, чем прописных. Измените только букву "D" на строчную.

solve("CODe") = "CODE". Прописные символы > строчные. Измените только букву "e" на прописную.

solve("coDE") = "code". Верхний == нижний регистр. Измените все символы на строчные.

Собес — то, что определяет ежемесячную зарплату на долгое время

А серьезно подходят к нему довольно редко.

Когда я собесился в OZON, я прям гуглил вопросы типа — «А как торговаться?», «Можно ли просить велком бонус?», «А сколько я ваще стою?»

——• 📗 Держи полезную подборку материалов для поиска работы

— Как разработчику правильно оформить резюме? *читать*

— Как расписывать свои достижения в резюме? *смотреть*

— Как поднять резюме в топе выдачи HeadHunter? *читать*

— 5 шагов, которые нужно обязательно сделать перед публикацией резюме? *смотреть*

— Что делать с пустым гитхабом? *читать*

— Как отвечать на вопросы рекрутёров? *читать*

— Как не завалить лайвкодинг? *читать*

А лучше читай полностью мой путь — честно, со всеми ошибками  —·· *тык*

Возможно ты сейчас не ищешь работу, но время летит быстро, лучше сохранить, потом очень пригодится.

Реклама. Истомин А.С. ИНН 331108187709.