![Елена Литвинова — Искусство Веб-разработки 🛸](/img/default-banner.jpg)
- 111
- 899 022
Елена Литвинова - Искусство Веб-разработки 🛸
United Kingdom
Registrace 7. 07. 2020
Всем привет и добро пожаловать на мой CZcams-канал! Меня зовут Елена Литвинова (Иванова). Я квалифицированный веб-инженер с более чем 12-летним опытом работы в этой области.👩🏼💻 Google Developer Expert с 19 июня 2023 года.🔬 Основатель WebElArt. Снимаю обучающие видео на CZcams по веб-разработке на русском (@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
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
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
Спасибо за информацию
Спасибо за видео. От начала и до конца иногда заглядывал в learn.js чтобы в самом конце услышать его как один из источников информации. Случайности не случайны )
Комментарий в поддержку канала.
48:10 сложность этого шафла - n*logn из-за сортировки. если применять тасование Фишера-Йетса, будет эффективнее: линия
Спасибо тебе большое за видосы! Способ улучшения шафла: как в начальной версии рандомно расставляешь числа на доске, а потом считаешь по формуле (её легко найти в инете), решаема данная расстановка или нет. если нет, повторяешь пока формула не покажет успех. Так как там вероятность 50 на 50, то много шафлов делать не придётся Как ещё улучшить пятнашки: 1) поставить картинки к числам 2) добавить функцию сокрытия чисел чтобы ориентироваться только на картинки 3) выбор размера поля 4) добавить кнопку для автоматического решения пазла с помощью какого-либо алгоритма, например А*. Если А*, то он будет искать гарантированно оптимальный путь (с минимальным количеством перестановок для нахождения решения). Это уже непростая задача
Большое спасибо!
интересная потребность ❤ И милая дикция.
Your CZcams videos are so incredibly good that I can divide my life as a JavaScript developer into before and after discovering them !!!
I love you 💞Thank you for the great lecture. I love you.
Отличный урок, спасибо за проделанную работу!
Хороший ролик, я правда картинку не скачивал с алмазом, я нажал windows+shift+s и так сохранил, прямо с Вашего видео.
Деплой на версель == вендэрлок )
Дополнением короткое видео про условные типи и infer))
Елена, большое спасибо за объяснения.
Шикарно
было бы классно посмотреть урок про авторизацию, регистрацию, выход из системы (signin, signup, signout ) с использованием nextJS + typescript + nextAuth + firebaseSDKAdmin + prizma + JWT token, refresh τoken, очень хотелось бы увидеть подобный контент
Спасибо, отличное видео. Теперь я понимаю что такое регулярные выражения!
Елена, а это нормально, что если скажем месяц-полтора не пользовался какой-нибудь либой, то лезешь в доку и вспоминаешь что и как там? Или тебе говорят: напиши сегодня роутинг и ты без доки сразу на лету его пишешь?
Красивая
#webelart throttle попробуйте вызвать в строгом режиме и нет, интересно что-то измениться? Подсказка будет разный результат. Может лучше на 40 строке сделать saveThis || saveArgs А так, материал -- супер!
если у вас нету ноды - сорян, прощайте, реторн =DD
Гуд бай
А на чём бекэнд пишешь? NodeJS? В ООП-стиле? А на лошадок ставила(и как успехи)? А как считаешь, книги допустим по JS, которые прочитала/изучила. помогли ли тебе прокачаться как разработчице, или в этом плане лучше всего было много практики, а книги это просто как штришочки?
Привет, Серёж. Да, NodeJS в разных стилях. Если брать NestJS то там прям ООП, но я обычно придерживалась не его. Не знаю не особо заходил этот стиль. На лошадок, нет не ставила. Никогда особо не было интересны азартные игры, даже ради фана. Не знаю почему, но ребята были которые и проигрывали и выигрывали, ставили скорее по 5-10 фунтов ради интереса. Всё что я читала и делала было полезным. Любое уделение внимания профессии, даже если это не нужно на работе напрямую зажигает что-то внутри, интерес, любопытство и хочется продолжать. Это как проявление любви. Если этого не делать потухаешь со временем. И кстати про книги у меня есть куча, которые не прочитала, и есть книги которые частично прочитала, сейчас кстати стараюсь уйти больше к докам, но я их не люблю :D Надо что-то делать.
Человек Веба
😂❤️
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 />