![htmllab](/img/default-banner.jpg)
- Видео 313
- Просмотров 1 515 063
htmllab
Россия
Добавлен 1 дек 2015
Рассказываю о использовании HTML, JavaScript, PHP и MySQL 🚀.
Веб-компоненты | 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-спецификации о пользователь...
👉 [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 с акцентом на простоту. Написание кода может и должно сопровождаться написанием тестов. Они могут запускаться по запросу в нужный момент времени и избавлять нас от необходимости выполнять рутинные операции проверки правильности работы наших функций и методов.
GSAP 3.6 - Вспомогательные методы | Utility Methods - Эпизод 11
Просмотров 1,6 тыс.2 года назад
GSAP 3.6 - Вспомогательные методы | Utility Methods - Эпизод 11
GSAP 3.6 - MotionPathPlugin плагин - Эпизод 10
Просмотров 2,2 тыс.2 года назад
GSAP 3.6 - MotionPathPlugin плагин - Эпизод 10
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
GSAP 3.6 - Управление анимацией и события - Эпизод 6
Просмотров 2,6 тыс.3 года назад
GSAP 3.6 - Управление анимацией и события - Эпизод 6
Спасибо тебе добрый человек!🤝
Бесплатный сыр бывает только бесплатно
А если в форме есть select? Что в скриптах?
Дописал codepen для статического select. Для динамического (на основе ячеек из таблицы), нужно делать лишний запрос и формировать элементы option налету
Жалею, что не посмотрел этот урок раньше 😄 Алексей, спасибо вам большое за то, что вы делаете!
Приятно читать о том, что видео пригодилось) Удачи!
можно ли запускать tomper monkey на всех сайтах при загрузке или перезагрузке?
в httpd.conf нужно прописать PHPIniDir "F:/php-7.4.33" чтоб не редактировать в папке с виндой
Благодарствую
Гайд имба!
Подскажите, пожалуйста, почему Fulltext index в таблице удаляется при копировании базы данных через phpmyadmin? =(
Полнотекстовый индекс перестаёт учитываться на старых записях или на новых? Если речь о структуре таблицы, то при копировании SQL-кода таблиц базы надо проверить входить ли индекс в код
Спустя 5 минут мы получили работающий сервер. Чет я ржу :) Поднимаем поражённого на ноги
спасибо большое! выручаете уже не первый раз :)
Рад, что видео пригодилось!
❤❤❤
А как можно установить mysql не на диск C, а например на диск D?
Попробуйте изменить диск в поле ввода "Install Directory", на видео вот тут появляется ruclips.net/video/NJdZYX0zdVM/видео.html
@@HtmllabRu да, че-то не заметил вначале 😀Спасибо за ответ!
Николай Наумов, ты ли это?
Ну ок. Настроили автолоад. Нафига тут composer?
Здравствуйте, скажите, пожалуйста, а как реализовать выпадение списка не через px, а через %? Т. е. у меня есть несколько подобных меню (каждое своего размера), и по нажатия кнопки над меню оно должно сворачиваться или разворачиваться. А для каждого меню указывать в px отдельно, скажем так, невозможно. Нужно, чтобы была одна js-функция, которая сворачивает их. Как сделать так, чтобы height: 100% был, а не 200px? Заранее спасибо.
Я уже нашёл способ. Просто задаю высоту = Element.scrollHeight
вроде ок но эти вот прерывания звука жесть(
коммент для продвижения
интересное видео и хорошая подача, спасибо за информацию
спасибо)
А в параметрах НЕстатического метода getCode($this) можно использовать другие параметры? лакаю, спасибо.
thx
Можно пожалуйста код еще быстрее? Очень медленно
Классный ролик !!! А можете рассмотреть тему : как прикрутить PhpMAiler в MVC проект нигде нет обьяснения этой темы
Добрый день, может глупый вопрос, но как запустить командную строку?
Добрый день. Нажимаете Пуск и далее печатаете "cmd" , потом Enter. Как вариант, нажать Ctrl +R, потом написать "cmd" и нажать Enter.
Добрый день, нужна помощь, как с Вами связаться? Спасибо.
Добрый день, напишите 3992d5c123c8@mail.ru
командная строка на весь экран... просто ужас
Алексей, привет! Спасибо за науку.
Дмитрий, приветствую! Спасибо что на связи 👍
@@HtmllabRu 🤝
Здравствуйте Алексей, можно как-нибудь связаться по поводу юзерскрипта?
Приветствую! Напишите мне 3992d5c123c8@mail.ru. п.с. к тг-каналу t.me/htmllab добавил чат t.me/chat2htmllab, можно туда
Спасибо, намучался с этими CORS. Внутри гугла данные отправляются и принимаются, а вот с внешнего ресурса api настройку хотел, а там ещё больше танцев с получением ключей. Ответы от сервера не нужны, CORS выключил и заработало.
mode: 'cors'
//Чтобы pdf был похож на оригинальную страницу необходимо перед page.pdf() вызвать page.emulateMediaType(‘screen’), т.е. использовать экранный вид (screen media): await page.emulateMediaType('screen'); // используем screen media await page.pdf({ path: '1.pdf' });//только в puppeteer.launch({ headless: true })
А с какой версии пхп работает вебсокет?
Не подскажу, забросил тему связки PHP и вебсокетов 🤷♂️
Много смотрел разных уроков по js НО этот лучший для понимания т.к. просто о сложном на простом доступном каждому языке объясняется. Далеко не каждому дано подать правильно на понятном для начинающих языке информацию. Спасибо добрый человек. очень интересно и с лёгкостью воспринимается информация.
Спасибо за комментарий!
Годно, намного интереснее, чем читать какую-нибудь книгу
Спасибо!
спасибо большое!
Уважаемый автор ролика, включайте перевод на русский и показывайте прямо в тексте - это же можно сделать в Гугле. Удобнее и вам и зрителям.
спасибо!!! ты самый лучший
А сегодня это актуально февраль 2024?
Думаю там возникли нюансы, потому нет.
КАК ИХ УДАЛИТЬ БЛ...ТЬ А НЕ КАК ИХ УСТАНОВИТЬ СКА!!! ЭТО ЧТО ТАКОЕ , Я ЩАС ЬУДУ БИТСЯ ГОЛОВОЙ ОБ СТОЛ БЛ...ТЬ😂😂😂😂
Очень здорово подается материал, всё понятно. Спасибо 🙏🏻
Спасибо!
Добрый день! Скачал файл, но как найти необходимый mysql installer ?
Добрый) Скачали файл установщика отсюд - dev.mysql.com/downloads/installer/ ? Я для себя выбираю меньшего размера, а потом в настройках указываю что установить
Спасибо, понравилось, а как все же добавить сбоку цифры и буквы? есть видео?
По-хорошему, надо было предусмотреть пространство по краям. Чтобы не переделывать код, добавил просто циклами codepen.io/htmllabru/pen/ExMvVjQ
@@HtmllabRu Спасибо большое, хочу попробовать nonogram сделать, и застряла на боковых полях :)
@@user-sg7dn9wz2r ого, отличная идея применения canvas!
Где это может пригодится?)
Например, анимировать количество выполненных проектов, как тут demo.templatemonster.com/demo/297700.html
Давай еще
круто Animation GSAP
Автор полуживой