htmllab
htmllab
  • 313
  • 1 520 566
Веб-компоненты | 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
Переглядів: 1 865

Відео

Fetch APIFetch API
Fetch API
Переглядів 1,4 тис.Рік тому
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 + ChatGPTNode js + ChatGPT
Node js + ChatGPT
Переглядів 1,1 тис.Рік тому
Смотрим как (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Как отправить данные HTML-формы в Google Sheets
Как отправить данные HTML-формы в Google Sheets
Переглядів 4,3 тис.Рік тому
Смотрим как (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 - вёрсткаМодальное окно на html и css - вёрстка
Модальное окно на html и css - вёрстка
Переглядів 2,8 тис.2 роки тому
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ua-cam.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
Next js от установки до развёртывания за 70 минут - 2022 годNext js от установки до развёртывания за 70 минут - 2022 год
Next js от установки до развёртывания за 70 минут - 2022 год
Переглядів 2,8 тис.2 роки тому
В этом видео вы пройдёте путь от установки фреймворка 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 EnumPHP Enum
PHP Enum
Переглядів 2 тис.2 роки тому
PHP Enum, или перечисления - позволяют настраивать перечисляемый тип. О том, как они создаются, какие бывают и могут - пойдёт речь в этом видео ➜ 00:30 пример создания перечисления ➜ 02:33 типизированные перечисления ➜ 04:55 перечисления и интерфейсы ➜ 07:01 статические методы перечисления ➜ 08:54 константы перечисления (Камень-ножницы-бумага) ➜ 09:58 трейты и перечисления ➜ 11:24 отличия переч...
Вёрстка карточки товара за 30 минутВёрстка карточки товара за 30 минут
Вёрстка карточки товара за 30 минут
Переглядів 3,5 тис.2 роки тому
Верстаем карточку товара с 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 консольPHP консоль
PHP консоль
Переглядів 2,1 тис.2 роки тому
PHP консоль Доки: www.php.net/manual/ru/features.commandline.php Станьте спонсором канала, поддержите съемку новых роликов! Подробнее: ua-cam.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin 01:37 запуск PHP-файла в консоли -f 01:57 запуск PHP-кода в консоли -r 02:41 передача параметров в скрипт 03:35 чтение/вывод параметров 04:28 проверка синтаксиса -l (L малое) 05:08 генерация подсвеченного кода ...
vm2 js песочницаvm2 js песочница
vm2 js песочница
Переглядів 7852 роки тому
vm2 js песочница (sandbox) vm2 на github: github.com/patriksimek/vm2 Код примера: pastebin.com/u8ss3tcG Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ua-cam.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
Free IP Geolocation API примеры на PHP и JSFree IP Geolocation API примеры на PHP и JS
Free IP Geolocation API примеры на PHP и JS
Переглядів 1,5 тис.2 роки тому
freegeoip.app/ - сервис получения геоданных по IP-адресу Код примера: pastebin.com/2t9eyGw7 Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ua-cam.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
DomCrawler (компонент Symfony) - пример поиска фрагментов HTMLDomCrawler (компонент Symfony) - пример поиска фрагментов HTML
DomCrawler (компонент Symfony) - пример поиска фрагментов HTML
Переглядів 1,8 тис.2 роки тому
DomCrawler - компонент Symfony, упрощает навигацию по DOM для HTML и XML-документов . symfony.com/doc/current/components/dom_crawler.html Код примера из видео: pastebin.com/BW5t07rU Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ua-cam.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin
React Native #1 введение 2021React Native #1 введение 2021
React Native #1 введение 2021
Переглядів 8932 роки тому
React Native представляет собой библиотеку JavaScript для создания пользовательских интерфейсов. Вы можете использовать React Native в уже существующих проектах Android и iOS или создать приложение с нуля. Это значит, что React Native позволяет создавать действительно нативные приложения, она обеспечивает базовый набор компонентов, таких как View, Text и Image которые непосредственно сопоставля...
Youtube IFrame API и localStorage - сохранение момента просмотраYoutube IFrame API и localStorage - сохранение момента просмотра
Youtube IFrame API и localStorage - сохранение момента просмотра
Переглядів 1,8 тис.2 роки тому
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ua-cam.com/channels/BLJEWATAm4O1Tp0k76cGFg.htmljoin Пример кода: codepen.io/htmllabru/pen/VwWZedP
Jest js #1 установка и первый тест [2021]Jest js #1 установка и первый тест [2021]
Jest js #1 установка и первый тест [2021]
Переглядів 5 тис.2 роки тому
Jest - это отличный фреймворк для тестирования JavaScript с акцентом на простоту. Написание кода может и должно сопровождаться написанием тестов. Они могут запускаться по запросу в нужный момент времени и избавлять нас от необходимости выполнять рутинные операции проверки правильности работы наших функций и методов.

КОМЕНТАРІ

  • @NikkaBageossi
    @NikkaBageossi 3 дні тому

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

  • @mirrim_job
    @mirrim_job 10 днів тому

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

    • @HtmllabRu
      @HtmllabRu 5 днів тому

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

  • @netvoegoumadelo
    @netvoegoumadelo 14 днів тому

    Добрый вечер! Помогите! Я уже замучалась. Мне выдает такую ошибку 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 14 днів тому

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

    • @HtmllabRu
      @HtmllabRu 11 днів тому

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

    • @netvoegoumadelo
      @netvoegoumadelo 10 днів тому

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

    • @netvoegoumadelo
      @netvoegoumadelo 2 дні тому

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

  • @xzhldz
    @xzhldz 22 дні тому

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

  • @Maximisan
    @Maximisan 24 дні тому

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

  • @user-ue5gf5jl2x
    @user-ue5gf5jl2x Місяць тому

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

    • @HtmllabRu
      @HtmllabRu 24 дні тому

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

  • @bubenchik75
    @bubenchik75 Місяць тому

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

    • @HtmllabRu
      @HtmllabRu Місяць тому

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

  • @matthewzhiginas2408
    @matthewzhiginas2408 Місяць тому

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

  • @viktorkulakov1084
    @viktorkulakov1084 Місяць тому

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

  • @user-rs5ie7dh9w
    @user-rs5ie7dh9w Місяць тому

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

  • @offmeta9711
    @offmeta9711 Місяць тому

    Гайд имба!

  • @djflorfila1985
    @djflorfila1985 Місяць тому

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

    • @HtmllabRu
      @HtmllabRu Місяць тому

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

  • @Nini-sv1bd
    @Nini-sv1bd Місяць тому

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

  • @user-uc9wm5tg9d
    @user-uc9wm5tg9d 2 місяці тому

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

    • @HtmllabRu
      @HtmllabRu Місяць тому

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

  • @mihail8159
    @mihail8159 2 місяці тому

    ❤❤❤

  • @user-lh6xe3zi1t
    @user-lh6xe3zi1t 2 місяці тому

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

    • @HtmllabRu
      @HtmllabRu 2 місяці тому

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

    • @user-lh6xe3zi1t
      @user-lh6xe3zi1t 2 місяці тому

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

  • @fewra600
    @fewra600 2 місяці тому

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

  • @xoxot_shamana
    @xoxot_shamana 2 місяці тому

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

  • @user-ug2dm3cj5q
    @user-ug2dm3cj5q 2 місяці тому

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

    • @user-ug2dm3cj5q
      @user-ug2dm3cj5q 2 місяці тому

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

  • @AleksandrGolrichtGlrcht
    @AleksandrGolrichtGlrcht 2 місяці тому

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

  • @k4kaa
    @k4kaa 2 місяці тому

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

  • @k4kaa
    @k4kaa 2 місяці тому

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

    • @HtmllabRu
      @HtmllabRu 2 місяці тому

      спасибо)

  • @SergioKornelius
    @SergioKornelius 2 місяці тому

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

  • @arnlav4688
    @arnlav4688 2 місяці тому

    thx

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

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

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

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

  • @user-sr3ue3eu1z
    @user-sr3ue3eu1z 3 місяці тому

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

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

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

  • @user-mf5re1rp6f
    @user-mf5re1rp6f 3 місяці тому

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

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

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

  • @user-gk4ex9qb8l
    @user-gk4ex9qb8l 3 місяці тому

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

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

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

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

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

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

      @@HtmllabRu 🤝

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

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

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

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

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

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

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

    //Чтобы 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 4 місяці тому

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

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

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

  • @user-xu1rr9do8z
    @user-xu1rr9do8z 4 місяці тому

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

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

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

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

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

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

      Спасибо!

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

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

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

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

  • @Emelianovich-wb4td
    @Emelianovich-wb4td 4 місяці тому

    спасибо!!! ты самый лучший

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

    А сегодня это актуально февраль 2024?

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

      Думаю там возникли нюансы, потому нет.

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

    КАК ИХ УДАЛИТЬ БЛ...ТЬ А НЕ КАК ИХ УСТАНОВИТЬ СКА!!! ЭТО ЧТО ТАКОЕ , Я ЩАС ЬУДУ БИТСЯ ГОЛОВОЙ ОБ СТОЛ БЛ...ТЬ😂😂😂😂

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

    Очень здорово подается материал, всё понятно. Спасибо 🙏🏻

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

    Спасибо!

  • @user-xl8nl8he5q
    @user-xl8nl8he5q 5 місяців тому

    Добрый день! Скачал файл, но как найти необходимый mysql installer ?

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

      Добрый) Скачали файл установщика отсюд - dev.mysql.com/downloads/installer/ ? Я для себя выбираю меньшего размера, а потом в настройках указываю что установить

  • @user-sg7dn9wz2r
    @user-sg7dn9wz2r 5 місяців тому

    Спасибо, понравилось, а как все же добавить сбоку цифры и буквы? есть видео?

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

      По-хорошему, надо было предусмотреть пространство по краям. Чтобы не переделывать код, добавил просто циклами codepen.io/htmllabru/pen/ExMvVjQ

    • @user-sg7dn9wz2r
      @user-sg7dn9wz2r 5 місяців тому

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

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

      @@user-sg7dn9wz2r ого, отличная идея применения canvas!

  • @Raul-jq7pq
    @Raul-jq7pq 5 місяців тому

    Где это может пригодится?)

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

      Например, анимировать количество выполненных проектов, как тут demo.templatemonster.com/demo/297700.html