#статья дня

Справочная статья от Вари Степановой об использовании GitHub Packages как альтернативе NPM Registry: https://varya.me/blog/publish-packages-on-github/

Пригодится на случай, если у компании уже есть не только, собственно, GitHub, но и приватные пакеты других видов непосредственно в Packages. А их много разных: https://docs.github.com/en/packages

Ruby, NPM, Docker, Apache Maven…

В общем, уютненько.

#npm #packages

#видео дня

Правило scroll-snap, задающее поведение скролла и недавно коротко завирусившееся в твиттере в серии:

— Как Тесла/Эппл/Мета делают такие крутые карусели?
— Да с помощью scroll-snap!

…присутствует в CSS достаточно давно. С поддержкой, правда, были нюансы. Но сейчас мы аж в 2022 году, правда?

Так вот, презентация Adam Argyle описывает не только scroll-snap, но и сопутствующие свойства вроде scroll-margin: https://www.youtube.com/watch?v=34zcWFLCDIc

Слайды: https://oh-snap.netlify.app/#intro
Коллекция примеров: https://codepen.io/collection/KpqBGW

#css #scroll #snap

#ссылка дня

Кому The State of CSS’2022? Держи!

https://2022.stateofcss.com/en-US/

С пылу с жару подъехало.

Фичи, фреймворки, использование новых функций и свойств, доступность… CSS-in-JS, куда же без него. Всё то, что люди используют, что стало популярным, что потеряло в популярности, что резко взлетело.

Если вы хотели скорректировать своё обучение или не знали, за что взяться следующим — самое время хотя бы просмотреть отчёт. Есть и переводы, кстати.

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

#css #state

#такое дня

Когда понял композицию в React

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

Поскольку парни из React Router продолжают творить странное (например, они объединили React Router и роутер проекта Remix 🤮, вы теперь ставите оба), да и вообще как-то много себе позволяли на своём пути, всегда интересно посмотреть на альтернативы.

Одной из таких вполне может быть wouter: https://github.com/molefrog/wouter

+ Небольшой размер
+ На хуках
+ Тайпскрипт
+ Компонент верхнего уровня <Router/> — необязателен вообще, это значит гибкость в использовании во всех местах
+ Очень похож на RR по набору компонентов

Пробуем? Альтернативы?

#react #router #wouter

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

Так, в дополнение к JSON Hero обнаружился ещё один очень крутой и полезный инструмент для визуального представления JSON: https://jsoncrack.com/

JSON Crack не даст красивого представления отдельных полновесных сущностей, как Hero, но зато отобразит JSON в виде древовидного графа, ну или диаграммы, если хотите. Весьма удобно, если нужно быстро окинуть взглядом типы данных и связи.

Лишним не будет, короче.

P. S. Есть и тёмная тема, и desktop-вариант и возможность встраивания на сайт.

#json #graph #tree

#статья дня

Андрей Ситник проанализировал The State Of CSS’2022 и обнаружил, что 70% разработчиков не знают про цветовое пространство P3 и относительные цвета: https://2022.stateofcss.com/en-US/features/colors/

Это, конечно, ужасно. Поэтому нелишним будет упомянуть о его статье-руководстве по современным цветовым функциям (OKLCH) и почему вообще всё больше разработчиков уходит от RGB к HSL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

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

Я пропустил выход этой статьи, потому нагоняю только сейчас, вместе с вами: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Живите ярко, котаны!

#css #oklch #hsl #colors

#число дня

В дружественном чате прошло очередное ежеквартальное обсуждение разрешений макетов и экранов. Я не буду пока снова репостить свои статьи на тему, но лишь задам вопрос.

Кто догадается, что такое 1536x864 на этой годовой статистике разрешений экранов мониторов?

https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

Не знаю, при встрече угощу кофе того, кто догадается первым.

#css #resolution

#статья дня

Так, ну по поводу поста про 1536x864: многие догадались, что это 1920x1080 в режиме масштаба интерфейса 125%.

Почему это так важно? Потому что Windows 10 и 11 устанавливают 125% на всех 13” и 14” ноутбуках, с FullHD-разрешением (1920x1080). Эдакая ретина для бедных (и не очень). Пиксели плотненькие, но о FullHD уже речи не идёт. Да и информации помещается на экран чуть-чуть больше, чем у маков с их виртуальным 1440x900.

Ладно, не суть. Вы только посмотрите, какие халтурщики работают в YouTube.Music! Внимание на иллюстрацию. Треугольник Play не сбалансирован!

По-моему, это залёт. Им надо срочно читать вот это вот: https://habrahabr.ru/company/badoo/blog/333992/

Я не могу выразить словами, как меня бесят несбалансированные иконки.

#optics #eye #css

#видео дня

Что-то меня это видео, найденное Turbojedi, увлекло. Давайте немнго отвлечёмся и посмотрим, как создавались системы букинга авиабилетов: https://youtu.be/8_t41xvPp1w

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

Абсолютно проклято :)

#video #aero

#игра дня

Я в курсе, что вы у нас бронтозавры и отписываетесь пачками, когда я выкладываю очередную игру для закрепления уровня разработки, но я продолжу это делать!

Потому что мне они нравятся :)

Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)

https://css-speedrun.netlify.app/

Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25 :(

#css #game

#ссылка дня

Помните, мы звёзды шрифту Martian Mono набирали, чтоб Рома приоритизировал кириллицу?

Пацан сказал — пацан почти сделал же, цитирую: «Ура, доделал базовую кириллицу для всех шрифтов!

Следующий шаг — балансировка визуального веса букв, чтобы всякие Жж и Шш не чернили в наборе».

Значит, скоро пробуем!

Но вот какая ещё новость-то: шрифт Martian Mono теперь есть и на Google Fonts: https://fonts.google.com/specimen/Martian+Mono

Надеюсь, Рома расскажет о процедуре одобрения в каком-нибудь треде, ходят слухи, было непросто.

По-моему, шикарно. Не забываем о поддержке :)

#fonts #martian #mono

#такое дня

А нас замело.

#фишка дня

Короче, рассказываю.

Открываете вы такие ваши девтулзы в Chrome, нажимаете там Cmd-Shift-P (Ctrl-Shift-P) и видите такие панель команд. Ну типа как в Sublime Text, VS Code и прочих ровных редакторах.

И вот там, например, можно сделать скриншот всей страницы, вместе со скроллом, да-да! Просто ищете название нужной вам команды.

А чтобы не теряться и вообще побольше узнать о возможностях девтулзов Chrome, идите сюда: https://www.canidev.tools/capture-full-page-screenshot/chrome

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

#devtools #chrome

#статья дня

Немного восьмибитности не желаете?

Я не так давно выкладывал целый сайт в стиле NES, а тут на глаза попалась статья о том, как сделать скруглённые уголки на блоках немного менее… кхрм, скруглёнными.

В стиле восьмибитных приставок: https://lukeb.co.uk/blog/2022/01/17/pixelated-rounded-corners-with-css-clip-path/

На самом деле в статье очень много информации о том, как использовать clip-path, рекомендую.

Ну и чтобы совсем куце не было, давайте ещё восьмибитных прелоадеров на чистом CSS: https://codepen.io/t_afif/full/PopjYgx

#css #clippath #8bit #preloader

#ссылка дня

Типизирование React-компонентов, рефов и хуков может обернуться большой болью. Особенно если в первый раз. Но к счастью, у нас есть GitHub, который добрые люди используют не только как хранилище кода, но и как идеальный универсальный блог :)

Встречайте: https://github.com/typescript-cheatsheets/react

Буквально, из описания: «Cheatsheets for experienced React developers getting started with TypeScript».

Впрочем, у ребят есть и более привычная веб-версия, разбитая на секции: https://react-typescript-cheatsheet.netlify.app/

Мне, например, недавно понадобилось сделать полиморфичный компонент, который в зависимости от условий мог становиться то ссылкой, то кнопкой (какой прекрасный повод для холивара). Я не нашёл решения непосредственно здесь, зато нашёл в обсуждениях и PR. Что тоже показывает, как удобен GitHub для коллективного блога.

В общем, всем типов, котаны.

#typescript #react

#новость дня

Наконец-то в каталоге npm появилась возможность посмотреть код пакета! Даже с подсветкой.

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

Впрочем, к библиотеке на скрине понятие «говнокод» неприменимо 😉

#npm #node

#статья дня

Нельзя было не затронуть эту тему. По новостным ресурсам пронеслось, что AI-инструменты для художников начали запрещать или ограничивать на известных сервисах. Что художники начали объединяться против и так далее.

Но как дела обстоят на самом деле? Может ли нейросеть, условный Midjorney, заменить иллюстратора уже сейчас?

Короткий ответ — и да, и нет. И Злые Марсиане попытались дать нам ответ на этот вопрос в своей статье: https://evilmartians.com/chronicles/midjourney-vs-human-illustrators-has-ai-already-won

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

#midjorney #neural #picture

#статья дня

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

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

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

#svg #viewbox #clippath #gsap

#заметка дня

#js #focus #scroll

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview