#заметка дня

Зачем валидировать почту регулярками, если в браузере в общем-то всё есть?

Создаём элемент на лету, заполняем его нужными атрибутами, передаём email — и просто используем встроенный API. Спасибо Леонадру Элиасу.

К слову, в представленный метод было бы неплохо добавить заполнение атрибута multiple, чтоб список мыл через запятую можно было валидировать.

И ещё из всего этого следует один интересный вывод, тянущий на полноценную библиотеку. Кто догадается, какой?

#input #validation #js

✅Новый формат получения IT специальности - Буткемп. Что это такое?

Буткемп — методика, которую использовали в лагерях для подготовки солдат. Чтобы стать полноценным бойцом, в обычных условиях новобранцу нужно 3-4 года. В условиях Bootcamp такого результата достигали за 4 месяца. Эффективность методики обоснована тем, что на период кемпа человек полностью погружается в процесс обучения и быстрей воспринимает информацию. Сейчас этот метод обучения активно используют в Гарварде, IT-компаниях, бизнес-проектах и образовательных программах.

Для обучения IT специальностям (прежде всего программирование) формат начали использовать в 2011 году в США. Он быстро доказал свою эффективность и стал популярным. К примеру, за 2020 год IT буткемпы выпустили 24975 американцев. Для стран бывшего СССР, это новый формат.

В 2018 году в России открылся первый - Эльбрус Буткемп. С тех пор его выпускниками стали 752 человека. 93% из них нашло работу в течение 3 месяцев после выпуска. 

Буткемп работает как оффлайн (Москва и Санкт-Петербург), так и онлайн.

Подробнее о формате Буткемп можно узнать на мероприятии в ближайший понедельник

#фишка дня

А давайте ещё больше безумных идей богу безумных идей.

Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.

А достигается волшебство путём использования селекторов пот атрибутам:

[term] { display: none; }
[term*="a" i] { display: list-item; }

i — означает case-insensitive, регистронезависимый ввод.

Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN

Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.

Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).

Основная идея: не забывайте, что у вас и такое есть под рукой.

#css #js #attributes

#такое дня на ночь глядя

Заметки про валидацию форм со спорным использованием API браузеров вызвали бурю обсуждений в нашем чате.

Я про эти две, если что: https://t.me/htmlshit/1171 и https://t.me/htmlshit/1173

Да, создавать целый DOM-элемент ради проверки email — может показаться глупым и неэффективным (особенно если вы спасаете белых мишек). Да, не всех устраивает текст стандартных сообщений браузера. Да, внешний вид этих сообщений по-умолчанию тоже вызывает вопросы.

Но вот в чём дело.

Целью канала не всегда является выдача готовых решений. Целью канала является донесение идеи, что разработка может быть разной и решения могут быть неожиданными. Про гибкость, короче.

Провалидировать почтовый адрес строкой можно в 32 миллиона раз быстрее, чем виртуально создать текстовое поле.

Но вы подумали о том, что нужно пользователю показать сообщение? Что это сообщение может быть на разных языках? Что завтра заказчик попросит добавить ограничение длины текста (а это тоже надо переводить на все языки вашего продукта и слова придётся склонять)…

Короче, я это к чему. То, что кажется глупым в рамках сиюминутного решения задачи, может очень хорошо скейлиться на целый UI-набор, на множество виджетов и задач.

И пусть вам нравятся не все тексты ошибок по-умолчанию, они уже сэкономят вам на крупном проекте десятки человеко-часов на вычитку текста. И размер бандла тоже, к слову (или затраты бакенда на генерацию строк).

Вторая заметка как раз про это: парни взяли и внедрили подход в свой набор виджетов, сэкономив всем время, но сохранив гибкость.

Старайтесь думать шире, котаны. И будет всё хорошо.

Надеюсь, я не заставил вас приоткрыть форточки от духоты моих измышлений.

Спокойной ночи :)

#ui #js #validation

#статья дня

Не так давно у меня произошёл небольшой скандал, в результате которого я проводил внеочередное ревью вёрстки одного стороннего проекта.

Верстка была, мягко говоря, небрежной. Количество мелких огрехов и багов UX поражало. Тут кривой вертикальный ритм, тут все слиплось, здесь текст вылез за пределы блока, там выделение текста закрывает аккордеон. Про то, что все разваливалось на узких экранах говорить уже не приходится.

Да, часть огрехов можно было списать на несовершенство дизайн-системы, часть — на не до конца завершённые мысли дизайнеров и их невнимательность. Но вот что надо помнить.

Верстальщик — не ксерокс. Его задачей не является точный перенос статичной картинки на такой же статичный носитель. У него должно быть своё мнение. Обязано.

Если в вашей компании так не считают — БЕГNТЕ.

Так вот, большинства вышеописанных (типичных) проблем можно было бы избежать, соблюдая простую гигиену кода. Я такой список сформировал в своей голове за годы работы в вебе, но никогда не закреплял его (стоило бы).

А небезызвестный Ахмад Шадид — закрепил. И назвал это «Defensive CSS». Обороняющиеся стили: https://ishadeed.com/article/defensive-css/

Незнание английского не страшно, там хорошие иллюстрации. Как всегда.

Ахмад делает из этого целый проект, примеров будет больше.

P. S. Подписчик прислал перевод на русский, вот теперь точно прекрасно: https://habr.com/ru/post/648537/

Оставайтесь на связи :)

#css #article

#фишка дня

Вы наверняка задумывались: «Если margin это короткая форма записи всех margin-*, почему для позиционирования такого нет»?

Ну как же нет, вот inset. Поддерживаться в полной мере, правда, стал не так давно.

Как всегда — PostCSS нас выручит.

#css #inset #position

#заметка дня

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

Любителям шлюзов будет другая статья. Хотите — обсудим в чате.

vw+vh

Итак, вам кровь из носу нужно, чтобы сайт был абсолютно резиновым и реагировал на изменение размера окна пропорционально. Прочитали, что нужно использовать vw (viewport width) или vh (viewport height).

1vw это 1% от ширины видимой области экрана включая скроллбар, 1vh от, соответственно, высоты. Я рекомендую vw, ибо чаще всего, ширина макета это константа (я про макеты! не про результат, ниже поясню).

Теперь такой простой, но такой сложный секрет: чтобы ваши блоки изменяли размер пропорционально изменению ширины или высоты окна, нужно использовать что-то одно.

Единицы vh и vw – разные по определению! Прямоугольник 10vw на 10vh это не квадрат! Если вы изменяете ширину окна, высота-то остаётся постоянной. И наоборот.

Второе: если уж взялись, то используйте их везде: размер блоков, шрифта, отступы, поля, базис – всё должно быть или в v-единицах (или в процентах, кто понимает). Это же касается, впрочем, и rem.

Третье: чтобы не сидеть с калькулятором (знаю таких кадров лично), я предлагаю воспользоваться следующей функцией для SCSS:

$base-width: 1920;

@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}

@function vw($num) {
@return strip-unit($num) / $base-width * 100vw;
}


Пример:

.my-block {
width: vw(100px);
padding: vw(20px);
}


100px это ширина блока на макете 1920px. Не при разрешении экрана в 1920 по ширине, а на вашем макете от дизайнера. То есть: 100px ➗ 1920px ✖️ 100vw, по формуле простых процентов.

Многих смущает функция strip-unit. Мол, там же единица получается в знаменателе.

Нет, ребята. Не единица. По правилам SCSS 20px ➗ 1 = 20px, а 20px ➗ 1px = 20. Это простая алгебра дробей. Ну и соответственно, 20px ✖️ 100vw не имеет никакого смысла, а 20 ✖️ 100vw — имеет. Не умножайте сантиметры на килограммы (и не смейтесь над мемами с учителями).

Четвёртое: не забывайте про скроллбар, он ненулевой ширины, но при расчёте v-единиц не учитывается.

Пятое: сайт, свёрстанный таким образом, перестаёт зумиться на десктопах. Зато на мобильных – просто сказка, горячо рекомендую.

И шестое: в какой-то момент сайт станет просто мелким :)

rem

С rem (root em), единый размер шрифта корневого элемента, html, верны ровно всё те же утверждения и применима всё та же формула:

$base-font: 16;

@function rem($num) {
@return strip-unit($num) / $base-font * 1rem;
}


Пример:

.my-block {
width: rem(100px);
padding: rem(20px);
}


Почему 16? Потому что 16px это размер шрифта тега html по-умолчанию в любом браузере. Не надо ставить 62.5% на html в надежде получить 10px, я вас умоляю! Да, числа выглядят красиво, но в вашу логику кому-то ещё въехать предстоит. Что понятнее, 10rem из 62.5% или rem(100px)?

Хотя ладно, тут кому как.

Главное: не ставьте никогда размер шрифта html в px, вы потеряете всю красоту доступности rem для людей, которые изменяют размер шрифта браузера по-умолчанию.

К плюсам rem точно можно отнести возможность изменять размер всего сайта простым переключением размера шрифта. Например, на сайте Минэкономразвития РФ так сделана панель для слабовидящих (но ошибка с 16px в корне присутствует).

Второй плюс: когда дизайнер неопытный, он запросто может вам прислать макет в 1440px, например. А большинство экранов имеют размер 1280 и 1366. Не каждый макет можно аккуратно адаптировать. И вот тут магия быстрого изменения масштаба очень нужна. Меняете себе размер шрифта по медиа-запросам и готово.

Минусы – зум будет работать, но не очень адекватно.

Шлюзы, em, правильную резину и проценты я рассмотрю как-нибудь позже.

Краткий вывод

Верстать весь сайт в vh и vw имеет смысл только если у вас реально что-то сложное, с большим количеством просчитанных заранее взаимодействий.

Когда верстаете в px (всё же они проще), шрифт вполне можно указывать в rem, а отступы — в em.

#css #em #rem #vh #vw

#уточнение дня

В чате к предыдущей заметке задали вопрос по поводу функции strip-unit: "Почему сложение, к примеру, 50px * 0 + 1 = 1px, а не просто 1?"

Господа, ну так работает SCSS. Вы имеете полное право складывать 2px + 2 и получать 4px: https://codepen.io/alinaki/pen/OJQzvzV

Это не сложение яблок с единицей, как в алгебре. Это увеличение числа яблок на одно яблоко.

Ссылка на документацию: https://sass-lang.com/documentation/operators/numeric


@debug 100px + 50; // 150px
@debug 4s * 10; // 40s


А вот делить пиксели на ремы вы права не имеете, потому что никакого ожидаемого смысла в этом нет. Как и складывать, указывая разные единицы:


@debug 100px + 10s;
// ^^^^^^^^^^^
// Error: Incompatible units px and s.


Зачем я умножаю на 0? Потому что strip-unit должна быть независимой от единиц измерения. 0px + 1 = 1px, 0vw + 1 = 1vw. А в знаменателе мне нужно полное соответствие, чтобы алгебраически px и vw уничтожить, получив соотношение числом.

#css #scss

#фишка дня

Вы могли читать в разных учебниках или слышать на разных курсах по GIT, что GIT — это "машина времени" или "бесконечная отмена". Так-то оно так, но...

Но что если вы что-то сохранили раз, два, три, десять... захотели отменить одно из старых изменений — а коммитов-то не было?

Wes Bos подсказывает, что на помощь придёт инструмент Timeline в VS Code!

Ну и собственно фишка эта появилась в VS Code в начале апреля. В Твиттере разработчиков есть большой разбор нововведений, и этого тоже: https://twitter.com/code/status/1511463346167496706

Надеюсь, вам не жалко нескольких десятков килобайт на диске ради возможности путешествий во времени :)

P. S. из чата пишут, что в в различных IDE от JetBrains тоже имеется Local History. И хранит он изменения прилично долго. Так что, конечно, фишка не уникальна.

#vscode #feature #timeline

#такое дня

Кто хочет на ночь глядя написать всё, что думает о канале в комментарии?

Чего не хватает? Чего нет совсем? Чего вроде ок, но охота побольше? А чего — поменьше...

Не стесняйтесь. А то что-то на мемы вы были жадные :(

#фишка дня

Я неоднократно выкладывал разные SVG-инструменты и генераторы. Вот, например: https://t.me/htmlshit/447

У многих есть одно общее: генератор блямб. Или капель. Я честно не уверен, как это должно называться по-русски. Blob, короче.

Почему-то эти капли попали в тренды и пока там держатся. Но совсем не обязательно делать их на SVG.

CSS тоже отлично справляется.

На чем это основано? На геометрии кривых :) Эллипсов, точнее. Через слэш задаются вертикальный и горизонтальный радиусы эллипсов соответственно. А дальше — математика спряжения кривых. Вот тут подробнее: https://www.w3.org/TR/css-backgrounds-3/#border-radius

А тут — попопулярнее: https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/

Кто смелый анимировать их? :)

#css #blob

#фишка дня

Давайте что-нибудь наболевшее.

Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.

И вообще, не забывайте на html ставить атрибут lang с верным кодом языка. Вы не представляете, как бесит, когда финские и шведские сайты это игнорируют, и переводчик иногда отказывается работать.

#html #attribute #translate

#баг дня

Google весьма знамениты тем, что у них на поток поставлена палочная система.

Если коротко, для достижения следующего грейда, тебе надо внедрить инновацию. Напоминает СССР, не правда ли?

Один сначала вводит инновацию, второй — проводит рационализацию. Оба получили премию.

Вспомним десяток обновлений интерфейса GMail.

Итак, в чём же конкретно проблема: https://issuetracker.google.com/issues/232060574

Есть такой язык и среда — Google Apps Script. Это JavaScript, на самом деле. Используется для написания приложений GSuite (расширения к формам, доксам и таблицам).

У него одновременно поддерживаются две системы развёртывания (деплоя): legacy и текущая.

Мы сидим пока на legacy, поскольку в текущей полно нововведений, несовместимых с жизнью.

Но за каким-то лешим один из сотрудников Google решил провести инновацию и заменил нативные HTML-селекты на самодельные в стиле Material UI.

И естественно, не обошлось без косяка: рендер выпадающей части происходил за пределами самого селекта, через портал. И отступы считались в зависимости от числа элементов в дропдауне.

А у нас их там 2000. Естественно, меню улетело за пределы экрана.

Зачем было трогать легаси-среду? Вопрос риторический.

Браво, Google. Браво. Зато инновация внедрена и премия получена

#google #bug

Подготовил иллюстрацию для тех, кто по ссылкам не ходит