- Видео 28
- Просмотров 48 828
Саша Утбанов
Добавлен 18 июл 2013
Приветствую на моем канале!
Меня зовут Саша, и я рад приветствовать вас на моем RUclips канале. Здесь я делюсь своими небольшими наработками и идеями для разработки, чтобы вдохновить вас на создание удивительных веб-приложений.
Как фронтенд разработчик, я увлеченно изучаю и описываю технологии, которые меня вдохновляют - будь то языки программирования, фреймворки или лучшие практики. На моем канале вы найдете простые и понятные объяснения, практические примеры и интересные проекты, чтобы успешно освоить новые концепции и улучшить свои навыки.
Не пропустите новые видео, где я буду делиться своим опытом и знаниями. Подписывайтесь на канал, чтобы быть в курсе всех новых видео!
💡🚀
Меня зовут Саша, и я рад приветствовать вас на моем RUclips канале. Здесь я делюсь своими небольшими наработками и идеями для разработки, чтобы вдохновить вас на создание удивительных веб-приложений.
Как фронтенд разработчик, я увлеченно изучаю и описываю технологии, которые меня вдохновляют - будь то языки программирования, фреймворки или лучшие практики. На моем канале вы найдете простые и понятные объяснения, практические примеры и интересные проекты, чтобы успешно освоить новые концепции и улучшить свои навыки.
Не пропустите новые видео, где я буду делиться своим опытом и знаниями. Подписывайтесь на канал, чтобы быть в курсе всех новых видео!
💡🚀
Разбор тестового задания | TypeScript | NodeJS
В этом видео мы разберем пример тестового задания. В видео приводятся простые советы, которые можно применить при выполнении тестового задания 🤓
Тестовое задание выполняем с на NodeJS + TypeScript. В видео приводятся рассуждения, пример решения и школьная геометрия 📐
Пример выполнения задания:
github.com/skilldill/figuresExampleSolution
#javascript #nodejs #development #math #geometry
Тестовое задание выполняем с на NodeJS + TypeScript. В видео приводятся рассуждения, пример решения и школьная геометрия 📐
Пример выполнения задания:
github.com/skilldill/figuresExampleSolution
#javascript #nodejs #development #math #geometry
Просмотров: 121
Видео
Разработка простого API на Express | JavaScript | Express
Просмотров 5505 месяцев назад
Всем привет! В данном видео объясняю, как создать простое API с использованием Express и JavaScript. Видео предлагает пошаговое руководство по настройке сервера и созданию конечных точек (endpoints) для взаимодействия с данными 📊 Видео будет полезно как начинающим разработчикам, так и разработчикам с опытом 👾 Репа с проектом: github.com/skilldill/simple-api Happy hacking! 🚀 #javascript #nodejs ...
Игра на чистом JavaScript с нуля | JavaScript | Canvas | Vite
Просмотров 2,8 тыс.7 месяцев назад
В этом видео рассказываю как можно разработать простую игру на чистом JavaScript и Canvas 🚀 Видео будет понятно начинающим разработчикам 🚀 Мы начнем с основ 🔬, научимся создавать игровое поле и настраивать его внешний вид. Затем разберемся с анимацией, движением и управлением игровыми объектами через клавиатуру. Вы узнаете, как создавать интерактивность, обнаруживать столкновения и обрабатывать...
JavaScript для начинающих | Практика | JavaScript | Галерея для сайта | Vite | HTML | CSS
Просмотров 2,3 тыс.7 месяцев назад
Привет! В этом видео рассматривается использование JavaScript для создания двух видов галерей изображений и инструмента для ввода пин-кода. Одна из галерей, которую мы рассмотрим, - анимированная галерея. Вы узнаете, как создать красочный и привлекательный эффект анимации, который захватит внимание ваших пользователей. Далее, мы перейдем к созданию клавиатуры для набора пин-кода. От простых кно...
От Single Page Application до Server-Side Rendering | React | Tramvai | Vite
Просмотров 3658 месяцев назад
В это видео поделился своим опытом перевода приложения с SPA на SSR. Для видео были созданы два демо-сайта, SPA с помощью Vite и SSR с помощью фреймворка Tramvai. Материалы: Код сайта - github.com/skilldill/chocoshop_spa_to_ssr Ссылки: Tramvai - tramvai.dev/ Tramvai Community - t.me/tramvaijs ViteJS - vitejs.dev/ React - react.dev/ #coding #javascript #react #programming #программирование #tramvai
Верстка сайта с нуля для начинающих | Практика | HTML | CSS | Vite | Figma
Просмотров 13 тыс.8 месяцев назад
Всем привет! В этом видео показываю как можно сверстать сайт с нуля по дизайну в фигме. Видео будет полезно как начинающим frontend разработчикам, так и тем кто давно разрабатывает, но хочет освежить в памяти некоторые моменты верстки. Чтобы разбавить верстку используется инструмент vite.js. Материалы: Код сайта - github.com/skilldill/simple-site-html-practic Дизайн - www.figma.com/file/dJNdv81...
Создаем сайт c нуля используя Server-Side Rendering | Часть 3 | React | Tramvai | SSR | Bootstrap
Просмотров 1508 месяцев назад
В этом видео завершаем разработку сайт используя Server Side Rendering, добавляем state для курсов и получение данных из апи с помощью http-клиента. Сайт разрабатывается на фреймворке Tramvai. Для стилизации компонент используется Bootstrap. Проект: github.com/skilldill/english-courses Ссылки: React react.dev/ Tramvai tramvai.dev/ tg Tramvai Community t.me/tramvaijs Bootstrap getbootstrap.com/d...
Создаем сайт c нуля используя Server-Side Rendering | Часть 2 | React | Tramvai | SSR | Bootstrap
Просмотров 1599 месяцев назад
В этом видео продолжаем разрабатывать сайт используя Server Side Rendering, добавляем state для курсов и получение данных из апи с помощью http-клиента. Сайт разрабатывается на фреймворке Tramvai. Для стилизации компонент используется Bootstrap. Ссылки: React react.dev/ Tramvai tramvai.dev/ tg Tramvai Community t.me/tramvaijs Bootstrap getbootstrap.com/docs/5.3/get... #coding #javascript #react...
Создаем сайт c нуля используя Server-Side Rendering | Часть 1 | React | Tramvai | SSR | Bootstrap
Просмотров 2399 месяцев назад
В этом видео рассматривается старт разработки сайта с использованием React и SSR. Сайт разрабатывается на фреймворке Tramvai. Для стилизации компонент используется Bootstrap. Ссылки: React react.dev/ Tramvai tramvai.dev/ tg Tramvai Community t.me/tramvaijs Bootstrap getbootstrap.com/docs/5.3/getting-started/introduction/ #coding #javascript #react #programming #программирование #tramvai
Куда пропал? Чем занимался? | React | Tramvai | NestJS | SSR | Обзор
Просмотров 2399 месяцев назад
Обзор технологий для разработки шахматного сайта. Рассказываю на чем работает шахматный сайт, как перейти с SPA на SSR - React react.dev/ - Tramvai tramvai.dev/ - NestJS nestjs.com/ #react #javascript #backend #coding #программирование #frontend
Создаем контекстное меню с использованием хуков | React | TypeScript | React context | React hooks
Просмотров 1,8 тыс.Год назад
В этом видео рассказываю как разработать кастомное контекстное меню для приложения. Часто возникает необходимость разгрузить UI и перенести функциональные контролы в контекстное меню. #react #reactjs #typescript #html #reacthooks #javascript #reactcontext #code #programming
Website layers navigation | Animation | HTML | CSS | JavaScript |
Просмотров 1702 года назад
Animated navigation for website Source code: github.com/skilldill/darkness-layers #website #landingpage #animation #javascript #HTML #CSS #JS
Simple side menu. Fast code | React | CSS
Просмотров 2342 года назад
Fast code React CSS #React #JavaScript #SideMenu #Programming #ReactJS
React Native мобильное приложение для игры в шахматы | Практика | Android
Просмотров 1,3 тыс.2 года назад
React Native мобильное приложение для игры в шахматы | Практика | Android
Создаём модальное окно на React с использование context и хуков | React | hooks | context
Просмотров 7 тыс.3 года назад
Создаём модальное окно на React с использование context и хуков | React | hooks | context
React Redux с использованием хуков | Практика | Middlewares | Часть 3
Просмотров 1,2 тыс.3 года назад
React Redux с использованием хуков | Практика | Middlewares | Часть 3
React Redux с использованием хуков | Практика | Анимация | Часть 2
Просмотров 2 тыс.3 года назад
React Redux с использованием хуков | Практика | Анимация | Часть 2
React Redux с использованием хуков | Практика | Часть 1
Просмотров 6 тыс.3 года назад
React Redux с использованием хуков | Практика | Часть 1
Создаём мобильное приложение на Capacitor + HTML, JavaScript и CSS / Результат
Просмотров 6073 года назад
Создаём мобильное приложение на Capacitor HTML, JavaScript и CSS / Результат
Мобильное приложение на JavaScript | Часть 3 (Финиш)
Просмотров 4593 года назад
Мобильное приложение на JavaScript | Часть 3 (Финиш)
Мобильное приложение на JavaScript | Часть 2
Просмотров 6283 года назад
Мобильное приложение на JavaScript | Часть 2
Мобильное приложение на JavaScript | Часть 1
Просмотров 2,8 тыс.3 года назад
Мобильное приложение на JavaScript | Часть 1
Отличное видео! спасибо)
Крутой канал!
Огромное спасибо за видос! Очень интересно получилось❤
Для чего тут вообще Vite? Кликбейт? От его возможностей используется 0,01% Если видео для начинающих то и инструменты должны быть соответствующие Исходя из содержания видео максимум что необходимо live-server
Вопрос хороший, это не кликбейт. Это инструмент максимально приближенный к боевой разработке. Цель видео помимо самой верстки показать, что можно еще использовать. live-server это не иструмент промышленной разработки. А так как мимнимум зритель видео уже может для себя узнать новое - Как использовать nodejs - Приближенно познакомиться с Vite
Привет, можешь подсказать какой редактор кода используешь?
Привет! Visual Studio Code
@@skilldill спасибо за видео, не подскажешь шрифт и тему редактора? кстати, не думаю что это vscode на видео
@@davidgoodwin17 Привет! Точно, по инерции ответил про VSCode, для этого видео использовал zed.dev/
хороший видик для тех, кто ток начал в бэк уходить)) спасибки!))
@skilldill Скажите пожалуйста, как можно добавить событие тач и сделать кнопку ОГОНЬ для мобильной версии? Буду очень признателен за информацию!!🙏🙏🙏 Извините за тупые вопросы) Учусь ещё просто)
Здравствуйте! Хороший вопрос, правильно делаете, что задаете такие вопросы 👍 Для мобильной игры можете добавить кнопку на экран, разместить ее в правом нижнем углу и обрабатывать событие touchend developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event У меня есть подобная игра, можете вот тут посмотреть реализацию github.com/skilldill/airplane-game/blob/main/initControls.js
@@skilldill Спасибо вам большое! Успехов вам в работе! 👍🏻😊
@skilldill , ещё вопрос) Вы не подскажите, как можно добавить в вашу игру различные звуки? Выстрел из бластера, взрывы астероидов?
Нужно использовать вот это developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio, но тогда у вас на странице появится компонент audio. Его вы можете скрыть через css
Приветствую! Скажите пожалуйста, как поправить код с HP корабля? Почему исчезает ХП когда корабль не сталкивается с астероидом? Как пофиксить? Большое спасибо.
Привет! Возможно нужно настроить "чувствительность", а именно, выставить более широкие границы в которых будет происходить расчет "оказался ли в этот момент астеройд в этой нужных границах". Пример: if asteroid.posX >= ship.posX && asteroid.posX <= ship.posX + 100 Так нужно сделать потому что движение объектов происходит не на один пиксель в единицу времени, а на X(икс) пикселей, где X > 1 Поэтому попробуйте настроить именно этот "if asteroid.posX >= ship.posX && asteroid.posX <= ship.posX + 100" момент
Большое вам спасибо!@@skilldill
Спасибо за видео. Вдруг вы решите рассмотреть мое предложение для вашего следующего видео, тогда пишу сразу о своей проблеме: У меня есть несколько устройств (телефон, ноутбук, компьюетр и между этими устройствами необходимо передавать защищенное сообщение (зашифрованное сообщение например в нем важный пароль) и это хочется с реализацией Nest.JS, Postgres и Swagger для API для кросс палтформенного использования! В API я пишу сообщение и отправляю его на сервер, после этого API мне выдаст ссылку для прочтения этого сообщения, перехожу по ссылке меня сайт просит подтвердить прочтения сообщений по данной ссылке, как только я нажал прочитать я вижу текст который мне отправили и если я повторно перехожу по данной ссылке то я вижу что она самоуничтожилась, а именно выводится сообщение о том что данной ссылки не существует. Непосредственно понимаю что подобный нужный для меня функционал уже есть у сервиса privnote и подумал а почему бы не сделать аналогичный функционал только для себя и своих задач - это по срокам не долго и по сложности для вас легко, а для меня это очень очень сложно, т.к я не знаю даже JS, выучил только Html/CSS. Мне очень интересно посмотреть как разрабатывать такое мини-приложение на вашем примере если вы решитесь сделать что-то подобное, на ютубе я подобных идей не встречал и думаю в реализации этого предложения есть польза научиться разработке по вашему примеру и сохранить свои конфиденциальные данные например людям, которые передают свои пароли между разными устройствами. Если подумать еще, то в качастве функционала можно добавить и передачу файлов в любом виде (можно с шифрованием или без VeraCrypt), буду ждать вашего отклика. С уважением!
Круто! Выкладывай больше
немного странный для меня подходи, вначале верстку писать, потом уже разметку. я привык как то сразу смотреть, что получается.
Здравствуйте, делайте пожалуйста по больше таких видео)))
сделай следующую игру на react. Хотелось бы видеть как ты используешь различные хуки т.д. ОЧень полезно для новичков ( в том числе и для меня)
Крутто🎉
брооооо, ты очень приятный. продолжай снимать)
Спасибо!
А почему многие делают nav через список? Я просто сделал теги a и все, есть какое-то преимущество? Или как это объяснить?
Это рекомендация от W3S для лучшего соблюдения семантики верстки, плюс поисковые роботы лучше обработают содержимое сайта и в поиске могут показать разделы сайта
Семантика: Использование <ul> и <li> для навигационного меню соответствует семантике HTML. Список <ul> предназначен для создания списков, что делает ваш код более понятным для других разработчиков и поисковых систем. 2. Доступность: Использование списка <ul> в сочетании с правильным использованием атрибутов role и aria-label может улучшить доступность вашего сайта для пользователей с ограниченными возможностями.
Так по идее vite тут не обязателен, можно же просто использовать live-server, он будет любое внесенное изменения сохранять и обновлять, или все таки это немного другое? Просто не удивительно, если для новичков это усложнит понимание, ведь столько всего нового, надо понять что такое vite, node js, это жесть
Спасибо за вопрос! Согласен, что это чуть сложнее чем верстка, но я стараюсь показывать реальные инструменты, которые могут использоваться в разработке. LiveServer это крутой инструмент, но vite будет серьезнее
@skilldill 😢😢😢😢😢😢😢😢😢😢😢😢🎉🎉😢😢😢😢😢😢😢😢
@@skilldill а где то кроме начало vite используется? я просто час посмотрел и начал понимать, что уже сам хочу продолжить)) и начал сам делать)
Круто! Продолжайте в том жет духе!
А если не верстать сайт попайдёт ли он в топ ? Или вёрстку обязятльно надо делать ?
Что за бред, как ты без верстки собрался это делать? Вертска указывает браузеру где и какой елемент расположить, как стилизовать и т. д., а в figma просто макет, то есть набросок, как должен выглядить сайт, это не сайт, или ты о чём? О конструкторе сайтов или о чём? В верстке ничего прям сложного нет, на это просто надо время, просто пару раз сверстать несколько макетов, уже привыкнешь, и будешь на автомате знать как подключать шрифты, в основном если они на Google fonts проблем не будет, поймешь, что надо хоть немного сбрасывать дефолтные стили, я сам это недавно понял, ведь когда мы создаем новый документ, мы можем увидеть, что есть какие-то отступы как внешние так и внутриние, а она нам не нужны, ведь нам надо делать по макету и т. д. чтобы научиться, это не языки программирования (HTML, CSS) Это просто язык разметки и таблица стилей, они куда проще чем ЯП.
Спасибо
зависло видео посередине, обучение не удалось
Слайдеры конечно классные, но в практике допустим у меня, на каждом слайде есть тень))))))))))))) Пользуюсь я конечно свайепром, делать падинги вокрук это конечно можно но будет столько гемора. Либо ещё прекрасней, за которого я дизайнера рот топтал это тень на слайде при наведении. Как ты такое решаешь, или решал ли вообще? Как по мне такое решить это скрывать сам слайд и через опасити его показывать и так все вокруг слайды, но нужно сделать это так чтобы была как обычная не было появление а обычный скролл. Вот такой топик будет темой!
Саша Санечька, есть у тебя настройка вита для вёрстки, чтобы и autoprefixer, и query, и чтобы билделось в 1 файл с конкатенацией, а в консоли при разработке не был код конкатенирован. Меня этот галп заб уже а главное чтобы был плагин как gulp-file-include без него не как, чтобы работало без проблем, как начинаешь устанавливать пакеты на галпе всё красное всё вышло из разработки, старая версия ноды
Спасибо
Подскажите Vite удобнее чем Gulp?
Да, vite уже имеет основные шаблоны настроек, которые можно использовать из коробки
@@skilldill Прикольно это получается с gulp или webpack тогда вообще можно уходить
Я Gulp не использовал, а вот когда обновили фреймворк ларавел, там появился Vite, так про него и узнал :D
Это мобильное приложение, которое написано на html\css\js?
Да
а почему png?
В начале ничего не понимаю блин...
Попробуйте просто повторить всю процедуру, главное начать
Привет, круто но было бы вообще супер если бы оставил ссылку на макет, а в описаний есть только ссылка на саму figma
Привет! Спасибо за комментарий, материалы прикрепил к описанию
Дружище, расскажи пожалуйста, как все эти технологии осваивал, в проекте много всего реализовано, хочется послушать, как прошёл этот путь)
Подготовлю видео на эту тему 👍
@@skilldill Спасибо, ждём))
Очень круто! Жду новых видосов
Спасибо!
спасибо за видео, когда ждать вторую часть?
Привет, спасибо за доброе слово! Скорее всего понедельник, может получится раньше выложить
Hello, I am a developer and trying to learn Russian. It would be awesome if you could add English captions. Great video! )
Молодца! Интересно слушать, жду новые видосы
Круто, спасибо за видео, не пропадай!
Кто такой? Чем знаменит?
С возвращением. Если в видео про tramvai сделаешь сравнение redux/toolkit vs tramvai будет здорово
Спасибо что поделились) Ждем продолжения)
9:14 Стилевые эффекты без js не реализовать? Ты СЕРЬЕЗНО?
Чел, ты лучший, продолжай в том же духе)
Спасибо! Познавательно! Интересно, а какая реализация более перфоманс использовать Редакс (мобх) или useContext ? Наверное, в реальном react приложении будет достаточно обернуть хедер в контекст, а в нем держать компонент который будет содержать все модалки и открывать их соответственно параметрам контекста.
я что-то не понимаю, у тебя середина видоса зависла, самая интересная часть
Музыка лишняя, но видео хорошее, спасибо!
Супер супер
а можно ссылку на репозиторий ?
А где шахматы тут только таймер ....
не придирайся)))))))))))
а есть ли видео с самого начала проекта?
Супер!) А есть ссылка на репозиторий?