#фишка дня

Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).

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

Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.

Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv

Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.

И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ

Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.

Никаких рантаймов, красота.

#css #sprite #animation

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

#фишка дня

...для маководов.

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


defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock


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

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

P.S. а ещё доком можно управлять с клавиатуры, нажмите fn + ⌃ + F3 и дальше стрелочками.

P.P.S. есть разделитель поменьше!


defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="small-spacer-tile";}'; killall Dock


#mac #dock #feature #бородач

#расширение дня

Что, котаны, думали, я буду тут сегодня про выход Bun 1.0 заливать?

Думаю, не. Не сегодня. Я смотрел на Bun очень давно, больше года назад, вот: https://t.me/htmlshit/1305

Там всё, что нужно знать. Быстро, удобно, не на V8. А в следующий раз — когда сам попробую в чуть более реальном проекте.

Так какова же тема сегодня? Пытка через решение задач на LeetCode?

Звучит странно, но именно такое расширение для Chrome сегодня прислали подписчики. Называется LeetCode Torture: https://chrome.google.com/webstore/detail/leetcode-torture/clbhgfneekiimoaakhhdjimgnnbnfbeh?hl=en

Суть? Оно не даёт открывать веб-сайты, пока не будет решена хотя бы одна задача с LeetCode. А? Ну? Как вам?

P. S. Не понимаю ваших реакций, это не реклама. Реклама попозже.

#leetcode #chrome #extension

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

Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.

Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей. И хотелось бы их использовать в своем корпоративном корыте.

Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.

Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌

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

#react #component #бородач

#такое дня

Тут такое дело, наткнулся на пост в, простите, 𝕏, цитирую: "Айти сообщество может сколько угодно переобуваться в прыжке, переименовывая мастеры в мейны и блэклисты в блоклисты, но в CSS всё ещё есть именованный цвет indianred, и это цвет кожи индейцев".

Давайте чуть разберёмся, вот пример использования: https://codepen.io/alinaki/pen/abPWmNy

Я специально не стал выносить его в иллюстрацию, чтобы каждый себе сам его представил.

Кажется, уже сходу можно догадаться, что это что угодно, но не цвет кожи. На самом деле, он и к индейцам отношения никакого не имеет 🫠

Это цвет почвы, богатой латеритом. В Индии!

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

Впрочем, фирма Crayola, когда-то придумавшая восковые мелки, переименовала Indian Red в ореховый ровно по вышеозначенной причине...

А, ну пост был бы неполон без ссылки на обсуждение рабочей группы CSSWG, как раз об этом: https://github.com/w3c/csswg-drafts/issues/5284

Комментарии там очень интересно почитать, на самом деле. Про статистику использования там тоже есть. И про Навахо

#css #color #indianred

#расширение и #статья дня

Вот эта вот странная блок-схема на иллюстрации — сгенерированное VS Code-расширением ReacTree дерево компонентов одной из частей нашего продукта.

Ссылка: https://marketplace.visualstudio.com/items?itemName=ReacTreeDev.reactree

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

Расширение сыроватое. Например, оно пока не умеет в условный рендеринг и обрывает построение. Ну, спасибо, хотя бы, что не падает. Хотя схему React Router-а оно понимает прекрасно (на иллюстрации).

Помимо построения дерева, показывает пропсы компонентов. Может быть удобно. Желаю им всяческого развития, короче.

А ещё они заодно написали статью о том, как разрабатывать расширения VS Code, использующие WebView: https://medium.com/@michaelbenliyan/developers-guide-to-building-vscode-webview-panel-with-react-and-messages-797981f34013 Возможно, кому-то будет полезно.

Делитесь схемами, котаны 🙂

#react #tree #vscode #extension

#фишка дня

Крупная! ...для ngrok 🫠

TL;DR Теперь можно сделать локальные порты доступными снаружи в процессе разработки и быстро показать процесс коллеге или заказчику прямо из VS Code!

Если кто не знает, ngrok это средство для пробрасывания (туннелирования) ваших локальных портов наружу, с предоставлением уникального домена. Вот тут я писал: https://t.me/htmlshit/438

Так вот, Microsoft решила отобрать у ngrok значительную долю пользователей, встроив ровно эти же возможности в... VS Code! Прямо в панель состояния.

Вот, глядите, августовский список изменений: https://code.visualstudio.com/updates/v1_82#_builtin-port-forwarding

И статья с подробностями, как использовать: https://code.visualstudio.com/docs/editor/port-forwarding

Порт может быть публичный, а может — приватный. Ну и требуется авторизация через GitHub.

В общем, MS продолжает делать нам хорошо. Но, возможно, ngrok-у станет чуть хуже.

P. S. С Днём программиста, котаны и котанессы!

#vscode #ngrok #port #forwarding

#заметка дня

Как же у меня бомбит сейчас, вы бы знали. Но обо всём по порядку.

Кому-то из разработчиков JetBrains показалось полезным дать возможность скомпилировать все TypeScript файлы разом в JavaScript и положить их рядышком с оригиналами.

Да, я не шучу, одним кликом мышки можно скомпилировать вообще все TS-файлы в вашем проекте. При этом, компилятору абсолютно по барабану, смешанный у вас проект или нет. Ну и, заодно, на macOS ему ровно так же по барабану на регистр названий файлов.

И, естественно, класс Config.ts перезаписал собой файл конфигурации config.js 🫠

Хвала небу, в PhpStorm есть локальная история файла, потому что конфигурация, естественно, исключена из Git.

Моя жопа давно так не горела. Это ну вообще как? Зачем? Кому это может быть полезно?! Ну типа, должна же быть хоть какая-то веская причина так делать?

Я сейчас отдышусь и передам свои впечатления команде поддержки JetBrains, которые помогают нашей компании. Но не сразу, точно не сразу...

#typescript #jetbrains #надмозг

#фишка дня

Позавчера вышел Chrome 117. И по его поводу надо бы написать пост побольше. Ну хотя бы по той причине, что там появились сабгриды!

Наш властелин гридов, думаю, будет рад.

CSS Subgrid были внедрены в Firefox 2 декабря 2019 года, а в Safari — 11 сентября 2022 года. Я специально так растягиваю даты, чтобы вы насладились отставанием Хрома от недооценённых конкурентов.

Edge ещё тупит, но он по факту тоже Хром на свистоперделках, так что скоро, скоро.

Ну а фишка дня — наконец-то для понимания HTTP-кодов вам не придётся смотреть на котов! Какой каламбур, ня.

Они теперь прописаны прямо в описании запроса на вкладке Network.

Почему это важно?

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

Всем коданы, котаны!

#http #chrome #subgrid

#статья дня

Одно из самых интересных чтений на свете — это как принимались те или иные решения в уже готовом продукте.

Понятное дело, что новые проекты, т. н. greenfield, писать легко. Перед тобой чистый лист, гуляй не хочу, экспериментируй. Но потом...

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

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

И вот поэтому статьи вроде "Breaking React Query's API on purpose" — это настоящая золотая жила. Кто бы мог подумать, что такие простые вещи как события onSuccess и onError на самом деле могут приводить к проблемам и их придётся объявлять устаревшими?

Рекомендую не только пользователям React Query.

#react #query #js #бородач

#игра дня

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

Итак, встречайте: Guess CSS!

https://www.guess-css.app/

Возможно, это максимально быстрый способ прокачать своё понимание стилей, их композиции и каскада.

Делитесь результатами, котаны!

#css #game #quiz #бородач

#ссылка дня

Чем отличается alt от title? А border от outline? А *.d.ts от *.ts? А for..in от for..of? А display: none от visibility: hidden? А slice от splice?

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

Да весь фронтенд это нагромождение похожих по написанию или даже по сути вещей. Как разобраться?

И тут нам поможет проект https://thisthat.dev/. Он буквально проходится по таким скользким определениям или сущностям и разбирает каждый из них.

Проект открытый, предлагайте ваши == и ===.

#javascript #html #css #this #бородач

#фишка дня

КДПВ относится к теме поста лишь по одной простой причине: это моё состояние после беседы.

Суть проблемы: на неком корпоративном ресурсе подгружается некий внешний отчёт. Логиниться в сервис надо отдельно. Отчёт подгружается в iFrame заранее заданной высоты.

Что делают уважаемые разработчики? Запихивают уведомление о том, что надо залогиниться, под этим самым iFrame. И всё, что я вижу — это белый экран и надпись "Недостаточно прав".

На мой совсем не немой вопрос, ответили: "Поскроллить же можно" 🫠

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

К чему это я? Начиная с Chrome 115 у нас есть возможность забавным образом показать, что элемент скроллится! Через Scroll-Driven Animation API.

Задать стили или условные стрелочки, вот: https://codepen.io/bramus/pen/LYMjXpo

Подробнее в посте Ван-Дамма, который Брамус: https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/

#css #scroll #animation

#статья дня

Полку шикарных визуализаторов прибыло!

Итак, помните мои мучения с игрой по кривым Безье? Или обучающий инструмент по SVG?

Так вот, теперь есть просто шикарное интерактивное руководство от Richard Ekwonye (я даже пытаться это транслитерировать не буду)! Вы только посмотрите, какава красата: https://blog.richardekwonye.com/bezier-curves

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

В общем, если не почитать — то хоть зайдите подёргать за рычажки 🙂

#bezier #svg

#красивое дня

Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеку вот такое: https://codesandbox.io/s/enter-portals-9m4tpc

Я уже минут двадцать просто залипаю.

А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial

Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.

#webgl #бородач

#статья дня

TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.

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

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

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

Для этого у нас есть свойство priority в методе fetch, атрибут fetchpriority для изображений и async и всё тот же fetchpriority в загрузке скриптов.

А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints

Пока только в Chrome и уже очень скоро в Safari: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API

#fetch #priority

#статья дня

В сервисах коротких видео очень популярен формат, подобный моему "#фишка дня".

И я наткнулся на то, что было названо автором "скачущими цифрами", и как такое исправить. В процессе было объяснено, что это так называемое свойство шрифта oldstyle nums (на иллюстрации).

Так вот, к чему это. Я подумал, что раз есть подобное свойство, значит их должно быть много и они должны быть как-то стандартизированы...

И, да! Это всё называется OpenType Features и их просто какое-то невозможное количество!

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

И вот к самой статье, она от Adobe и посвящена синтаксису свойств OpenType в CSS: https://helpx.adobe.com/fonts/using/open-type-syntax.html

Есть на русском: https://helpx.adobe.com/ru/fonts/using/open-type-syntax.html

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

Всем st, котаны!

#opentype #font #features

#ссылка дня

Компании и корпорации предоставляют огромное количество инструментов для разработчиков. В том числе — бесплатных.

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

Парни с ресурса https://free-for.dev/ ставят своей задачей предоставить максимально полный список SaaS-проектов, бесплатных для разработчиков или предоставляющих бесплатное использование на определённых условиях.

Список нарочно ограничен сервисами, иначе был бы практически бесконечен 🙂

Конструкторы, шрифты, хостинг, CDN, платформы для микросервисов, лоу-код и ноу-код решения.

В общем, хороший список. Кто-то вывалил все свои закладки 🙂

 #saas #paas #free

#видео дня

Так, котаны. Стартовала премьера документалки про TypeScript! Вот прямо щас началось.

Идем и смотрим, ага. Кто не смотрит — тот не котан.

https://youtu.be/U6s2pdxebSo?si=fUdbfmInzIOdMEd0