​​#статья дня
#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 #noscript #base64 #cursors

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

https://omatsuri.app/

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

Помните (конечно же нет 😅) моё нытьё по поводу максимально идиотского автодополнения в текстовых редакторах и IDE? Ну то самое, когда тебе вместо width дополняют widows, а вы ни в зуб ногой, о чём это: https://news.1rj.ru/str/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-javanoscript-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 :)

Команда разработчиков Moment.js официально объявила о прекращении развития библиотеки.

Moment.js — самая популярная библиотека для работы с датами и временем на сегодняшний день. Она была создана в 2011 году с прицелом на потребности разработчиков того времени. За весь период существования библиотеки её дизайн не менялся, но сообщество хотело изменений, особенно иммутабельности и переработки архитектуры таким образом, чтобы библиотека стала дружить с тришейкингом. Внесение этих изменений вызвало бы вопросы у текущих пользователей библиотеки, так как получилась бы совершенно другая библиотека. Разработчики Moment.js не захотели идти по пути Angular и разработали альтернативную библиотеку — Luxon.

С сентября 2020 года в Moment.js не будут добавляться новые фичи, не будут больше обсуждаться вопросы тришейкинга, не будет никаких мажорных изменений (это означает, что никогда не будет 3-ей версии), возможно, не будут исправляться какие-либо баги и поведенческие странности, если они будут связаны с архитектурными проблемами. Но будут исправляться все проблемы безопасности, будет обновляться база часовых поясов IANA.

Разработчики рекомендуют не использовать Moment.js для новых проектов без поддержки старых браузеров, вместо неё рекомендуются Luxon, Date.js, date-fns и js-Jode. Также сейчас TC39 работает над Temporal (современной заменой объекта Date), в которой реализуется основная масса фич библиотек для работы с временем.

#announcement #date #library

https://momentjs.com/docs/#/-project-status/

#статья дня
#css #clip #mask

Рейчел “наше всё“ Эндрю (Rachel Andrew) решила одним махом закрыть две темы: clipping и masking в CSS. Обрезка элемента по контуру и наложение маски. Они неразрывно связаны друг с другом, так что выпуск двух статей подряд был весьма оправдан.

Если с обрезкой всё достаточно понятно (рассмотрены обрезка по кругу, эллипсу, полигону (точкам) и SVG), то что такое “маска” — до сих пор у многих вызывает вопросы.

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

https://web.dev/css-clipping/
https://web.dev/css-masking/

Ну и конечно же, не забываем канонiчную статью на CSS-Tricks: https://css-tricks.com/clipping-masking-css/

​​#заметка дня

#github #ghpages #tips

При работе с Github Pages мало кто заглядывает дальше раздела quick start. И вот очень зря.

Не претендую на полный список, но есть пара вещей, которые следует понимать всем.

1. Не начинайте названия каталогов и файлов с _ (подчёркивание), . (точка), # (октоторп) и не заканчивайте их ~ (тильда). С тильды, впрочем, начинать тоже не надо. Почему? Потому что гладиолус. Точнее, Jekyll. Именно его используют GH Pages для генерации ваших страниц: https://jekyllrb.com/docs/structure/ Пример с подчёркиванием — наиболее частый, не знаю, откуда взялась мода называть каталоги так. Для сортировки, видимо. Починить это, впрочем, легко — добавьте файл .nojekyll в ваш репозиторий.

2. URL — регистрозависимы. image.jpg и image.JPG — разные файлы. Это нарушает правила обработки URL, но у GH Pages есть право считать по-своему. Причина проста: GitHub должен поддерживать как регистрозависимые файловые системы, так и регистронезависимые. Поэтому постарайтесь придерживаться одного правила в именовании.

Делитесь вашими примерами, дополним заметку.

#пятница

Вечеру пятницы — пятничная тема. Для тех кому “за”: каталог скинов WinAmp. Гордого и непобеждённого. Каждый скин — шедевр своего времени, выверенный до пикселя.

https://skins.webamp.org/

Скины можно попробовать тут же в проигрывателе WebAmp, который является визуальным и функциональным клоном того самого.

Открытый код, кстати! Кому нужна работа с аудио — рекомендую к ознакомлению.

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

В копилку к разнообразным генератором SVG-фонов (https://news.1rj.ru/str/htmlshit/399) можно прибавить ещё один бронебойный инструмент: https://bgjar.com/

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

Жаль не открытый код, посмотреть на генерацию некоторых вещей было бы интересно.

#фишка дня
#html

Минутка занимательных фактов на нашем канале.

Если в href ссылки вы укажете шестнадцатеричное число определённой длины, браузер распознает его его как набор октетов IPv4 (адрес, короче говоря, 127.0.0.1 и вот это вот всё).

<a href="http://0xacd916ae">IPv4</a>

Пример:
https://codepen.io/alinaki/pen/bGpyjoB

Не знаю, зачем это могло бы быть полезно. Экстремальная экономия байт? :)

P. S. есть древняя статья от 2002 года где таким образом обфуцировали ссылки. Ну, тоже вариант: http://www.pc-help.org/obscure.htm

Итак, в Телеграме появилась нативная поддержка тредов в чатах, а также комментариев и реакций в каналах.

Интересный вопрос — имеет ли смысл отключать группу от канала? Ведь для обсуждения насущных проблем есть более популярные места.


P. S. Оказалось, комментарии как раз к группе и привязываются, образуя независимые треды в основном потоке. Это не всем и не всегда удобно. Будем наблюдать, в общем.

https://vc.ru/social/162929-kommentarii-v-telegram-kanalah-vse-chto-nuzhno-znat

#codepen дня
#css #html #hamburger #menu

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

https://codepen.io/oliviale/pen/gKParr

Автор: Olivia Ng. Вообще, смело могу рекомендовать зафоловить её на Codepen, весьма свежие идеи и решения имеются в достатке.

Проверка комментариев

#ссылка дня
#gsap #css #js #scroll #animation

GreenSock, создатели широко известной библиотеки для анимации GSAP, решили закрыть разом все вопросы по работе со скроллом. Эффекты? Нате. Анимация? Нате. Параллакс? Их есть у меня. Анимировать SVG? Без проблем. Даже WebGL завезли.

В общем, они просто взяли и выложили подборку различных эффектов анимации по скроллу, добавили к каждому видео-предпросмотр и ссылку на CodePen.

Меньше слов, больше ссылок:

https://greensock.com/st-demos/

P. S. Библиотека GSAP имеет весьма развесистое лицензирование, но условия бесплатного использования покрывают даже некоторые коммерческие применения. В любом случае, идеи — бесценны.

​​#ссылка дня
#css #focus #a11y

Ну что же, мы ждали этого с момента первого явления CSS народу.

Не только же меня одного раздражает фокус на кнопках, не правда ли? Да, он помогает при навигации с клавиатуры, но он вообще не нужен по клику.

Создатели браузеров (особенно Firefox) делают всё, чтобы усложнить разработчикам сбросить стили фокуса по-умолчанию. Но заказчики-то, оказывается, тоже фокус не любят. И дизайнеры.

В итоге начинается… борьба умов. Попытки скрыть фокус по клику, но оставить по Tab-у. Скрипты, стили, лишние элементы.

На помощь приходит псевдокласс :focus-visible! Уже доступен в свежем Chrome 86, а в Firefox существует под именем :moz-focusring. Что он делает? Даёт доступ разработчику к управлению необходимостью применения стилей фокуса!

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

Пример: https://codepen.io/matthiasott/pen/LYZEwBJ

А и собственно статья Маттиаса Отта (Matthias Ott): https://matthiasott.com/notes/focus-visible-is-here

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

#codepen дня

#css #transitions #keyframes

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

Впрочем, куда там без, кхрм, дискуссий.

Причина спора банальна: то, что одним кажется излишне сложным, другие видят как возможность. Ну и какая то часть из этих “других” всегда заявит о том, что тут даже скрипты не нужны и одних стилей достаточно. И, собственно, доказывают это:
https://codepen.io/cobra_winfrey/pen/OJXJeod

Тред: https://twitter.com/cobra_winfrey/status/1314040380908855297

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