#библиотека дня

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

Встречайте: AnimXYZ,
https://animxyz.com/.

Подход простой: вы указываете нужную комбинацию трансформаций, таймингов, уровней прозрачности, последовательность проигрыша прямо в классах и ставите атрибут xyz. Остальное она сделает за вас: объединит их и проиграет в нужный момент.

Основная моя к ней претензия – атрибут xyz. Для меня остаётся загадкой, почему нельзя использовать валидные data-атрибуты. С другой стороны, в React и Vue такой проблемы у вас не появится вообще.

Я считаю, что ей можно дать шанс. Особенно если вы создаёте различные баннеры.

#css #transitions #animation

​​#инструмент дня

Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/svg-path-editor/

#svg #path

#codepen дня

Фотореалистичное изображение синтезатора Roland MC-500: https://codepen.io/fossheim/pen/BaKQGZJ

Оригинал изображения можно увидеть по ссылке: https://i.pinimg.com/564x/a2/02/a4/a202a4ab33dff87b53ba54db33518b78.jpg

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

У автора данной работы есть несколько интересных статей о приёмах, позволяющих достичь фотореалистичности в CSS: выделение базовых цветов каждого компонента, использование мягких градиентов вместо сплошных фонов, итеративное выполнение задачи.

https://fossheim.io/writing/posts/css-macintosh/

https://fossheim.io/writing/posts/css-polaroid-camera/

#видео дня

Интервью Дугласа Крокфорда — создателя JSON — подкасту «Мы обречены».

Для начала, цитата: «Часто — это самоучки, которые научились делать то, что они делают, читая код на других сайтах. К сожалению большинство кода, который находится в сети — дерьмо...
И вы не можете винить их за то, что они сами пишут дерьмо. Так что знаете, мы все в одной лодке мы все должны помогать друг другу».

Кажется, тут не надо ничего пояснять :)

Собственно, интервью: https://www.youtube.com/watch?v=WSqCpWYfTFU

Ну и хочу поддержать авторов подкаста, которых критикуют за то, что интервью выложено с переводом: идите и смотрите в оригинале где угодно, контента полно. А тут — на русском, для тех, кто только начинает свой путь или просто не так уверен в разговорном английском. Не будьте снобами, котаны.

#podcast #json #js

#такое дня

Можете распечатать и подарить любимому тимлиду: https://www.printables.com/model/163302-worlds-best-css-developer-trophy

А накидайте ваших любимых айти-мемов чтоль. В чате-то не стесняетесь :)

#книга дня

Какие книги, возможно, не имеют большого смысла? Ну, по фреймворкам, очевидно. Книги с рецептами тоже в топку (даже кулинарная тут проиграет интернету). В общем, многие устаревают быстрее, чем вы успеваете получать знания.

А что не устаревает? Архитектура, подходы… математика! Уж математика точно для многих тема больная, особенно, если собрались писать игры. И вот классическую книгу по этой теме и хочу вам представить.

«3D Math Primer for Graphics and Game Development», Fletcher Dunn и Ian Parbery. 2011 год с первым изданием 2002. Но такие знания не устаревают, поэтому — вот ссылка на онлайн-версию: https://gamemath.com/

Язык в книге сильно проще классического матанализа. Требуется немного знаний тригонометрии, правда. Да и алгебру никуда не деть :)

Но в целом — шикарная находка.

#book #game

#заметка дня

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

Создаём элемент на лету, заполняем его нужными атрибутами, передаём 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