backface-visibility

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

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

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

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

👉 @frontendInterview

Читать полностью…

Обучение на Frontend-разработчика. С нуля за 9 месяцев.

На курсе вы получите все навыки, необходимые для старта в профессии Frontend-разработчика.
Персональный наставник middle/senior уровня.
14 проектов, лайвкодинг, хакатоны, репетиции техсобеседования.
Освоите JavaScript, React, TypeScript
Официальный диплом и сертификат школы.
Поддержка наставника по JS в течение 3-х месяцев после диплома.
Гарантия трудоустройства. Если вы не устроитесь, вернём деньги. Это закреплено в договоре п. 6.14
С 9 по 30 ноября 2024 г. скидка 40% на все программы Result School

Узнать больше

#реклама 16+
result.school
О рекламодателе

Читать полностью…

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

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

👉 @frontendInterview

Читать полностью…

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

Читать полностью…

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

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

👉 @frontendInterview

Читать полностью…

prefers-contrast

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

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

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

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

👉 @frontendInterview

Читать полностью…

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

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

Читать полностью…

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

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

👉 @frontendInterview

Читать полностью…

Большая кладовая онлайн-курсов

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

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

У Stepik есть свой телеграм-канал, в котором они рассказывают об авторских курсах (как платных, так и бесплатных), а также публикует полезные статьи и ссылки. У них есть такие подборки курсов:

- Разработка на Python
- Дизайн и графика
- Тестирование ПО
- Работа с данными

Подпишитесь на stepik_courses и найдите интересующий курс для себя!

Подписаться

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

Читать полностью…

​Событие 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

Читать полностью…

Помощь в трудоустройстве в IT-сфере!

В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно!

Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита.

Для этого нужно:

- Перейти по ссылке
- Заполнить анкету и ответить на вопросы (занимает менее 3 минут)
- На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать

Перейти на сайт

#реклама 16+
urban-university.ru
О рекламодателе

Читать полностью…

UX designer - нарисовал
Devs - сделали
QA - протестировали
Пользователь:

👉 @frontendInterview

Читать полностью…

Дизайн в FIGMA с нуля. Бесплатный курс + портфолио

Онлайн-программа с наставником и чатом. Дизайн от профессионалов. Доступ 0 руб.

Узнать больше

#реклама 16+
yudaevschool24.online
О рекламодателе

Читать полностью…

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

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

Читать полностью…

Вы опытный 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

Читать полностью…

​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

Читать полностью…

Помощь в трудоустройстве в IT-сфере!

По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям.

Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест.

По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение.

Перейти на сайт

#реклама 16+
urban-university.ru
О рекламодателе

Читать полностью…

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

👉 @frontendInterview

Читать полностью…

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

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

👉 @frontendInterview

Читать полностью…

⚡ Открытый урок «Эффективная работа с Next.js и TypeScript»

🗓 25 ноября в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Практический курс по TypeScript» от Otus.

На вебинаре:

✔разберем, как создавать масштабируемые и производительные приложения с помощью Next.js и TypeScript;
✔ поговорим об использовании статической и серверной генерации, работе с маршрутизацией и оптимизации производительности;
✔обсудим типизацию компонентов и интеграцию с внешними API для создания надежных приложений.

🔗 Ссылка на регистрацию: https://vk.cc/cEXrnX

🎁 Только в "Черную пятницу", скидки на курс до 15%! Подробности у менеджеров.

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

Читать полностью…

Приглашаем на вебинар курса 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

Читать полностью…

Как мы делаем СУБД Pangolin?

Привет! На связи команда разработки СУБД Platform V Pangolin.

Мы делаем полезное сообщество для всех профессионалов из мира СУБД и всех, кому интересен наш продукт.
Пишем о том, как делаем Pangolin, разбираем ваши кейсы в чате, помогаем решать рабочие задачки, зовем на бесплатные вебинары и митапы, проводим квизы про базы данных, разбираем английский сленг, а еще у нас есть вакансии и идеи для хобби айтишников...

Подпишитесь, у нас как раз много нового!

Подписаться

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

Читать полностью…

Agile для всех

AGILE дает реальные и действенные ответы на вопрос, который не дает спокойно спать руководителям: «Как оставаться успешным в быстро меняющемся и непредсказуемом мире?» Эта методология уже завоевала рынок, доказав что является одним из лучших подходов для создания и доставки программного обеспечения. «Agile для всех» адресован практикам, из этой книги вы узнаете как целые организации — от менеджеров по продукту и разработчиков до маркетологов и руководителей — могут использовать «гибкий» подход.

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

👉 @frontendInterview

Читать полностью…

Что такое falsy значения?

"falsy" (ложные) значения — это значения, которые при приведении к логическому типу (Boolean) дают false. Эти значения часто используются в условиях (например, в if выражениях) для проверки истинности или ложности.

Основные значения:
false:
Само значение false является ложным.

  if (false) {
     console.log('Это не выполнится');
   }
   

0 и -0:
Нулевые значения считаются ложными.

if (0) {
     console.log('Это не выполнится');
   }

if (-0) {
     console.log('Это тоже не выполнится');
   }

"" (пустая строка):
Пустая строка считается ложной.

if ("") {
     console.log('Это не выполнится');
   }

null:
Значение null также является ложным.

if (null) {
     console.log('Это не выполнится');
   }

undefined:
Значение undefined является ложным.

if (undefined) {
     console.log('Это не выполнится');
   }

NaN (Not-a-Number):
Специальное значение NaN, которое обозначает нечисловое значение, считается ложным.

if (NaN) {
     console.log('Это не выполнится');
   }

Читать полностью…

Войти в IT – в 37 и с дипломом филфака

Я нашла свою первую работу тестировщика в 37 лет, с гуманитарным образованием, без коммерческого опыта и без курсов. В этой статье хочу показать все максимально объективно – и успехи, и разочарования на этом пути.

👉 @frontendInterview

Читать полностью…

​Как опубликовать сайт прямо на GitHub?

Задача
Как опубликовать сайт в виде набора HTML-страниц для тестирования или постоянного размещения прямо на GitHub. Например, такой сайт может стать отличным портфолио. Для него будут бесплатными хостинг и доменное имя третьего уровня.

На GitHub для этого есть специальный инструмент — GitHub Pages. С помощью него публикуют сайты, используя в качестве хостинга сам сервис. Есть два способа использования этого инструмента:

1. Собранный сайт помещается в отдельную папку в выбранной ветке репозитория, GitHub просто отображает эту папку как корневую для сайта. Такой подход используют для показа уже собранного статического сайта в виде набора файлов в форматах, которые отображаются в браузере напрямую.
2. Статический сайт сначала собирается с помощью средств автоматизации GitHub Actions и публикуется также как в первом случае.

Второй способ не будем рассматривать, так как он находится на этапе бета-тестирования. В этом режиме можно выбрать уже готовые решения, например, GitHub Pages Jekyll и Static HTML, а можно настроить свой воркфлоу.

Рассмотрим в статье подробно первый способ.

👉 @frontendInterview

Читать полностью…