htmllab
htmllab
  • Видео 313
  • Просмотров 1 515 063
Веб-компоненты | 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-спецификации о пользователь...
Просмотров: 1 786

Видео

Fetch API
Просмотров 1,3 тыс.Год назад
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
Просмотров 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
Просмотров 4,2 тыс.Год назад
Смотрим как (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 - вёрстка
Просмотров 2,8 тыс.2 года назад
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ruclips.net/channel/UCBLJEWATAm4O1Tp0k76cGFgjoin
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 Enum
Просмотров 2 тыс.2 года назад
PHP Enum, или перечисления - позволяют настраивать перечисляемый тип. О том, как они создаются, какие бывают и могут - пойдёт речь в этом видео ➜ 00:30 пример создания перечисления ➜ 02:33 типизированные перечисления ➜ 04:55 перечисления и интерфейсы ➜ 07:01 статические методы перечисления ➜ 08:54 константы перечисления (Камень-ножницы-бумага) ➜ 09:58 трейты и перечисления ➜ 11:24 отличия переч...
Вёрстка карточки товара за 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 консоль
Просмотров 2,1 тыс.2 года назад
PHP консоль Доки: www.php.net/manual/ru/features.commandline.php Станьте спонсором канала, поддержите съемку новых роликов! Подробнее: ruclips.net/channel/UCBLJEWATAm4O1Tp0k76cGFgjoin 01:37 запуск PHP-файла в консоли -f 01:57 запуск PHP-кода в консоли -r 02:41 передача параметров в скрипт 03:35 чтение/вывод параметров 04:28 проверка синтаксиса -l (L малое) 05:08 генерация подсвеченного кода -s ...
vm2 js песочница
Просмотров 7802 года назад
vm2 js песочница (sandbox) vm2 на github: github.com/patriksimek/vm2 Код примера: pastebin.com/u8ss3tcG Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ruclips.net/channel/UCBLJEWATAm4O1Tp0k76cGFgjoin
Free IP Geolocation API примеры на PHP и JS
Просмотров 1,5 тыс.2 года назад
freegeoip.app/ - сервис получения геоданных по IP-адресу Код примера: pastebin.com/2t9eyGw7 Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ruclips.net/channel/UCBLJEWATAm4O1Tp0k76cGFgjoin
DomCrawler (компонент Symfony) - пример поиска фрагментов HTML
Просмотров 1,8 тыс.2 года назад
DomCrawler - компонент Symfony, упрощает навигацию по DOM для HTML и XML-документов . symfony.com/doc/current/components/dom_crawler.html Код примера из видео: pastebin.com/BW5t07rU Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ruclips.net/channel/UCBLJEWATAm4O1Tp0k76cGFgjoin
React Native #1 введение 2021
Просмотров 8922 года назад
React Native представляет собой библиотеку JavaScript для создания пользовательских интерфейсов. Вы можете использовать React Native в уже существующих проектах Android и iOS или создать приложение с нуля. Это значит, что React Native позволяет создавать действительно нативные приложения, она обеспечивает базовый набор компонентов, таких как View, Text и Image которые непосредственно сопоставля...
Youtube IFrame API и localStorage - сохранение момента просмотра
Просмотров 1,8 тыс.2 года назад
Станьте спонсором канала, и вы получите доступ к эксклюзивным бонусам. Подробнее: ruclips.net/channel/UCBLJEWATAm4O1Tp0k76cGFgjoin Пример кода: codepen.io/htmllabru/pen/VwWZedP
Jest js #1 установка и первый тест [2021]
Просмотров 5 тыс.2 года назад
Jest - это отличный фреймворк для тестирования JavaScript с акцентом на простоту. Написание кода может и должно сопровождаться написанием тестов. Они могут запускаться по запросу в нужный момент времени и избавлять нас от необходимости выполнять рутинные операции проверки правильности работы наших функций и методов.
бургер меню css (без javascript)
Просмотров 21 тыс.2 года назад
бургер меню css (без javascript)
крестики нолики в консоли браузера
Просмотров 5072 года назад
крестики нолики в консоли браузера
заметка о js #5
Просмотров 5602 года назад
заметка о js #5
заметка о js #4
Просмотров 2132 года назад
заметка о js #4
заметки о react js #3
Просмотров 1982 года назад
заметки о react js #3
заметка о js #3
Просмотров 2162 года назад
заметка о js #3
GSAP 3.6 - Вспомогательные методы | Utility Methods - Эпизод 11
Просмотров 1,6 тыс.2 года назад
GSAP 3.6 - Вспомогательные методы | Utility Methods - Эпизод 11
заметки о react js #2
Просмотров 2102 года назад
заметки о react js #2
GSAP 3.6 - MotionPathPlugin плагин - Эпизод 10
Просмотров 2,2 тыс.2 года назад
GSAP 3.6 - MotionPathPlugin плагин - Эпизод 10
заметки о js #2
Просмотров 2672 года назад
заметки о js #2
GSAP 3.6 - TextPlugin плагин - Эпизод 9
Просмотров 1,6 тыс.2 года назад
GSAP 3.6 - TextPlugin плагин - Эпизод 9
GSAP 3.6 - Draggable плагин - Эпизод 8
Просмотров 2,2 тыс.3 года назад
GSAP 3.6 - Draggable плагин - Эпизод 8
заметки о js #1
Просмотров 4683 года назад
заметки о js #1
GSAP 3.6 - Timeline - Эпизод 7
Просмотров 2,5 тыс.3 года назад
GSAP 3.6 - Timeline - Эпизод 7
GSAP 3.6 - Управление анимацией и события - Эпизод 6
Просмотров 2,6 тыс.3 года назад
GSAP 3.6 - Управление анимацией и события - Эпизод 6

Комментарии

  • @xzhldz
    @xzhldz 7 дней назад

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

  • @Maximisan
    @Maximisan 9 дней назад

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

  • @user-ue5gf5jl2x
    @user-ue5gf5jl2x 15 дней назад

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

    • @HtmllabRu
      @HtmllabRu 9 дней назад

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

  • @bubenchik75
    @bubenchik75 17 дней назад

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

    • @HtmllabRu
      @HtmllabRu 17 дней назад

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

  • @matthewzhiginas2408
    @matthewzhiginas2408 19 дней назад

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

  • @viktorkulakov1084
    @viktorkulakov1084 20 дней назад

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

  • @user-rs5ie7dh9w
    @user-rs5ie7dh9w 26 дней назад

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

  • @offmeta9711
    @offmeta9711 27 дней назад

    Гайд имба!

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

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

    • @HtmllabRu
      @HtmllabRu 29 дней назад

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

  • @Nini-sv1bd
    @Nini-sv1bd Месяц назад

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

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

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

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

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

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

    ❤❤❤

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • @k4kaa
    @k4kaa 2 месяца назад

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

  • @k4kaa
    @k4kaa 2 месяца назад

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

    • @HtmllabRu
      @HtmllabRu 2 месяца назад

      спасибо)

  • @SergioKornelius
    @SergioKornelius 2 месяца назад

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

  • @arnlav4688
    @arnlav4688 2 месяца назад

    thx

  • @pir0zh0kDevTV
    @pir0zh0kDevTV 2 месяца назад

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

  • @phpstudy8625
    @phpstudy8625 2 месяца назад

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

  • @user-sr3ue3eu1z
    @user-sr3ue3eu1z 2 месяца назад

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

    • @HtmllabRu
      @HtmllabRu 2 месяца назад

      Добрый день. Нажимаете Пуск и далее печатаете "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 3 месяца назад

    //Чтобы 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 3 месяца назад

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

    • @HtmllabRu
      @HtmllabRu 3 месяца назад

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

  • @user-xu1rr9do8z
    @user-xu1rr9do8z 3 месяца назад

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

    • @HtmllabRu
      @HtmllabRu 3 месяца назад

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

  • @tema2976
    @tema2976 3 месяца назад

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

    • @HtmllabRu
      @HtmllabRu 3 месяца назад

      Спасибо!

  • @demona7814
    @demona7814 3 месяца назад

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

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

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

  • @Emelianovich-wb4td
    @Emelianovich-wb4td 4 месяца назад

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

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

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

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

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

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

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

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

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

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

    Спасибо!

  • @user-xl8nl8he5q
    @user-xl8nl8he5q 4 месяца назад

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

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

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

  • @user-sg7dn9wz2r
    @user-sg7dn9wz2r 4 месяца назад

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

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

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

    • @user-sg7dn9wz2r
      @user-sg7dn9wz2r 4 месяца назад

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

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

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

  • @Raul-jq7pq
    @Raul-jq7pq 4 месяца назад

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

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

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

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

    Давай еще

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

    круто Animation GSAP

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

    Автор полуживой