Latest posts
Frontend | Вопросы собесов
23 Sept, 09:06
🤔 Когда стоит использовать тип any?Тип any в TypeScript позволяет отключить проверку типов и использовать любую структуру данных, как в обычном JavaScript. Но any убирает всю защиту TypeScript, поэтому его нужно использовать только в крайних случаях.🚩Если тип данных неизвестен заранее (например, ответ от API) Иногда сервер может вернуть разные структуры данных, и невозможно заранее определить точный тип. async function fetchData(url: string): Promise<any> { const response = await fetch(url); return response.json(); }Лучший вариант — использовать интерфейсы вместо any: interface User { id: number; name: string; }async function fetchUser(url: string): Promise<User> { const response = await fetch(url); return response.json() as User; }🚩При миграции JavaScript в TypeScriptЕсли проект на чистом JavaScript, добавление TypeScript может сломать код. any помогает постепенно вводить строгую типизацию. function log(value: any) { console.log(value); }🚩Когда работаем с динамическими структурами (например, localStorage)В localStorage можно сохранить что угодно, поэтому при чтении данных тип неизвестен. const data: any = localStorage.getItem("user");Лучше сразу привести any к нужному типу const user = JSON.parse(localStorage.getItem("user") || "{}") as { id: number; name: string };🚩Когда пишем универсальную библиотекуFrontend | Вопросы собесов
22 Sept, 16:11
🤔 Какая основная причина для использования SSR?SSR (Server-Side Rendering): - Улучшает скорость загрузки первого экрана (первая отрисовка приходит сразу с сервера). - Обеспечивает SEO-оптимизацию, поскольку поисковики получают готовый HTML. - Полезен для динамического контента, где важна предзагрузка.Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знанийFrontend | Вопросы собесов
22 Sept, 13:13
Frontend | Вопросы собесов
22 Sept, 09:05
🤔 Расскажи про области видимостиВ JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.🚩Глобальная область видимостиПеременные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы. var globalVar = 'Я глобальная переменная';function testFunction() { console.log(globalVar); // Доступно }testFunction(); console.log(globalVar); // Доступно🚩Функциональная область видимостиПеременные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами. function testFunction() {Frontend | Вопросы собесов
22 Sept, 03:44
Frontend | Вопросы собесов
21 Sept, 14:00
Разберём фронтенд слой за слоем 🥐30 сентября встречаемся на VK Frontend Meetup SPB. Разберёмся в том, что видит пользователь, а дальше перейдём к архитектуре, инструментам и процессам, которые помогают масштабировать разработку.В программе 3 доклада: 🔵Как в MAX разработали собственную архитектуру для стабильных анимированных стикеров 🔵Как в Одноклассниках учат AI работать с реальной дизайн-системой и существующими компонентами 🔵Как в Почте Mail запускают 300 промо в год После докладов — фуршет и неформальное общение. Можно будет задать вопросы спикерам, обсудить выступления и поспорить о том, какой слой фронтенда самый сложный.🗓 30 сентября, 19:00 📍Санкт-Петербург, офис VK у
Frontend | Вопросы собесов
21 Sept, 09:05
🤔 Что такое git-flow?Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы.🚩Основные ветки🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска.🚩Вспомогательные ветки🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop.🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок,Frontend | Вопросы собесов
21 Sept, 02:43
Frontend | Вопросы собесов
20 Sept, 09:05
🤔 Расскажи про memo в reactReact.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились.🚩Зачем нужен React.memo?В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных. React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится.🚩Как использовать React.memo?React.memo — это функция высшего порядка (HOC), которая оборачиваетFrontend | Вопросы собесов
19 Sept, 09:05
🤔 Как уничтожить объект web worker?В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.🚩Зачем уничтожать Web Worker?Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.🚩Как использовать terminate()?Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта. // Создаем worker const myWorker = new Worker('worker.js');//Frontend | Вопросы собесов
18 Sept, 09:05
🤔 Чего стоит и не стоит избегать в оптимизации сайта?🟠Оптимизация изображений Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.🟠Минификация и объединение файлов Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.🟠Использование CDN (Content Delivery Network) Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.🟠Кэширование На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.Frontend | Вопросы собесов
17 Sept, 09:05
🤔 Чем em отличается от rem?🟠Как работает em? em зависит от размера шрифта родителя (font-size). .parent { font-size: 20px; }.child { font-size: 1.5em; / 1.5 20px = 30px / }Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя. .parent { font-size: 20px; }.child { font-size: 1.5em; / 30px / }Frontend | Вопросы собесов
16 Sept, 09:06
🤔 Чем var отличается от const ?Ключевые слова var и const используются для объявления переменных, но они имеют ряд существенных различий, которые важно понимать для правильного использования в коде.🚩Область видимости (Scope)🟠Var Объявления переменных с ее использованием имеют функциональную область видимости (function scope), что означает, что переменная доступна везде в функции, где была объявлена.🟠Const Как и let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.🚩Переназначение и изменение🟠Var Переменные, объявленные с помощью нее, могут быть переназначены и изменены. Это означает, что после объявления переменной её можно не только изменить, но и полностью переназначить на другое значение.🟠Const Переменные, объявленные с помощью нее, не могут бытьFrontend | Вопросы собесов
15 Sept, 09:05
🤔 Зачем нужен docker?Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации.🚩Почему нужен Docker?🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере.🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер.🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes).🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены.🟠Работает везде (Windows,Frontend | Вопросы собесов
14 Sept, 16:11
🤔 Зачем нужен Docker?Docker позволяет упаковать приложение и все его зависимости в контейнер, обеспечивая одинаковую среду для разработки, тестирования и продакшна.Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знанийFrontend | Вопросы собесов
14 Sept, 09:05
🤔 Как изменить стили кнопок с атрибутом disabled?C атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.🚩Пример использования🟠Селектора [disabled] Этот селектор выбирает все элементы, у которых присутствует атрибут disabled. button[disabled] { background-color: gray; color: white; border: 1px solid #ccc; cursor: not-allowed; / Указывает, что элемент недоступен для взаимодействия / opacity: 0.6; / Уменьшает непрозрачность / }🟠Псевдокласса :disabled Этот селектор выбирает все элементы, которые находятся в состоянии disabled. button:disabled { background-color: gray;Frontend | Вопросы собесов
13 Sept, 09:05
🤔 Что делает omit?omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей.В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce().Реализация omit с Object.fromEntries() (современный способ) function omit(obj, keys) { return Object.fromEntries( Object.entries(obj).filter(([key]) => !keys.includes(key)) ); }const user = { name: "Alice", age: 25, password: "123456" }; const safeUser = omit(user, ["password"]);console.log(safeUser); // { name: "Alice", age: 25 }Реализация omit с reduce() (альтернативный способ) function omit(obj, keys) {Frontend | Вопросы собесов
12 Sept, 09:05
🤔 Какие преимущества у di?Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.🚩Почему DI полезен?🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи. class UserService { constructor() { this.db = new Database(); // Прямо создаем зависимость }getUser(id) { return this.db.findUserById(id); } }С DI (гибкость) class UserService {Frontend | Вопросы собесов
11 Sept, 16:11
🤔 Что значит type="submit"?Атрибут type="submit" у тега <button> или <input> указывает, что элемент при нажатии должен отправить форму. Он запускает действие, определенное в action формы, и передаёт данные, собранные с полей.Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знанийFrontend | Вопросы собесов
11 Sept, 09:05
🤔 Зачем нужен eslint?ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.🚩Почему ESLint полезен? Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.🚩Проблемы без ESLintРазные стили написания кода Пропущенные точки с запятой или лишние пробелы Неиспользуемые переменные Ошибки, которые не выявляются во время компиляции (например, undefined переменные)🚩Решение с ESLint:Автоматически находит ошибки и предупреждения Подсказывает лучшие практики Поддерживает кастомные правила Работает в IDE и CI/CD (автоматическая проверка)
Related Channels
Other channels in the same section of the catalogue.
