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

Выразительный React: интерактивность на клиенте

В статье описан один из стандартных подходов к созданию React-приложения.
Эта статья — продолжение серии «Выразительный React». В предыдущей статье «Выразительный React: простые компоненты на сервере» была показана техника SSR (Server-Side Rendering). В ней разбирались определения, которые пригодятся при чтении этой статьи.

👉 @frontendInterview

Привет!

IT-компания ASTON запускает бесплатное онлайн-обучение Java-разработчик!

🌟 Лучшие участники получат приглашение на стажировку JAVA Разработчик с последующим трудоустройством в ASTON.
🤩 На этапе Лаборатории стипендия 23 000 RUB, первая ЗП от 70 000 RUB

Обучение включает 3 ступени: 📌 I (начальный уровень): онлайн-курс (1 месяц); 📌 II (средний): онлайн-интенсив (2 месяца); 📌 III (продвинутый уровень): Лаборатория (3-4 месяца) с трудоустройством.

Старт курса (I ступень) — 9 декабря 2024:1 месяц, 2 раза в неделю, вечерние занятия (1–1,5 часа).

🌍 Где набираем:Россия (до GMT+7)

Требования:
базовые знания Java;
законченное высшее образование.

📋 РЕГИСТРАЦИЯ

Расти в IT вместе с ASTON!

#реклама
О рекламодателе

👉 @frontendInterview

​Что лучше использовать div или React.Fragment?

React.Fragment
Позволяет группировать несколько дочерних элементов без добавления дополнительного узла в DOM. Это полезно, когда вам нужно вернуть несколько элементов из компонента, но вы не хотите добавлять лишние элементы, такие как <div>, в структуру DOM.

Плюсы:
- Чистый DOM
Фрагменты не создают дополнительных элементов в DOM, что помогает избежать ненужных вложенных структур и упрощает разметку.
- Производительность
Избегание дополнительных узлов может немного улучшить производительность, так как уменьшается количество элементов, которые браузер должен обрабатывать и рендерить.
- Логическая группировка
Использование фрагментов делает код более семантичным и чистым, показывая, что элементы логически связаны без необходимости добавлять новый HTML-элемент.

Пример использования
Элемент <div> добавляет новый узел в DOM и используется для группировки других элементов. Это стандартный блоковый элемент в HTML, который часто используется для создания контейнеров и структурирования страницы.

import React from 'react';

function List() {
  return (
    <React.Fragment>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </React.Fragment>
  );
}

// С использованием короткого синтаксиса:
function List() {
  return (
    <>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
      <li>Элемент 3</li>
    </>
  );
}

Плюсы`<div>`:
- Стилизация и атрибуты
<div> позволяет легко добавлять стили, классы и атрибуты, что делает его полезным для создания структурированных и стилизованных контейнеров.

- Макет и разметка
<div> подходит для создания блоков, секций и контейнеров, которые требуют определенной разметки или стилей.

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

import React from 'react';

function Container() {
  return (
    <div className="container">
      <p>Это первый параграф</p>
      <p>Это второй параграф</p>
    </div>
  );
}

👉 @frontendInterview

​Two fighters, one winner.

Создайте функцию, которая возвращает имя победителя в бою между двумя бойцами. Каждый боец по очереди атакует другого, и побеждает тот, кто первым убьет другого. Смерть определяется как health <= 0.

Каждый боец будет объектом/экземпляром Fighter. Смотрите ниже класс Fighter на выбранном вами языке.

health и damagePerAttack за атаку будут целыми числами, большими 0. Вы можете мутировать объекты Fighter.

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

declare_winner(Fighter("Lew", 10, 2), Fighter("Harry", 5, 4), "Lew") => "Lew"
  
Lew attacks Harry; Harry now has 3 health.
Harry attacks Lew; Lew now has 6 health.
Lew attacks Harry; Harry now has 1 health.
Harry attacks Lew; Lew now has 2 health.
Lew attacks Harry: Harry now has -1 health and is dead. Lew wins.

function Fighter(name, health, damagePerAttack) {
        this.name = name;
        this.health = health;
        this.damagePerAttack = damagePerAttack;
        this.toString = function() { return this.name; }
}

👉 @frontendInterview

Справочник JavaScript. Кратко, быстро, под рукой

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

👉 @frontendInterview

prefers-contrast

Это одно из значений директивы @media для проверки пользовательских настроек. Отслеживает выбор настроек контрастности в системе.

Пример
Давайте зададим модальному окну белую рамку, когда контрастность в системе понижена.

@media (prefers-contrast: more) {
  .dialog {
    border: 2px solid #FFFFFF;
  }
}

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

👉 @frontendInterview

Как быстро мечты удаленщиков разбиваются об реальность

👉 @frontendInterview

В новом выпуске подкаста «Времена НаСтали» руководитель отдела frontend-разработки Олег Рогов и руководитель команды дизайна Анна Труфанова рассказали о low-code решениях в веб-дизайне.
Технология использования платформ позволяет создавать приложения без глубоких знаний в области программирования. Такой подход полезен, если к разработке веб-интерфейсов нужно привлечь бизнес-аналитиков или экспертов из другой нетехнической области.
В подкасте ответили на следующие вопросы.
— Как low-code влияет на процесс дизайна?
— В чем главные преимущества использования этих инструментов по сравнению с традиционными методами разработки?
— Нужно ли иметь базовые знания программирования?
— Каковы текущие тенденции и будущее развитие low-code инструментов в контексте дизайна?

Слушать подкаст на Яндекс.Музыке!

Feature-Sliced Design (FSD): Основы и практические примеры архитектуры

Когда я только начинал свою карьеру фронтенд-разработчика, часто сталкивался с проблемами поддержки кода в проектах. Со временем я понял, что структура кода имеет решающее значение. Так я узнал о Feature-Sliced Design. Этот подход помогает разбивать проект на функциональные части, что упрощает работу с кодом и его сопровождение. Давайте разберемся как это работает.

👉 @frontendInterview

Выразительный React: простые компоненты на сервере

В статье вы познакомитесь с React и создадите первый простой компонент — прямоугольник с собачкой. В этом примере мы не будем запускать код в браузере. Вместо этого напишем простой скрипт, который запустит сервер и отдаст HTML-страницу с компонентом. Эта техника называется рендеринг на стороне сервера (Server-Side Rendering, SSR).

👉 @frontendInterview

Приглашаем на вебинар курса Fullstack Developer!

📅 Дата: 20 ноября 2024 года

🕗 Время: 20:00 (мск)

📍 Тема: Базовое использование системы контроля версий Git

## Что будет на вебинаре?

- Введение в систему контроля версий, основные команды и концепции (репозитории, коммиты, ветки).

- Как клонировать репозиторий, выполнять слияния и разрешать конфликты при работе в команде.

- Рекомендации по эффективному использованию Git и обзор популярных инструментов для удобства работы (например, GitHub, GitLab).

## Что узнают участники?

- Основные команды и концепции Git: как использовать команды git init, git add, git commit, git branch и другие. Эти знания помогут создать и управлять своими проектами, отслеживая изменения в коде и организуя свою работу более эффективно.

- Работа с удалёнными репозиториями: научатся клонировать репозитории, отправлять свои изменения и синхронизировать локальные изменения с удалёнными. Эти навыки будут полезны для совместной работы над проектами в командах и использования платформ, таких как GitHub или GitLab.

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

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

🔗 Зарегистрироваться на вебинар: https://vk.cc/cEUXOc

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjeBbtfm

​Событие change

Событие change срабатывает, когда пользователь изменяет значение в <input>, <select> или <textarea> и фиксирует свои изменения.

Это событие лучше всего использовать при создании форм, когда не требуется постоянно взаимодействовать с каждым изменённым символом в поле ввода. Так же данное событие пригодится и при создании чекбоксов, полей выбора и т. п.

Когда использовать
В текстовых полях (<input>, <textarea>), когда нужно получить окончательное значение после завершения ввода.

В выпадающих списках (<select>), если пользователь выбрал новое значение из дропдауна с доступными опциями.

Чекбоксы и радиокнопки (<input type="checkbox">, <input type="radio">), когда состояние переключается между «выбрано» и «не выбрано». Например, при отправке формы или при взаимодействии с выбором нескольких значений (чекбоксы или выпадающие списки).

Пример:

const input = document.querySelector('.input')

input.addEventListener('change', function (event) {
  console.log(event.target.value)
})

В этом примере мы выбираем элемент с классом .input с помощью document.querySelector(). Используя метод addEventListener, мы привязываем обработчик события change к элементу. Этот обработчик будет вызываться, когда событие произойдет. Внутри функции мы можем получить новое значение элемента с помощью event.target.value. Это значение будет отображено в консоли после изменения и подтверждения ввода пользователем.

👉 @frontendInterview

Trash Party

Вы получите trash1 и trash2, которые могут иметь следующие значения:

[], false, '', new Array(), null, NaN, undefined, 0, -0, 0n, -0n, '0'.

Вы должны вернуть булево значение, если они строго равны.

Примечание:
тройное равенство === и строгое неравенство !== не допускаются

Пример:

compareTrash(0, false) => false
compareTrash('', '')   => true
compareTrash([], 0)    => false

👉 @frontendInterview