#видео дня

Если на кого и стоит подписаться в этом вашем ютубе (ну, помимо Виталия Киренкова, конечно 😜 ) — это ребята из команды Keyframers.

Последнее время они редко выкладывают стримы, но и того, что есть — очень даже хватает.

Кому красиво налипающих бумажек? Их есть: https://www.youtube.com/watch?v=Fdq95qVG7F4

Или техника FLIP, позволяющая достичь высокой производительности анимаций: https://www.youtube.com/watch?v=aDmmj4a_7iI

Ещё, пожалуй, стоит Юрия Артюха упомянуть. Но он по WebGL: https://www.youtube.com/user/flintyara

#youtube #css #animate #webgl

#фишка дня

Есть такая новомодная штука в браузерах современных, Picture-in-picture (как на телевизоре твоего бати). Так вот.

В общем, любое видео, вставленное просто через тег video, может быть переведено в PiP-режим, если иное не указано в настройках.

Ладно, если это контент. А если фон?

К счастью, на все есть атрибут! И название ему disablePictureInPicture.

Правда, в Firefox чот не работает :(

https://w3c.github.io/picture-in-picture/#disable-pip

Mozilla решили, что они выше этого: https://bugzilla.mozilla.org/show_bug.cgi?id=1611831

#html #video

#ссылка дня

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

Теперь же Скотт снова нарисовал подобный комикс. В доступной форме объясняющий людям, почему им не нужен Chrome и как он сделал мир хуже.

Все просто: https://contrachrome.com/

Хорошее чтиво на вечер.

#chrome #google

#статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal

#фишка дня

Как проинспектировать элемент, появляющийся только при наведении мыши или исчезающий после какого-то промежутка времени?

1. Открыть devtools
2. Инициировать появление элемента
3. Нажать F8, чтобы поставить исполнение на паузу
4. …
5. PROFIT!!11

#chrome #devtools

#статья дня

С 54000 звёзд на GitHub до нуля за одно мгновение?

HTTPie расскажет и покажет, как!

https://httpie.io/blog/stardust

На самом деле, всё до обидного просто: владелец репозитория по-ошибке сделал его приватным.

Мораль? Будьте внимательны.

Впрочем, ребята уже набрали обратно 18000 звёзд. Свежих, с пылу с жару. Что, в общем, хорошо.

Заодно в статье предложены интерфейсы, предполагающие предотвращение подобных ситуаций.

Есть перевод на русский, кстати: https://habr.com/ru/company/skillfactory/blog/662155/

#github #rest #api #httpie #tools

#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с 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