Саша Утбанов
Саша Утбанов
  • Видео 28
  • Просмотров 48 828
Разбор тестового задания | TypeScript | NodeJS
В этом видео мы разберем пример тестового задания. В видео приводятся простые советы, которые можно применить при выполнении тестового задания 🤓
Тестовое задание выполняем с на 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

Комментарии

  • @user-dm5le8hz8c
    @user-dm5le8hz8c Месяц назад

    Отличное видео! спасибо)

  • @user-jm1wj5nn3u
    @user-jm1wj5nn3u Месяц назад

    Крутой канал!

  • @yakovbotov6145
    @yakovbotov6145 Месяц назад

    Огромное спасибо за видос! Очень интересно получилось❤

  • @sergiohardov
    @sergiohardov 4 месяца назад

    Для чего тут вообще Vite? Кликбейт? От его возможностей используется 0,01% Если видео для начинающих то и инструменты должны быть соответствующие Исходя из содержания видео максимум что необходимо live-server

    • @skilldill
      @skilldill 4 месяца назад

      Вопрос хороший, это не кликбейт. Это инструмент максимально приближенный к боевой разработке. Цель видео помимо самой верстки показать, что можно еще использовать. live-server это не иструмент промышленной разработки. А так как мимнимум зритель видео уже может для себя узнать новое - Как использовать nodejs - Приближенно познакомиться с Vite

  • @PRONCHENKO
    @PRONCHENKO 5 месяцев назад

    Привет, можешь подсказать какой редактор кода используешь?

    • @skilldill
      @skilldill 5 месяцев назад

      Привет! Visual Studio Code

    • @davidgoodwin17
      @davidgoodwin17 5 месяцев назад

      @@skilldill спасибо за видео, не подскажешь шрифт и тему редактора? кстати, не думаю что это vscode на видео

    • @skilldill
      @skilldill 5 месяцев назад

      @@davidgoodwin17 Привет! Точно, по инерции ответил про VSCode, для этого видео использовал zed.dev/

  • @user-dg7ri8yr7s
    @user-dg7ri8yr7s 5 месяцев назад

    хороший видик для тех, кто ток начал в бэк уходить)) спасибки!))

  • @romanyarets8568
    @romanyarets8568 6 месяцев назад

    @skilldill Скажите пожалуйста, как можно добавить событие тач и сделать кнопку ОГОНЬ для мобильной версии? Буду очень признателен за информацию!!🙏🙏🙏 Извините за тупые вопросы) Учусь ещё просто)

    • @skilldill
      @skilldill 6 месяцев назад

      Здравствуйте! Хороший вопрос, правильно делаете, что задаете такие вопросы 👍 Для мобильной игры можете добавить кнопку на экран, разместить ее в правом нижнем углу и обрабатывать событие touchend developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event У меня есть подобная игра, можете вот тут посмотреть реализацию github.com/skilldill/airplane-game/blob/main/initControls.js

    • @romanyarets8568
      @romanyarets8568 6 месяцев назад

      @@skilldill Спасибо вам большое! Успехов вам в работе! 👍🏻😊

  • @romanyarets8568
    @romanyarets8568 6 месяцев назад

    @skilldill , ещё вопрос) Вы не подскажите, как можно добавить в вашу игру различные звуки? Выстрел из бластера, взрывы астероидов?

    • @skilldill
      @skilldill 6 месяцев назад

      Нужно использовать вот это developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio, но тогда у вас на странице появится компонент audio. Его вы можете скрыть через css

  • @romanyarets8568
    @romanyarets8568 6 месяцев назад

    Приветствую! Скажите пожалуйста, как поправить код с HP корабля? Почему исчезает ХП когда корабль не сталкивается с астероидом? Как пофиксить? Большое спасибо.

    • @skilldill
      @skilldill 6 месяцев назад

      Привет! Возможно нужно настроить "чувствительность", а именно, выставить более широкие границы в которых будет происходить расчет "оказался ли в этот момент астеройд в этой нужных границах". Пример: if asteroid.posX >= ship.posX && asteroid.posX <= ship.posX + 100 Так нужно сделать потому что движение объектов происходит не на один пиксель в единицу времени, а на X(икс) пикселей, где X > 1 Поэтому попробуйте настроить именно этот "if asteroid.posX >= ship.posX && asteroid.posX <= ship.posX + 100" момент

    • @romanyarets8568
      @romanyarets8568 6 месяцев назад

      Большое вам спасибо!@@skilldill

  • @whiteltd5970
    @whiteltd5970 6 месяцев назад

    Спасибо за видео. Вдруг вы решите рассмотреть мое предложение для вашего следующего видео, тогда пишу сразу о своей проблеме: У меня есть несколько устройств (телефон, ноутбук, компьюетр и между этими устройствами необходимо передавать защищенное сообщение (зашифрованное сообщение например в нем важный пароль) и это хочется с реализацией Nest.JS, Postgres и Swagger для API для кросс палтформенного использования! В API я пишу сообщение и отправляю его на сервер, после этого API мне выдаст ссылку для прочтения этого сообщения, перехожу по ссылке меня сайт просит подтвердить прочтения сообщений по данной ссылке, как только я нажал прочитать я вижу текст который мне отправили и если я повторно перехожу по данной ссылке то я вижу что она самоуничтожилась, а именно выводится сообщение о том что данной ссылки не существует. Непосредственно понимаю что подобный нужный для меня функционал уже есть у сервиса privnote и подумал а почему бы не сделать аналогичный функционал только для себя и своих задач - это по срокам не долго и по сложности для вас легко, а для меня это очень очень сложно, т.к я не знаю даже JS, выучил только Html/CSS. Мне очень интересно посмотреть как разрабатывать такое мини-приложение на вашем примере если вы решитесь сделать что-то подобное, на ютубе я подобных идей не встречал и думаю в реализации этого предложения есть польза научиться разработке по вашему примеру и сохранить свои конфиденциальные данные например людям, которые передают свои пароли между разными устройствами. Если подумать еще, то в качастве функционала можно добавить и передачу файлов в любом виде (можно с шифрованием или без VeraCrypt), буду ждать вашего отклика. С уважением!

  • @user-md1hd4uh9s
    @user-md1hd4uh9s 6 месяцев назад

    Круто! Выкладывай больше

  • @progi99
    @progi99 7 месяцев назад

    немного странный для меня подходи, вначале верстку писать, потом уже разметку. я привык как то сразу смотреть, что получается.

  • @skammingsc4082
    @skammingsc4082 7 месяцев назад

    Здравствуйте, делайте пожалуйста по больше таких видео)))

  • @Lintonya
    @Lintonya 7 месяцев назад

    сделай следующую игру на react. Хотелось бы видеть как ты используешь различные хуки т.д. ОЧень полезно для новичков ( в том числе и для меня)

  • @dimasnytin
    @dimasnytin 7 месяцев назад

    Крутто🎉

  • @user-dg7ri8yr7s
    @user-dg7ri8yr7s 7 месяцев назад

    брооооо, ты очень приятный. продолжай снимать)

    • @skilldill
      @skilldill 7 месяцев назад

      Спасибо!

  • @denzeroneYT
    @denzeroneYT 7 месяцев назад

    А почему многие делают nav через список? Я просто сделал теги a и все, есть какое-то преимущество? Или как это объяснить?

    • @skilldill
      @skilldill 7 месяцев назад

      Это рекомендация от W3S для лучшего соблюдения семантики верстки, плюс поисковые роботы лучше обработают содержимое сайта и в поиске могут показать разделы сайта

    • @gva5906
      @gva5906 Месяц назад

      Семантика: Использование <ul> и <li> для навигационного меню соответствует семантике HTML. Список <ul> предназначен для создания списков, что делает ваш код более понятным для других разработчиков и поисковых систем. 2. Доступность: Использование списка <ul> в сочетании с правильным использованием атрибутов role и aria-label может улучшить доступность вашего сайта для пользователей с ограниченными возможностями.

  • @denzeroneYT
    @denzeroneYT 7 месяцев назад

    Так по идее vite тут не обязателен, можно же просто использовать live-server, он будет любое внесенное изменения сохранять и обновлять, или все таки это немного другое? Просто не удивительно, если для новичков это усложнит понимание, ведь столько всего нового, надо понять что такое vite, node js, это жесть

    • @skilldill
      @skilldill 7 месяцев назад

      Спасибо за вопрос! Согласен, что это чуть сложнее чем верстка, но я стараюсь показывать реальные инструменты, которые могут использоваться в разработке. LiveServer это крутой инструмент, но vite будет серьезнее

    • @user-mi4uz7hy9s
      @user-mi4uz7hy9s 7 месяцев назад

      ​@skilldill 😢😢😢😢😢😢😢😢😢😢😢😢🎉🎉😢😢😢😢😢😢😢😢

    • @progi99
      @progi99 7 месяцев назад

      @@skilldill а где то кроме начало vite используется? я просто час посмотрел и начал понимать, что уже сам хочу продолжить)) и начал сам делать)

  • @GlebFedorov
    @GlebFedorov 7 месяцев назад

    Круто! Продолжайте в том жет духе!

  • @user-gd3rw7vf8t
    @user-gd3rw7vf8t 7 месяцев назад

    А если не верстать сайт попайдёт ли он в топ ? Или вёрстку обязятльно надо делать ?

    • @denzeroneYT
      @denzeroneYT 7 месяцев назад

      Что за бред, как ты без верстки собрался это делать? Вертска указывает браузеру где и какой елемент расположить, как стилизовать и т. д., а в figma просто макет, то есть набросок, как должен выглядить сайт, это не сайт, или ты о чём? О конструкторе сайтов или о чём? В верстке ничего прям сложного нет, на это просто надо время, просто пару раз сверстать несколько макетов, уже привыкнешь, и будешь на автомате знать как подключать шрифты, в основном если они на Google fonts проблем не будет, поймешь, что надо хоть немного сбрасывать дефолтные стили, я сам это недавно понял, ведь когда мы создаем новый документ, мы можем увидеть, что есть какие-то отступы как внешние так и внутриние, а она нам не нужны, ведь нам надо делать по макету и т. д. чтобы научиться, это не языки программирования (HTML, CSS) Это просто язык разметки и таблица стилей, они куда проще чем ЯП.

  • @androidiosgameplay-anrad7256
    @androidiosgameplay-anrad7256 7 месяцев назад

    Спасибо

  • @rinada9758
    @rinada9758 7 месяцев назад

    зависло видео посередине, обучение не удалось

  • @ThePirateHistory
    @ThePirateHistory 7 месяцев назад

    Слайдеры конечно классные, но в практике допустим у меня, на каждом слайде есть тень))))))))))))) Пользуюсь я конечно свайепром, делать падинги вокрук это конечно можно но будет столько гемора. Либо ещё прекрасней, за которого я дизайнера рот топтал это тень на слайде при наведении. Как ты такое решаешь, или решал ли вообще? Как по мне такое решить это скрывать сам слайд и через опасити его показывать и так все вокруг слайды, но нужно сделать это так чтобы была как обычная не было появление а обычный скролл. Вот такой топик будет темой!

  • @ThePirateHistory
    @ThePirateHistory 7 месяцев назад

    Саша Санечька, есть у тебя настройка вита для вёрстки, чтобы и autoprefixer, и query, и чтобы билделось в 1 файл с конкатенацией, а в консоли при разработке не был код конкатенирован. Меня этот галп заб уже а главное чтобы был плагин как gulp-file-include без него не как, чтобы работало без проблем, как начинаешь устанавливать пакеты на галпе всё красное всё вышло из разработки, старая версия ноды

  • @nalcapital
    @nalcapital 8 месяцев назад

    Спасибо

  • @jenyaspace
    @jenyaspace 8 месяцев назад

    Подскажите Vite удобнее чем Gulp?

    • @skilldill
      @skilldill 8 месяцев назад

      Да, vite уже имеет основные шаблоны настроек, которые можно использовать из коробки

    • @jenyaspace
      @jenyaspace 8 месяцев назад

      @@skilldill Прикольно это получается с gulp или webpack тогда вообще можно уходить

    • @denzeroneYT
      @denzeroneYT 7 месяцев назад

      Я Gulp не использовал, а вот когда обновили фреймворк ларавел, там появился Vite, так про него и узнал :D

  • @defox9721
    @defox9721 8 месяцев назад

    Это мобильное приложение, которое написано на html\css\js?

  • @user-bg3hu1oz4y
    @user-bg3hu1oz4y 8 месяцев назад

    а почему png?

  • @mikhailpotapov1552
    @mikhailpotapov1552 8 месяцев назад

    В начале ничего не понимаю блин...

    • @skilldill
      @skilldill 8 месяцев назад

      Попробуйте просто повторить всю процедуру, главное начать

  • @aslan_web
    @aslan_web 8 месяцев назад

    Привет, круто но было бы вообще супер если бы оставил ссылку на макет, а в описаний есть только ссылка на саму figma

    • @skilldill
      @skilldill 8 месяцев назад

      Привет! Спасибо за комментарий, материалы прикрепил к описанию

  • @user-lb7py9nn4i
    @user-lb7py9nn4i 9 месяцев назад

    Дружище, расскажи пожалуйста, как все эти технологии осваивал, в проекте много всего реализовано, хочется послушать, как прошёл этот путь)

    • @skilldill
      @skilldill 8 месяцев назад

      Подготовлю видео на эту тему 👍

    • @user-lb7py9nn4i
      @user-lb7py9nn4i 8 месяцев назад

      @@skilldill Спасибо, ждём))

  • @yakovbotov6145
    @yakovbotov6145 9 месяцев назад

    Очень круто! Жду новых видосов

  • @nalcapital
    @nalcapital 9 месяцев назад

    Спасибо!

  • @true227
    @true227 9 месяцев назад

    спасибо за видео, когда ждать вторую часть?

    • @skilldill
      @skilldill 9 месяцев назад

      Привет, спасибо за доброе слово! Скорее всего понедельник, может получится раньше выложить

  • @mattf.2142
    @mattf.2142 9 месяцев назад

    Hello, I am a developer and trying to learn Russian. It would be awesome if you could add English captions. Great video! )

  • @levasyuk
    @levasyuk 9 месяцев назад

    Молодца! Интересно слушать, жду новые видосы

  • @antowamulyarchik370
    @antowamulyarchik370 9 месяцев назад

    Круто, спасибо за видео, не пропадай!

  • @user-jt7wb3zc1m
    @user-jt7wb3zc1m 9 месяцев назад

    Кто такой? Чем знаменит?

  • @dimd8824
    @dimd8824 9 месяцев назад

    С возвращением. Если в видео про tramvai сделаешь сравнение redux/toolkit vs tramvai будет здорово

  • @sergei_sergeevu4
    @sergei_sergeevu4 9 месяцев назад

    Спасибо что поделились) Ждем продолжения)

  • @dartweid9871
    @dartweid9871 Год назад

    9:14 Стилевые эффекты без js не реализовать? Ты СЕРЬЕЗНО?

  • @kovalevski1972
    @kovalevski1972 Год назад

    Чел, ты лучший, продолжай в том же духе)

  • @uxuidesigner6952
    @uxuidesigner6952 Год назад

    Спасибо! Познавательно! Интересно, а какая реализация более перфоманс использовать Редакс (мобх) или useContext ? Наверное, в реальном react приложении будет достаточно обернуть хедер в контекст, а в нем держать компонент который будет содержать все модалки и открывать их соответственно параметрам контекста.

  • @forsinger2875
    @forsinger2875 Год назад

    я что-то не понимаю, у тебя середина видоса зависла, самая интересная часть

  • @Ana-xi9xy
    @Ana-xi9xy Год назад

    Музыка лишняя, но видео хорошее, спасибо!

  • @theoty-js-react
    @theoty-js-react Год назад

    Супер супер

  • @haibova_irisha
    @haibova_irisha Год назад

    а можно ссылку на репозиторий ?

  • @jackblack9273
    @jackblack9273 Год назад

    А где шахматы тут только таймер ....

    • @webminsk7884
      @webminsk7884 Год назад

      не придирайся)))))))))))

  • @kimanowka
    @kimanowka Год назад

    а есть ли видео с самого начала проекта?

  • @user-el6js1gz5n
    @user-el6js1gz5n Год назад

    Супер!) А есть ссылка на репозиторий?