#заметка дня
#css #flex #ie #float #flexbugs

По какой-то неведомой мне причине в профильных чатах очень часто, волнами, появляются люди, которых (как они заявляют) учат верстать на float.

Мол, сначала блоки, потом float, потом flex и потом grid. Это, конечно же, полный бред. Никакого порядка изучения нет, есть лишь разные модели раскладки контента.

Более того, я заметил это в паре книг, но сейчас не о них.

Часть из этих людей утверждает, что им приходится верстать на float потому что нужна поддержка Internet Explorer 11, который, будто бы, не поддерживает flexbox.

Господа, я не знаю, кто вас заставляет так считать. Всё прекрасно работает, даже без -ms-префиксов. Проблем на самом деле намного больше и они везде.

Как всегда, залог успешной вёрстки — это простая гигиена и знание справочников. В отношении flexbox она такова:
никогда не используйте короткую запись (flex: 1 0 auto и т. п), пишите конкретные правила; не надо полагаться на значения по-умолчанию.

Эта гигиена, кстати, вообще касается многих сложносоставных правил.

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

https://github.com/philipwalton/flexbugs

Ну и эта статья с расшифровкой от прекрасного канала @defront слишком хороша, чтобы её не репостнуть.

Амелия Ваттенбергер написала интерактивную статью про использование процентов в CSS — "What does 100% mean in CSS?".

В статье есть хорошие интерактивные примеры и краткое описание поведения процентов для разных свойств:
- для height процент высчитывается относительно высоты родителя
- для width — относительно ширины родителя
- для top — относительно высоты родителя
- для left — относительно ширины родителя
- для margin-top — относительно ширины родителя
- для margin-left — относительно ширины родителя
- для padding-top — относительно ширины родителя
- для padding-left — относительно ширины родителя
- для translate-top — относительно высоты элемента
- для translate-left — относительно ширины элемента

Очень прикольная статья. Советую почитать всем, кто хочет разобраться с процентами в CSS.

#css

https://wattenberger.com/blog/css-percents

#статья дня
#html #css #px #em #rem #vw #vh

Лето и отпуск не лучшие помощники в написании новых статей, но ничто не забыто.

Тем временем великолепная Йоксель (https://twitter.com/yoksel) выпустила крайне подробную статью о единицах измерения в CSS.

Рассмотрены даже не самые популярные единицы вроде ex и ch, даны разъяснения об их вычислении и приведены наглядные примеры.

Единственное, не сказано о том, что v-единицы не реагируют на масштаб в браузере. Надо бы сообщить. (см. Upd.)

Читаем и не забываем подписываться на Йоксель в твиттере.

Upd. О важности взаимодействия с авторами. В статье появилось упоминание, что v-единицы не реагируют на масштаб. Никогда не стесняйтесь сообщать авторам статей о всём, что считаете нужным.

https://css.yoksel.ru/size-units/

#статья дня

Чему senior-разработчики могут поучиться у начинающих: https://stackoverflow.blog/2019/12/19/what-senior-developers-can-learn-from-beginners/

Она немного выбивается из общей сути канала статья, но всё же о буднях.

Случилось вот что: мы в шесть глаз просмотрели глупейшую опечатку.

В очень старом коде было повторяющееся условие проверки включения элемента в массив настроек:

settings.indexOf(“COMBINE_RESULTS”) !== -1

…и обратное к нему (=== -1).

Очевидно, было принято решение заменить его на переменную shouldCombineResults и использовать везде.

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

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

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

#заметка дня

Оказывается, с мая этого года Chrome больше не размывает текст и контент вообще при использовании transform: translate(-50%, -50%) в случае нечётных размеров или нецелых процентов (звучит глупо, но проблема весьма известная: https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry).

Мне сложно сослаться на конкретную версию, плюс многие разработчики используют Canary, но мы ждали этого больше пяти лет: https://bugs.chromium.org/p/chromium/issues/detail?id=521364

Наконец-то можно больше не удивлять людей подобными предположениями: “А размер модалки чётный?”

​​#заметка дня
#shadowdom #css #input

Тема дня — надоедливые иконки в полях ввода.

Я надеюсь, все помнят заметку о Shadow DOM и как с ней работать. Если нет, вот ссылка: https://t.iss.one/htmlshit/384

Суть проблемы в том, что Chrome начал активно обновлять свой набор полей ввода и практически реализовал все доступные в спецификации. Firefox и Safari пока сильно отстают, но разработчики, как правило, используют правильные типы полей и вешают альтернативные решения.

В последних обновлениях появились иконки часов и календаря в соответствующих полях. Естественно, это сразу не устроило тех, кто оформлял поля самостоятельно. А как их убрать? Секрет снова в Shadow DOM. Читаем статью выше, идём в средства разработчика и быстро получаем решение (см. иллюстрацию и пример):
https://codepen.io/alinaki/pen/yLOVoXe

Надеюсь, скоро подтянутся и остальные браузеры и пример можно будет дополнить.

#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/

#ссылка дня

#codepen #placeholder #image

Я удивлён, что не все это знают, но когда вы хотите показать что-то на codepen.io или просто лень тратить время на поиск доступных свободных изображений для вашего макета, можно воспользоваться сервисами поставки плейсхолдеров. Один из наиболее популярных — placehold.it.

Пишете адрес, указываете нужный размер в формате 100x100 и получаете серую картинку с указанным размером.

А если открыть главную страницу сервиса и почитать документацию — так там ещё и текст будет и разные цвета фона.

Горячо рекомендую!

https://placehold.it/300x300

#заметка дня

#js #focus #scroll

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#ссылка дня
#css #flex #flexbox #game

Соскучились по играм в CSS? Не всё же лягушек во FlexBoxFroggy.com (игра по флексбоксу) расставлять да морковку в CssGridGarden.com (игра по гридам) сажать.

Встречайте — https://www.flexboxdefense.com/

Tower Defense на flexbox!

P. S. вот только на телефонах не работает. Эх.

P. P. S. не забываем, что помимо игр бывают и человекопонятные шпаргалки вроде шпаргалки по гридам от Йоксель: https://t.iss.one/htmlshit/402

​​#статья дня
#css #animation #keyframes #podcast

Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.

Т. е. имея такую анимацию:

box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}

и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.

Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm

В свою очередь, он почерпнул это из The CSS Podcast: https://thecsspodcast.libsyn.com/022-animation, так что вот вам ещё один хороший ресурс для обучения новому.

​​#ссылка #инструмент дня
#css #tools #triangles #svg #base64 #cursors

Ну кто-то должен был это сделать (жаль, не я 😭). Встречайте, open-source “наше всё”: генератор CSS-треугольников, оттенков цвета, красивых волн для разделения секций (нелишним будет вспомнить https://t.iss.one/htmlshit/399), утилиту для сжатия SVG, список названий курсоров и кодирование base64 в одном флаконе.

https://omatsuri.app/

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

Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://t.iss.one/htmlshit/375

Так вот, Артём Шибаков (https://twitter.com/ashibakow) разработал автодополнение для Visual Studio Code, автодополняющее CSS-свойства с учётом статистики их использования.

Smart CSS Autocomplete: https://marketplace.visualstudio.com/items?itemName=saionaro.smart-css-autocomplete

Пробуйте, не забывайте отписываться в issues на GitHub и благодарить автора.

P. S. А если вы хотите что-то максимально мощное для автодополнения кода, попробуйте https://www.tabnine.com/

#статья дня
#css #js #mediaqueries #width #adaptive

Мы говорим “медиа-запросы” или “media queries” и обычно подразумеваем только часть с CSS. А когда дело касается JavaScript, во многих примерах, курсах и учебниках до сих пор используется сравнение window.innerWidth с желаемым значением на каждое событие изменения размера окна.

Конечно же, это неправильно и устарело. Уже давно существуют медиа-запросы для скриптов:

mediaQuery = window.matchMedia('(min-width: 768px)')

if (mediaQuery.matches) {
alert('Media Query Matched!')
}

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

mediaQuery.addEventListener(function(e) {
if (e.matches) {
// your code
}
});

Подробнее и сравнение разных подходов в статье от Марко Илик (Marco Ilic) на CSS-Tricks: https://css-tricks.com/working-with-javascript-media-queries/

#ngrok

Немного будничных проблем: US-регион ngrok сейчас лежит, используйте EU-регион, для чего укажите ключ --region=eu при запуске.

Upd. 16:00 Поднялось!

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

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

https://ngrok.com/

​​​​#статья дня
#jpeg #jpg #webp #img #avif

Соскучились по моей любимой теме карго-культа форматов изображений? Я вам ещё принёс.

Поскольку Chrome 85 теперь поддерживает AVIF, мы можем воочию сравнить плюсы и минусы уже не двух форматов с потерями, а ажно трёх!

Джек Арчибальд (Jake Archibald) из команды Google Chrome рассказывает об особенностях использования AVIF и отмечает не только преимущества, что так любят делать в лагере бездумного использования webp, но и недостатки и отношение к форматам со стороны пользователя. Например, почему загрузка JPEG при большем чем у других форматов размере кажется быстрее?

Сравнением JPEG, WEBP и AVIF дело, впрочем, не заканчивается.

В статье огромное количество как простых примеров, так и технических подробностей.

Читайте и приходите обсуждать: https://jakearchibald.com/2020/avif-has-landed/

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

#заметка дня
#css #html #adblock

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

Секрет проблемы прост: блокировщики рекламы.

Они следят за ключевыми словами в тексте и классах HTML-компонентов. Если вы выбрали один из следующих классов для элемента:
adv
advert
advertisement
banner
banners
— вам конец.

Блокировщик рекламы не будет разбираться, что adv это advantages, а не advertisement. Будьте осторожны.

Более полный лист классических сокращений можно полистать тут: https://easylist.to/easylist/easylist.txt

tldr: почти всё — пресловутый ad.

Это простое правило слишком легко забывается, а вот последствия могут быть совершенно неожиданными. Мы как-то раз писали админку ротатора рекламной сети и… ну вы уже догадались, к какому коллапсу это привело.

#статья #browsersync #инструмент

Итак, представим себе вполне типичную во фрилансе ситуацию: “Добрый день, у нас есть сайт, но нет мобильной версии/нужно поменять дизайн шапки/подвала/заменить шрифты/поиграть с логотипами/продать барахлишко/спрятать золотишко”. Кто делал — непонятно. Как разворачивать у себя на машине — тем более не ясно. Может там самописная CMS или, того хуже, Вордпресс. Час на работу, день на создание окружения. Но не отказываться же от заказа, если всё, что предстоит сделать — это немного ковырнуть стили и скрипты, да залить на FTP, не правда ли?

Написал немного о том, как чинить практически любой сайт локально не разворачивая его у себя. Это не лонгрид, но слишком длинно для канала. Переходите на наш Телеграф: https://telegra.ph/Hirurgiya-sajtov-po-zhivomu-09-14

TLDR: Browsersync.io в режиме прокси-сервера.

Не написать об этом событии нельзя, но и писать одно и то же весьма глупо. Опять же — Defront :)