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

“Ну тут недельки на две”. Оцениваем задачи Работа в сфере информационных технологий – не стройка. Большая часть задач требует от человека мыслительного процесса и творческого подхода. Именно поэтому так сложно оценить задачу правильно, именно поэтому мы часто ошибаемся в наших оценках и это нормально. Ошибки – часть рабочего процесса. 👉 @frontendInterview

Выразительный 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

Вы опытный web-разработчик? Приходите на открытый вебинар "От React к Vue за один шаг: как легко освоить новый фреймворк"! Что будет на вебинаре? - Сравнение основных компонентов и концепций React и Vue, чтобы увидеть, как они перекликаются. - Разбор синтаксиса, управления состоянием и рендеринга — выясним, насколько привычные подходы из React можно легко применить в Vue. - Практическое руководство по быстрому освоению Vue через знакомые идеи и шаблоны из React. Что узнают участники? - Как легко перейти с React на Vue, используя знакомые концепции. - Принципы организации компонентов и управления состоянием, которые делают переход плавным и понятным. - Уверенность в том, что навыки, освоенные в React, могут быть полезны и ускорить работу с Vue в реальных проектах. 🔥Регистрируйтесь на урок 27 ноября, в 20:00 мск и получите скидку на большое обучение «JavaScript Developer. Professional»: https://vk.cc/cFgGP4 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjdBz9Dd

​Что лучше использовать 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

Помощь в трудоустройстве в IT-сфере! По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям. Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест. По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение. Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

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

⚡ Открытый урок «Эффективная работа с Next.js и TypeScript» 🗓 25 ноября в 20:00 МСК 🆓 Бесплатно. Урок в рамках старта курса «Практический курс по TypeScript» от Otus. На вебинаре: ✔разберем, как создавать масштабируемые и производительные приложения с помощью Next.js и TypeScript; ✔ поговорим об использовании статической и серверной генерации, работе с маршрутизацией и оптимизации производительности; ✔обсудим типизацию компонентов и интеграцию с внешними API для создания надежных приложений. 🔗 Ссылка на регистрацию: https://vk.cc/cEXrnX 🎁 Только в "Черную пятницу", скидки на курс до 15%! Подробности у менеджеров. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjeC