htmllab
htmllab
  • 313
  • 1 529 445
Веб-компоненты | Web Components
Веб-компоненты - это набор различных технологий (HTML+JS+CSS), позволяющих создавать пользовательские HTML-элементы с собственной функциональностью
👉 [00:16] что такое веб-компоненты
👉 [00:57] как создать свой компонент
👉 [01:51] JavaScript для компонента
👉 [03:13] как посмотреть теневое дерево
👉 [04:23] слоты
👉 [05:01] стили для компонента
👉 [05:46] повтор основных моментов
👉 [06:13] пример полученного веб-компонента
Пример из видео: codepen.io/htmllabru/pen/GRzEoBq
🚀Сайт о веб-компонентах: www.webcomponents.org/
MDN Веб-компоненты: developer.mozilla.org/ru/docs/Web/API/Web_components
🚀Доступное введение в веб-компоненты: learn.javascript.ru/web-components
🚀Фрагмент HTML-спецификации о пользовательских элементах
html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
🚀Фрагмент DOM-спецификации о теневом дереве DOM
dom.spec.whatwg.org/#shadow-trees
zhlédnutí: 2 022

Video

Fetch API
zhlédnutí 1,4KPřed rokem
Fetch API - интерфейс для отправки запросов из JavaScript на сервер 👉 [01:15] fetch на стороне JavaScript 👉 [02:45] где может пригодится fetch? 👉 [06:00] пример REST-сервиса 👉 [07:09] пример запроса к REST-сервису 👉 [11:30] синтаксис fetch-вызова 👉 [18:36] введение в обещания/promise 👉 [23:25] состояния обещания/promise 👉 [24:56] объект response 👉 [30:09] POST-запрос из HTML-формы 👉 [33:44] POS...
Node js + ChatGPT
zhlédnutí 1,1KPřed rokem
Смотрим как (1) создать приложение на Node.js, (2) завести API ключи на сайте OpenAI, (3) работаем с сервером Node.js и пакетом openai и (4) как устроен JavaScript на HTML-странице (спойлер - используется Fetch API) 👉 [00:55] 1. Создание приложения Express Node.js 👉 [03:15] 2. CSS-оформление 👉 [06:28] 3. Работа с Node.js сервером (приложением) 👉 [10:38] 4. HTML-документ с формой запроса и JavaS...
Как отправить данные HTML-формы в Google Sheets
zhlédnutí 4,5KPřed rokem
Смотрим как (1) устроена HTML-форма, (2) CSS-стили для неё, (3) как устроена функция doPost() в Google Таблице и (4) как устроен JavaScript на HTML-странице (спойлер - используется Fetch API) 👉 [01:08] 1. Как устроена форма на HTML 👉 [03:53] 2. CSS-оформление 👉 [04:53] 3. JavaScript в Google Таблицах 👉 [12:09] 3. JavaScript в HTML-документе Код из примера: codepen.io/htmllabru/pen/ExeMWYw
Модальное окно на html и css - вёрстка
zhlédnutí 2,8KPřed 2 lety
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: czcams.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
Next js от установки до развёртывания за 70 минут - 2022 год
zhlédnutí 2,8KPřed 2 lety
В этом видео вы пройдёте путь от установки фреймворка Next.js до развертывания приложения на сервере Vercel. Примеры кода и фрагменты скриптов вы можете найти в туториале на оф. сайте nextjs.org/learn/basics/create-nextjs-app 00:00:24 Установка Next.js 00:01:30 Запуск npm run dev 00:02:42 Правка страницы index.js 00:03:55 Создание доп.страниц 00:06:12 Компонент навигации Link 00:09:20 Папка pub...
PHP Enum
zhlédnutí 2,1KPřed 2 lety
PHP Enum, или перечисления - позволяют настраивать перечисляемый тип. О том, как они создаются, какие бывают и могут - пойдёт речь в этом видео ➜ 00:30 пример создания перечисления ➜ 02:33 типизированные перечисления ➜ 04:55 перечисления и интерфейсы ➜ 07:01 статические методы перечисления ➜ 08:54 константы перечисления (Камень-ножницы-бумага) ➜ 09:58 трейты и перечисления ➜ 11:24 отличия переч...
Вёрстка карточки товара за 30 минут
zhlédnutí 3,6KPřed 2 lety
Верстаем карточку товара с Aliexpress - создаю HTML и сразу идёт оформление через CSS. CDN для font-awesome можно подключить отсюда cdnjs.com/libraries/font-awesome, а названия классов для значков вот тут fontawesome.com/v5.15/icons?d=gallery&p=2&q=heart ✅ 00:23 Карточкав каталоге aliexpress ✅ 00:41 Заготовка для вёрстки образец ✅ 01:00 Создание каркаса карточки .card ✅ 02:30 Изображение товара...
PHP консоль
zhlédnutí 2,1KPřed 2 lety
PHP консоль Доки: www.php.net/manual/ru/features.commandline.php Станьте спонсором канала, поддержите съемку новых роликов! Подробнее: czcams.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin 01:37 запуск PHP-файла в консоли -f 01:57 запуск PHP-кода в консоли -r 02:41 передача параметров в скрипт 03:35 чтение/вывод параметров 04:28 проверка синтаксиса -l (L малое) 05:08 генерация подсвеченного кода ...
vm2 js песочница
zhlédnutí 793Před 2 lety
vm2 js песочница (sandbox) vm2 на github: github.com/patriksimek/vm2 Код примера: pastebin.com/u8ss3tcG Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: czcams.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
Free IP Geolocation API примеры на PHP и JS
zhlédnutí 1,5KPřed 2 lety
freegeoip.app/ - сервис получения геоданных по IP-адресу Код примера: pastebin.com/2t9eyGw7 Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: czcams.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
DomCrawler (компонент Symfony) - пример поиска фрагментов HTML
zhlédnutí 1,8KPřed 2 lety
DomCrawler - компонент Symfony, упрощает навигацию по DOM для HTML и XML-документов . symfony.com/doc/current/components/dom_crawler.html Код примера из видео: pastebin.com/BW5t07rU Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: czcams.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
React Native #1 введение 2021
zhlédnutí 897Před 2 lety
React Native представляет собой библиотеку JavaScript для создания пользовательских интерфейсов. Вы можете использовать React Native в уже существующих проектах Android и iOS или создать приложение с нуля. Это значит, что React Native позволяет создавать действительно нативные приложения, она обеспечивает базовый набор компонентов, таких как View, Text и Image которые непосредственно сопоставля...
Youtube IFrame API и localStorage - сохранение момента просмотра
zhlédnutí 1,8KPřed 2 lety
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: czcams.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin Пример кода: codepen.io/htmllabru/pen/VwWZedP
Jest js #1 установка и первый тест [2021]
zhlédnutí 5KPřed 2 lety
Jest - это отличный фреймворк для тестирования JavaScript с акцентом на простоту. Написание кода может и должно сопровождаться написанием тестов. Они могут запускаться по запросу в нужный момент времени и избавлять нас от необходимости выполнять рутинные операции проверки правильности работы наших функций и методов.
бургер меню css (без javascript)
zhlédnutí 21KPřed 3 lety
бургер меню css (без javascript)
крестики нолики в консоли браузера
zhlédnutí 511Před 3 lety
крестики нолики в консоли браузера
заметка о js #5
zhlédnutí 566Před 3 lety
заметка о js #5
заметка о js #4
zhlédnutí 213Před 3 lety
заметка о js #4
заметки о react js #3
zhlédnutí 199Před 3 lety
заметки о react js #3
заметка о js #3
zhlédnutí 219Před 3 lety
заметка о js #3
GSAP 3.6 - Вспомогательные методы | Utility Methods - Эпизод 11
zhlédnutí 1,6KPřed 3 lety
GSAP 3.6 - Вспомогательные методы | Utility Methods - Эпизод 11
заметки о react js #2
zhlédnutí 210Před 3 lety
заметки о react js #2
GSAP 3.6 - MotionPathPlugin плагин - Эпизод 10
zhlédnutí 2,2KPřed 3 lety
GSAP 3.6 - MotionPathPlugin плагин - Эпизод 10
заметки о js #2
zhlédnutí 267Před 3 lety
заметки о js #2
GSAP 3.6 - TextPlugin плагин - Эпизод 9
zhlédnutí 1,6KPřed 3 lety
GSAP 3.6 - TextPlugin плагин - Эпизод 9
GSAP 3.6 - Draggable плагин - Эпизод 8
zhlédnutí 2,2KPřed 3 lety
GSAP 3.6 - Draggable плагин - Эпизод 8
заметки о js #1
zhlédnutí 475Před 3 lety
заметки о js #1
GSAP 3.6 - Timeline - Эпизод 7
zhlédnutí 2,6KPřed 3 lety
GSAP 3.6 - Timeline - Эпизод 7
GSAP 3.6 - Управление анимацией и события - Эпизод 6
zhlédnutí 2,6KPřed 3 lety
GSAP 3.6 - Управление анимацией и события - Эпизод 6

Komentáře

  • @user-te4zh2dz9r
    @user-te4zh2dz9r Před dnem

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

  • @pleskover7656
    @pleskover7656 Před 2 dny

    Погуглил бы хоть сначала, что такое DETERMINISTIC. Дальше не слушал. Уровень этого "профи" ясен.

  • @user-nf1oz1js1l
    @user-nf1oz1js1l Před 3 dny

    Как же оно лагает...))

  • @user-kt1nh2ud2s
    @user-kt1nh2ud2s Před 4 dny

    можно и инсталлер скачать и архив, но через инсталлер просто запустить проще? но нужно и то и то иметь?

  • @xMurieLLx
    @xMurieLLx Před 10 dny

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

  • @xMurieLLx
    @xMurieLLx Před 10 dny

    При добавлении в RegistrationController: public function __construct(UserPasswordEncoderInterface $passwordEncoder) {$this->passwordEncoder = $passwordEncoder;} Подчёркивается UserPasswordEncoderInterface с ошибками "Use unknown class", "Undefined type"

  • @user-lj3sr7jk2w
    @user-lj3sr7jk2w Před 12 dny

    удачи

  • @lime1842
    @lime1842 Před 19 dny

    2024 спасибо

  • @Pacangotoff
    @Pacangotoff Před 26 dny

    А есть ли видео по "очень тонкой настройке" сервера MySQL.

    • @HtmllabRu
      @HtmllabRu Před 25 dny

      Такого видео на канале нет

  • @NikkaBageossi
    @NikkaBageossi Před měsícem

    Очень хорошая тема

  • @mirrim_job
    @mirrim_job Před měsícem

    Мужик мегахорош. Я молодой разработчик, постоянно смотрю статьи, курсы, видео на ютубе по интересующим темам. Всегда раздражает когда лекторы говорят информацию как-будто в вакуоме: без эмоций, без акцентов на какие-либо вещи. Спасибо вам, что быстро и четко дали информацию, пожалуйста продолжайте!

    • @HtmllabRu
      @HtmllabRu Před měsícem

      Спасибо за поддержку!

  • @netvoegoumadelo
    @netvoegoumadelo Před měsícem

    Добрый вечер! Помогите! Я уже замучалась. Мне выдает такую ошибку 2:52 C\apache\httpd\Apache24\bin>httpd httpd: Syntax error on line 39 of C:/apache/httpd/Apache24/conf/httpd.conf: ServerRoot must be a valid directory A Stackoverflow тоже не помог.

    • @netvoegoumadelo
      @netvoegoumadelo Před měsícem

      Строка 39 ServerRoot "${SRVROOT}"

    • @HtmllabRu
      @HtmllabRu Před měsícem

      Здравствуйте! Что написано выше в директиве "Define SVRROOT"? Существует ли указанная в директиве папка?

    • @netvoegoumadelo
      @netvoegoumadelo Před měsícem

      @@HtmllabRu Да, путь прописан верно((

    • @netvoegoumadelo
      @netvoegoumadelo Před měsícem

      Даа, блин, ты был прав! Спасибо!

  • @xzhldz
    @xzhldz Před měsícem

    Спасибо тебе добрый человек!🤝

  • @Maximisan
    @Maximisan Před měsícem

    Бесплатный сыр бывает только бесплатно

  • @user-ue5gf5jl2x
    @user-ue5gf5jl2x Před 2 měsíci

    А если в форме есть select? Что в скриптах?

    • @HtmllabRu
      @HtmllabRu Před měsícem

      Дописал codepen для статического select. Для динамического (на основе ячеек из таблицы), нужно делать лишний запрос и формировать элементы option налету

  • @bubenchik75
    @bubenchik75 Před 2 měsíci

    Жалею, что не посмотрел этот урок раньше 😄 Алексей, спасибо вам большое за то, что вы делаете!

    • @HtmllabRu
      @HtmllabRu Před 2 měsíci

      Приятно читать о том, что видео пригодилось) Удачи!

  • @matthewzhiginas2408
    @matthewzhiginas2408 Před 2 měsíci

    можно ли запускать tomper monkey на всех сайтах при загрузке или перезагрузке?

  • @viktorkulakov1084
    @viktorkulakov1084 Před 2 měsíci

    в httpd.conf нужно прописать PHPIniDir "F:/php-7.4.33" чтоб не редактировать в папке с виндой

  • @user-rs5ie7dh9w
    @user-rs5ie7dh9w Před 2 měsíci

    Благодарствую

  • @offmeta9711
    @offmeta9711 Před 2 měsíci

    Гайд имба!

  • @djflorfila1985
    @djflorfila1985 Před 2 měsíci

    Подскажите, пожалуйста, почему Fulltext index в таблице удаляется при копировании базы данных через phpmyadmin? =(

    • @HtmllabRu
      @HtmllabRu Před 2 měsíci

      Полнотекстовый индекс перестаёт учитываться на старых записях или на новых? Если речь о структуре таблицы, то при копировании SQL-кода таблиц базы надо проверить входить ли индекс в код

  • @Nini-sv1bd
    @Nini-sv1bd Před 2 měsíci

    Спустя 5 минут мы получили работающий сервер. Чет я ржу :) Поднимаем поражённого на ноги

  • @user-uc9wm5tg9d
    @user-uc9wm5tg9d Před 3 měsíci

    спасибо большое! выручаете уже не первый раз :)

    • @HtmllabRu
      @HtmllabRu Před 3 měsíci

      Рад, что видео пригодилось!

  • @mihail8159
    @mihail8159 Před 3 měsíci

    ❤❤❤

  • @user-lh6xe3zi1t
    @user-lh6xe3zi1t Před 3 měsíci

    А как можно установить mysql не на диск C, а например на диск D?

    • @HtmllabRu
      @HtmllabRu Před 3 měsíci

      Попробуйте изменить диск в поле ввода "Install Directory", на видео вот тут появляется czcams.com/video/NJdZYX0zdVM/video.html

    • @user-lh6xe3zi1t
      @user-lh6xe3zi1t Před 3 měsíci

      @@HtmllabRu да, че-то не заметил вначале 😀Спасибо за ответ!

  • @fewra600
    @fewra600 Před 3 měsíci

    Николай Наумов, ты ли это?

  • @xoxot_shamana
    @xoxot_shamana Před 3 měsíci

    Ну ок. Настроили автолоад. Нафига тут composer?

  • @user-ug2dm3cj5q
    @user-ug2dm3cj5q Před 3 měsíci

    Здравствуйте, скажите, пожалуйста, а как реализовать выпадение списка не через px, а через %? Т. е. у меня есть несколько подобных меню (каждое своего размера), и по нажатия кнопки над меню оно должно сворачиваться или разворачиваться. А для каждого меню указывать в px отдельно, скажем так, невозможно. Нужно, чтобы была одна js-функция, которая сворачивает их. Как сделать так, чтобы height: 100% был, а не 200px? Заранее спасибо.

    • @user-ug2dm3cj5q
      @user-ug2dm3cj5q Před 3 měsíci

      Я уже нашёл способ. Просто задаю высоту = Element.scrollHeight

  • @A1_TR_812
    @A1_TR_812 Před 3 měsíci

    вроде ок но эти вот прерывания звука жесть(

  • @k4kaa
    @k4kaa Před 3 měsíci

    коммент для продвижения

  • @k4kaa
    @k4kaa Před 3 měsíci

    интересное видео и хорошая подача, спасибо за информацию

  • @PlaceTickets
    @PlaceTickets Před 3 měsíci

    А в параметрах НЕстатического метода getCode($this) можно использовать другие параметры? лакаю, спасибо.

  • @arnlav4688
    @arnlav4688 Před 3 měsíci

    thx

  • @pir0zh0kDevTV
    @pir0zh0kDevTV Před 4 měsíci

    Можно пожалуйста код еще быстрее? Очень медленно

  • @phpstudy8625
    @phpstudy8625 Před 4 měsíci

    Классный ролик !!! А можете рассмотреть тему : как прикрутить PhpMAiler в MVC проект нигде нет обьяснения этой темы

  • @user-sr3ue3eu1z
    @user-sr3ue3eu1z Před 4 měsíci

    Добрый день, может глупый вопрос, но как запустить командную строку?

    • @HtmllabRu
      @HtmllabRu Před 4 měsíci

      Добрый день. Нажимаете Пуск и далее печатаете "cmd" , потом Enter. Как вариант, нажать Ctrl +R, потом написать "cmd" и нажать Enter.

  • @user-mf5re1rp6f
    @user-mf5re1rp6f Před 4 měsíci

    Добрый день, нужна помощь, как с Вами связаться? Спасибо.

    • @HtmllabRu
      @HtmllabRu Před 4 měsíci

      Добрый день, напишите 3992d5c123c8@mail.ru

  • @user-gk4ex9qb8l
    @user-gk4ex9qb8l Před 4 měsíci

    командная строка на весь экран... просто ужас

  • @yakut54
    @yakut54 Před 4 měsíci

    Алексей, привет! Спасибо за науку.

    • @HtmllabRu
      @HtmllabRu Před 4 měsíci

      Дмитрий, приветствую! Спасибо что на связи 👍

    • @yakut54
      @yakut54 Před 4 měsíci

      @@HtmllabRu 🤝

  • @The_music_loud
    @The_music_loud Před 5 měsíci

    Здравствуйте Алексей, можно как-нибудь связаться по поводу юзерскрипта?

    • @HtmllabRu
      @HtmllabRu Před 5 měsíci

      Приветствую! Напишите мне 3992d5c123c8@mail.ru. п.с. к тг-каналу t.me/htmllab добавил чат t.me/chat2htmllab, можно туда

  • @emikam
    @emikam Před 5 měsíci

    Спасибо, намучался с этими CORS. Внутри гугла данные отправляются и принимаются, а вот с внешнего ресурса api настройку хотел, а там ещё больше танцев с получением ключей. Ответы от сервера не нужны, CORS выключил и заработало.

  • @alexlebed8000
    @alexlebed8000 Před 5 měsíci

    //Чтобы pdf был похож на оригинальную страницу необходимо перед page.pdf() вызвать page.emulateMediaType(‘screen’), т.е. использовать экранный вид (screen media): await page.emulateMediaType('screen'); // используем screen media await page.pdf({ path: '1.pdf' });//только в puppeteer.launch({ headless: true })

  • @user-ue8kv7rk6h
    @user-ue8kv7rk6h Před 5 měsíci

    А с какой версии пхп работает вебсокет?

    • @HtmllabRu
      @HtmllabRu Před 5 měsíci

      Не подскажу, забросил тему связки PHP и вебсокетов 🤷‍♂️

  • @user-xu1rr9do8z
    @user-xu1rr9do8z Před 5 měsíci

    Много смотрел разных уроков по js НО этот лучший для понимания т.к. просто о сложном на простом доступном каждому языке объясняется. Далеко не каждому дано подать правильно на понятном для начинающих языке информацию. Спасибо добрый человек. очень интересно и с лёгкостью воспринимается информация.

    • @HtmllabRu
      @HtmllabRu Před 5 měsíci

      Спасибо за комментарий!

  • @tema2976
    @tema2976 Před 5 měsíci

    Годно, намного интереснее, чем читать какую-нибудь книгу

  • @demona7814
    @demona7814 Před 5 měsíci

    спасибо большое!

  • @baron2272
    @baron2272 Před 5 měsíci

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