14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#видео дня
Ох какую я вам мякотку нашёл, котаны! Только представьте как было бы круто иметь руководство по такому сценарию:
1. Тебе не нравится что-то на каком-то сайте.
2. Открываешь девтулзы, вешаешь слушатель изменения атрибута или контента ноды.
3. Включаешь дебаггер, находишь точное место.
4. Меняешь код, тестируешь.
5. Заменяешь файл на локальный.
...
6. PROFIT!
И по этому поводу я решил принести вам видео как починить Тwitter. Ой, простите, X. Ну нельзя же на канале совсем без хайповых тем!
Получилось прекрасное руководство, целый скринкаст.
Не сцыте менять мир как вам нужно, котаны!
#js #devtools #debug
РАЗБОР ИГР, который поможет наконец-то на этом зарабатывать
Для этого совсем не обязательно иметь навыки в программировании, и об этом скоро расскажем на РАЗБОРЕ от Евгения Гришакова, владельца студии Garden of Dreams.
Но! Если хочешь халяву - не кликай
Что будет на разборе?
— Посмотришь игры других и поймешь, как на всем этом зарабатывать
— Полный разбор твоей игры от геймдев экспертов. Разберем упаковку игры, геймплей, механики и многое другое.
— Разберем, почему твоя игра не залетела и как это исправить.
— Выявим слабые в игре и дадим практические советы по улучшению.
Все бесплатно! Цель — помочь ребятам начать зарабатывать на своих играх.
При регистрации ты получишь подарок — исходник игры. Это отличная вещь для тех, у кого еще нет своей игры, но кто очень хочет попробовать себя в геймдеве.
Приходи на разбор и открой для себя кучу полезной информации. Инвестируй свое время правильно!
#грусть дня
Умер создатель редактора Vim — Брам Моленар (Bram Moolenaar) 😢
Вот собственно, сообщение его семьи: https://groups.google.com/g/vim_announce/c/tWahca9zkt4
Я использовал Vim много лет и, периодически, и сейчас. Хотелось бы этой грустной новостью напомнить, что это не только бесконечный источник мемов про выход, но и очень хороший редактор.
:wq!
Как вернуть норм состояние?
Катится снежный ком, а ты внутри него. Тошно за работой, тяжело после неё.
— как жить, если с каждым днем сложнее отскребать себя с кровати
— как делать не через силу, а потому что сам хочешь
— как перестать работать в режиме «лишь бы отстали»
Приходи на бесплатную диагностическую сессию от платформы счастливого образа жизни ЯНорм. За 30-60 минут:
✔️ оценишь и поймёшь свое психо-эмоциональное состояние
✔️ докопаешься до причин, которые травят твою жизнь
✔️ построишь карту выхода из 3-7 шагов к состоянию «Я Норм»
Запускай бота и ответь на 4 вопроса, чтобы понять, а поможет ли это тебе😉
Узнай, как выйти из выгорания и снова управлять своей жизнью — нажми на ссылку и запишись на бесплатную диагностику
#статья дня
Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?
Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:
transform: translateX(20px) rotate(40deg) scale(1.5);
translate: 20px;
rotate: 40deg;
scale: 1.5;
С чего начать релокейт в страну за пределами СНГ?
• Что нужно чтобы начать собеседоваться за границу?
• Где искать вакансии?
• Как выбрать страну для переезда?
• Как составить CV?
• Как проходить разные типы собеседований?
• Какие есть лайфхаки для прохождения технического интервью?
🧠 Авторский канал про IT-эмиграцию и релокацию рассказывает как пройти все этапы трудоустройства в заграничную компанию - от отклика на вакансию до торга по зарплате.
Автор проходил интервью в десятках IT-компаний Австралии 🇦🇺, Сингапура 🇸🇬 и Европы 🇪🇺, получил обширный опыт трудоустройства и релокейтов, занимался наймом программистов, а теперь делится своим опытом и знаниями с читателями.
⚡️ Есть вопросы? Добро пожаловать: @australia_reporting
#фишка дня
Использовать адрес электронной почты вместо логина — тема популярная и очень давняя.
Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.
С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.
Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/
Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute
Помогайте своим пользователями, браузерам и менеджерам паролей.
#html #autocomplete #form #бородач
#инструмент дня
Мы живем в мире, где каждый продукт дает лишь иллюзию выбора. Например, у вас есть выбор удалить все свои контакты из Telegram, или смотреть истории 🤡
Ладно, это я к чему. Если вы хоть раз делали свой продукт, всегда вставал вопрос онбординга пользователей. Простите мне мой французский, это уже устоявшийся сленг. Короче говоря, как дать пользователю ознакомиться с вашим продуктом, как показать все фишки. Неважно, что это — сайт, приложение или игра.
Какие-то продукты копируют интерфейсы уже существующих популярных решений, какие-то — используют вирусную схему распространения, обеспечивая армию тиктокеров работой. Ну а кто-то использует пошаговые визарды и руководства. И вот одно из таких решений — Driver.js.
Огромное количество вариантов отображения всплывающих подсказок-указателей, поддержка (точнее, универсальность применения) разных фреймворков и вообще удобный API.
Делайте понятные продукты, котаны!
#wizard #onboarding
#til дня
Вот есть у вас какая-то библиотека, которой можно передать некие обработчики событий. Особенно этим славятся карусели, кастомные селекты и прочие т. н. плагины.
Почему плагины? Потому что многие из них или до сих пор являются плагинами к jQuery, или буквально вырасли из них. Так уж повелось.
И вот эти самые обработчики событий получают доступ к this, к инстансу объекта (функции, класса). Например, Selectize.js, покажем какой-то блок над селектом:
function onDropdownClose(value: string) {
this?.$input.parent().find(‘.alert’).html(value);
}
$(‘select’).selectize({
hideSelected: true,
openOnFocus: true,
onDropdownClose,
})
this его нужно передать как первый аргумент в функцию. Не бойтесь, остальные implicit аргументы оно не затрёт. Итого:
function onDropdownClose(this: SelectizeInstance, value: string)
#статья дня
Если среди моих подписчиков есть те, кому за 30, то они могут вспомнить, что 8 и 16-битные игры на ЭЛТ-телевизорах выглядели совсем не так, как их нынче имитируют. Ни о каком пиксель-арте речи не шло, всё было достаточно смазано, чтобы казаться гладким и настоящим. А пиксель-арт, собственно, распространился с ЖК-экранами и модой на ретро.
А всё потому что из особенностей и недостатков технологии делали преимущество! Нативное сглаживание, бесплатно!
К чему это я?
К тому, что набор квадратиков на иллюстрации это самый настоящий шрифт, использующий особенности технологии построения ЖК-экранов. В 1 пиксель шириной. Он так и называется: Millitext. Вот: http://www.msarnoff.org/millitext/
Но статья дня всё равно о другом.
Как происходит процесс рендеринга шрифтов вообще, что за этим стоит и почему это так сложно. И да, особенности ЖК играют в этом не последнюю роль, потому и вступление такое: https://faultlore.com/blah/text-hates-you/
Text hates you, котаны!
#font #rendering
#такое дня
Наверняка у вас стоит дома Smart TV. От Samsung, LG и так далее.
Чем отличаются Smart TV от других платформ? Тотальными ограничениями на всё подряд! И ужасной документацией. И не всегда продуманным управлением...
Казалось бы, ну уж web-технологии нынче наверное как-то стабилизированы между современными устройствами? Тоже нет. Всё очень плохо.
И забавно наблюдать, как в Google выкрутились из этой ситуации.
Они написали браузер, который поддерживает только то, что необходимо YouTube TV! Вот, собственно: https://cobalt.foo/
В то время как у многих конкурентов просто HTML5/CSS/JS, Google поставляет целый браузер чтобы запустить всё то же самое! Большинство ОС для TV это всё равно так или иначе испорченный Linux, потому и тестирование становится более предсказуемым.
Чудные дела. Рынку разработки под умные телевизоры точно есть куда расти.
#tv #google
P. S. Я случайно удалил все комментарии к постам на канале. Поэтому они теперь привязаны к другому чату, а @htmlshitchat будет независимым.
#фишка дня
Голубые галочки захватывают мир! Теперь и в вашей почте, котаны.
Впрочем, на скриншоте из почты можно увидеть не только голубую галочку, но и аватарку. Обычно GMail и иные почтовые клиенты ставят там портрет контакта, но тут-то откуда оно взялось?
Это называется BIMI: Brand Indicators for Message Identification и каждая компания может получить такой. Достаточно простого советского...
1. Логотип компании должен быть зарегистрированной торговой маркой. Не у всех это так, кто бы мог подумать.
2. Необходимо получить сертификат VMC. Процесс аналогичен получению сертификата SSL.
3. После логотип и сертификат вписываются в TXT-запись DNS, вроде:
default._bimi TXT "v=BIMI1; l=https://example.com/image.svg; a=https://example.com/image/certificate.pem"
Вам нравится читать контент на этом канале?
Возможно, вы задумывались о том, чтобы купить на нем интеграцию?
Следуйте 3 простым шагам, чтобы сделать это:
1) Регистрируйтесь по ссылке: https://telega.in/c/htmlshit
2) Пополняйтесь удобным способом
3) Размещайте публикацию
Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
Бесплатные мастер-классы в Бюро Горбунова и скидка 25% на электронные продукты — школы, лекции и книги
Всю неделю середины лета преподаватели Бюро Горбунова ведут бесплатные мастер‑классы об управлении проектами, тексте в интерфейсе, разработке, вёрстке крепких макетов, модулей и отвечают на вопросы о своих дисциплинах в школе, курсах и книгах. Ещё можно успеть записаться:
ЧТ 20 июля 19:00 мск, типографика и вёрстка, Миша Нозик в Зуме.
ПТ 21 июля 17:00 мск, разработка, Василий Половнёв и Игорь Петров в Телеграме.
Бонус. ВТ 25 июля 19:00 мск, День открытых дверей, Иван Рожков в Ютубе.
Записаться на мастер-классы
Скидка 25% на электронные продукты бюро — школы, лекции и книги:
Середина лета в бюро
#презентация дня
Итак, что у нас сегодня? А сегодня у нас прекрасное. Презентация Ивана Акулова с конференции 3perf: React Concurrency, Explained.
React 18 уже давно с нами, SSG-компоненты нынче считаются чуть ли не дефолтом (я не очень с этим согласен, но уж как есть), useTransition, <Suspense>... Надо втягиваться же.
Сразу ссылка: https://3perf.com/talks/react-concurrency/
Рассмотренные топики:
1. React 17 и блокирующее выполнение
2. То же, но в React 18
3. useTransition()
4. <Suspense>
5. Проблемы
Демки тоже включены 🙂
В общем, это прям лучший транскриб, что я видел на данный момент. Очень удобно.
#react #concurrency #suspense #бородач
#фишка дня
Давайте сегодня продолжим тему SVG.
Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.
Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111
Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().
Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.
Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.
1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.
Вуаля: https://codepen.io/alinaki/pen/eYPmayO
Такое можно и с текстом провернуть, кто первый? :)
#svg #path #length #бородач
#codepen дня
The next big thing после Scroll-driven animations в CSS это View Transitions.
Когда в предложении английских слов больше, чем русских.
О чем же речь? Ну, представьте себе, что вы сможете задавать элементам анимации не только на прямые воздействия, но и на изменение DOM или смену страницы в браузере. Какой элемент должен уйти совсем, какой — уступить своё место другому. И всё это — в CSS.
Яркий пример такого взаимодействия — сортировка. Благодаря Адаму Аргайлу у нас есть и демонстрация: https://codepen.io/argyleink/pen/rNQZbLr
В браузерах, которые не поддерживают View Transitions, элементы просто поменяют свои места. А в Chrome 111 и выше — с анимацией :)
Имеется статья в блоге разработчиков Хрома, с огромным числом примеров: https://developer.chrome.com/docs/web-platform/view-transitions/
Ну а мы с вами ещё вернёмся к ним, котаны. И сайты будут еще больше похожи на нативные приложения :)
#css #view #transition
#заметка дня
Наглядное отличие алгебры от теории алгоритмов.
На КДПВ — паттерн и его алгебраическое решение.
В тексте ниже — аналогичный CSS:
li:nth-child(6n+4),
li:nth-child(6n+5),
li:nth-child(6n+6) {
color: red;
}
Выводов не будет, в тред приглашаются математики :)
#бородач
#инструмент дня
Итак, перед вами стоит задача сделать встраиваемый виджет. Любого рода, от виджета дашборда с показателями продаж до интерактивного баннера. Писать нужно быстро, эффективно, поддерживаемо. И чтоб размер поменьше.
Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — добавит 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов это надо иметь причину...
И тут выходит VanJS со своими 0.9kB: https://vanjs.org/
Сразу пример кода:
const Hello = () => div(
p("Hello"),
ul(
li("World"),
li(a({href: "https://vanjs.org/"}, "VanJS")),
),
)
van.add(document.body, Hello())
#статья дня
Как выделить абзац полоской на всю ширину экрана?
Да вот так: https://codepen.io/t_afif/full/LYQgPgM
Упорото, не правда ли?
Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.
Источник — тред экспериментов в Твиттере.
Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.
И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/
Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/
Я обычно первый способ из второй статьи использовал. Люблю магию.
И вообще, как такая раскладка по-русски будет-то?
#css #fullbleed #бородач
Собрали советы от старшего исследователя MTS AI Аммара Али, выигравшего семь конкурсов по искусственному интеллекту, организаторами которых были Google, NASA, AI Journey.
Итак, если вы хотите побеждать в международных соревнованиях по ИИ, вам нужно:
1. выбрать направление, в котором мы чувствуете себя увереннее всего;
2. начать участвовать в соревнованиях, не бояться и не думать, что это что-то невероятно сложное;
3. превратить конкурсы в свое хобби и почувствовать драйв от турниров по ИИ;
4. подавать заявку как можно раньше, чтобы больше времени было на подготовку;
5. совершенствовать свое решение каждый день понемногу - так больше шансов, что к финалу подачи заявки вы будете одними из лучших.
Если хотите участвовать в соревнованиях по ИИ, готовить статьи для крупнейших научных изданий, приходите работать в MTS AI. У нас есть целый отдел фундаментальных исследований и еще крутые позиции для разработчиков. Вакансии смотрите по ссылке.
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):$ git bisect start
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2
После чего bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.
Если эта версия работает хорошо, сообщаем bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем, снова случится checkout коммита посередине.
Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good и bad есть ещё old и new.
Мне очень стыдно, что не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect
Знаете основы веб-разработки и хотите углубить свои знания? Присоединяйтесь к бесплатному мини-курсу, где вы получите практические советы и инсайты от опытного программиста, а также создадите 3 классных проекта — сайт, приложение и сервис — и добавите их в портфолио.
Зарегистрируйтесь прямо сейчас и получите гайд по веб-разработке. Он поможет вам узнать больше о профессии, востребованности, зарплатах и карьерных перспективах: https://epic.st/e_jeIM
На мини-курсе вы:
— создадите веб-страницы, используя язык разметки HTML и технологию CSS;
— реализуете серверную часть (backend) веб-приложений на языке PHP;
— поработаете с базой данных MySQL и напишете запросы к ней на языке SQL;
— освоите основы JavaScript, чтобы делать веб-приложения интерактивными;
— научитесь автоматически получать информацию с других сайтов;
— разместите свой сайт в интернете.
Спикер мини-курса — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. Автор 10 курсов по программированию и карьере программистов.
Все участники получат скидку 10 000 рублей на любой курс Skillbox и персональную карьерную консультацию с тестовым доступом к понравившейся профессии. А ещё — 5 полезных материалов и гайдов по веб-разработке. Всем, кто посмотрит первый урок, откроем годовой доступ к изучению английского языка.
Присоединяйтесь! Вас ждёт много интересного. Подробная программа — по ссылке: https://epic.st/e_jeIM
Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
#фишка дня
Чтобы задать анимацию появления какого-либо элемента на экране при загрузке страницы, добавлении элемента или обновлении DOM совсем не нужно городить сложных конструкций.
Достаточно проделать следующий трюк:
@keyframes appear {
from {
…whatever
}
}
Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.
Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM
Попробуйте обновить страницу и поиграться со значениями.
Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.
#css #keyframes #animation #бородач
Как айтишнику ежегодно повышать свой доход?
Этому посвящен целый телеграм-канал Доронин IT. Его ведет один из руководителей команды кибербеза МТС, реализовал около сотни успешных коммерческих проектов, айтишник с 10-летним стажем Алексей Доронин. Каждый год ему удается сделать «икс» в доходах за счет своей системы.
✔️Как подготовиться к собеседованию.
✔️Как использовать ИТ-ипотеку.
✔️Как искать фрилансеров на проект и фрилансерам проекты.
✔️Когда и как говорить о повышении зарплаты с начальством.
✔️Какие дополнительные источники дохода открыты для айтишников.
На своем канале Алексей делится лайфхаками и фишками по трудоустройству и повышению заработка для айтишников 🚀
👉 Вместе с эйчарами Алексей подготовил очень подробный гайд по заполнению резюме разработчика. Как заполнить резюме, чтобы тебя точно позвали на собеседование. Он бесплатный. Подписывайся на канал и забирай гайд в закрепах.
#ссылка дня
Давайте раз уж обсудили проблемы с дефолтными стилями всё того же хрома, напомним себе о существовании user agent стилей.
Что такое user agent стили? Это, в общем смысле, стили браузера по-умолчанию. Выходит, не бывает сырых сайтов: даже если ваша таблица стилей по пути потеряется, будут применены встроенные. Ну самый яркий пример, это синие ссылки, становящиеся фиолетовыми после посещения сайта.
Естественно, этим не ограничивается. Даже пресловутые таблицы надо описать как таблицы (внезапно). Каждый браузер нынче считает своим долгом заодно как-то оформить поля ввода (календарики в поле даты, ага), стили фокуса и статуса валидности.
Их не назвать в общем и целом бесполезными, нет, но именно из-за них были придуманы концепции reset.css и normalize.css.
Итак, какие же существуют? Давайте по порядку.
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css
Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css
Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4
Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9
Интересно смотреть, как стили Хрома и Вебкита тянутся ещё со времён KHMTL.
А что такое Serenity?
О, я ж выкладывал недавно. Это совершенно новый браузер для одноимённой экспериментальной ОС, выросший из простой библиотеки парсинга HTML. У меня даже получилось его под macOS собрать: /channel/htmlshit/1821
В общем, бороться со встроенными стилями нам не надо, но иногда то, что делают браузеры, вызывает большое сомнение...
#css
#баг дня
Итак, проблема известная с десяток лет: при автозаполнении полей форм Хром заливает фон поля цветом. Раньше жёлтым, сейчас — небесно-голубым (во всяком случае, на моём сетапе).
Так что же не так с этим поведением?
Ну, для начала, оно очень непросто отключается. А точнее, не отключается — можно только переопределить. А во-вторых, стоит вам поставить фоновую картинку на ваше поле, для, например, иконки — как Хром и её сотрёт. Вот, посмотрите сами: https://codepen.io/alinaki/pen/oNQyGjo?editors=1100
Повторю: поведение касается только автоматически заполненного текста.
Сразу скажу, что официально это багом не признано и разработчики Google Chrome вертеть нас всех хотели на своих won't fix-ах: https://bugs.chromium.org/p/chromium/issues/detail?id=46543
Какие у нас есть варианты? Вообще, несколько. Все — буквально хаки.
1. Установить атрибут autocomplete в "new-password" или в любое случайное значение. Отключит автозаполнение вообще.
2. Повесить слушатель на событие change поля и восстанавливать стили скриптом.
3. Убрать заполнение цветом можно через игры с transition, например:
input:-webkit-autofill {
transition: all 9999s;
transition-delay: 9999s;
}
...в кодпене выше так и сделано. Но картинке это никак не поможет, потому что background-image не анимируется.
#фишка дня
Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?
Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/
Там div, не fieldset.
Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:
Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)
К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.
Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!
Вот так: https://codepen.io/alinaki/pen/NWLOPqy
Где это может пригодиться?
Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.
Ну или всю форму, при желании.
P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr
#fieldset #disabled #бородач
❗️ Хотите получить 2 месяца хостинга для сайта бесплатно от надёжного хостинг-провайдера?
👉 Переходите по ссылке и заполните форму, регистрация за 1 минуту!
Handyhost – проверенный хостинг с отличной репутацией и многочисленными положительными отзывами.
2 бонусных месяца для тестирования и разработки сайта ждут вас! А если у вас уже есть готовый сайт, то провайдер бережно перенесёт его на свои серверы без простоев в работе.
Отзывчивая поддержка поможет по всем вопросам, что особенно понравится новичкам. Есть всё что нужно для размещения сайта в интернете.
📌 Забирайте 2 месяца хостинга по ссылке!
#реклама