#видео дня
#css #html #spec #validation
Вадим Макеев недавно представил новый доклад: “HTML: the good parts” и буквально отобрал у меня половину будущих тем для описания. Но, так или иначе, формат видео заходит не всем, а в CSS-чате опять всплыла одна из типичнейших проблем начинающих верстальщиков под кодовым названием p>ul. Поэтому, самое время положить это видео и сюда, for the future good. Да, долго. Но стоит каждой минуты.
https://www.youtube.com/watch?v=A4tglcel7Ac
#css #html #spec #validation
Вадим Макеев недавно представил новый доклад: “HTML: the good parts” и буквально отобрал у меня половину будущих тем для описания. Но, так или иначе, формат видео заходит не всем, а в CSS-чате опять всплыла одна из типичнейших проблем начинающих верстальщиков под кодовым названием p>ul. Поэтому, самое время положить это видео и сюда, for the future good. Да, долго. Но стоит каждой минуты.
https://www.youtube.com/watch?v=A4tglcel7Ac
YouTube
003. HTML: The Good Parts - Вадим Макеев
#заметка дня
#html #form #input #validation
Bram Van Damme aka Bramus (олды тут? уже только за одну фамилию стоит подписаться на его CodePen) напоминает:
Кому подходит браузерная валидация – welcome!
#html #form #input #validation
Bram Van Damme aka Bramus (олды тут? уже только за одну фамилию стоит подписаться на его CodePen) напоминает:
input[type=“email”] поддерживает не только валидацию одного адреса электронной почты, но и даёт возможность вписать и провалидировать несколько адресов, введённых через запятую. Достаточно лишь указать атрибут multiple. убедитесь сами: https://codepen.io/bramus/pen/LYRGjmXКому подходит браузерная валидация – welcome!
#заметка дня
Зачем валидировать почту регулярками, если в браузере в общем-то всё есть?
Создаём элемент на лету, заполняем его нужными атрибутами, передаём email — и просто используем встроенный API. Спасибо Леонадру Элиасу.
К слову, в представленный метод было бы неплохо добавить заполнение атрибута multiple, чтоб список мыл через запятую можно было валидировать.
И ещё из всего этого следует один интересный вывод, тянущий на полноценную библиотеку. Кто догадается, какой?
#input #validation #js
Зачем валидировать почту регулярками, если в браузере в общем-то всё есть?
Создаём элемент на лету, заполняем его нужными атрибутами, передаём email — и просто используем встроенный API. Спасибо Леонадру Элиасу.
К слову, в представленный метод было бы неплохо добавить заполнение атрибута multiple, чтоб список мыл через запятую можно было валидировать.
И ещё из всего этого следует один интересный вывод, тянущий на полноценную библиотеку. Кто догадается, какой?
#input #validation #js
👍15👎1
#заметка дня
Точнее, продолжение вчерашней.
Итак, раз можно валидировать через браузерные API, почему бы не воспользоваться браузерными же статусами валидации? i18n бесплатно! Не надо ничего выдумывать.
Так можно же. Смотрим альбом.
И более того, парни из UI-набора Ariakit aka Reakit этот же подход и применяют под капотом своих компонентов для создания форм: https://reakit.io/docs/form/
Вот тут подробнее от автора: https://twitter.com/diegohaz/status/1474739467810480128
Естественно, никто не мешает эти строки-статусы менять. Но сам факт — интересен.
#input #validation #uikit
Точнее, продолжение вчерашней.
Итак, раз можно валидировать через браузерные API, почему бы не воспользоваться браузерными же статусами валидации? i18n бесплатно! Не надо ничего выдумывать.
Так можно же. Смотрим альбом.
И более того, парни из UI-набора Ariakit aka Reakit этот же подход и применяют под капотом своих компонентов для создания форм: https://reakit.io/docs/form/
Вот тут подробнее от автора: https://twitter.com/diegohaz/status/1474739467810480128
Естественно, никто не мешает эти строки-статусы менять. Но сам факт — интересен.
#input #validation #uikit
👍7
#такое дня на ночь глядя
Заметки про валидацию форм со спорным использованием API браузеров вызвали бурю обсуждений в нашем чате.
Я про эти две, если что: https://t.me/htmlshit/1171 и https://t.me/htmlshit/1173
Да, создавать целый DOM-элемент ради проверки email — может показаться глупым и неэффективным (особенно если вы спасаете белых мишек). Да, не всех устраивает текст стандартных сообщений браузера. Да, внешний вид этих сообщений по-умолчанию тоже вызывает вопросы.
Но вот в чём дело.
Целью канала не всегда является выдача готовых решений. Целью канала является донесение идеи, что разработка может быть разной и решения могут быть неожиданными. Про гибкость, короче.
Провалидировать почтовый адрес строкой можно в 32 миллиона раз быстрее, чем виртуально создать текстовое поле.
Но вы подумали о том, что нужно пользователю показать сообщение? Что это сообщение может быть на разных языках? Что завтра заказчик попросит добавить ограничение длины текста (а это тоже надо переводить на все языки вашего продукта и слова придётся склонять)…
Короче, я это к чему. То, что кажется глупым в рамках сиюминутного решения задачи, может очень хорошо скейлиться на целый UI-набор, на множество виджетов и задач.
И пусть вам нравятся не все тексты ошибок по-умолчанию, они уже сэкономят вам на крупном проекте десятки человеко-часов на вычитку текста. И размер бандла тоже, к слову (или затраты бакенда на генерацию строк).
Вторая заметка как раз про это: парни взяли и внедрили подход в свой набор виджетов, сэкономив всем время, но сохранив гибкость.
Старайтесь думать шире, котаны. И будет всё хорошо.
Надеюсь, я не заставил вас приоткрыть форточки от духоты моих измышлений.
Спокойной ночи :)
#ui #js #validation
Заметки про валидацию форм со спорным использованием API браузеров вызвали бурю обсуждений в нашем чате.
Я про эти две, если что: https://t.me/htmlshit/1171 и https://t.me/htmlshit/1173
Да, создавать целый DOM-элемент ради проверки email — может показаться глупым и неэффективным (особенно если вы спасаете белых мишек). Да, не всех устраивает текст стандартных сообщений браузера. Да, внешний вид этих сообщений по-умолчанию тоже вызывает вопросы.
Но вот в чём дело.
Целью канала не всегда является выдача готовых решений. Целью канала является донесение идеи, что разработка может быть разной и решения могут быть неожиданными. Про гибкость, короче.
Провалидировать почтовый адрес строкой можно в 32 миллиона раз быстрее, чем виртуально создать текстовое поле.
Но вы подумали о том, что нужно пользователю показать сообщение? Что это сообщение может быть на разных языках? Что завтра заказчик попросит добавить ограничение длины текста (а это тоже надо переводить на все языки вашего продукта и слова придётся склонять)…
Короче, я это к чему. То, что кажется глупым в рамках сиюминутного решения задачи, может очень хорошо скейлиться на целый UI-набор, на множество виджетов и задач.
И пусть вам нравятся не все тексты ошибок по-умолчанию, они уже сэкономят вам на крупном проекте десятки человеко-часов на вычитку текста. И размер бандла тоже, к слову (или затраты бакенда на генерацию строк).
Вторая заметка как раз про это: парни взяли и внедрили подход в свой набор виджетов, сэкономив всем время, но сохранив гибкость.
Старайтесь думать шире, котаны. И будет всё хорошо.
Надеюсь, я не заставил вас приоткрыть форточки от духоты моих измышлений.
Спокойной ночи :)
#ui #js #validation
👏13👍11❤3
#инструмент дня
«Лучший валидатор — это браузер!» — так когда-то отвечал сайт Студии Артемия Лебедева на попытку валидации.
И так-то оно так, но это было много лет назад, во времена дикого разгула браузерных движков.
Да и работают там далеко не джуны (даже на аутсорсе, я знаю, о чём говорю).
Так вот, суть в том, чтобы не писать ерунды вроде вкладывания ul в p (и удивляться, что всё развалилось), ну или main в footer (и удивляться низким показателям в SEO) и так далее, желательно бы свою вёрстку (или просто отдельные React/Vue компоненты) как-никак валидировать.
Ну и проверять доступность, естественно (хотя бы alt в img).
Как? Ну вот, например, через https://html-validate.org/. Это, собственно, офлайн-валидатор.
А лучше пойти дальше и использовать его в связке с Jest: https://html-validate.org/frameworks/jest.html
Примеры там имеются. Верстайте правильно, котаны.
#html #jest #validation
«Лучший валидатор — это браузер!» — так когда-то отвечал сайт Студии Артемия Лебедева на попытку валидации.
И так-то оно так, но это было много лет назад, во времена дикого разгула браузерных движков.
Да и работают там далеко не джуны (даже на аутсорсе, я знаю, о чём говорю).
Так вот, суть в том, чтобы не писать ерунды вроде вкладывания ul в p (и удивляться, что всё развалилось), ну или main в footer (и удивляться низким показателям в SEO) и так далее, желательно бы свою вёрстку (или просто отдельные React/Vue компоненты) как-никак валидировать.
Ну и проверять доступность, естественно (хотя бы alt в img).
Как? Ну вот, например, через https://html-validate.org/. Это, собственно, офлайн-валидатор.
А лучше пойти дальше и использовать его в связке с Jest: https://html-validate.org/frameworks/jest.html
Примеры там имеются. Верстайте правильно, котаны.
#html #jest #validation
👍20🔥3👎1
#фишка дня
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
a, и всё, потерялись. Нет, кнопки тоже нельзя. Нет, любой интерактивный контент нельзя.Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation
👍16❤1
#фишка дня
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Наприме
Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
...и получаем сообщение о незаполненном поле!
Ага, хрен там.
Прикол того же
Если email — то пустая строка, очевидно, не является правильным адресом почты. То же самое с обязательным вводом.
Что же делать?
Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.
Почему грязных? Потому что их потрогал пользователь! То есть, совершил ввод.
Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.
Есть ещё концепция touched, когда ввода не было, но произошло событие blur.
Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE
Согласитесь, это уже похоже на удобную валидацию, котаны!
#css #validation #required #forms
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Наприме
р, required.Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
input:invalid ~ .invalid-message {
display: block;
}...и получаем сообщение о незаполненном поле!
Ага, хрен там.
Прикол того же
:invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.Если email — то пустая строка, очевидно, не является правильным адресом почты. То же самое с обязательным вводом.
Что же делать?
Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.
Почему грязных? Потому что их потрогал пользователь! То есть, совершил ввод.
Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.
Есть ещё концепция touched, когда ввода не было, но произошло событие blur.
Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE
Согласитесь, это уже похоже на удобную валидацию, котаны!
#css #validation #required #forms
🤩11👍8
#фишка дня
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation #бородач
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
a, и всё, потерялись. Нет, кнопки тоже нельзя. Нет, любой интерактивный контент нельзя.Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation #бородач
👍7
#фишка дня
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Наприме
Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
...и получаем сообщение о незаполненном поле!
Ага, хрен там.
Прикол того же
Если email — то пустая строка, очевидно, не является правильным адресом почты. То же самое с обязательным вводом.
Что же делать?
Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.
Почему грязных? Потому что их потрогал пользователь! То есть, совершил ввод.
Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.
Есть ещё концепция touched, когда ввода не было, но произошло событие blur.
Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE
Согласитесь, это уже похоже на удобную валидацию, котаны!
#css #validation #required #forms #бородач
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Наприме
р, required.Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
input:invalid ~ .invalid-message {
display: block;
}...и получаем сообщение о незаполненном поле!
Ага, хрен там.
Прикол того же
:invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.Если email — то пустая строка, очевидно, не является правильным адресом почты. То же самое с обязательным вводом.
Что же делать?
Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.
Почему грязных? Потому что их потрогал пользователь! То есть, совершил ввод.
Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.
Есть ещё концепция touched, когда ввода не было, но произошло событие blur.
Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE
Согласитесь, это уже похоже на удобную валидацию, котаны!
#css #validation #required #forms #бородач
👍36❤1
#фишка дня
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation #бородач
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто
a, и всё, потерялись. Нет, кнопки тоже нельзя. Нет, любой интерактивный контент нельзя.Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation #бородач
❤8👍5