#фишка дня

Если вам знаком не только JavaScript, а ещё один из языков C-семейства (привет, родной универ), то наверняка вы использовали библиотечную функцию printf:

printf (“It’s %d %s", 10, "here!");

Занимается она тем, что выводит форматирует передаваемые ей аргументы согласно заданному правилу. Нужно вывести целое десятичное число? Указываете %d. Строку? %s. На простом языке – это плейсхолдеры.

Так вот, наша любимая консоль тоже поддерживает подобные спецификаторы формата!

%s - строка
%i or %d - целое число (будет преобразовано)
%f - число с плавающей запятой
%o - выводит элемент DOM
%O - выводит JS-объект

И вишенка на торте: %c позволяет передать CSS выводимому тексту! В формате инлайн-стилей.

#printf #console #js

#статья дня

Вдогонку к различным обучающим играм и конструкторам (например, https://cssgridgarden.com/), рекомендую ещё один полезный ресурс: https://fjolt.com/article/a-guide-to-css-grid

Это статья про CSS Grid, но с интерактивным генератором кода. Поэтому, вполне логично добавить хэштег #инструмент.

Довольно кратко, идеально для быстрого старта.

#css #grid #generator

#баг дня

Есть очень интересное свойство, из рабочих черновиков: overscroll-behavior. За что оно отвечает?

Ну, например, есть у вас страница и диалог чата. Вы скроллите диалог, доходите до конца ленты — и страница тоже начинает прокручиваться. Не очень приятно. И это можно решить, установив на диалог правило overscroll-behavior: contain.

А вот если установить overscroll-behavior: none; на html, можно запретить «pull-to-refresh» («потяните чтобы обновить»).

Сейчас будет сложно.

Баг дня в том, что спецификация здесь недостаточно чётко описывает взаимодействие прокрутки документа и доступной области экрана (вьюпорта, viewport).

Все остальные, относящиесяк к скроллу правила (scroll-padding, scroll-snap-type, scroll-behavior), пробрасываются (propagate) из документа во вьюпорт только из :root-элемента. Т. е. из html.

В итоге Safari и Chrome ожидают установки overscroll-behavior на body. Но это неправильно и скоро будет исправлено.

В общем, ситуация такова: ставьте overscroll-behavior и на html и на body. Тогда в будущем всё будет хорошо.

#css #html #scroll #overscroll

#codepen дня

Модалка на чистом CSS? Да ещё с оверлеем? Реальность!

https://codepen.io/bramus/pen/KKaPJdr

Ага, Ван Дамм. Опять.

Реализована путём вкладывания dialog в details-summary блок. Оверлей же — реализован классическим способом, фиксированный псевдоэлемент.

Прекрасно.

#css #modal #details #dialog

#ссылка дня

Ищете анимированных эффектов появления? Их есть у меня!

https://www.transition.style/ — библиотека эффектов появления/скрытия элементов, в основе которой лежат clip-path-анимации. На каждый можно сослаться, чтобы продемонстрировать коллеге.

И естественно, код можно настроить и тут же быстро скопировать.

#css #animation #library #clip #clippath

#статья дня

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

Не надо так.

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

1. Сбросить стили браузера
2. Унифицировать с a
3. Добавить активных состояний (:focus и :active)
4. Правильно обработать клавиатурную навигацию (:focus-visible) дабы не раздражать нежные фибры души дизайнеров, но уважать остальных людей.

В общем, к делу. Сама статья: https://fvsch.com/styling-buttons

И готовый результат (я переложу его из статьи в CodePen, добавив стили поддержки :focus-visible): https://codepen.io/alinaki/pen/LYxbvOw

#css #button #focus #focusvisible

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

Не нравятся create-react-app или дефолтные консольные инструменты Vue.js, но конфигурировать Webpack тоже не нравится?

Да, конфигурирование может быть простым накидыванием плагинов, а может потрепать нервы.

Но для старта можно воспользоваться https://createapp.dev/ и радоваться.

Выбираем базу, транспилятор, тестовую среду, загрузчики стилей, накидываем оптимизаций – и 💥 вы уже фронт-опс!

#webpack #snowpack #react #vue #svelte #tool

#заметка дня

На днях я узнал (точнее, глубоко вспомнил) одно интересное свойство атрибута contenteditable. Если кто не знает, этот атрибут – всё ещё лучший способ максимально быстро сделать редактор текста с форматированием. WYSIWYG, короче.

Так вот, свойство это заключается в том, что браузеры до сих пор (а на дворе 2021 год, напомню) по-разному устанавливают параметры по-умолчанию. Chrome и Safari ставят перевод строки, оборачивая текст внутри блочных и флекс-элементов в div, строчным ставит br, а Firefox просто ставит br вообще везде. IE (мир праху его) использовал p. И дальше пошло-поехало.

К счастью, это всё исправляется простым методом document.execCommand: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

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

#html #javascript #contenteditable

#ссылка дня

Я не фанат подборок типа «10 лучших плагинов для…», но эта – меня покорила.

Сборник из 71 шрифтового эффекта на CSS (JS тоже есть, но мало где). Более того, многие из этих эффектов часто встречаются в различных проектах (игра с тенями и различные виды подчёркиваний, например). Есть даже реализованные на CSS шрифты.

В общем, определённо стоит вашего внимания: https://freefrontend.com/css-text-effects/

Да и весь портал неплох.

#css #font #fonts

#codepen дня

Сегодня у нас кодпен от участника сообщества @css_ru.

Передаю слово автору, @akrogu:

Рин Нохара из аниме «Наруто»:
https://codepen.io/ahmed364051/details/mdOYrRp

Многие из нас в детстве смотрели аниме «Наруто», и вдохновлялись разными образами этого аниме будь это Наруто, Саске, Итачи, но у меня в памяти навсегда останется образ простой и в то же время непосредственной девушки, которая исполняла роль миротворца в команде номер 7, любовь 90% мужчин, смотревших аниме "Наруто" — Рин Нохара ❤️

При создании Рин я использовал ванильные HTML и CSS так, как хотел создать интерес в первую очередь у новичков к web-разработке посредством рисования на css, для самодокументирования было использовано дублирование селекторов.

P.S. #сsschallengeживи

Присылайте ваши работы в @css_ru или @htmlshitchat.

#заметка дня

В общем, есть такая старая как мир техника защиты форм от ботов и спама: создать визуально скрытое поле ввода. Предполагается, что пользователи в него текст не введут, поскольку не увидят, а боты — как раз введут, глаз-то у них нет.

После чего на сервере вы проверяете форму и отсекаете данные, если поле было заполнено. Вот так вот просто.

Но есть нюанс. Даже несколько.

Скринридеры всё равно уведомят слабовидящего пользователя о таком поле, а стоит вам добавить, например, атрибут aria-hidden, как бот сходу «догадается».

Да и в целом, боты нынче не на коленке пишутся, зашифруете название класса – считают стили.

В сухом остатке, я бы порекомендовал настраивать полновесную captcha. Предложенное решение хорошо, когда у вас ну совсем времени нет, но нужно выкатить хоть что-то.

#captcha

#фишка дня

Одной из самых раздражающих особенностей SVG является работа с текстом. Она безумно сложна и нелогична.

Да, если преобразовать текст в кривые, можно творить чудеса (например, имитировать рукописный ввод: https://codepen.io/alinaki/pen/qoPRRE), но это лишает нас возможности изменять текст по желанию. Мягко говоря, неудобно.

Да, есть элемент text. С его помощью можно поменять размер шрифта, указать координаты размещения, трансформировать. Но вы даже фон не зададите таким образом!

А ведь так хотелось бы иметь возможность встраивать в SVG целые куски вёрстки…

Так можно же 😉

На помощь приходит элемент foreignObject!

Он фактически позволяет встроить в SVG любой другой элемент! И задача поставить фон тексту уже не кажется такой безумной, а наоборот, становится элементарной.

Важным трюком является установка высоты и ширины в 1 пиксель, при этом обязательно включение overflow: visible в CSS. Тогда вам не придётся задумываться о размерах встраиваемого объекта вообще. Иначе – обрежет.

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

Чтобы вам не было скучно, я подготовил небольшой CodePen: https://codepen.io/alinaki/pen/PoWjdrY

На нём изображена карта России с парой городов. При наведении на город раскрывается флажок с его названием.

К сожалению, стоит установить любое значение transform или transition на содержимое foreignObject — и Safari просто перестаёт отрисовывать его. Пришлось сбросить. Ищу в трекере баг по этому поводу.

Поддержка? Ну в IE не работает, как обычно 😅 А в Safari и Firefox есть пара багов, связанных с переходами и анимацией. Но все решаемы.

#svg #foreignobject #text

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap

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

В процессе создания PDF на сервере или прямо в браузере немало боли. И далеко не всегда можно убедить заказчика обойтись режимом печати.

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

Во второй версии изменён процесс рендера и сама она переписана в функциональном стиле, но нас, как пользователей, интересует не это.

А интересует нас появление SVG, улучшенная поддержка CSS и новый API на хуках для использования в ваших компонентах.

Думаю, воспользуюсь ей в ближайшем проекте.

#javascript #react #pdf

#фишка дня

Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.

Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (:hover), на фокус (:focus), на нажатие (:active).

Так вот, если с первыми двумя состояниями всё ясно, то нажатие – процесс мгновенный, т. е. длится явно меньше базовых 300 мс. Ваша анимация просто не успеет отыграть! Разве только вы не задержите кнопку мыши или тачпада нажатой.

И решение весьма неожиданное: :not(:active).

Внезапно, не правда ли? Ведь это, по факту, состояние кнопки по-умолчанию.

Так в этом и суть!

Хотим мы, например, стартовать пульсацию по клику. Сам эффект создаётся при помощи по-умолчанию скрытого псевдоэлемента, а секрет в том, что :not(:active) – это самое состояние перезапускает.

В общем, статья по поводу: https://codeburst.io/why-you-should-style-the-wrong-button-state-d4e4c2db8f7e

И CodePen, поскольку автор решил ограничиться gist’ом: https://codepen.io/alinaki/pen/wvgeWxY

#css #button #click #animation

#фишка дня

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

Джейк Арчибальд предлагает решение на SVG и foreignObject: https://jsbin.com/yiwipay/edit?html,css,output

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

#svg #img #foreignObject #crop

#codepen дня

Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.

Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP

Вдохновение штука такая.

Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагаются.

#gsap #coverflow #carousel

#заметка дня

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

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

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

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

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

#css #table #keyboard #focus #a11y

#заметка дня

Настало время просить прощения и извиняться™.

В посте про правильные анимации по клику на кнопку с использованием трюка :not(:active) я приложил видео с сердечком, а реализовал лишь эффект пульсации. Как-то неудобно получилось.

Исправляю ситуацию, ловите именно то, что было задумано изначально: https://codepen.io/alinaki/pen/RwKQpzV

По пути для кодирования SVG я воспользовался инструментом от Йоксель: https://yoksel.github.io/url-encoder/. По большому счёту, это лишь encodeURIComponent().

Кодированные таким образом SVG можно использовать в background, border-image или mask. Без демонстрации тут тоже никуда: https://codepen.io/yoksel/full/WNrLpYW

Это явно не последняя заметка про стилизацию кнопок, дам подсказку к следующей: boop.

#инструмент #css #button #svg #click #animation

#ссылка дня

Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/

«SVG в вебе. Практическое руководство»

В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.

И каждый раз ответы – одинаковые. И не всегда верные и однозначные.

Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.

#svg #sprite #css