#фишка дня
#css #keyframes #animation

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

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

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

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.

#статья дня
#css #w3c

На сайте increment.com вышла отличная статья о том, почему CSS получился… таким.

Технический директор W3C Крис Лиллей (Chris Lilley) рассказывает о причинах некоторых неожиданных, необычных и откровенно странных решений, которые привели CSS к тому виду, что мы имеем сейчас.

https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/

Испытываю невыносимое желание ввести рубрику “#codepen дня” для интересных находок. Но таких находок в течение дня может быть столько, что проще ввести “#codepen недели”.

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

https://codepen.io/ricardoolivaalonso/pen/ExPpgqG

Была бы вам интересна такая рубрика в перерывах между статьями? А заодно, хотели бы вы узнать больше о процессе создания подобных вещей?

Господа, ну вы поняли.

Очень приятно, что вас уже 300 человек. Дальше — больше.

На подходе статья о весьма неожиданном решении одной очень раздражающей проблемы. Оставайтесь на связи.

#заметка дня
#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/