#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material

#фишка дня

Вы когда-нибудь задумывались о том, что кнопки на вашей клавиатуре работают по-разному?

Ладно, это глупое предложение. Естественно, все разные.

Но вот такое дело: нажать на кнопку можно клавишей ввода, а можно — пробелом. Есть ли разница?

Оказывается, есть.

Системная кнопка, например, отправки формы (submit) по-умолчанию сработает на событии keydown если во время фокуса вы нажали Ввод. И событие keydown будет вызываться так долго, сколько будет зажата клавиша.

А вот если нажимали пробел — то кнопка сработает на событии keyup. То есть, когда пробел будет отпущен.

Что это значит на практике?

Что зажав пробел, есть время подумать и убрать фокус табом. А с вводом так не прокатит.

Будете делать свои обработчики кнопок — не забывайте о такой мелочи. Это системное поведение.

Спасибо, Adrian Roselli.

#js #button

Народ, у многих так? Чо происходит вообще…

#заметка дня

Если вы работаете с TypeScript, то не может не замечать, что постоянно типизировать события может быть мучением. Тип события, таргета, значения... Как же быть? Можно как-то перестать повторяться?

Ответ прост, подписчик @glebcha предлагает служебный тип!

import * as React from 'react';

type PaymentMethodKind = 'credit_card' | 'direct_debit'

interface OverrideEventValue<E = HTMLElement, V = string> extends React.ChangeEvent<E> {
target: EventTarget & E & { value: V }
}

const handleChange: React.ComponentProps<'input'>['onChange'] = ({ target }: OverrideEventValue<HTMLInputElement, PaymentMethodKind>) => {
const paymentMethod = target.value;

console.log(paymentMethod);
}

Красиво, декларативно, удобно.

Ну и куда же без ссылки на TS playground.

Ждём контрпредложения в комментариях :)

#ts #typescript #react

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

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper

#фишка дня

Пользуетесь VS Code и хотите упросить себе жизнь ещё больше?

Say no more!

Берёте такие и пишете вокруг какого-то куска кода комментарии:

// #region
bla {
  blu;
  ble;
}

foo {
  bar;
  baz;
}
// #endregion

И вуаля, весь этот означенный комментариями блок можно взять и свернуть, как функцию или область видимости в скобках.

Можно использовать при работе с, например, legacy-кодом или вообще пометить себе кандидата на вынос в отдельный модуль 🔪.

Удобно? По-моему, да. Спасибо, Nicolas Carlo.

#vscode #refactoring

#заметка дня

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

В опросе про паддинг в процентах, вкралась досадная ошибка. Правильный ответ — ширины родителя.

Давайте разбираться, откуда взялась ошибка. Для начала, конечно, хочется отметить, что отступы в процентах приходится задавать довольно редко. И тот случай, который сходу приходит мне в голову — это задание фиксированного соотношения сторон. Например, если вам нужно адаптивно выставить миниатюры в 16:9 на десктопе и в квадрат — на мобиле. Смотрим тут, собственно: https://t.me/htmlshit/496

Давайте обратимся к спецификации:
https://www.w3.org/TR/CSS21/box.html#padding-properties

Она что говорит: "The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."

Что это значит на практике? Ну, что я облажался. Поля (padding) считаются от ширины содержащего блока. И вертикальные, и горизонтальные. Кстати, отступы (margin) — тоже.

Т. е. — от ширины родителя. При этом, если ширина родителя зависит от ширины элемента, поведение не определено и целиком отдаётся браузеру.

В качестве примера, возьмём кодпен от Ильи Стрельцына: https://codepen.io/SelenIT/pen/MWrNvEz

За что ему огромное спасибо.

А вот большой пример и с позицией в процентах, и с полями и с отступами: https://codepen.io/spex/pen/jmVaPK?editors=1100

Разница сразу заметна.

Не болейте.

#css #padding #sorry

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

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

Так можно же: https://github.com/ericclemmons/click-to-component

Компонент, простите, <ClickToComponent /> встраивается в ваше приложение, тришейкается при продакшен-сборке и позволяет две вещи:

1. Прыгнуть к исходному коду выделенного компонента по Option-Click (в винде и линуксе это вроде Alt)
2. Открыть контекстное меню с пропсами компонента по Option-Right-click.

Пока не очень хорошо работает с WSL+VSCode, потому что там нет file-url на удаленный ресурс.

В остальном — милейшая штука.

P. S. Точно работает с Next.js, CRA и Vite.

#react #devtools

#фишка дня

Тут ко вчерашнему опросу в нашем чате было сказано, мол, input type=“image” это что-то из времени, когда верстали таблицами.

Не, ну так-то да. Зачем использовать картинку для отправки формы вместо нормальной полноценной кнопки, тега button? Это, кстати, касается и input type=“button”. Да так-то незачем, но всегда есть «но».

Поле ввода-картинка по-умолчанию отправляет координаты клика по ней, x и y. А если задать полю ввода атрибут name, например, pic, то будет pic.x и pic.y. Гляньте сами: https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html

Работает вообще везде, JS не требует. Можно реализовать капчу для бедных или игру. Я вот в интерактивных комиксах когда-то использовал. Или, например, для фокус-кропа одним кликом.

Понятное дело, что это лишь забавная особенность, но иногда очень даже может пригодиться.

#input #forms

#codepen дня

Talk is cheap, show me your... variable fonts!

Вариативные шрифты — штука, мощно врывающаяся в современную типографику. Поддержка вполне себе позволяет начинать использование в реальных проектах. На Google Fonts достаточное количество наборов.

А пока, давайте попробуем сделать забавный эффект: https://codepen.io/tin-fung-hk/pen/QWQLeOM

Как всегда, код простой для понимания, стоит побаловаться.

#fonts #css #js

#оффтоп дня

Точнее, ну как, оффтоп… мы все пользуемся Телеграмом и, в целом, бесят некоторые вещи всех одинаково.

Итак, сегодня на повестке дня индикатор непрочитанных реакций в чатах. Злосчастное сердечко.

Возможно, сообщение уже было вами удалено. Возможно, телега глючит. Возможно, бури на Марсе — точного подтверждения у меня нет. Но есть какое-никакое решение. Даже два.

1. Длинный тап (долгое нажатие) или клик правой кнопкой мыши на этом сердечке: “Read all reactions”.

2. На iOS нужно сделать 10 тапов по шестеренке/аватарке: “Reindex unread counters”. Там, кстати, много полезного, целое инженерное меню.

3. В Android-версии для доступа в инженерное меню необходимо сделать два длинных тапа по версии телеги в настройках, внизу. И выбрать “Read all chats” или “Reset chats”.

Пост дополняется...

И не нервничайте так.

#telegram #feature

#такое дня

Разгребал рабочие завалы и обнаружил кое-что…

Первую коммерческую работу, из 2006 года, я уже показывал: https://t.me/htmlshit/518

Пришло время показать ещё кое-что. В продакшен не пошло по разным причинам :)

Итак, 2011 год. Популярны городские сети и файлопомойки. У нас такая называлась SWAP.

У неё был интерфейс для загрузки файлов людьми, с торрентов и “осла”. Был даже веб-интерфейс для просмотра загрузок и админка для редактирования. Естественно, были и инициативные группы :)

В какой-то момент провайдер решил взять это в свои руки. Начался процесс редизайна.

Вёрстка так себе по современным меркам: ID-селекторы, нет БЭМ, нет семантики (почти). Кое-где даже атомарные классы.. Адаптива не существовало вообще.

Но вот выглядит до сих пор неплохо. И должно работать даже в IE6-7.

Встречайте:
Главная страница
Список фильмов
Страница фильма

Задавайте ваши вопросы по стилю вёрстки и кода.

Завтра скину полную реализацию таб-меню с этих страниц, если интересно :)

#life #work #retro