#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url

#игра дня

Учить флексбокс? Но я хочу убивать зомби!

Ни слова больше!

https://flexboxzombies.com/p/flexbox-zombies

Раньше эта игра стоила 179 баксов. Сейчас бесплатно.

Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…

#css #flexbox #flex #game

#игра дня

Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.

Давайте бахнем хардкором: https://css-challenges.com/

Ваша задача – повторить изображённое на экране минимальным числом правил. Есть обучающий блок. Все задачи поделены на уровни. Встречаются и крайне упоротые 👀

Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.

Дерзайте 🔥

P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/

Там, кстати, небезызвестный Илья Стрельцын в лидерах :)

#css #game

#статья дня

А вы знали, что API Intl умеет разделять текст, предложения и слова на составные части?

Вот и я не знал! Firefox, кстати, тоже не знает… но что делать. Зато Node 16 этим знанием обладает!

Короче, дамы и господа, это потрясающе. Читаем статью Стефана Юдиса и наслаждаемся: https://www.stefanjudis.com/today-i-learned/how-to-split-javascript-strings-with-intl-segmenter/

Особо разговаривать тут нечего :)

#js #intl

#статья дня

Справочная статья от Вари Степановой об использовании 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