Начальник пытается вытащить тебя на работу в офис в выходные

👉 @frontendInterview

​В чем отличие между SSR и SPA?

Серверный рендеринг (Server-Side Rendering, SSR) и одностраничные приложения (Single Page Applications, SPA) — это два различных подхода к созданию веб-приложений, каждый из которых имеет свои преимущества и недостатки. Рассмотрим их основные отличия.

Серверный рендеринг (SSR)
- При нем весь HTML-код страницы генерируется на сервере и отправляется в браузер в готовом виде.
- Сервер получает запрос от клиента, обрабатывает его, собирает необходимые данные, рендерит HTML и отправляет его обратно клиенту.

Преимущества:
- Поисковые системы получают полностью отрендеренную HTML-страницу, что облегчает индексацию контента.
- Пользователь видит содержимое страницы быстрее, так как браузер получает готовый HTML.
- Серверный рендеринг не требует от клиента выполнения сложного JavaScript-кода.

Недостатки:
- Сервер должен обрабатывать каждый запрос и рендерить HTML, что может увеличить нагрузку на сервер при большом количестве запросов.
- Каждое взаимодействие с приложением может потребовать полного обновления страницы, что делает взаимодействие медленнее и менее плавным.

Одностраничные приложения (SPA)

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

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

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

Некоторые современные фреймворки поддерживают гибридный подход, совмещая преимущества SSR и SPA. Например, Next.js для React позволяет рендерить начальную загрузку на сервере для улучшения SEO и времени до первого рендера, а затем переключаться на SPA для интерактивных взаимодействий.

👉 @frontendInterview

JavaScript для начинающих

Начните программировать на JavaScript и создайте красивый и функциональный сайт своими руками прямо сейчас! С этим цветным пошаговым руководством вы без труда освоите все основные функции JavaScript и сможете сразу же применить полученные знания на практике. Множество иллюстраций, полезных советов и предостережений на полях книги помогут вам сэкономить время и избежать ошибок при обучении.

👉 @frontendInterview

Sort array by string length

Напишите функцию, которая принимает массив строк в качестве аргумента и возвращает отсортированный массив, содержащий те же строки, отсортированные от самой короткой к самой длинной.

Пример:

["Telescopes", "Glasses", "Eyes", "Monocles"]  //   ["Eyes", "Glasses", "Monocles", "Telescopes"]

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

👉 @frontendInterview

​Что такое шаблонные литералы, и для чего они нужны?

Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.

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

Интерполяция переменных и выражений
Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

Многострочные строки
Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

Встроенные выражения
Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

Вызов функций внутри шаблонных литералов
Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

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

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

👉 @frontendInterview

👉 @frontendInterview

Как и зачем писать тесты?

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

Тесты делают код более прочным и живучим. Одновременно с этим тесты — это отличная документация, которая не врёт и не устаревает. Также тесты можно использовать как инструмент разработки программы.

Для тестов нужно закладывать больше времени на разработку, это правда. Но время, потраченное в начале работы над проектом, окупится в дальнейшем.

👉 @frontendInterview

Как мы мигрируем с JQuery на React

Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой .

Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.

👉 @frontendInterview

Обычный рабочий день фронтендера

👉 @frontendInterview

​Как мерить скорость работы и отзывчивость сайта?

Web Vitals
Google разработал набор метрик, называемых Web Vitals, которые оценивают ключевые аспекты пользовательского опыта:
Largest Contentful Paint (LCP): Время загрузки основного контента страницы.
First Input Delay (FID): Время от первого взаимодействия пользователя с сайтом до момента, когда браузер начинает обработку этого взаимодействия.
Cumulative Layout Shift (CLS): Стабильность макета страницы (измеряет неожиданные сдвиги контента).

Инструменты для измерения производительности
Google Lighthouse: Инструмент, встроенный в Chrome DevTools, который анализирует страницу и предлагает улучшения.
PageSpeed Insights: Онлайн-сервис от Google, который предоставляет отчеты о производительности сайта на мобильных и десктопных устройствах.
WebPageTest: Позволяет проводить детализированные тесты производительности с разными настройками сети и устройства.

Встроенные инструменты браузера
Chrome DevTools: Включает вкладку "Performance" для записи и анализа производительности загрузки страницы и исполнения скриптов.
Network Panel: Показывает время загрузки различных ресурсов, что помогает найти "узкие места".

Мониторинг в реальном времени
Google Analytics: Предоставляет отчеты о скорости загрузки страниц.
New Relic, Datadog: Платформы для мониторинга производительности приложений и сайтов в реальном времени.

Оптимизация и анализ
Использование CDN (Content Delivery Network): Ускоряет доставку контента пользователям, снижая задержки.
Минимизация и сжатие ресурсов: Уменьшение размеров файлов CSS, JavaScript и изображений.
Кэширование: Хранение копий статических ресурсов для ускорения повторных посещений.

👉 @frontendInterview

Безопасность веб-приложений. Разведка, защита, нападение, 2 изд.

Три столпа безопасности приложений — разведка, нападение и защита. Во втором издании Эндрю Хоффман рассматривает десятки смежных тем, от новейших типов атак и средств защиты до моделирования угроз, жизненного цикла безопасной разработки ПО (SSDL/SDLC) и архитектуры нулевого доверия. Вы получите подробную информацию об эксплойтах и средствах защиты от атак с использованием GraphQL, облачных технологий и доставки контента (CDN). В главы, посвященные атакам и их предотвращению, добавлены сведения для более продвинутых читателей.

👉 @frontendInterview

Sentence Smash

Напишите функцию, которая принимает массив слов, объединяет их в предложение и возвращает это предложение
Вы можете игнорировать необходимость очистки слов или добавления знаков препинания, но вам следует добавлять пробелы между каждым словом.
Будьте внимательны: ни в начале, ни в конце предложения не должно быть пробела!

Пример:

['hello', 'world', 'this', 'is', 'great']  =>  'hello world this is great'

👉 @frontendInterview

​Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?

Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.

.hidden-element {
    visibility: hidden;
}

По умолчанию, элементы имеют значение visibility: visible;, что означает, что они видимы на странице.
Когда элементу назначается значение visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.

В этом примере, второй <div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

Зачем это нужно?
- Когда важно сохранить исходный макет и расположение элементов.
- Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.

Альтернативы
display: none;
Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
opacity: 0;
Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.

👉 @frontendInterview

👉 @frontendInterview

​Как добавить стили на каждый элемент страницы?

Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор *. Этот селектор выбирает все элементы в документе.

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Пример кода выше сбрасывает отступы (margin) и внутренние отступы (padding) всех элементов на странице до нуля. Это часто делается для того, чтобы избежать неожиданных отступов, которые могут быть заданы по умолчанию браузером. Также устанавливается box-sizing: border-box, что изменяет модель коробки элемента, позволяя лучше контролировать размеры элементов при добавлении отступов и границ.

Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов.

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

👉 @frontendInterview