Елена Литвинова — Искусство Веб-разработки 🛸
Елена Литвинова — Искусство Веб-разработки 🛸
  • 111
  • 899 022
Новости WebElArt | Новая работа в Tipalti | Royal Ascot | Software Engineer 💛
Это разговорное видео, где я расскажу про новую работу, тимбилдинг и поделюсь следующими планами на WebElArt.
💛 Если хотите попасть в Tipalti пишите Дену (не забудьте упомянуть мой канал) www.linkedin.com/in/danielgraimes/
☕️ Моя веб-страница: webelart.com
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
zhlédnutí: 1 111

Video

Новый Бренд канала WebElArt
zhlédnutí 1,6KPřed měsícem
В видео я покажу вам свой новый бренд! 🍀 Моя веб-страница с социальными сетями: webelart.ru На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Реализуем алгоритм префиксного дерева на JavaScript
zhlédnutí 3KPřed 2 měsíci
В текущем видео мы рассмотрим алгоритм префиксного дерева. И поговори о том, где можно их использовать. 🌎 Моя страница: webelart.ru 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке: 📹 Я 💛 Фронт...
Часть 9. Создаём инопланетную галерею на React, TypeScript и NextJS 👽
zhlédnutí 1,5KPřed 3 měsíci
В текущем видео мы поговорим целиком о макете космос, как его можно улучшить и создадим инопланетную галерею. 🌎 Моя страница: webelart.ru 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макетов космос: ⭐️...
Часть 8. Макет космос - верстаем сложные формы (сетку) | ReactJS + NextJS + TypeScript 💎
zhlédnutí 1,5KPřed 3 měsíci
В видео сверстаем две предпоследние секции: логотипы и сложную сетку с линиями. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макетов космос: ⭐️ Часть 1. Верстаем макет космос в прямом эфире - начало: c...
Часть 7. Макет космос - создаём анимированный список ReactJS + NextJS + TypeScript 💎
zhlédnutí 1,3KPřed 3 měsíci
В видео мы создадим анимированный список для макета космос: градиенты, анимации, растворение, увеличение. Чистая магия без дополнительных библиотек. 😎 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макет...
Часть 6. Макет космос - разрабатываем модальное окно на React + TypeScript + NextJS 🪐
zhlédnutí 2,4KPřed 4 měsíci
В видео пройдёмся подробно по макету космос и разберём как создать модальное окно с различными частями внутри. Будем кодить! Быстро и вместе! 👽 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке:...
Решаем задачу calculator на leetcode | JavaScript | Computer Science
zhlédnutí 2,4KPřed 5 měsíci
В видео пройдёмся и решим за O(N) задачу с одного собеседования, Calculator. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке: 📹 Оценка сложности алгоритмов: czcams.com/video/5fraPAJnBFA/video....
Как сделать Motion Макет с анимационной галереей на Preact & TypeScript
zhlédnutí 2,9KPřed 6 měsíci
В видео изучим как сделать Motion Gallery, поговорим про Atomic Design, оптимизацию картинок и многое другое. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ☕️ Купить мне кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Купить мои кисти для ProCreate: webelart.com/illustration. ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: we...
Swipe Галерея: Навигация по клавиатуре. Часть 3. React + TypeScript
zhlédnutí 1,1KPřed 8 měsíci
В текущем видео мы добавим навигацию по клавиатуре и немного баги пофиксим. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анима...
Swipe галерея на react + typescript: добавляем навигацию, счётчик и пишем новый hook. Часть 2.
zhlédnutí 1,8KPřed 8 měsíci
В текущем видео мы продолжим написание галереи на react typescript. Прошлый урок вы можете посмотреть здесь: czcams.com/video/0JDOoWKlNJc/video.html. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Github repo: github.co...
Разрабатываем swipe галерею на CSS: react + vite + typescript
zhlédnutí 3,5KPřed 8 měsíci
Короче swipe галерея на чистом CSS, умереть не встать 😎🤌 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illustration. ✍️ Мой telegram channel: t.me/webelart 🏰 Английский CZcams: @webelart_en 💁🏼‍♀️ Инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart На канале я рассм...
Hotline.tg: превращает интерфейс Telegram в CRM
zhlédnutí 1,8KPřed 9 měsíci
В текущем видео мы вместе с моим первым профессиональным учителем веб-разработки и другом Борисом Адамовом, автором многих классных проектов. В общем, будем вместе представлять текущий проект Hotline.tg. 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illustration. ✍️ Мой telegram channel: t.me...
Создаём SSR приложение на React + NodeJS через Razzle.js. Начало.
zhlédnutí 5KPřed rokem
В видео мы узнаем, что такое Razzle и почему он крут в качестве сборки. Создадим небольшое приложение с двумя страничками. ☀️ ❤️ Мой telegram: t.me/webelart ❤️ Английский CZcams: czcams.com/channels/dw1R35g3uDj4LVt1-aS-hA.html ❤️ Мой проф Инстаграм канал: webelart ❤️ Поддержать развитие канала: www.donationalerts.com/r/webelart, buy.stripe.com/5kA7sL9574SG7xCfZ3 Ссылки используемы...
Верстаем прозрачный текст на любом фоне HTML, CSS, React, TypeScript, Vite
zhlédnutí 4,4KPřed rokem
В текущем видео, мы изучим как создать такой, просто изумительный эффект! Красоту невероятную. P.S. На обложке не мар уанна, мы с дизайнером обложки проверили! ❤️ ❤️ ❤️ Крутой дизайнер, который предоставил макет abduly_haidary 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illus...
Пишем анимацию растворения в Wolf Галерее | React + TypeScript
zhlédnutí 3,4KPřed rokem
Пишем анимацию растворения в Wolf Галерее | React TypeScript
Пишем галерею на React + TypeScript & Deploy
zhlédnutí 8KPřed rokem
Пишем галерею на React TypeScript & Deploy
Изучаем TSconfig, TypeScript Config. Часть 2. - compilerOptions - modules
zhlédnutí 2,5KPřed rokem
Изучаем TSconfig, TypeScript Config. Часть 2. - compilerOptions - modules
Алгоритм бинарного поиска на JavaScript
zhlédnutí 8KPřed rokem
Алгоритм бинарного поиска на JavaScript
Часть 5. Доделываем вёрстку меню космос - ReactJS + TypeScript + NextJS
zhlédnutí 3,3KPřed rokem
Часть 5. Доделываем вёрстку меню космос - ReactJS TypeScript NextJS
Часть 3. Верстаем арт кнопку к макету, разбираем варианты. ReactJS + TypeScript + NextJS
zhlédnutí 3,3KPřed rokem
Часть 3. Верстаем арт кнопку к макету, разбираем варианты. ReactJS TypeScript NextJS
Изучаем TSconfig, TypeScript Config. Часть 1. ❤️‍🔥
zhlédnutí 4,6KPřed rokem
Изучаем TSconfig, TypeScript Config. Часть 1. ❤️‍🔥
Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React
zhlédnutí 24KPřed rokem
Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React
Пишем и подробно разбираем алгоритм Quick Sort на JavaScript | Быстрая сортировка
zhlédnutí 9KPřed rokem
Пишем и подробно разбираем алгоритм Quick Sort на JavaScript | Быстрая сортировка
Создаём и деплоим собственный FULL STACK блог | NextJs + Sanity
zhlédnutí 11KPřed rokem
Создаём и деплоим собственный FULL STACK блог | NextJs Sanity
Реализуем сортировку пузырьком + оптимизация + reverse
zhlédnutí 5KPřed rokem
Реализуем сортировку пузырьком оптимизация reverse
TypeScript от А до Я - часть 2: classes, extends, implements, generics, utility types
zhlédnutí 18KPřed rokem
TypeScript от А до Я - часть 2: classes, extends, implements, generics, utility types
TypeScript от А до Я - часть 1: primitives, objects, array, types, enums, interfaces
zhlédnutí 41KPřed rokem
TypeScript от А до Я - часть 1: primitives, objects, array, types, enums, interfaces
Делюсь опытом сдачи IELTS General Test в Англии | UKVI
zhlédnutí 2,5KPřed rokem
Делюсь опытом сдачи IELTS General Test в Англии | UKVI
Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript
zhlédnutí 22KPřed 2 lety
Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript

Komentáře

  • @larisaplatova1644
    @larisaplatova1644 Před dnem

    Спасибо за информацию

  • @theonly.lightfall
    @theonly.lightfall Před 2 dny

    Спасибо за видео. От начала и до конца иногда заглядывал в learn.js чтобы в самом конце услышать его как один из источников информации. Случайности не случайны )

  • @user-dl1ii9tp4u
    @user-dl1ii9tp4u Před 2 dny

    Комментарий в поддержку канала.

  • @ReAgent003
    @ReAgent003 Před 2 dny

    48:10 сложность этого шафла - n*logn из-за сортировки. если применять тасование Фишера-Йетса, будет эффективнее: линия

  • @ReAgent003
    @ReAgent003 Před 2 dny

    Спасибо тебе большое за видосы! Способ улучшения шафла: как в начальной версии рандомно расставляешь числа на доске, а потом считаешь по формуле (её легко найти в инете), решаема данная расстановка или нет. если нет, повторяешь пока формула не покажет успех. Так как там вероятность 50 на 50, то много шафлов делать не придётся Как ещё улучшить пятнашки: 1) поставить картинки к числам 2) добавить функцию сокрытия чисел чтобы ориентироваться только на картинки 3) выбор размера поля 4) добавить кнопку для автоматического решения пазла с помощью какого-либо алгоритма, например А*. Если А*, то он будет искать гарантированно оптимальный путь (с минимальным количеством перестановок для нахождения решения). Это уже непростая задача

  • @love_renata_russia
    @love_renata_russia Před 5 dny

    Большое спасибо!

  • @user-bl4us5kt9c
    @user-bl4us5kt9c Před 5 dny

    интересная потребность ❤ И милая дикция.

  • @gaengedev2583
    @gaengedev2583 Před 6 dny

    Your CZcams videos are so incredibly good that I can divide my life as a JavaScript developer into before and after discovering them !!!

  • @gaengedev2583
    @gaengedev2583 Před 6 dny

    I love you 💞Thank you for the great lecture. I love you.

  • @dimalukashenko4865
    @dimalukashenko4865 Před 11 dny

    Отличный урок, спасибо за проделанную работу!

  • @vasya8441
    @vasya8441 Před 13 dny

    Хороший ролик, я правда картинку не скачивал с алмазом, я нажал windows+shift+s и так сохранил, прямо с Вашего видео.

  • @user-xs2dx2mh3f
    @user-xs2dx2mh3f Před 13 dny

    Деплой на версель == вендэрлок )

  • @user-pr8hh4xe7v
    @user-pr8hh4xe7v Před 15 dny

    Дополнением короткое видео про условные типи и infer))

  • @stasleonov5196
    @stasleonov5196 Před 16 dny

    Елена, большое спасибо за объяснения.

  • @kezhasat8578
    @kezhasat8578 Před 16 dny

    Шикарно

  • @ruslanmustafin8887
    @ruslanmustafin8887 Před 22 dny

    было бы классно посмотреть урок про авторизацию, регистрацию, выход из системы (signin, signup, signout ) с использованием nextJS + typescript + nextAuth + firebaseSDKAdmin + prizma + JWT token, refresh τoken, очень хотелось бы увидеть подобный контент

  • @Tciganskybaron
    @Tciganskybaron Před 22 dny

    Спасибо, отличное видео. Теперь я понимаю что такое регулярные выражения!

  • @true227
    @true227 Před 24 dny

    Елена, а это нормально, что если скажем месяц-полтора не пользовался какой-нибудь либой, то лезешь в доку и вспоминаешь что и как там? Или тебе говорят: напиши сегодня роутинг и ты без доки сразу на лету его пишешь?

  • @franticf2548
    @franticf2548 Před 27 dny

    Красивая

  • @Vllad_Ko
    @Vllad_Ko Před 28 dny

    #webelart throttle попробуйте вызвать в строгом режиме и нет, интересно что-то измениться? Подсказка будет разный результат. Может лучше на 40 строке сделать saveThis || saveArgs А так, материал -- супер!

  • @gromovboris
    @gromovboris Před 29 dny

    если у вас нету ноды - сорян, прощайте, реторн =DD

  • @sergey_zatsepin
    @sergey_zatsepin Před měsícem

    А на чём бекэнд пишешь? NodeJS? В ООП-стиле? А на лошадок ставила(и как успехи)? А как считаешь, книги допустим по JS, которые прочитала/изучила. помогли ли тебе прокачаться как разработчице, или в этом плане лучше всего было много практики, а книги это просто как штришочки?

    • @webelart
      @webelart Před 29 dny

      Привет, Серёж. Да, NodeJS в разных стилях. Если брать NestJS то там прям ООП, но я обычно придерживалась не его. Не знаю не особо заходил этот стиль. На лошадок, нет не ставила. Никогда особо не было интересны азартные игры, даже ради фана. Не знаю почему, но ребята были которые и проигрывали и выигрывали, ставили скорее по 5-10 фунтов ради интереса. Всё что я читала и делала было полезным. Любое уделение внимания профессии, даже если это не нужно на работе напрямую зажигает что-то внутри, интерес, любопытство и хочется продолжать. Это как проявление любви. Если этого не делать потухаешь со временем. И кстати про книги у меня есть куча, которые не прочитала, и есть книги которые частично прочитала, сейчас кстати стараюсь уйти больше к докам, но я их не люблю :D Надо что-то делать.

  • @user-bn7mg3fs5d
    @user-bn7mg3fs5d Před měsícem

    Человек Веба

  • @dima__rx5fw3rm1n
    @dima__rx5fw3rm1n Před měsícem

    6:26 писал в проде на несте. Это в разы удобнее, но сложнее экспресса. По факту, есть вещи, сильно упрощающие жизнь типа ioc контейнеров. Прямо дольше писать на несте, чем на экспрессе. Но есть те же декораторы, масса удобных для готовки апишки

  • @0000Koni
    @0000Koni Před měsícem

    Категорическая благодарность за столь подробный разбор от А до Я + за приятные бонусы в виде оптимизации, а также рассмотрения сложности алгоритма.

  • @ruslanmustafin8887
    @ruslanmustafin8887 Před měsícem

    Интересный контент, модальное окно как то обошлось без анимации, для такого интересного макета наверное это не очень, когда уже присутствует анимация, можно наверное было бы наверное добавить простой scale, появление из центра экрана и исчезновение к центру экрану

    • @webelart
      @webelart Před měsícem

      Домашняя работа вам. 💛

  • @sweetpath
    @sweetpath Před měsícem

    Понравилось видео! Успехов в работе. Макияж и прическа огонь, и работа с голосом, повествование-приятно! Порадовали мыльные пузыри в конце и эмоции)приятное завершение ролика.

    • @webelart
      @webelart Před měsícem

      Спасибо большое! Мне очень приятно! ❤️

  • @user-pb6is3le2x
    @user-pb6is3le2x Před měsícem

    Рад за тебя. Желаю больших успехов и удачи!

    • @webelart
      @webelart Před měsícem

      Спасибо большое!❤

  • @maratd1781
    @maratd1781 Před měsícem

    Шикарная прическа!

    • @webelart
      @webelart Před měsícem

      Спасибо, очень приятно!

  • @minreiha
    @minreiha Před měsícem

    вааа, классная причёска и макияж

    • @webelart
      @webelart Před měsícem

      Спасибо! 😍🥰

  • @TheLevius
    @TheLevius Před měsícem

    если делать бэк на ноде то либо nest либо fastify, ну и призма чтобы модели не писать вручную

    • @TheLevius
      @TheLevius Před měsícem

      а раз это пет проект тогда можно и bun попробовать, у него модули лучше чем у ноды

    • @webelart
      @webelart Před měsícem

      Почему не koa?

    • @webelart
      @webelart Před měsícem

      @@TheLevius Ещё про nest я переживала, что т.к. смотрела курсы, чтобы не было нарушений авторских прав, т.к. я буду опираться точно на материал. Но он мне понравился.

    • @user-nh6wb3op5j
      @user-nh6wb3op5j Před měsícem

      @@webelart ну koa написал вроде тот же кто и express, кажется разница не большая, а так для пет было бы интересно увидеть fastify на node, либо совсем свежее elysiajs на bun)

    • @shittywizzard5727
      @shittywizzard5727 Před měsícem

      а можно не выбирать, nest может использовать фастифай вместо экспресса, это есть в документации

  • @algoseekee
    @algoseekee Před měsícem

    Качество видосов все растет и растет!

  • @lesson-web
    @lesson-web Před měsícem

    ты лучшая 🥰

  • @ruslanmustafin8887
    @ruslanmustafin8887 Před měsícem

    С кнопкой реально интересно, хотелось бы подробнее видео о кнопке, как реализовать такую кнопку, больше практики и математики)

    • @webelart
      @webelart Před měsícem

      Да, мне тоже понравилась.

  • @ruslanmustafin8887
    @ruslanmustafin8887 Před měsícem

    Я использовал бы лучше наверное иконочный шрифт из svg font awesome, вместо спрайта

    • @webelart
      @webelart Před měsícem

      не всегда это удобно. И не всегда работаешь хорошо.

  • @ruslanmustafin8887
    @ruslanmustafin8887 Před měsícem

    Почему не использовался например Gulp, для автоматизации подключение шрифтов ?

    • @webelart
      @webelart Před měsícem

      Здесь использовала сборщик vite. И перебарщивать с сборщиками не очень люблю. Но автоматизировать можно всегда много чего. Улучшению предела нет, работайте. ❤

  • @aksenovkirill5191
    @aksenovkirill5191 Před měsícem

    Лена привет! Сегодня перед собесом в Я смотрел твое видео по каррированию, это мне сильно помогло в решении задачки на декораторы! Спасибо!

    • @webelart
      @webelart Před měsícem

      Я рада. Спасибо за комментарий.❤

  • @cryptopasha5123
    @cryptopasha5123 Před měsícem

    я б вдул

  • @user-mu4my8fq2e
    @user-mu4my8fq2e Před měsícem

    Мое глубочайшее почтение!

  • @andrey-karyaka
    @andrey-karyaka Před měsícem

    Ваш контент вдохновляет)

  • @user-ji6vi7hp2z
    @user-ji6vi7hp2z Před měsícem

    Очень интересная информация. Спасибо.

  • @jessicalang3654
    @jessicalang3654 Před měsícem

    Чётко быстро грамотно .. супер топовый урок ..на просторах интернета нет такого

  • @mukhammadakilov2828
    @mukhammadakilov2828 Před měsícem

    Классно 🎉

  • @Alex-bo9wt
    @Alex-bo9wt Před měsícem

    Круто!) И спасибо вам за ваши труды🥰

  • @IT-Svyatoslav
    @IT-Svyatoslav Před měsícem

    Ребята) поддержим Елену 👏👏👏 Елена, ребрендинг🏆

  • @sergey_zatsepin
    @sergey_zatsepin Před měsícem

    За консультации мне кажется палюбэ нужно просить плату, если только сама не чувствуешь порыва помочь просто от души. По рекламе я бы сказал есть единичные люди в публичном поле, которые как вариант считают свой контент частью жизненной миссии, и они ничего не рекламируют поэтому. Не для того они создают контент, чтобы на его фоне что-то рекламировать. И очевидно такой подход максимально лучший для зрителя, когда никакой рекламы. Но понятно, не все такие базированные. В обычном варианте, если автор сам юзал рекламируемый продукт и его предлагает, это в принципе нормально. А вот когда блогер предлагает какие-нибудь кредитные карты, вот это, как зумеры бы выразились, зашкварно. У тебя тут кстати прям такой официальный стиль в одежде, и чувствуется голос уставший - после работы пишешь видос? А тебе в Телеграме нравится больше постоянная группа пользователей с правами комментировать нежели чем обычный формат постов с комментариями любых подписантов?

    • @webelart
      @webelart Před měsícem

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

  • @Niachan666
    @Niachan666 Před měsícem

    Супер)

  • @sergey_zatsepin
    @sergey_zatsepin Před měsícem

    Ну вообще анимация(переход transition) работает сразу, достаточно просто классы менять с opacity: 0 на opacity: 1 и обратно. Проблема может быть только в возможных накладках ререндеров и transition. У тебя конечно решение, и скорее всего даже оно будет нормально работать при быстрой смене фото(допустим через клавиатуру по кнопкам если делать), но такое решение как бы не реактовское. Реакт тут мешает получается. Есть библиотеки да, которые допустим несут какой-то лишний функционал, но тогда в идеале было бы, если бы ты показала кастомное решение именно в реакт-стиле.

  • @user-oz7gi4mq3b
    @user-oz7gi4mq3b Před měsícem

    Елена, спасибо большое за урок👏👏👏

  • @sergey_zatsepin
    @sergey_zatsepin Před měsícem

    Спасибо за урок, галерея прикольная. Видео давно выпущено, не знаю как сейчас делаешь уроки, но просто по подаче хотелось бы, чтобы ты больше писала код и меньше юзала "копировать-вставить". Так проще воспринимать и понимать логику решений. По уроку я бы отметил момент с подгрузкой картинок: когда подгружается картинка при клике, может быть ситуация с лагом интернета/сервера, и переключение фото задержится, а обложка уедет уже на нужное превью. Получится такой рассинхрон. Поэтому я бы предложил здесь всё-таки рендерить только одну картинку и при начальной загрузке страницы подгружать все остальные картинки сразу, но асинхронно, примерно так: useEffect(() => data.forEach(item => new Image().src = item.src), []). По превью есть несколько моментов, возможно у тебя немного глаз "замылился", у основного фото 2:1 разрешение, у превью 154X80, слегка не совпадает. Далее между превью используешь margin по бокам, хотя здесь у нас flex-контейнер, удобнее просто использовать gap для расчётов. Ну и позиционирование оверлея - белой обложки с номером фото, здесь ты используешь left + translate, но остаётся ещё литерал числа(164) в js-коде для перетаскивания дорожки с превью. Всё это можно связать, используя css переменные, к ним есть доступ в js, соответственно получаем значение в js и используем в расчётах. Тогда будет максимальная динамичность.

    • @webelart
      @webelart Před měsícem

      Превьюшки дизайнер делает. Я к нему не пристаю ❤️

    • @sergey_zatsepin
      @sergey_zatsepin Před měsícem

      @@webelart Превью я имел в виду компонент галереи в коде), у тебя это <PreviewGallery />