Frontend Interview - JS HTML CSS

Замыкания в JavaScript Замыкание в JavaScript - это комбинация функции и лексического окружения, в котором она была определена. Это позволяет ей обращаться к переменным и функциям этого лексического окружения в дальнейшем. В следующем примере мы определяем функцию makeCounter(), которая фактически является фабричной функцией. При вызове она возвращает дочернюю функцию, которая имеет доступ к лексическому окружению внешней функции, то-есть функции makeCounter(). Таким образом, возвращаемая функция запоминает переменную counter и в последующем изменяет ее значение. function makeCounter(initial = 0) { let counter = initial; return function() { return counter += 1; } } const counterA = makeCounter(0); console.log(counterA()); // 1 console.log(counterA()); // 2 const counterB = makeCounter(100); console.log(counterB()); // 101 console.log(counterB()); // 102 👉 @frontendInterview

Flatten and sort an array Задача: Задав двумерный массив целых чисел, верните отсортированную версию массива, в которой все целые числа расположены в порядке возрастания. Пример: Учитывая [[3, 2, 1], [4, 6, 5], [], [9, 7, 8]], ваша функция должна вернуть [1, 2, 3, 4, 5, 6, 7, 8, 9]. Дополнение: Пожалуйста, помните, что JavaScript по умолчанию сортирует объекты в алфавитном порядке 👉 @frontendInterview

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

sv, lv, dv Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера viewport на мобильных устройствах. Было бы логичным полагать, что 100vh или 100% высоты экрана означали высоту, равную высоте экрана устройства, но vh не учитывает адресную строку и навигационную панель браузера на мобильных устройствах. Поэтому иногда высота контента оказывается слишком большой и появляется лишний скролл. Это относительные единицы измерения, пришедшие на помощь знакомым vw, vh, vmin, vmax, с целью сделать процесс разработки более предсказуемым. svw и svh представляет собой наименьшую (smallest) ширину и высоту экрана с учётом элементов браузера, lvw и lvh — наибольшую (largest) ширину и высоту с учётом элементов браузера. dvw и dvh динамически (dynamic) высчитывает размер экрана при различных состояниях браузера, при открытой/закрытой адресной строке и навигационной панели браузера. Пример Ширина первого экрана будет равна 100% ширины вьюпорта, а высота — 100% высоты вьюпорта, причём размер будет динамически высчитываться при открытии/закрытии элементов браузера: .vh { min-height: 100vh; } .dvh { min-height: 100dvh; } Динамический вьюпорт dvw Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта. dvh Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта. dvmin Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты. dvmax Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты. 👉 @frontendInterview

«Почему у нас такая дерьмовая кодовая база?» Как у нас проводят код-ревью: 👉 @frontendInterview

JavaScript: массивы от А до Я для тех, кто только начал Кажется, пришло время поговорить о массивах. Не просто поговорить, но еще и разобрать полезные примеры, которые помогут узнать о них больше. В этой статье я доступно расскажу, что такое массивы, какие у них особенности и для чего они вообще нужны. Заваривайте чай, открывайте редактор кода на своем компьютере для экспериментов — начнем разбираться! 👉 @frontendInterview

Как повернуть блок на 45 градусов? Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон. Пример использования .rotated-box { width: 100px; height: 100px; background-color: lightblue; transform: rotate(45deg); } Основной синтаксис Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn). transform: rotate(угол); Параметры Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке. .rotated-box { width: 100px; height: 100px; background-color: lightblue; transform: rotate(45deg); } Свойство transform Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение. Функция rotate Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки. Использование в реальных проектах Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста. В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы. 👉 @frontendInterview

👉 @frontendInterview

Какие есть способы оптимизации рендеринга в react? Это процесс снижения количества лишних перерисовок компонентов, что улучшает производительность приложения. React повторно рендерит компоненты, когда их состояние (state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать. Производительность Чем больше компонентов рендерится без необходимости, тем больше времени тратится на вычисления и обновления DOM. Экономия ресурсов Избегая лишних рендеров, приложение работает быстрее, а пользовательский интерфейс становится более отзывчивым. Лучший UX Плавная работа интерфейса критична для сложных приложений с большим количеством данных. Мемоизация компонентов React предоставляет утилиту React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились. import React from 'react'; const MyComponent = React.memo(({ count }) => { console.log('Рендер компонента'); return Счётчик: {count} ; }); // Использование export default function App() { const [count, setCount] = React.useState(0); return ( setCount(count + 1)}>Увеличить ); } Использование `useMemo` и `useCallback` Эти хуки используются для предотвращения повторных вычислений и создания функций при каждом рендере. import React, { useMemo } from 'react'; function ExpensiveCalculationComponent({ number }) { const calculatedValue = useMemo(() => { console.log('Выполняются сложные вычисления...'); return number ** 2; }, [number]); // Пересчитывается только если `number` изменился return Результат: {calculatedValue} ; } Пример useCallback import React, { useCallback, useState } from 'react'; const Child = React.memo(({ onClick }) => { console.log('Рендер дочернего компонента'); return Кликни меня; }); function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log('Кнопка нажата'); }, []); // Создаётся одна и та же функция между рендерами return ( setCount(count + 1)}>Увеличить {count} ); } Разделение кода и ленивый рендеринг Использование React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы. import React, { Suspense } from 'react'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( ); } Проверка зависимости в `useEffect` Избегайте запуска побочных эффектов, если зависимости не изменились. React.useEffect(() => { console.log('Эффект сработал!'); }, [/* следите только за нужными зависимостями */]); Избегайте анонимных функций и объектов в `props` Передача новых объектов и функций через props вызывает лишние рендеры. Лучше так const data = { key: 'value' }; ; Разделение больших компонентов Если компонент слишком сложный, разделите его на более мелкие, чтобы React мог эффективно управлять состоянием и перерисовкой. Использование ключей при рендере списков Каждый элемент списка должен иметь уникальный ключ, чтобы React мог правильно отслеживать изменения. {items.map(item => ( {item.name} ))} 👉 @frontendInterview