![Елена Литвинова — Искусство Веб-разработки 🛸](/img/default-banner.jpg)
- 111
- 888 270
Елена Литвинова - Искусство Веб-разработки 🛸
United Kingdom
Приєднався 7 лип 2020
Всем привет и добро пожаловать на мой UA-cam-канал! Меня зовут Елена Литвинова (Иванова). Я квалифицированный веб-инженер с более чем 12-летним опытом работы в этой области.👩🏼💻 Google Developer Expert с 19 июня 2023 года.🔬 Основатель WebElArt. Снимаю обучающие видео на UA-cam по веб-разработке на русском (@webelart) и английском (@webelart_en). Участвовала и реализовывала проекты для ведущих российских ИТ-компаний, таких как Яндекс и Artec3D. Также много работала с анимационным фронтендом в компании Астрошок, а до этого в Тверском Государственном Университете. Увлекаюсь психологией.
На этом канале я делюсь своими знаниями о веб-разработке.❤️
Надеюсь мой канал будет вам полезен! Откроем мир веб-разработки вместе! ❤️🔥
На этом канале я делюсь своими знаниями о веб-разработке.❤️
Надеюсь мой канал будет вам полезен! Откроем мир веб-разработки вместе! ❤️🔥
Новости WebElArt | Новая работа в Tipalti | Royal Ascot | Software Engineer 💛
Это разговорное видео, где я расскажу про новую работу, тимбилдинг и поделюсь следующими планами на WebElArt.
💛 Если хотите попасть в Tipalti пишите Дену (не забудьте упомянуть мой канал) www.linkedin.com/in/danielgraimes/
☕️ Моя веб-страница: webelart.com
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
💛 Если хотите попасть в Tipalti пишите Дену (не забудьте упомянуть мой канал) www.linkedin.com/in/danielgraimes/
☕️ Моя веб-страница: webelart.com
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Переглядів: 793
Відео
Новый Бренд канала WebElArt
Переглядів 1,5 тис.14 днів тому
В видео я покажу вам свой новый бренд! 🍀 Моя веб-страница с социальными сетями: webelart.ru На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Реализуем алгоритм префиксного дерева на JavaScript
Переглядів 2,9 тис.Місяць тому
В текущем видео мы рассмотрим алгоритм префиксного дерева. И поговори о том, где можно их использовать. 🌎 Моя страница: webelart.ru 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке: 📹 Я 💛 Фронт...
Часть 9. Создаём инопланетную галерею на React, TypeScript и NextJS 👽
Переглядів 1,4 тис.2 місяці тому
В текущем видео мы поговорим целиком о макете космос, как его можно улучшить и создадим инопланетную галерею. 🌎 Моя страница: webelart.ru 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макетов космос: ⭐️...
Часть 8. Макет космос - верстаем сложные формы (сетку) | ReactJS + NextJS + TypeScript 💎
Переглядів 1,4 тис.2 місяці тому
В видео сверстаем две предпоследние секции: логотипы и сложную сетку с линиями. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макетов космос: ⭐️ Часть 1. Верстаем макет космос в прямом эфире - начало: u...
Часть 7. Макет космос - создаём анимированный список ReactJS + NextJS + TypeScript 💎
Переглядів 1,3 тис.2 місяці тому
В видео мы создадим анимированный список для макета космос: градиенты, анимации, растворение, увеличение. Чистая магия без дополнительных библиотек. 😎 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макет...
Часть 6. Макет космос - разрабатываем модальное окно на React + TypeScript + NextJS 🪐
Переглядів 2,3 тис.3 місяці тому
В видео пройдёмся подробно по макету космос и разберём как создать модальное окно с различными частями внутри. Будем кодить! Быстро и вместе! 👽 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке:...
Решаем задачу calculator на leetcode | JavaScript | Computer Science
Переглядів 2,4 тис.4 місяці тому
В видео пройдёмся и решим за O(N) задачу с одного собеседования, Calculator. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке: 📹 Оценка сложности алгоритмов: ua-cam.com/video/5fraPAJnBFA/v-deo....
Как сделать Motion Макет с анимационной галереей на Preact & TypeScript
Переглядів 2,9 тис.5 місяців тому
В видео изучим как сделать Motion Gallery, поговорим про Atomic Design, оптимизацию картинок и многое другое. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ☕️ Купить мне кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🥰 Купить мои кисти для ProCreate: webelart.com/illustration. ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: we...
Swipe Галерея: Навигация по клавиатуре. Часть 3. React + TypeScript
Переглядів 1,1 тис.7 місяців тому
В текущем видео мы добавим навигацию по клавиатуре и немного баги пофиксим. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анима...
Swipe галерея на react + typescript: добавляем навигацию, счётчик и пишем новый hook. Часть 2.
Переглядів 1,8 тис.7 місяців тому
В текущем видео мы продолжим написание галереи на react typescript. Прошлый урок вы можете посмотреть здесь: ua-cam.com/video/0JDOoWKlNJc/v-deo.html. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Github repo: github.co...
Разрабатываем swipe галерею на CSS: react + vite + typescript
Переглядів 3,5 тис.7 місяців тому
Короче swipe галерея на чистом CSS, умереть не встать 😎🤌 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illustration. ✍️ Мой telegram channel: t.me/webelart 🏰 Английский UA-cam: @webelart_en 💁🏼♀️ Инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart На канале я рассм...
Hotline.tg: превращает интерфейс Telegram в CRM
Переглядів 1,8 тис.8 місяців тому
В текущем видео мы вместе с моим первым профессиональным учителем веб-разработки и другом Борисом Адамовом, автором многих классных проектов. В общем, будем вместе представлять текущий проект Hotline.tg. 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illustration. ✍️ Мой telegram channel: t.me...
Создаём SSR приложение на React + NodeJS через Razzle.js. Начало.
Переглядів 4,9 тис.11 місяців тому
В видео мы узнаем, что такое Razzle и почему он крут в качестве сборки. Создадим небольшое приложение с двумя страничками. ☀️ ❤️ Мой telegram: t.me/webelart ❤️ Английский UA-cam: ua-cam.com/channels/dw1R35g3uDj4LVt1-aS-hA.html ❤️ Мой проф Инстаграм канал: webelart ❤️ Поддержать развитие канала: www.donationalerts.com/r/webelart, buy.stripe.com/5kA7sL9574SG7xCfZ3 Ссылки используемы...
Верстаем прозрачный текст на любом фоне HTML, CSS, React, TypeScript, Vite
Переглядів 4,4 тис.Рік тому
В текущем видео, мы изучим как создать такой, просто изумительный эффект! Красоту невероятную. P.S. На обложке не мар уанна, мы с дизайнером обложки проверили! ❤️ ❤️ ❤️ Крутой дизайнер, который предоставил макет abduly_haidary 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illus...
Пишем анимацию растворения в Wolf Галерее | React + TypeScript
Переглядів 3,4 тис.Рік тому
Пишем анимацию растворения в Wolf Галерее | React TypeScript
Пишем галерею на React + TypeScript & Deploy
Переглядів 8 тис.Рік тому
Пишем галерею на React TypeScript & Deploy
Изучаем TSconfig, TypeScript Config. Часть 2. - compilerOptions - modules
Переглядів 2,4 тис.Рік тому
Изучаем TSconfig, TypeScript Config. Часть 2. - compilerOptions - modules
Алгоритм бинарного поиска на JavaScript
Переглядів 8 тис.Рік тому
Алгоритм бинарного поиска на JavaScript
Часть 5. Доделываем вёрстку меню космос - ReactJS + TypeScript + NextJS
Переглядів 3,3 тис.Рік тому
Часть 5. Доделываем вёрстку меню космос - ReactJS TypeScript NextJS
Часть 3. Верстаем арт кнопку к макету, разбираем варианты. ReactJS + TypeScript + NextJS
Переглядів 3,3 тис.Рік тому
Часть 3. Верстаем арт кнопку к макету, разбираем варианты. ReactJS TypeScript NextJS
Изучаем TSconfig, TypeScript Config. Часть 1. ❤️🔥
Переглядів 4,5 тис.Рік тому
Изучаем TSconfig, TypeScript Config. Часть 1. ❤️🔥
Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React
Переглядів 24 тис.Рік тому
Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React
Пишем и подробно разбираем алгоритм Quick Sort на JavaScript | Быстрая сортировка
Переглядів 9 тис.Рік тому
Пишем и подробно разбираем алгоритм Quick Sort на JavaScript | Быстрая сортировка
Создаём и деплоим собственный FULL STACK блог | NextJs + Sanity
Переглядів 11 тис.Рік тому
Создаём и деплоим собственный FULL STACK блог | NextJs Sanity
Реализуем сортировку пузырьком + оптимизация + reverse
Переглядів 5 тис.Рік тому
Реализуем сортировку пузырьком оптимизация reverse
TypeScript от А до Я - часть 2: classes, extends, implements, generics, utility types
Переглядів 17 тис.Рік тому
TypeScript от А до Я - часть 2: classes, extends, implements, generics, utility types
TypeScript от А до Я - часть 1: primitives, objects, array, types, enums, interfaces
Переглядів 40 тис.Рік тому
TypeScript от А до Я - часть 1: primitives, objects, array, types, enums, interfaces
Делюсь опытом сдачи IELTS General Test в Англии | UKVI
Переглядів 2,5 тис.Рік тому
Делюсь опытом сдачи IELTS General Test в Англии | UKVI
Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript
Переглядів 22 тис.Рік тому
Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript
А на чём бекэнд пишешь? NodeJS? В ООП-стиле? А на лошадок ставила(и как успехи)? А как считаешь, книги допустим по JS, которые прочитала/изучила. помогли ли тебе прокачаться как разработчице, или в этом плане лучше всего было много практики, а книги это просто как штришочки?
Человек Веба
6:26 писал в проде на несте. Это в разы удобнее, но сложнее экспресса. По факту, есть вещи, сильно упрощающие жизнь типа ioc контейнеров. Прямо дольше писать на несте, чем на экспрессе. Но есть те же декораторы, масса удобных для готовки апишки
Категорическая благодарность за столь подробный разбор от А до Я + за приятные бонусы в виде оптимизации, а также рассмотрения сложности алгоритма.
Интересный контент, модальное окно как то обошлось без анимации, для такого интересного макета наверное это не очень, когда уже присутствует анимация, можно наверное было бы наверное добавить простой scale, появление из центра экрана и исчезновение к центру экрану
Домашняя работа вам. 💛
Понравилось видео! Успехов в работе. Макияж и прическа огонь, и работа с голосом, повествование-приятно! Порадовали мыльные пузыри в конце и эмоции)приятное завершение ролика.
Спасибо большое! Мне очень приятно! ❤️
Рад за тебя. Желаю больших успехов и удачи!
Спасибо большое!❤
Шикарная прическа!
Спасибо, очень приятно!
вааа, классная причёска и макияж
Спасибо! 😍🥰
если делать бэк на ноде то либо nest либо fastify, ну и призма чтобы модели не писать вручную
а раз это пет проект тогда можно и bun попробовать, у него модули лучше чем у ноды
Почему не koa?
@@TheLevius Ещё про nest я переживала, что т.к. смотрела курсы, чтобы не было нарушений авторских прав, т.к. я буду опираться точно на материал. Но он мне понравился.
@@webelart ну koa написал вроде тот же кто и express, кажется разница не большая, а так для пет было бы интересно увидеть fastify на node, либо совсем свежее elysiajs на bun)
а можно не выбирать, nest может использовать фастифай вместо экспресса, это есть в документации
Качество видосов все растет и растет!
😎🛸❤️
ты лучшая 🥰
❤️❤️❤️
С кнопкой реально интересно, хотелось бы подробнее видео о кнопке, как реализовать такую кнопку, больше практики и математики)
Да, мне тоже понравилась.
Я использовал бы лучше наверное иконочный шрифт из svg font awesome, вместо спрайта
не всегда это удобно. И не всегда работаешь хорошо.
Почему не использовался например Gulp, для автоматизации подключение шрифтов ?
Здесь использовала сборщик vite. И перебарщивать с сборщиками не очень люблю. Но автоматизировать можно всегда много чего. Улучшению предела нет, работайте. ❤
Лена привет! Сегодня перед собесом в Я смотрел твое видео по каррированию, это мне сильно помогло в решении задачки на декораторы! Спасибо!
Я рада. Спасибо за комментарий.❤
я б вдул
Мое глубочайшее почтение!
Ваш контент вдохновляет)
Очень интересная информация. Спасибо.
Чётко быстро грамотно .. супер топовый урок ..на просторах интернета нет такого
Классно 🎉
Круто!) И спасибо вам за ваши труды🥰
Ребята) поддержим Елену 👏👏👏 Елена, ребрендинг🏆
❤️❤️❤️
За консультации мне кажется палюбэ нужно просить плату, если только сама не чувствуешь порыва помочь просто от души. По рекламе я бы сказал есть единичные люди в публичном поле, которые как вариант считают свой контент частью жизненной миссии, и они ничего не рекламируют поэтому. Не для того они создают контент, чтобы на его фоне что-то рекламировать. И очевидно такой подход максимально лучший для зрителя, когда никакой рекламы. Но понятно, не все такие базированные. В обычном варианте, если автор сам юзал рекламируемый продукт и его предлагает, это в принципе нормально. А вот когда блогер предлагает какие-нибудь кредитные карты, вот это, как зумеры бы выразились, зашкварно. У тебя тут кстати прям такой официальный стиль в одежде, и чувствуется голос уставший - после работы пишешь видос? А тебе в Телеграме нравится больше постоянная группа пользователей с правами комментировать нежели чем обычный формат постов с комментариями любых подписантов?
По поводу последнего вопроса, я не знаю пока. Спасибо за комментарий.
Супер)
Ну вообще анимация(переход transition) работает сразу, достаточно просто классы менять с opacity: 0 на opacity: 1 и обратно. Проблема может быть только в возможных накладках ререндеров и transition. У тебя конечно решение, и скорее всего даже оно будет нормально работать при быстрой смене фото(допустим через клавиатуру по кнопкам если делать), но такое решение как бы не реактовское. Реакт тут мешает получается. Есть библиотеки да, которые допустим несут какой-то лишний функционал, но тогда в идеале было бы, если бы ты показала кастомное решение именно в реакт-стиле.
Елена, спасибо большое за урок👏👏👏
Спасибо за урок, галерея прикольная. Видео давно выпущено, не знаю как сейчас делаешь уроки, но просто по подаче хотелось бы, чтобы ты больше писала код и меньше юзала "копировать-вставить". Так проще воспринимать и понимать логику решений. По уроку я бы отметил момент с подгрузкой картинок: когда подгружается картинка при клике, может быть ситуация с лагом интернета/сервера, и переключение фото задержится, а обложка уедет уже на нужное превью. Получится такой рассинхрон. Поэтому я бы предложил здесь всё-таки рендерить только одну картинку и при начальной загрузке страницы подгружать все остальные картинки сразу, но асинхронно, примерно так: useEffect(() => data.forEach(item => new Image().src = item.src), []). По превью есть несколько моментов, возможно у тебя немного глаз "замылился", у основного фото 2:1 разрешение, у превью 154X80, слегка не совпадает. Далее между превью используешь margin по бокам, хотя здесь у нас flex-контейнер, удобнее просто использовать gap для расчётов. Ну и позиционирование оверлея - белой обложки с номером фото, здесь ты используешь left + translate, но остаётся ещё литерал числа(164) в js-коде для перетаскивания дорожки с превью. Всё это можно связать, используя css переменные, к ним есть доступ в js, соответственно получаем значение в js и используем в расчётах. Тогда будет максимальная динамичность.
Превьюшки дизайнер делает. Я к нему не пристаю ❤️
@@webelart Превью я имел в виду компонент галереи в коде), у тебя это <PreviewGallery />
Привет. Поздравляю с новым оффером :)
Спасибо! ❤️
Понятно, что это пример, но если объект константный - его вообще выносят за пределы компонента и все. Никаких мем не нужно - это жирно сильно.
КомпоненТ. Не ТА, Т! Зачем коверкать?
Не согласен с тем, что отличие интерфейсов от типов в расширяемости. Аналогом extends у типов будет оператор &. А вообще отличие типов и интерфейсов заслуживает отдельного видео.
спасибо за урок. Вот такой вопрос: когда делаешь приложение для заказчика то ему нужно сделать отдельный аккаунт Sanity? и когда заливаешь проект на хостинг, то в санити нужно заменить url студии? спасибо
Больше спасибо Елена!!! Вы очень понятно и просто объяснили 👍🏻👍🏻👍🏻
Какая красавицааа
Ваще Красотка 👍 как у тебя классно получается доносить инфу 😍
Thanks for the huge job you have done!
Божечки!😍 Какая женщина. ❤🔥Я влюбился.❤❤❤
Пришел сюда, чтобы войти сеньором в МЯСО (русский FAANG), и не пожалел)
Почему на минуте 16:30 в цикле for, где мы поменяли значение "let i = 1" => "let i = 0", не добавили значение " - 1 " у "i < arr.length"? Если мы идем с 0 индекса массива, обычно пишут же "i < arr.length - 1"
выучил html и сss сверстал около 15 макетов, сейчас занялся изучением javascript и не могу сдвинуться с места, тупо завис на нем
Вам нужно понять для начала основы программирования. Даже не так важно JS или нет. Я начинала в университете с C++. Мне потребовалось полгода чтобы начать что-то понимать. И далее продолжать.
Я боюсь, у вас случай бесконечного цикла
@@mikemerinoff Есть вероятность застрять на долго... да :)
@@mikemerinoff и как с него выйти?
@@sulejmanpovelitel1220 Если начал, то уже всё. Продолжай погружаться во вселенную программирования ❤️ Это как с бегом, если затянет…
Спасибо за видео и за ваш труд, может у вас сохранилась эта папка, хотел бы посмотреть
Я думаю вот этот репозиторий. github.com/webelart/typescript_for_youtube
@@webelart Да это оно, спасибо большое 🙌
Елена ты прекрасна, все отлично объясняешь. Я только изучил JS и ковыряюсь в реакте. Спасибо тебе. )
Зачем вы словарь размазываете по классу Trie? Что мешает в классе создать свойство для хранения данных? constructor() {this.dictionary = {};} и в методах поиска\вставки не "изголяться" с this, а обращаться к словарю this.dictionary.
Да так лучше. Или допустим this.root. Согласна. Иначе могут быть проблемы с внутренними методами. Поддерживаю!
Ленуська🥰
Мур! 😍
Ты добрая няшка, это я знаю точно, надеюсь у тебя все будет хорошо:3
twitter.com/Pusheen/status/1786425594424467818
Префиксное дерево - одна из самых интересных структур, она может быть использона, например, для фильтрации контента.
Как же больно смотреть в vscode без подсказок))
Восторг! 🔥🔥🔥