prefers-contrast

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

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

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

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

👉 @frontendInterview

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

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

👉 @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

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

👉 @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!

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

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

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

👉 @frontendInterview

“Ну тут недельки на две”. Оцениваем задачи

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

👉 @frontendInterview

👉 @frontendInterview

backface-visibility

Свойство backface-visibility управляет видимостью задней части элемента, если тот развёрнут относительно пользователя с помощью свойства transform. Это нужно только для 3D-трансформаций, для 2D-трансформаций свойство не имеет эффекта. Оно используется для создания более реалистичных 3D-сцен, скрывая изнанку объектов при их вращении.

Есть всего два возможных значения:
- visible — значение по умолчанию, задняя сторона элемента видна. Например, при вращении элемента на 180 градусов его задняя часть будет отображаться;
- hidden — задняя сторона элемента не видна. Это полезно, когда вы хотите скрыть обратную сторону элемента при его вращении, что создаёт иллюзию, будто элемент исчезает, когда повёрнут спиной.

Пример
Задняя сторона будет скрыта:

.element {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

👉 @frontendInterview

JavaScript From Zero to Hero

Cамое полное руководство на свете. Освойте современный JavaScript, даже если вы новичок в программировании

👉 @frontendInterview

Training JS #7: if..else and ternary operator

Функция принимает 1 параметр: n, n - это количество хот-догов, которые купит клиент, за покупку нескольких штук предусмотрены скидки. Сколько денег потратит клиент, чтобы купить указанное количество хот-догов?


n < 5              $100
n >= 5 и n < 10    $95
n >= 10            $90


Пример:

saleHotdogs( 1 )  => 100
saleHotdogs( 5 )  => 475
saleHotdogs( 10 ) => 900

👉 @frontendInterview

​Как можно скопировать объект в JS?

Есть несколько способов скопировать объект. Важно понимать разницу между поверхностным (shallow) и глубоким (deep) копированием. Поверхностная копия копирует только сам объект и его непосредственные свойства, в то время как глубокая копия копирует весь объект и все его вложенные объекты.

Поверхностное копирование

1. Метод Object.assign копирует все перечисляемые свойства из одного или более исходных объектов в целевой объект.

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: 2 }

2. Оператор расширения (...) также можно использовать для создания поверхностной копии объекта.

const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy); // { a: 1, b: 2 }

Глубокое копирование

1. JSON.parse и JSON.stringify
Этот метод преобразует объект в строку JSON, а затем обратно в объект, создавая тем самым глубокую копию. Однако он имеет ограничения, такие как невозможность копирования функций и потеря undefined значений.

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }

2. Рекурсивная функция
Можно написать свою рекурсивную функцию для глубокого копирования объекта.

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);
console.log(copy); // { a: 1, b: { c: 2 } }

3. Библиотеки для глубокого копирования
Существуют библиотеки, такие как lodash, которые предоставляют готовые функции для глубокого копирования объектов.

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2 } }

👉 @frontendInterview

​Как клонировать репозиторий на GitHub?

Чтобы клонировать репозиторий, нужно установить на компьютер Git CLI. Как это сделать описано в статьях «Системы управления версиями» и «Git CLI».

Выполните в терминале команду:

git clone <ссылка на репозиторий>

Чтобы найти ссылку на репозиторий, выберите вкладку «<> Code» в репозитории на GitHub. Когда переходите к нужному проекту, эта вкладка открывается по умолчанию. Найдите в основной части вкладки аккордеон, который тоже называется «<> Code» и разверните его. В развернувшейся панели по умолчанию будет выбрана «Local». В ней выберите формат ссылки.

Первые «HTTPS» и «SSH» — это ссылки на репозиторий, использование которых подходит для стандартной команды клонирования, описанной выше. SSH ссылка будет работать в том случае, если настроили доступ по SSH. Для этого надо установить публичный ключ в настройках профиля на GitHub. Подробнее в рецепте «Как настроить доступ по SSH на GitHub». Третий формат — «GitHub CLI». Он набран в виде команды, которая будет работать, если у вас установлен GitHub CLI.

После выбора скопируйте из поля нужную ссылку или команду. Поле расположено после типов ссылок.

После выполнения команды git clone в вашей текущей папке появится папка с тем же именем, что и сам репозиторий. Если хотите указать другую папку для репозитория, укажите в конце команды для клонирования её название:

👉 @frontendInterview

​Открытый вебинар "Создание веб-компонентов и использование Shadow DOM"

🎁Полный обзор веб-компонентов: создание независимых, повторно используемых элементов интерфейса на чистом JavaScript и Shadow DOM

На практике изучите:

- Изоляция стилей и поведения, создание защищенных компонентов.

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

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

✅ Как создать нативные веб-компоненты с использованием JavaScript и Shadow DOM — мощные, инкапсулированные элементы для долгосрочной поддержки.

🤖 Методы работы с Shadow DOM — независимость от остального кода и адаптация под любые задачи

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

🔥Регистрируйтесь на урок 4 декабря, в 20:00 мск и получите скидку на большое обучение «JavaScript Developer. Professional»: https://vk.cc/cFDEU6


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