Спасибо за урок, галерея прикольная. Видео давно выпущено, не знаю как сейчас делаешь уроки, но просто по подаче хотелось бы, чтобы ты больше писала код и меньше юзала "копировать-вставить". Так проще воспринимать и понимать логику решений. По уроку я бы отметил момент с подгрузкой картинок: когда подгружается картинка при клике, может быть ситуация с лагом интернета/сервера, и переключение фото задержится, а обложка уедет уже на нужное превью. Получится такой рассинхрон. Поэтому я бы предложил здесь всё-таки рендерить только одну картинку и при начальной загрузке страницы подгружать все остальные картинки сразу, но асинхронно, примерно так: useEffect(() => data.forEach(item => new Image().src = item.src), []). По превью есть несколько моментов, возможно у тебя немного глаз "замылился", у основного фото 2:1 разрешение, у превью 154X80, слегка не совпадает. Далее между превью используешь margin по бокам, хотя здесь у нас flex-контейнер, удобнее просто использовать gap для расчётов. Ну и позиционирование оверлея - белой обложки с номером фото, здесь ты используешь left + translate, но остаётся ещё литерал числа(164) в js-коде для перетаскивания дорожки с превью. Всё это можно связать, используя css переменные, к ним есть доступ в js, соответственно получаем значение в js и используем в расчётах. Тогда будет максимальная динамичность.
Привет! Шикарно выглядишь! Зашел на сайт. Действительно очень приятная галерея (как сам сайт в целом). Было бы интересно посмотреть реализацию Меню (сайдбар).
Урок просто супер, спасибо огромное ! Как идея для очередного видео касательно этой галереи, можно сделать адаптив, а можно и не делать, дело автора :)
еще не смотрела, но лайк поставила, тк. знаю, что будет круто добавлю в закладки и буду вместе делать А вообще есть вопрос: стоит ли учиться так как я делаю: вместе с вами допустим разворачиваю проект и повторяю, есть ли вообще смысл в таком обучении? Или нужно брать какой-то проект и тупо пытаться делать, даже если это займет очень много времени тк я еще только изучаю реакт? как вообще обучаться?
Мне кажется собрать по уроку стоит, вы так лучше усвоите, что вы делаете и сможете задать вопросы, и в итоге получить результат. Но нужно задавать вопросы если что-то не понятно и почему так, если сомневаетесь попробуйте по другому. Пробовать придумывать себе ещё задачи и интересности, а что если тоже в плюс, а как добавить это.
Ещё как вариант, реализовать самому. Часть и посмотреть как я сделала. Вот это будет вообще огонь! Т.е. вы пробуете хоть как-то собрать, если для вас это тема новая. А потом смотрите результат и тогда вы усвоите урок ещё лучше и сможете внедрить в себя подходы и понимания.
@@webelart интенсив - маловато)) TS на сегодня ну прям очень полон инфы. А вообще, не смотря на то, что "живём сегодня в 21-м веке", до сих пор не везде используют TS с React. Поэтому было бы неплохо накидать свежих новичковых проектов просто на React + JS. Сколько ищу инете - не могу найти интересные идеи, у всех одна банальщина: тудушки, лендинги, и т.п. Блин, вы же сеньорные ребята ! у вас, сеньоров, фантазии-то должно быть по-больше ! А-то бедные работодатели уже зеленеют при виде лендингов и туду-листов )))
в общем решил пересмотреть еще раз видео и что бы время не терять поставил 1.25 скорость:D как итог для меня все просто ооочень медленно в нормальной скорости оказалось)
Если эта галерея будет включать свайп и еще настройки получится и того больше. В какой-то степени я могу с вами согласиться, даже чтобы растворение картинки написать нужно устраивать пляски между фотографиями, на наивном JS это намного быстрее.
Кстати а знаете что, кода то не много. Сборка есть - да правда, файлы вокруг создались. Сама выжимка по галерее строк 200-300, если все в файле одном собрать. Если сборку создавать на gulp, а она нужна, тоже получится много файлов. Так что вы и одновременно правы и одновременно нет. Я проект задеплоила двумя командами. И да это не index.html + index.css + index.js можно было бы и три файла создать. Однако если проект расширяется, то вы в них умрете со временем. А я как никак коммерческий разработчик крупных проектов. И думаю я хочу создавать на реактив + тайпскрипт + сборка, чтобы люди привыкали к созданию и работе над крупными проектами. Пусть сейчас это и маленькая галерея :)
Реакт не используют для галерей это неэффективно Реакт использую для крупных SPA приложений, в которых модульность и компонентный подход очень сильно упрощают разработку До недавнего времени был почти с аналогичным мнением, но начав использовав React и Typescript понимаешь насколько всё упрощено и унифицированно) А типизация typescript тоже очень удобная вещь) Когда-то JavaScript тоже называли игрушечным языком, и не особо нужным)
Респект 👍🏼 Елена!
Интересная карусель 😊
Приятно смотреть как ты кодишь и к тому же учиться ❤
Приятная спокойная подача материала, как у любимого учителя в школе) Спасибо!
Thank you very much!
очень полезно! спасибо большое!!!
Елена спасибо! Очень круто!
Спасибо за урок, галерея прикольная. Видео давно выпущено, не знаю как сейчас делаешь уроки, но просто по подаче хотелось бы, чтобы ты больше писала код и меньше юзала "копировать-вставить". Так проще воспринимать и понимать логику решений.
По уроку я бы отметил момент с подгрузкой картинок: когда подгружается картинка при клике, может быть ситуация с лагом интернета/сервера, и переключение фото задержится, а обложка уедет уже на нужное превью. Получится такой рассинхрон. Поэтому я бы предложил здесь всё-таки рендерить только одну картинку и при начальной загрузке страницы подгружать все остальные картинки сразу, но асинхронно, примерно так:
useEffect(() => data.forEach(item => new Image().src = item.src), []).
По превью есть несколько моментов, возможно у тебя немного глаз "замылился", у основного фото 2:1 разрешение, у превью 154X80, слегка не совпадает. Далее между превью используешь margin по бокам, хотя здесь у нас flex-контейнер, удобнее просто использовать gap для расчётов. Ну и позиционирование оверлея - белой обложки с номером фото, здесь ты используешь left + translate, но остаётся ещё литерал числа(164) в js-коде для перетаскивания дорожки с превью. Всё это можно связать, используя css переменные, к ним есть доступ в js, соответственно получаем значение в js и используем в расчётах. Тогда будет максимальная динамичность.
Превьюшки дизайнер делает. Я к нему не пристаю ❤️
@@webelart Превью я имел в виду компонент галереи в коде), у тебя это
Привет!
Шикарно выглядишь!
Зашел на сайт. Действительно очень приятная галерея (как сам сайт в целом). Было бы интересно посмотреть реализацию Меню (сайдбар).
А что в Англиях про Angular слышно? Вакансии на нём есть?
Фирма с Preact на Solid не думает переходить?
не пока не думаем. А зачем вам быстрая смена технологий?
@@webelart Preact какой-то не модный, на The State of JS и Stack Overflow, отзывы примерно: "Что это такое, я наверное не буду это использовать" 🙂
Thanks for content it's fun and useful
СПАСИБО👍👍👍👍👍👍
Урок просто супер, спасибо огромное ! Как идея для очередного видео касательно этой галереи, можно сделать адаптив, а можно и не делать, дело автора :)
Vite (вит) - с фр. быстро. 😊
еще не смотрела, но лайк поставила, тк. знаю, что будет круто
добавлю в закладки и буду вместе делать
А вообще есть вопрос: стоит ли учиться так как я делаю: вместе с вами допустим разворачиваю проект и повторяю, есть ли вообще смысл в таком обучении?
Или нужно брать какой-то проект и тупо пытаться делать, даже если это займет очень много времени тк я еще только изучаю реакт?
как вообще обучаться?
Мне кажется собрать по уроку стоит, вы так лучше усвоите, что вы делаете и сможете задать вопросы, и в итоге получить результат. Но нужно задавать вопросы если что-то не понятно и почему так, если сомневаетесь попробуйте по другому. Пробовать придумывать себе ещё задачи и интересности, а что если тоже в плюс, а как добавить это.
Ещё как вариант, реализовать самому. Часть и посмотреть как я сделала. Вот это будет вообще огонь!
Т.е. вы пробуете хоть как-то собрать, если для вас это тема новая. А потом смотрите результат и тогда вы усвоите урок ещё лучше и сможете внедрить в себя подходы и понимания.
Я использовала два варианта обучения в своём пути и оба мне помогали, улучшить свои профессиональные навыки.
@@webelart спасибо большое, буду пробовать
фотографии из поездки в Норвегию, а что там делает машина Магнит?
ахахаха, за исключением второй фотки, это Норвегия. Кстати ссылка на демо wolf-gallery-liveldi90.vercel.app/
Вторая фотка это кажется Старица в Тверской области рядом со Старицким Свято-Успенским монастырём. 🤔
Тебе не кажется что VS Сode выглядит как-то дёшево, нет желания на Webstorm пересесть?
нет, я не сужу продукт по его цене. VS Code отличный редактор, которого мне достаточно.
А как же курс по typescript ? (((
Так у меня же есть два видео интенсив по typescript: th-cam.com/play/PLJpSkcgOK72Ci351HDS-RcLvH7YGGucbQ.html
@@webelart интенсив - маловато)) TS на сегодня ну прям очень полон инфы. А вообще, не смотря на то, что "живём сегодня в 21-м веке", до сих пор не везде используют TS с React. Поэтому было бы неплохо накидать свежих новичковых проектов просто на React + JS. Сколько ищу инете - не могу найти интересные идеи, у всех одна банальщина: тудушки, лендинги, и т.п. Блин, вы же сеньорные ребята ! у вас, сеньоров, фантазии-то должно быть по-больше ! А-то бедные работодатели уже зеленеют при виде лендингов и туду-листов )))
@@webelart Спасибо!
@@bjol_Dg а что мешает сделать интернет-магазин? заодно и продать можно будет. и видео об этом имеются и логики не мало.
все же не понял как работает
в браузере?
@@webelart да. ведь браузер не умеет преобразовывать тс, он только джиэс понимает в который тс преобразовывается при сборке.
@@romanmed9035 Я тоже про это думала, но не углублялась.
@@webelart но получается что Вы показали конструкцию работоспособность которой вызывает сомнения.
Спасибо за контент, но смотрится очень тяжело.
почему?
@@webelart я когда сформулирую все грамотно напишу 👍
в общем решил пересмотреть еще раз видео и что бы время не терять поставил 1.25 скорость:D как итог для меня все просто ооочень медленно в нормальной скорости оказалось)
@@vatasi7312 Т.е. в целом всё хорошо? :)
@@webelart да
С волками жить: по-волчьи, выть!
Почему эту надпись не добавили?
Потому что я так не думала.
Офигеть. Написала какую-то маленькую галерею, а кода как будто самолёт создавала. Вот он реакт говнище и днище.
Если эта галерея будет включать свайп и еще настройки получится и того больше. В какой-то степени я могу с вами согласиться, даже чтобы растворение картинки написать нужно устраивать пляски между фотографиями, на наивном JS это намного быстрее.
Думаю, что ещё ответить. Но я не знаю... Поставлю грустный смайлик :(
Кстати а знаете что, кода то не много. Сборка есть - да правда, файлы вокруг создались. Сама выжимка по галерее строк 200-300, если все в файле одном собрать.
Если сборку создавать на gulp, а она нужна, тоже получится много файлов. Так что вы и одновременно правы и одновременно нет. Я проект задеплоила двумя командами. И да это не index.html + index.css + index.js можно было бы и три файла создать. Однако если проект расширяется, то вы в них умрете со временем. А я как никак коммерческий разработчик крупных проектов. И думаю я хочу создавать на реактив + тайпскрипт + сборка, чтобы люди привыкали к созданию и работе над крупными проектами. Пусть сейчас это и маленькая галерея :)
Реакт не используют для галерей это неэффективно
Реакт использую для крупных SPA приложений, в которых модульность и компонентный подход очень сильно упрощают разработку
До недавнего времени был почти с аналогичным мнением, но начав использовав React и Typescript понимаешь насколько всё упрощено и унифицированно)
А типизация typescript тоже очень удобная вещь)
Когда-то JavaScript тоже называли игрушечным языком, и не особо нужным)
@@truedivan Но галереи то есть на сайте, ни один уважающий себя веб-сайт без галерей не обходится. :)