![Елена Литвинова — Искусство Веб-разработки 🛸](/img/default-banner.jpg)
- Видео 110
- Просмотров 884 914
Елена Литвинова - Искусство Веб-разработки 🛸
Великобритания
Добавлен 7 июл 2020
Всем привет и добро пожаловать на мой RUclips-канал! Меня зовут Елена Литвинова (Иванова). Я квалифицированный веб-инженер с более чем 12-летним опытом работы в этой области.👩🏼💻 Google Developer Expert с 19 июня 2023 года.🔬 Основатель WebElArt. Снимаю обучающие видео на RUclips по веб-разработке на русском (@webelart) и английском (@webelart_en). Участвовала и реализовывала проекты для ведущих российских ИТ-компаний, таких как Яндекс и Artec3D. Также много работала с анимационным фронтендом в компании Астрошок, а до этого в Тверском Государственном Университете. Увлекаюсь психологией.
На этом канале я делюсь своими знаниями о веб-разработке.❤️
Надеюсь мой канал будет вам полезен! Откроем мир веб-разработки вместе! ❤️🔥
На этом канале я делюсь своими знаниями о веб-разработке.❤️
Надеюсь мой канал будет вам полезен! Откроем мир веб-разработки вместе! ❤️🔥
Новый Бренд канала WebElArt
В видео я покажу вам свой новый бренд!
🍀 Моя веб-страница с социальными сетями: webelart.ru
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
🍀 Моя веб-страница с социальными сетями: webelart.ru
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
Просмотров: 1 441
Видео
Реализуем алгоритм префиксного дерева на JavaScript
Просмотров 2,8 тыс.Месяц назад
В текущем видео мы рассмотрим алгоритм префиксного дерева. И поговори о том, где можно их использовать. 🌎 Моя страница: webelart.ru 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке: 📹 Я 💛 Фрон...
Часть 9. Создаём инопланетную галерею на React, TypeScript и NextJS 👽
Просмотров 1,4 тыс.Месяц назад
В текущем видео мы поговорим целиком о макете космос, как его можно улучшить и создадим инопланетную галерею. 🌎 Моя страница: webelart.ru 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макетов космос: ⭐...
Часть 8. Макет космос - верстаем сложные формы (сетку) | ReactJS + NextJS + TypeScript 💎
Просмотров 1,4 тыс.2 месяца назад
В видео сверстаем две предпоследние секции: логотипы и сложную сетку с линиями. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео макетов космос: ⭐️ Часть 1. Верстаем макет космос в прямом эфире - начало: ...
Часть 7. Макет космос - создаём анимированный список ReactJS + NextJS + TypeScript 💎
Просмотров 1,3 тыс.2 месяца назад
В видео мы создадим анимированный список для макета космос: градиенты, анимации, растворение, увеличение. Чистая магия без дополнительных библиотек. 😎 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Вся серия видео маке...
Часть 6. Макет космос - разрабатываем модальное окно на React + TypeScript + NextJS 🪐
Просмотров 2,3 тыс.2 месяца назад
В видео пройдёмся подробно по макету космос и разберём как создать модальное окно с различными частями внутри. Будем кодить! Быстро и вместе! 👽 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @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 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Ссылки используемые в уроке: 📹 Оценка сложности алгоритмов: ruclips.net/video/5fraPAJnBFA/виде...
Как сделать 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 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: w...
Swipe Галерея: Навигация по клавиатуре. Часть 3. React + TypeScript
Просмотров 1,1 тыс.6 месяцев назад
В текущем видео мы добавим навигацию по клавиатуре и немного баги пофиксим. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-аним...
Swipe галерея на react + typescript: добавляем навигацию, счётчик и пишем новый hook. Часть 2.
Просмотров 1,8 тыс.7 месяцев назад
В текущем видео мы продолжим написание галереи на react typescript. Прошлый урок вы можете посмотреть здесь: ruclips.net/video/0JDOoWKlNJc/видео.html. 🍀 Поддержать развитие канала: www.donationalerts.com/r/webelart ✍️ Мой телеграм канал: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Мой инстаграм: webelart 🦄 LinkedIn: www.linkedin.com/company/webelart Github repo: github....
Разрабатываем swipe галерею на CSS: react + vite + typescript
Просмотров 3,4 тыс.7 месяцев назад
Короче swipe галерея на чистом CSS, умереть не встать 😎🤌 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illustration. ✍️ Мой telegram channel: t.me/webelart 🏰 Английский RUclips: @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 ❤️ Английский RUclips: ruclips.net/channel/UCdw1R35g3uDj4LVt1-aS-hA ❤️ Мой проф Инстаграм канал: webelart ❤️ Поддержать развитие канала: www.donationalerts.com/r/webelart, buy.stripe.com/5kA7sL9574SG7xCfZ3 Ссылки используемые ...
Верстаем прозрачный текст на любом фоне HTML, CSS, React, TypeScript, Vite
Просмотров 4,4 тыс.11 месяцев назад
В текущем видео, мы изучим как создать такой, просто изумительный эффект! Красоту невероятную. P.S. На обложке не мар уанна, мы с дизайнером обложки проверили! ❤️ ❤️ ❤️ Крутой дизайнер, который предоставил макет abduly_haidary 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illus...
Пишем анимацию растворения в Wolf Галерее | React + TypeScript
Просмотров 3,4 тыс.Год назад
В текущем видео мы напишем анимацию растворения на главной фотографии и добавим смену изображений по клику на превью галерею. 🍀 Поддержать канал: www.donationalerts.com/r/webelart ☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7xCfZ3 🎨 Купить набор кистей Procreate: webelart.com/illustration. ✍️ Мой telegram channel: t.me/webelart 🏰 Английский RUclips: @webelart_en 💁🏼♀️ Инстаграм: we...
Пишем галерею на 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
Просмотров 21 тыс.Год назад
Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript
Разбираем Event loop на примерах | микро, макро таски, nextTick, setImmediate | Уроки JavaScript
Просмотров 22 тыс.2 года назад
Разбираем Event loop на примерах | микро, макро таски, nextTick, setImmediate | Уроки JavaScript
я б вдул
Мое глубочайшее почтение!
Ваш контент вдохновляет)
Очень интересная информация. Спасибо.
Чётко быстро грамотно .. супер топовый урок ..на просторах интернета нет такого
Классно 🎉
Круто!) И спасибо вам за ваши труды🥰
Ребята) поддержим Елену 👏👏👏 Елена, ребрендинг🏆
❤️❤️❤️
За консультации мне кажется палюбэ нужно просить плату, если только сама не чувствуешь порыва помочь просто от души. По рекламе я бы сказал есть единичные люди в публичном поле, которые как вариант считают свой контент частью жизненной миссии, и они ничего не рекламируют поэтому. Не для того они создают контент, чтобы на его фоне что-то рекламировать. И очевидно такой подход максимально лучший для зрителя, когда никакой рекламы. Но понятно, не все такие базированные. В обычном варианте, если автор сам юзал рекламируемый продукт и его предлагает, это в принципе нормально. А вот когда блогер предлагает какие-нибудь кредитные карты, вот это, как зумеры бы выразились, зашкварно. У тебя тут кстати прям такой официальный стиль в одежде, и чувствуется голос уставший - после работы пишешь видос? А тебе в Телеграме нравится больше постоянная группа пользователей с правами комментировать нежели чем обычный формат постов с комментариями любых подписантов?
По поводу последнего вопроса, я не знаю пока. Спасибо за комментарий.
Супер)
Ну вообще анимация(переход 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 без подсказок))
Восторг! 🔥🔥🔥
Благодарю! Очень полезно и понятно! Очень понравилась тема у вас в vs code 😻😻😻 как она называется, или это это кастомная?
Solarized Light :) Нет, не кастомная.
Спасибо за очередной невероятно классный и полезный урок!))
После реакта сложно воспринимать эти ваши классы)
С помощью какой программы делали заставку и превью?
Превьюшки и анимации делаются с помощью Adobe After Effects, я их заказываю. Я монтирую в Final Cut Pro и перевожу самостоятельно все анимашки через motion и секвенции в совместимый формат.
Благодарю вам Елена! Очень интересно изучать ядро программирования алгоритмы структуры данных особенно под руководством прекрасной айстишницы)
Спасибо - полезно. Интересно, можно это использовать в построении дерева городов по странам чтобы потом использовать как аутокомплете
❤❤❤
Привет😊
Интересный видос, с интересными примерами, только хотелось бы услышать еще про макро и микро таски
Есть ещё одно видео на канале, как раз про очереди разных видов.
Слишком много "короче" 😅
Спасибо за отзыв. Думаю сейчас стало получше. Иногда, когда волнуюсь слишком много эмоционирую :)
А как обрабатывается код до call stack, кода создаешь переменные даешь им значения, примитивные и реферальные типа, где они хранятся и так далее?
привет) когда я например двигаю слайд вправо (больше чем на 20px), а потом, не отпуская курсор, влево уже к примеру на 100, тогда карусель двигается вправо, а не влево. Может это я неправильно что-то переписал, а так видео очень понравилось, спасибо)
Что за нейронка делает превьюхи или ты сама? Классно получается ❤
Нет, я не сама рисую. Обложки заказываю :) Да их делают очень круто.
Мобильная версия конечно тоже интересно
Спасибо, очень интересно! И подача отличная)
вы помимо фронта занимаетесь backend разработкой ?
Да, на nodejs. Я software engineer full stack.
@@webelart здорово.Сам занимаюсь фронтендом, но подумываю тоже в фуллстак уходить, так как там интересней ну и зп раза в 1,5-2 выше.
@@webelart а можете рассказать как вы из frontend перешли в фуллстак
@@astkh4381 Знаете фронт я с самого начала как-то больше полюбила. Он красивый и мне нравилось создавать макеты. Делать их живыми. С беком были проблемы :) Я не очень понимала логику. Казалось слишком много магии. Хотя сейчас понимаю, что бэк более логичен. Ранее чтобы поддержать фронт во всём спектре браузеров :) Так вот, постепенно пока работаешь с фронтом, надо уходить на бэк, понимать как запросы отправляются и прочее. Чем увереннее становишься тем больше хочется знать. Вот и я так. Первый Бэкенд начала создавать где-то в 2013 на руби on rails. А после вновь фронт уже более сложный и наверно серьезно бэком занялась когда устроилась в Яндекс в 2018 там была NodeJS разработчиком. Вот и после уже в Англии Software Engineer - и это фулл стек, здесь даже devops есть. С последним могу, но не так много опыта :)