#игра дня

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

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

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

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

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

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

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

Сегодня на повестке дня очередная дикая вкуснятина по SVG!

SSSVG: https://www.fffuel.co/sssvg/

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

Что такое viewBox, как работает clipPath, на что влияют группы aka g, что такое use и symbol, как использовать маску и так далее и так далее — есть всё.

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

Вообще рекомендую обратить внимание на весь проект fffuel.co, ребята пилят невероятное количество гайдов и утилит для работы с цветом, SVG, мозаиками и генеративным шумом. Некоторые вещи на стыке разработки и искусства, буквально.

#svg #tool #interactive

#фишка дня

Автор твита с картинкой выше буквально написал: «It's official. I don't understand URL.canParse 🫠»

Ну, давайте разбираться, что же тут не так. Или всё так?

И надо ли это вообще понимать?

Для начала, подумаем, зачем нам может понадобиться URL.canParse. А нужно это для случаев, когда отбросить токенизацию aka URL.parse и выполнение запроса дешевле и быстрее, чем упасть в ошибку или городить try-catch. Например, в работе с микросервисами, с БД.

Если внимательно оценить все случаи и глянуть на документацию, наблюдаются два паттерна:

1. Если есть порт, протокол не нужен
2. IP-адресам всегда нужен протокол

Ну, собственно, это и есть ответ на вопрос, как же работает canParse и особо больше понимать там нечего.

Другое дело, что URL.parse и URL.canParse в принципе как-то странно реализованы... Попробуйте в консоли сделать URL.parse("google.com:80").

Так что история ещё не закончена. Понять canParse — можно. А стоит ли применять — вопрос.

#url #parse #static #javascript

#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.

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

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

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

Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!

Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.

Большинство повторяет заученные когда-то команды и сочетания

sudo rm -rf /*, например

Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/

И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂

#console #shell #bash #бородач

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

Высокопроизводительный код би лайк:

#статья дня

Я, пару лет назад, чтобы облегчить себе разработку расширения для Google Sheets, написал тоже расширение, но уже для браузера.

Что оно делало?

- слушало лог сети, как список событий
- вычленяло нужные события вызовов функций Google AppsScript
- десериализовало ответ
- выводило на экран, с разными фильтрами (с тех пор я ненавижу MUI)

И так прекрасно работало пару лет, а потом появился треклятый Manifest v3 и у меня не было времени перевести на него своё расширение... чуток всё заглохло.

Но зато на работе награду получил

Ладно, давайте к делу.

Итак, статья дня от Злых Марсиан: как конвертировать расширение для Chrome в расширение для Safari.

Оказывается, есть там пара подводных камней. Самое раздражающее — нужен чёртов XCode :)

Ну и своевременное появление этой статьи — оно мне как некий толчок к восстановлению моего решения.

#chrome #safari #extension

#ссылка дня

Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection #бородач

#til дня

Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка

#крик дня

Семантическое версионирование? А нахуя?

Видимо, так подумали авторы популярного GitHub-экшена upload-artifact, предназначенного чтобы результат какого-либо необходимого для деплоя процесса выгрузить дальше.

Что они сделали?

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

Вот: https://github.com/actions/upload-artifact/issues/602

Что это значит? Так-то намерения хорошие: не позволить выгрузить .env и условные .config.json, содержащие секреты. Чтобы эти самые секреты никуда не утекли.

Вот только ребята забыли, что благими намерениями выложена дорога в ад!

Это изменение предназначалось для версии 4, но они с какого-то перепугу решили выполнить его в 3 версии.

НА-ХЕ-РА?! Кому от этого хорошо? Зачем?

Если люди выгружают секреты куда-то случайно — не беда, перезагрузят!

Абсолютно нормально иметь sample-файлы .env.sample, .config.sample и так далее. Что мы и делали, обогащая эти файлы секретами.

Вот что ненормально — так это навязывать свою точку зрения пост-фактум. Ещё и в стабильной версии.

Просто уроды, слов нет. Certified scumbag engineering.

#github #подстава

#заметка дня

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

Очевидно, 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 #js #focus #бородач

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

Огромное количество примеров, просто новый уровень для автора. Моё увожение.

#css #ui #ux #safe #target #бородач

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

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

Потом всё стало немного сложнее.

Особенно непросто стало проектам с примерами. Хочешь ты показать людям какую-нибудь фишку вёрстки картинок, или просто разнообразить серые квадраты, а картинки-то брать негде. Тут на помощь пришёл сервис Unsplash Source.

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

Но что же делать, не ставить же скучные плейсхолдеры?

И тут нам поможет https://picsum.photos/

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

Как-то так: https://picsum.photos/id/237/200/300

Ну или рандомную нужного размера: https://picsum.photos/seed/picsum/200/300

А ещё картинку можно на лету заблюрить! Вот так: https://picsum.photos/200/300/?blur

Или даже перевести в оттенки серого. Или в webp забрать. Есть даже API по параметрам картинок, всё для тренировки.

Удобно!

P. S. есть вероятность, что сервис заблокирован для РФ. Найду что-нибудь похожее.

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

Итак, первая альтернатива Lorem Picsum — Placedog: https://placedog.net/

Умеет все то же самое, только посвящен собакам. Ставьте реакции 👍, если у вас работает.

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

Вторая альтернатива (поверьте, ещё год назад их было ну очень много) — https://spaceholder.cc/

Вставляет фотографии с телескопа Хаббл!

Пробуем, ставим пальцы.

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

Ну и третья альтернатива — https://fakeimg.pl/

Этот сервис уже ставит не фотографии, но классические плейсхолдеры заданного размера. При желании — с вашим текстом. Замена покинувшим нас placehold.it и PlaceIMG.

Пробуем, отмечаемся.

#статья дня

Один мой товарищ любил прыгать с вышки использует светлую тему в редакторе.

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

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

Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡

Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/

Со ссылками, с литературой, с примерами. Сплошное удовольствие читать.

#dark #theme #бородач

#игра дня

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

Особенно в свете последних событий на работе, когда команды объединили и поделили.

Итак, тренажёр менеджера проектов!

http://thatpmgame.com/

Визуально — диаграмма Ганта. Раунды короткие, несколько минут. Цель — уложиться в сроки и бюджет, располагая целым спектром сотрудников.

От ленивых до очень ленивых.

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

Забавно, что персы там могут выгорать, если им не хватает работы. Скучают!

Да, во многих конторах прожект-менеджер — это, скорее, переходящий титул, нежели выделенная профессия, поэтому в роли может оказаться кто угодно.

Ну, кто закончит в зелёной зоне? :)

#pm #project #planning

#фишка дня

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

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled #бородач