- 30
- 12 964
Чуточку программирования
Приєднався 24 чер 2016
Канал про front-end по край ней мере пока что=)
JS: Найти общее количество тегов | find all count tags | querySelectorAll and $$
Найти общее количество тегов | find all count tags | querySelectorAll and $$
Переглядів: 32
Відео
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)
Как написать сайт-прослойку который проверит ваши домены (зеркала)
Переглядів 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-Router 6V. Прокидывание props в Outlet и как их достать
Переглядів 5962 роки тому
React-Router 6V. Прокидывание props в Outlet и как их достать
Переход на React-Router 6V. Основная часть
Переглядів 1022 роки тому
Переход на React-Router 6V. Основная часть
VSCode - открытие через правую клавишу мыши конкретную папку
Переглядів 2964 роки тому
VSCode - открытие через правую клавишу мыши конкретную папку
подключен к одному роутеру, сервер запушен, ipv4 ввел с цифрами после двоиточие, но выходит ошибка: не удается получить доступ к сайту, и внизу превышено ожидание
Не подскажу. С таким не встречался. Я лишь могу предположить что какие это настройки в роутере нужно поменять но это лишь гипотеза
Здорово, очень интересно, но придется пересмотреть еще раз для усваивания) Спасибо вам большое!
Спасибо большое было интересно и познавательно, успехов вашему каналу подписка с меня)
Рад что понравилось)
Спасибо!
что делать если нету порта в visual
А ты через liveServer открываешь?
@@seregalucky4391 простите, не сумел тогда разобраться, уже всё загрузилось, спасибо большое
@@Kolyan_Starina Спрашивать если что это нормально)
Я пожалуй подпишусь, вы хороший специалист и человек @@seregalucky4391
Спасибо!
спасиб
Сначала показалось сложно, но ближе к концу все стало ясно))Спасибо пошел повторять)) Продолжай, у тебя хорошая подача информации!!!
Спасибо, стараюсь)
не робит шо то
А интернет один и тот же который подключет к компу и телефону?
@@seregalucky4391 да
спасибо помог! установил 11ую винду, на 10ке сразу так было привык. очень сильно бесило после установки:) благодаря тебя все сделал.
Все гениальное просто=)
спасибо, очень помог!
Спасибо! Искала про запрет выделения. Самый простой способ!
Спасибо
Добрый день! Подскажите, проводите ли вы онлайн обучение индивидуально или группами? Я начинающий, у меня стаж до года, и я в восторге от подачи информации, потому что разные курсы попроходил, и вот после просмотра видео захотелось с вами связаться, если есть такая возможность, сообщите пожалуйста 👍🤝
Добрый, можете в телеграм написать. А там уже может что то решим. Мой ник в телеграмме: @sergii_st
Спасибо вам за выпуски. Как вы добились такого понимания языка? Если это не секрет напишите пожалуйста 🙏
Несколько причин) Во первых мне нравится чем я занимаюсь, во вторых не всегда прям но моментами стараюсь или где то расширять знания или углублять ну и конечно банально хоть немного опыта) Хотя в свое время и курсы дали толчок не плохой но опять же мне нравится в первую очередь чем занимаюсь)
Спасибо за видео начиная с 9 минуты нет объяснения подробного что такое this и почему мы его используем, после на 10 минуте была деструктуризация я так понимаю. Спасибо за видео, будут еще подобные проекты на JS?
Деструктуризацию делаю в параметрах функции constructor по скольку когда вызываю new Counter я аргументом передаю объект. this - нужен для того по скольку функция конструктор создает каждый раз новый объект когда вызываешь тут ее через new. Но под капотом в this записывается ссылка на новый объект который вернется и таким образом мы его заполняем добавляя 3 ключа в конструкторе. Надеюсь поняли) Это хоть и база но не прям начальный уровень в js.
@@seregalucky4391 спасибо
Uncaught ReferenceError: onClickByList is not defined Почему то в Консоли пишет вот такую ошибку
Спасибо, помог
Все понятно и полезно. Спасибо тебе автор за ролики.
🔥🔥🔥
круто, а можно что то подобное с ООП?
Прям глубокое видео в ближайшее время пока вряд ли будет. Но что такое классы, функции конструкторы, прототип, публичные и приватные свойства и методы в классе, гетеры и сетеры планирую как то записать, покажу как и зачем что то записывать прям на класс) И этого видео будет больше чем достаточно на первое время) Главное до него добраться))
@@seregalucky4391 ждем очень сильно
Логично, но не семантично. Зач список делать?
В семантике не сильно селен. Тут придерживался логики если это данные однотипные, а именно данные про продукт то в таком случае использую список. То есть список использую там где перебор чего то однотипного. Но если знаете как лучше с радостью выслушаю)
@@seregalucky4391 Так то оно так, если текст вставлять, ссылки, картинки, то норм. А если более тяжелую верстку, блоки - тогда списки не катят.
@@kubris.developer Спасибо) надо будет еще как нибудь самому глянуть)
Перемудрил
Если кнопка содержит просто текст (что чаще) is не отработает…
Писец насколько все не по канонам… зачем такому учите?!
Согласен видео как делать правильно единицы) Я учу коммерческому подходу ибо я в первую очередь программист, а не ютюбер) То есть мои видео помогают решать коммерческие таски или повышают шанс устроится на работу. По этому мне интересно узнать конкретно про какие каноны вы говорите?
Спасибо, вам большое, мне как раз нужен был вариант с жс кодом.Выручили!!!
Три в одном) Что бы далеко не ходить))
годный пример для вооружения... На js ета реализация смотрится монструозно, строчный тег + getBoundingClientRect + resize....
Самый понятный видео-урок по табам,большое спасибо!💯
Как файд аут и фейд ин сделать для такого слайдера. В джейкаери просто на ремув фейдоут на адд Вейд ин, а тут как? На класс шоу транзишин алл вешать а потом при активе опазити выкручивать. Сам написал ничего не понял
Или же както сеттаймаут писать
Если ты говоришь про плавное появление и исчезновение контента при нажатии таба. Я если что 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 По поводу слайдера не подскажу. По поводу абсолюта, ты ведь можешь двигать элемент если дашь и позишн релейтив. В таком случая он не выпадает с потока)
как понять когда нужны дата-атрибуты)
Хороший вопрос) Там где нужно добавить дополнительную информацию на тег. И ты понимаешь что записать в класс как то это не то и id тоже как то не сильно подходит. Скоро доделаю еще одно видео где юзаю артибуты. Будет больше примеров где они нужны или уместно использовать)
спасибо очень круто
Всё понятно. можно много табов прикрутить, пока не устанет рука. Вы сколько лет изучаете программирование, чтобы понимать как 2 * 2 = 4?. повторять за вами не трудно, а самому своё что-то не соберу, но пытаюсь
Если говорить от момента когда начал и до момента когда можно сказать что уметь самостоятельно абсолютное большинство рабочих задач решать.То наверное 2-3 года. Года полтора сначала изучение потом года полтора именно работа над какими то коммерческими проектами. Не жди быстрых результатов)) Но и то даже во фронте есть свои направления: сайты одно, игры браузерные это второе, сложные анимации это третье. Но думать об направлении это имеет смысл когда базу всю освоишь. Сначала все смотрят и повторяют. Главное хотя бы в моменте повторения примерно понимать зачем куда и почему. На все нужно время) Лишь со временем не малым начинают писать самостоятельно что то свое.
благодарю, мне торопиться некуда, неправильно выразился . Я еще даже очень тороплюсь, после каждого кусочка кода, я его изменяю на что то своё, но базы пока чуть-чуть. Свои кривые проекты я выкладываю на ютубе, чтобы смотреть на свой прогресс, кроме меня их никто не смотрит
Теперь я понял зачем нужны классы. Спасибо
Еще больший потенциал классов раскрывается при создании каких то игр. Но игры в вебе это прям отдельное направление)
без лишней воды слайдер, а если мне нужен слайдер из моих фотографий ?
В идеале создать папку с фотографиями. Можно назвать папку images. И тогда в каждом объекте под ключом src прописывать путь к фото. src: "./images/name_photo.jpg". Как то так)
будет сделано@@seregalucky4391
табы пилю одной функцией передавая селектор таб контейнера, а дальше функция сама отлавливая таб-нав и таб-контент групируя свои соответствия все в том же сss, как оно прилетает с бд итемИд-1, итемИд-2, но это вкусовщина, все ситуитивно
К любой задачи нужно подходить индивидуально тут бесспорно. Моя цель донести как лучше делать. Особенно донести что дублирование кода это очень плохо. А если данные под табы получаем с бд то табы и контент уже формируются будут динамически. Но я не хочу новичков пугать всем и сразу и что в дальнейшем почти все будут получать с бд) Плавно хочу их в это ввести)
Главы видео: 0:24 - реализовываем разметку HTML and CSS 4:43 - подключаем JS и логику 22:16 - переписываем на Class и масштабируем решение
Где-то с середины ниточка пропала, то есть понимание изложения исчезло. Автор сильно увлекся и " чуточку программирования " стало недоступным
Учту этот момент. До того как я перешел на создание класса было понятно? Ибо я пока что ищу баланс между скоростью и подробным объяснением) Ибо я реально хочу донести полезную инфу)
@@seregalucky4391 да все понятно) я наоборот, за более тяжелую логику)
Спасибо за видео. У меня через обычный shell не работало, только через тот что в папке Background. Может кому-то поможет это)
Основные моменты: 0:48 - зачем нужен this на примере 6:04 - антипатерн! Как не стоит делать 8:51 - 20 задачек про this 50:10 - пример с bind 53:43 - пример где можно использовать call или apply
0:30 - через CSS обрезание текста в одну строчку 3:24 - через CSS обрезание текста в то количество строчек которое вам нужно 5:48 - как сделать что бы текст не прыгал при добавлении скрола 10:45 - через свойство CSS укоряем первый рендеринг страницы
Интформация полезная, спасибо.
Полезно, несмотря на громкость голоса!
Спасибо. Всё работает. И не пришлось регаться на разных сайтах и разбираться с ftp клиентами как советуют в интернетах. Просто и доступно
Аааа Серёга!!! Рад тебя слышать
Спасибо))
Еще одно короткое видео которое стоит вам посмотреть и там как раз показывается в том числе как через числдрен сделать так что бы не было лишних перерендеров не нужных компонентов: ua-cam.com/video/JzBEbo4enQY/v-deo.html
Еще одно видео про это: ua-cam.com/video/zEQiNFAwDGo/v-deo.html
Большое спасибо!!! Для меня оказалась очень полезная информация....
Спасибо. Полезно.
Проверил в реестре. Сейчас сразу прописывается "%V"