👉 @frontendInterview

Для чего используется оператор !! (двойного отрицания)?

Это не новый оператор, это всего лишь два оператора !, просто они записаны подряд. Что это даёт? Тут тоже всё довольно просто. Допустим у вас есть функция, которая возвращает какой-то результат: строку, число, объект и т.д. А вам необходимо получить от этой функции true или false. Вот два записанных подряд оператора ! и делают именно это. Если функция вернёт строку, отличное от 0 число, объект, массив — в общем любое правдивое значение, то выражение !! превратит его в true, в противном случае вы получите false.

👉 @frontendInterview

👉 @frontendInterview

A Smarter Way to Learn JavaScript: The New Tech-Assisted Approach that Requires Half the Effort

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

👉 @frontendInterview

Get key/value pairs as arrays

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

Пример:
keysAndValues({a: 1, b: 2, c: 3})
// should return [['a', 'b', 'c'], [1, 2, 3]]

👉 @frontendInterview

Что такое Pure Component в React?

Pure Components - это компоненты, которые не рендерятся повторно при обновлении их состояния и пропов одними и теми же значениями. Если значение предыдущего и нового состояния и пропов равны, компонент не отрисовывается повторно. "Чистые" компоненты ограничивают повторный рендеринг, обеспечивая повышение производительности приложения.

Особенности "чистых" компонентов:
1. Предотвращают повторный рендеринг компонента, если его состояние и пропы остались прежними
2. Неявно реализуют метод shouldComponentUpdate()
3. state и props сравниваются поверхностно
4. В ряде случаев, такие компоненты являются более производительными

"Чистые" компоненты похожи на обычные, за исключением того, что они неявно реализуют метод shouldComponentUpdate(), проводя поверхностное сравнение состояния и пропов. Если текущие и следующие состояние и пропы являются одинаковыми, повторный рендеринг компонента не выполняется.

👉 @frontendInterview

Курс «Английский для IT-профессий» от Яндекс Практикума

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

Обучение построено не вокруг абстрактной теории, а вокруг рабочих ситуаций и полезных для карьеры навыков:

✋Стендапы. Подготовитесь обсуждать задачи, задавать вопросы и просить о помощи.
👨‍💻 Работа с заказчиками. Научитесь презентовать решения, говорить про баги и фичи.
📣 Митапы. Сможете понимать на слух доклады и выступать сами.
😎 Собеседования. Научитесь рассказывать про свой опыт, понимать вопросы и тактично переспрашивать.
👯 Неформальное общение с коллегами. Сможете рассказать о своих интересах, опыте, планах на будущее.
💻 Код-ревью. Сможете описать сделанное, дать обратную связь, тактично отстоять своё мнение.

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

​Как реализовать перетаскивание элементов в браузере?

Drag & drop может понадобиться в разных ситуациях — например, в таких:
1. Простое визуальное изменение положения элемента.
2. Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
3. Изменение контекста элемента. Пример — перенос задачи в таск трекере из одного списка в другой.
4. Перемещение локальных файлов в окно браузера.

HTML Drag and Drop API
В стандарте HTML5 есть API, который позволяет реализовать эффект drag & drop. Он даёт возможность с помощью специальных событий контролировать захват элемента на странице мышью и его перемещение в новое положение.

По умолчанию перемещаться могут только ссылки, изображения и выделенные фрагменты. Если начать перетаскивать их, появится фантомная копия, которая будет следовать за курсором. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true.
<div draggable="true">Draggable element</div>

Для реализации перемещения используется ряд событий, которые срабатывают на разных этапах. Основные из них:

drag — срабатывает каждые несколько сотен миллисекунд, пока элемент перетаскивается.
dragstart — срабатывает в момент начала перетаскивания элемента.
dragend — срабатывает в момент, когда перетаскивание элемента завершено.
dragover — срабатывает каждые несколько сотен миллисекунд, пока перетаскиваемый элемент находится над зоной, в которую может быть сброшен.
drop — срабатывает в тот момент, когда элемент будет брошен, если он может быть перемещён в текущую зону.

👉 @frontendInterview

👉 @frontendInterview

Как можно изменить форму картинки или HTML элемента?

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

Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (circle()).

Существует два способа использования clip-path:

1. На CSS - доступны разные фигуры: polygon, circle, ellipse и inset; inset предназначен для прямоугольников.
Преимущества CSS:
1) Легкий синтаксис,
2) Можно использовать относительные единицы.

2. На SVG - в качестве альтернативы можно создать фигуру с помощью SVG, а затем обрезать элемент по этой фигуре с помощью синтаксиса.
Преимущества SVG:
1) Поддержка браузерами лучше.
2) Вы можете сделать обрезку сложными фигурами.

👉 @frontendInterview

Накопили много вопросов о веб-разработке, но не знаете кому их задать? Тогда приглашаем вас на лайв «Вопрос-ответ с программистом»! В прямом эфире на ваши вопросы ответит опытный разработчик со стажем более 20 лет.


Приходите на лайв, если вы:
✅ Новичок в веб-разработке.
✅ Интересуетесь веб-разработкой и имеете базовые знания.
✅ Хотите поменять работу и попасть в IT.

Среди всех вопросов мы выберем два самых интересных и подарим их авторам проект по вёрстке!

Записывайтесь на лайв!

👉 @frontendInterview