Чуточку программирования
Чуточку программирования
  • 30
  • 12 964

Відео

JS: поиск тегов | find tags | querySelector(All) closest nextElementSibling previousElementSibling
Переглядів 763 місяці тому
JS: поиск тегов | найти теги | find tags | методы поиска: querySelector querySelectorAll closest | свойства посика nextElementSibling previousElementSibling Главы видео: 0:00 - введение 0:29 - querySelector | Поиск одного тега 3:13 - querySelectorAll | Поиск множества тегов 8:48 - closest | Поиск родительского тега 12:50 - nextElementSibling && previousElementSibling | Поиск тега по соседству
JS: FormData для form | fetch: formData, file(s), JSON | post (send): formData, file(s), JSON
Переглядів 2373 місяці тому
JS: FormData для form | fetch: formData, file(s), JSON | post (send): formData, file(s), JSON | показываю как FormData упрощает работу с формой и отправкой данных на бекенд
JS: reload img | перезагружаем картинку которая не загрузилась
Переглядів 2473 місяці тому
JS: reload img | перезагрузить картинку | перезагрузим картинку которая не загрузилась Главы видео: 0:00 - введение 1:26 - разбираем существующий код 2:40 - приступаем писать js логику 8:23 - причесываем (оптимизируем) код
JS: To-Do list app | To-Do список дел | localStorage | Используем HTML, CSS, JS
Переглядів 593Рік тому
Javascript: To-Do list app | To-Do список дел | localStorage | Используем HTML, CSS, JS. Подробный по шаговый разбор. Главы видео: 0:00 - введение 0:49 - реализовываем разметку HTML and CSS 15:24 - подключаем JS и пишем логику
CSS vs JS: обрезание текста и добавление троеточие в конце текста | В 3 способа
Переглядів 476Рік тому
CSS vs Javascript: обрезание текста и добавление троеточие в конце текста. Как в одну строчку так и с указанием максимально нескольких строчек. Главы видео: 0:00 - введение 0:13 - обрезать текст в одну строчку и поставить при необходимости троеточие 1:22 - обрезать текст в 2 или более строчки и поставить при необходимости троеточие 2:49 - обрезать текст через JS
JS: создание табов | ПРАВИЛЬНЫЙ подход | Class tabs | Масштабируем решение!
Переглядів 1,6 тис.Рік тому
Javascript: создание табов. Показываю как правильно писать код js и как тот код грамотно масштабировать! Реализовываем несколько табов. Пишем HTML, CSS, JS. JS tabs. Главы видео: 0:00 - введение 0:24 - реализовываем разметку HTML and CSS 4:43 - подключаем JS и логику 22:16 - переписываем на Class и масштабируем решение
JS: меняю цвет background по клику | для новичков
Переглядів 268Рік тому
Javascript: меняю цвет background по клику
JS: показываем и скрываем поле input пароля | для новичков
Переглядів 137Рік тому
Javascript: показываем и скрываем поле input пароля
JS: при клике меняем картинку | для новичков
Переглядів 1,6 тис.Рік тому
Javascript: при клике меняем картинку | для новичков
JS: создаем счетчик (counter) | ПРАВИЛЬНЫЙ подход | Масштабируем решение! Счетчик с помощью Class
Переглядів 407Рік тому
Javascript: создаем счетчик (counter, кликер). Правильный подход. МАШТАБИРУЕМ РЕШЕНИЕ через Class. Реализовываем несколько счетчик.
JS: контекст this на примерах за 1 час!
Переглядів 384Рік тому
Javascript: контекст this на примерах за 1 час! Главы видео: 0:00 - введение 0:48 - зачем нужен this на примере 6:04 - антипатерн! Как не стоит делать 8:51 - 20 задачек про this 50:10 - пример с bind 53:43 - пример где можно использовать call или apply
JS: блокируем открытие консоли и выделение текста на сайте
Переглядів 253Рік тому
JS: блокируем открытие консоли и выделение текста на сайте
JS: уникальный ключ в объект | Symbol.for
Переглядів 221Рік тому
Javascript: уникальный ключ в объект. Symbol.for
JS: GET UTC time zone
Переглядів 77Рік тому
JS: GET UTC time zone, как взять время по UTC, как конвертировать локальное время в UTC
CSS: ТОП 3 новые свойства про которые СТОИТ знать! Part 1
Переглядів 89Рік тому
CSS: ТОП 3 новые свойства про которые СТОИТ знать! Part 1
JS: Promise.all и Promise.allsettled когда нужен и в чем разница?
Переглядів 106Рік тому
JS: Promise.all и Promise.allsettled когда нужен и в чем разница?
JS: повесить слушатель на изменение в storage (localStorage)
Переглядів 148Рік тому
JS: повесить слушатель на изменение в storage (localStorage)
Заблокировать Link или NavLink в React
Переглядів 27Рік тому
Заблокировать Link или NavLink в React
Как написать сайт-прослойку который проверит ваши домены (зеркала)
Переглядів 128Рік тому
Как написать сайт-прослойку который проверит ваши домены (зеркала)
Ленивая (отложенная, lazy) загрузка картинок без js | Лишь добавь один атрибут на картинку=)
Переглядів 48Рік тому
Ленивая (отложенная, lazy) загрузка картинок без js | Лишь добавь один атрибут на картинку=)
React (lazy, suspense). И загрузка кода (бандла) при hover аффекте или пли клика по нужном элементе
Переглядів 40Рік тому
React (lazy, suspense). И загрузка кода (бандла) при hover аффекте или пли клика по нужном элементе
JS загрузка картинки (события): onerror, onload
Переглядів 447Рік тому
JS загрузка картинки (события): onerror, onload
Простой способ переводить px в кем | Как просто работать с rem в стилях (px to rem)
Переглядів 44Рік тому
Простой способ переводить px в кем | Как просто работать с rem в стилях (px to rem)
Открытие локального хоста (localhost) разработки на телефоне
Переглядів 4,2 тис.2 роки тому
Открытие локального хоста (localhost) разработки на телефоне
React оптимизация. React.memo(), useCallback(). Часть 2.
Переглядів 542 роки тому
React оптимизация. React.memo(), useCallback(). Часть 2.
React оптимизация. Часть 1
Переглядів 902 роки тому
React оптимизация. Часть 1
React-Router 6V. Прокидывание props в Outlet и как их достать
Переглядів 5962 роки тому
React-Router 6V. Прокидывание props в Outlet и как их достать
Переход на React-Router 6V. Основная часть
Переглядів 1022 роки тому
Переход на React-Router 6V. Основная часть
VSCode - открытие через правую клавишу мыши конкретную папку
Переглядів 2964 роки тому
VSCode - открытие через правую клавишу мыши конкретную папку

КОМЕНТАРІ

  • @Ok-ey-s9y
    @Ok-ey-s9y 3 місяці тому

    подключен к одному роутеру, сервер запушен, ipv4 ввел с цифрами после двоиточие, но выходит ошибка: не удается получить доступ к сайту, и внизу превышено ожидание

    • @seregalucky4391
      @seregalucky4391 3 місяці тому

      Не подскажу. С таким не встречался. Я лишь могу предположить что какие это настройки в роутере нужно поменять но это лишь гипотеза

  • @Dreamer_78
    @Dreamer_78 3 місяці тому

    Здорово, очень интересно, но придется пересмотреть еще раз для усваивания) Спасибо вам большое!

  • @Dreamer_78
    @Dreamer_78 3 місяці тому

    Спасибо большое было интересно и познавательно, успехов вашему каналу подписка с меня)

  • @КонстантинСигуев
    @КонстантинСигуев 3 місяці тому

    Спасибо!

  • @Kolyan_Starina
    @Kolyan_Starina 3 місяці тому

    что делать если нету порта в visual

    • @seregalucky4391
      @seregalucky4391 3 місяці тому

      А ты через liveServer открываешь?

    • @Kolyan_Starina
      @Kolyan_Starina 3 місяці тому

      @@seregalucky4391 простите, не сумел тогда разобраться, уже всё загрузилось, спасибо большое

    • @seregalucky4391
      @seregalucky4391 3 місяці тому

      @@Kolyan_Starina Спрашивать если что это нормально)

    • @Kolyan_Starina
      @Kolyan_Starina 3 місяці тому

      Я пожалуй подпишусь, вы хороший специалист и человек ​@@seregalucky4391

  • @КонстантинСигуев
    @КонстантинСигуев 3 місяці тому

    Спасибо!

  • @basn63
    @basn63 4 місяці тому

    спасиб

  • @Gallegos_Studio
    @Gallegos_Studio 4 місяці тому

    Сначала показалось сложно, но ближе к концу все стало ясно))Спасибо пошел повторять)) Продолжай, у тебя хорошая подача информации!!!

  • @KirleOke
    @KirleOke 5 місяців тому

    не робит шо то

    • @seregalucky4391
      @seregalucky4391 5 місяців тому

      А интернет один и тот же который подключет к компу и телефону?

    • @KirleOke
      @KirleOke 5 місяців тому

      @@seregalucky4391 да

  • @dimonh2449
    @dimonh2449 5 місяців тому

    спасибо помог! установил 11ую винду, на 10ке сразу так было привык. очень сильно бесило после установки:) благодаря тебя все сделал.

  • @КонстантКонькин
    @КонстантКонькин 5 місяців тому

    Все гениальное просто=)

  • @vgshenshin
    @vgshenshin 6 місяців тому

    спасибо, очень помог!

  • @ЕленаЛемзикова
    @ЕленаЛемзикова 6 місяців тому

    Спасибо! Искала про запрет выделения. Самый простой способ!

  • @cpt_blackmore
    @cpt_blackmore 8 місяців тому

    Спасибо

  • @Mister-kg3le
    @Mister-kg3le 11 місяців тому

    Добрый день! Подскажите, проводите ли вы онлайн обучение индивидуально или группами? Я начинающий, у меня стаж до года, и я в восторге от подачи информации, потому что разные курсы попроходил, и вот после просмотра видео захотелось с вами связаться, если есть такая возможность, сообщите пожалуйста 👍🤝

    • @seregalucky4391
      @seregalucky4391 11 місяців тому

      Добрый, можете в телеграм написать. А там уже может что то решим. Мой ник в телеграмме: @sergii_st

  • @asifabbasov3801
    @asifabbasov3801 11 місяців тому

    Спасибо вам за выпуски. Как вы добились такого понимания языка? Если это не секрет напишите пожалуйста 🙏

    • @seregalucky4391
      @seregalucky4391 11 місяців тому

      Несколько причин) Во первых мне нравится чем я занимаюсь, во вторых не всегда прям но моментами стараюсь или где то расширять знания или углублять ну и конечно банально хоть немного опыта) Хотя в свое время и курсы дали толчок не плохой но опять же мне нравится в первую очередь чем занимаюсь)

  • @asifabbasov3801
    @asifabbasov3801 11 місяців тому

    Спасибо за видео начиная с 9 минуты нет объяснения подробного что такое this и почему мы его используем, после на 10 минуте была деструктуризация я так понимаю. Спасибо за видео, будут еще подобные проекты на JS?

    • @seregalucky4391
      @seregalucky4391 11 місяців тому

      Деструктуризацию делаю в параметрах функции constructor по скольку когда вызываю new Counter я аргументом передаю объект. this - нужен для того по скольку функция конструктор создает каждый раз новый объект когда вызываешь тут ее через new. Но под капотом в this записывается ссылка на новый объект который вернется и таким образом мы его заполняем добавляя 3 ключа в конструкторе. Надеюсь поняли) Это хоть и база но не прям начальный уровень в js.

    • @asifabbasov3801
      @asifabbasov3801 11 місяців тому

      @@seregalucky4391 спасибо

  • @baton4iki
    @baton4iki 11 місяців тому

    Uncaught ReferenceError: onClickByList is not defined Почему то в Консоли пишет вот такую ошибку

  • @gerompauel
    @gerompauel Рік тому

    Спасибо, помог

  • @KitratChannel
    @KitratChannel Рік тому

    Все понятно и полезно. Спасибо тебе автор за ролики.

  • @kosti4._.212
    @kosti4._.212 Рік тому

    🔥🔥🔥

  • @evdokia2342
    @evdokia2342 Рік тому

    круто, а можно что то подобное с ООП?

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Прям глубокое видео в ближайшее время пока вряд ли будет. Но что такое классы, функции конструкторы, прототип, публичные и приватные свойства и методы в классе, гетеры и сетеры планирую как то записать, покажу как и зачем что то записывать прям на класс) И этого видео будет больше чем достаточно на первое время) Главное до него добраться))

    • @asifabbasov3801
      @asifabbasov3801 11 місяців тому

      @@seregalucky4391 ждем очень сильно

  • @kubris.developer
    @kubris.developer Рік тому

    Логично, но не семантично. Зач список делать?

    • @seregalucky4391
      @seregalucky4391 Рік тому

      В семантике не сильно селен. Тут придерживался логики если это данные однотипные, а именно данные про продукт то в таком случае использую список. То есть список использую там где перебор чего то однотипного. Но если знаете как лучше с радостью выслушаю)

    • @kubris.developer
      @kubris.developer Рік тому

      @@seregalucky4391 Так то оно так, если текст вставлять, ссылки, картинки, то норм. А если более тяжелую верстку, блоки - тогда списки не катят.

    • @seregalucky4391
      @seregalucky4391 Рік тому

      @@kubris.developer Спасибо) надо будет еще как нибудь самому глянуть)

  • @elevaalex1225
    @elevaalex1225 Рік тому

    Перемудрил

  • @AndreyChursin
    @AndreyChursin Рік тому

    Если кнопка содержит просто текст (что чаще) is не отработает…

  • @AndreyChursin
    @AndreyChursin Рік тому

    Писец насколько все не по канонам… зачем такому учите?!

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Согласен видео как делать правильно единицы) Я учу коммерческому подходу ибо я в первую очередь программист, а не ютюбер) То есть мои видео помогают решать коммерческие таски или повышают шанс устроится на работу. По этому мне интересно узнать конкретно про какие каноны вы говорите?

  • @kindoir4705
    @kindoir4705 Рік тому

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

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Три в одном) Что бы далеко не ходить))

  • @PHP_Architect
    @PHP_Architect Рік тому

    годный пример для вооружения... На js ета реализация смотрится монструозно, строчный тег + getBoundingClientRect + resize....

  • @dEnsssy
    @dEnsssy Рік тому

    Самый понятный видео-урок по табам,большое спасибо!💯

  • @virtue1337
    @virtue1337 Рік тому

    Как файд аут и фейд ин сделать для такого слайдера. В джейкаери просто на ремув фейдоут на адд Вейд ин, а тут как? На класс шоу транзишин алл вешать а потом при активе опазити выкручивать. Сам написал ничего не понял

    • @virtue1337
      @virtue1337 Рік тому

      Или же както сеттаймаут писать

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Если ты говоришь про плавное появление и исчезновение контента при нажатии таба. Я если что css знаю но анимации не особо в них прям хорошо разбираюсь) Но я бы сделал вот так: В классе .item: display: none заменить на opacity: 0 добавить transition: opacity 0.5s (со временем можно поиграться), height: 0px, width: 0px, overflow: hidden. И в классе .contentShow: display: block заменить на opacity: 1, добавить height: auto;, width: auto, overflow: visible. display: none - display: block не позволит сделать плавную анимацию. А вообще если полноценный проект но берут какую то либу под анимацию что бы display: none - display: block делать плавным)

    • @virtue1337
      @virtue1337 Рік тому

      О спасибо, что разжевал. Я для своего пет проекта хочу сделать плавные табы. У меня уже есть библа используемая "свитер слайдер" на ней уже написан один слайдер. Но джеквури не хочу тянуть в проект ради одного плавного перехода. Сделал плавый переход на нативном джс через позищен абсолют, но тогда проблема высота секции захардкоженна из-за абсолюта и то что он вырывает из потока итемы. Начал ковырять сеттаймаут но с ним кривы выглядит анимация. Ты не знаешь с помощью свитир слайдера можно сделать переход плавный между табами?

    • @virtue1337
      @virtue1337 Рік тому

      Кстати Спасибо за видос завтра перепишу свой слайдер на классы. Ещё сделай если можешь сделай про модалки и фабрику модалок видос, будет топчик. А то я не совсем понимаю, как фабрику делать

    • @seregalucky4391
      @seregalucky4391 Рік тому

      @@virtue1337 По поводу слайдера не подскажу. По поводу абсолюта, ты ведь можешь двигать элемент если дашь и позишн релейтив. В таком случая он не выпадает с потока)

  • @max_snischuk
    @max_snischuk Рік тому

    как понять когда нужны дата-атрибуты)

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Хороший вопрос) Там где нужно добавить дополнительную информацию на тег. И ты понимаешь что записать в класс как то это не то и id тоже как то не сильно подходит. Скоро доделаю еще одно видео где юзаю артибуты. Будет больше примеров где они нужны или уместно использовать)

  • @ВладимирКолесников-и9щ

    спасибо очень круто

  • @lililight-e5f
    @lililight-e5f Рік тому

    Всё понятно. можно много табов прикрутить, пока не устанет рука. Вы сколько лет изучаете программирование, чтобы понимать как 2 * 2 = 4?. повторять за вами не трудно, а самому своё что-то не соберу, но пытаюсь

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Если говорить от момента когда начал и до момента когда можно сказать что уметь самостоятельно абсолютное большинство рабочих задач решать.То наверное 2-3 года. Года полтора сначала изучение потом года полтора именно работа над какими то коммерческими проектами. Не жди быстрых результатов)) Но и то даже во фронте есть свои направления: сайты одно, игры браузерные это второе, сложные анимации это третье. Но думать об направлении это имеет смысл когда базу всю освоишь. Сначала все смотрят и повторяют. Главное хотя бы в моменте повторения примерно понимать зачем куда и почему. На все нужно время) Лишь со временем не малым начинают писать самостоятельно что то свое.

    • @lililight-e5f
      @lililight-e5f Рік тому

      благодарю, мне торопиться некуда, неправильно выразился . Я еще даже очень тороплюсь, после каждого кусочка кода, я его изменяю на что то своё, но базы пока чуть-чуть. Свои кривые проекты я выкладываю на ютубе, чтобы смотреть на свой прогресс, кроме меня их никто не смотрит

  • @СагитМирвалиев

    Теперь я понял зачем нужны классы. Спасибо

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Еще больший потенциал классов раскрывается при создании каких то игр. Но игры в вебе это прям отдельное направление)

  • @lililight-e5f
    @lililight-e5f Рік тому

    без лишней воды слайдер, а если мне нужен слайдер из моих фотографий ?

    • @seregalucky4391
      @seregalucky4391 Рік тому

      В идеале создать папку с фотографиями. Можно назвать папку images. И тогда в каждом объекте под ключом src прописывать путь к фото. src: "./images/name_photo.jpg". Как то так)

    • @lililight-e5f
      @lililight-e5f Рік тому

      будет сделано@@seregalucky4391

  • @PHP_Architect
    @PHP_Architect Рік тому

    табы пилю одной функцией передавая селектор таб контейнера, а дальше функция сама отлавливая таб-нав и таб-контент групируя свои соответствия все в том же сss, как оно прилетает с бд итемИд-1, итемИд-2, но это вкусовщина, все ситуитивно

    • @seregalucky4391
      @seregalucky4391 Рік тому

      К любой задачи нужно подходить индивидуально тут бесспорно. Моя цель донести как лучше делать. Особенно донести что дублирование кода это очень плохо. А если данные под табы получаем с бд то табы и контент уже формируются будут динамически. Но я не хочу новичков пугать всем и сразу и что в дальнейшем почти все будут получать с бд) Плавно хочу их в это ввести)

  • @seregalucky4391
    @seregalucky4391 Рік тому

    Главы видео: 0:24 - реализовываем разметку HTML and CSS 4:43 - подключаем JS и логику 22:16 - переписываем на Class и масштабируем решение

  • @mikledyuba5048
    @mikledyuba5048 Рік тому

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

    • @seregalucky4391
      @seregalucky4391 Рік тому

      Учту этот момент. До того как я перешел на создание класса было понятно? Ибо я пока что ищу баланс между скоростью и подробным объяснением) Ибо я реально хочу донести полезную инфу)

    • @evdokia2342
      @evdokia2342 Рік тому

      @@seregalucky4391 да все понятно) я наоборот, за более тяжелую логику)

  • @jimbim2694
    @jimbim2694 Рік тому

    Спасибо за видео. У меня через обычный shell не работало, только через тот что в папке Background. Может кому-то поможет это)

  • @seregalucky4391
    @seregalucky4391 Рік тому

    Основные моменты: 0:48 - зачем нужен this на примере 6:04 - антипатерн! Как не стоит делать 8:51 - 20 задачек про this 50:10 - пример с bind 53:43 - пример где можно использовать call или apply

  • @seregalucky4391
    @seregalucky4391 Рік тому

    0:30 - через CSS обрезание текста в одну строчку 3:24 - через CSS обрезание текста в то количество строчек которое вам нужно 5:48 - как сделать что бы текст не прыгал при добавлении скрола 10:45 - через свойство CSS укоряем первый рендеринг страницы

  • @Jonathaann
    @Jonathaann Рік тому

    Интформация полезная, спасибо.

  • @pseudonim510
    @pseudonim510 Рік тому

    Полезно, несмотря на громкость голоса!

  • @shevafootbal
    @shevafootbal Рік тому

    Спасибо. Всё работает. И не пришлось регаться на разных сайтах и разбираться с ftp клиентами как советуют в интернетах. Просто и доступно

  • @Tureckiy_xl
    @Tureckiy_xl 2 роки тому

    Аааа Серёга!!! Рад тебя слышать

  • @seregalucky4391
    @seregalucky4391 2 роки тому

    Еще одно короткое видео которое стоит вам посмотреть и там как раз показывается в том числе как через числдрен сделать так что бы не было лишних перерендеров не нужных компонентов: ua-cam.com/video/JzBEbo4enQY/v-deo.html

  • @seregalucky4391
    @seregalucky4391 3 роки тому

    Еще одно видео про это: ua-cam.com/video/zEQiNFAwDGo/v-deo.html

  • @МаксимАндросов-с8н

    Большое спасибо!!! Для меня оказалась очень полезная информация....

  • @kit-itt
    @kit-itt 3 роки тому

    Спасибо. Полезно.

  • @Tureckiy_xl
    @Tureckiy_xl 4 роки тому

    Проверил в реестре. Сейчас сразу прописывается "%V"