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

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

👉 @frontendInterview

Full-Stack React Projects (2020)

React в сочетании с проверенными в отрасли серверными технологиями, такими как Node, Express и MongoDB, позволяет разрабатывать и развертывать надежные полнофункциональные веб-приложения. Данное обновленное второе издание фокусируется на последних версиях и соглашениях технологий в этом стеке, а также на их новых фичах, таких как хуки в React и async / await в JavaScript. В книге также раскрываются сложные темы, такие как создание веб-приложения для учебных занятий и визуализация данных в приложении для отслеживания расходов.

👉 @frontendInterview

Invert values

Вам дан массив чисел. Сделайте все положительные числа отрицательными, а отрицательные положительными и верните новый массив.

Примеры:
invert([1,2,3,4,5]) == [-1,-2,-3,-4,-5]
invert([1,-2,3,-4,5]) == [-1,2,-3,4,-5]
invert([]) == []

👉 @frontendInterview

​Какие значения можно задать CSS переменной?

CSS переменные это сущности, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. --main-color: black;) и доступны через функцию var() (например. color: var(--main-color);) .

В CSS переменную можно записать:
1. Значения в различных единицах измерения, доступных в CSS

 :root {
   --nice-padding: 20px;
 }

 article {
   padding: var(--nice-padding);
 }

2. Небольшие вычисления с помощью calc() и другие CSS функции

 {
  --image-width: 800px;
  --image-height: calc(var(--image-width) / (4/3));
 }

 img {
   width: var(--image-width);
   height: var(--image-height);
 }

3. Просто числовые значения, которые затем можно использовать, например в calc()
:root {
--magic-number: 41;
}
.crazy-box {
width: calc(var(--magic-number) * 1%);
}

4. Картинки, которые затем можно использовать в content или background
:root {
--image-from-somewhere: url(https://codersblock.com/assets/images/logo.png);
}

.a {
background-image: var(--image-from-somewhere);
}

И многое другое. Все возможные значения можно посмотреть в оригинальной статье.

👉 @frontendInterview

👉 @frontendInterview

​Как отсортировать массив в JavaScript?

Сортировка массивов в JavaScript делается через метод array.sort()

Сортировка массива в алфавитном порядке:

 var myarray=["Bob", "Bully", "Amy"]
 myarray.sort() // Массив становится ["Amy", "Bob", "Bully"]

А теперь, посмотрите на то, что случится когда мы вызовем array.sort() на массиве из чисел:

 var myarray=[7, 40, 300]
 myarray.sort() //Теперь он становится таким [300,40,7]

Хотя 7 в численном порядке меньше, чем 40 или 300, в лексикографическом порядке, семёрка больше, таким образом она оказывается правее всех в отсортированном массиве. Всегда имейте в виду, что по-дефолту array.sort() сортирует элементы в лексикографическом порядке.

array.sort() допускает дополнительные параметры в виде функций
Формат такой функции будет выглядеть таким образом:

 function sortfunction(a, b){
  //Тут сравнивается a и b, и возвращается -1, 0 или 1.
  //Если возвращается -1, то число смещается влево
  //Если вернется 1, то число смещается вправо
  //Если 0, то остается на месте
 }
 array.sort(sortfunction)

Когда такая функция передаётся в array.sort(), элементы массива сортируются, основываясь на взаимосвязи между ними.

👉 @frontendInterview

👉 @frontendInterview

Как обрезать текст в блоке после n-ной строки?

Cвойство line clamp усекает текст до определенного количества строк.
Синтаксис

 .module {
   line-clamp: [none | integer];
 }

В текущем варианте спецификации line-clamp принимает следующие значения:
1. none: не устанавливает максимальное количество строк, и в результате усечение не происходит.
2. integer: устанавливает максимальное количество строк перед усечением контента, а затем отображает многоточие (…) в конце последней строки.

Эй, а не могу я сделать это с помощью text-overflow?
text-overflow действительно имеет значение ellipsis, которое будет обрезать текст:
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Но text-overflow обрежет текст только в первой строке, а если вам нужно вывести две или более, можно использовать line-clamp

👉 @frontendInterview

Появился топовый курс с акцентом на практику для Middle фронтенд-разработчиков!

Тимлиды с опытом работы в Яндексе, Вконтакте, TON и Frogly научат создавать масштабные продукты уровня ведущих международных компаний. На курсе вам предстоит с нуля построить новостную ленту и превратить её в рабочий production-ready сервис.

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

За 5 месяцев обучения вы получите все знания и навыки, необходимые для работы над крупными проектами в крутой команде. Вы познакомитесь с best practices современной фронтенд-разработки, разберётесь, как устроен веб, научитесь разговаривать на одном языке с Backend, QA и DevOps специалистами и даже сможете делать их работу самостоятельно.

Записывайтесь на курс по ссылке до 16 сентября — по промокоду вы получите скидку 10%. Также на сайте доступна бесплатная демоверсия — можете начать с неё. Ждём вас!