Будни разработчика

2023-06-11 18:57:40 #статья дня

В Chrome 114, вышедший вот буквально пару недель назад, приземлился крайне любопытный атрибут: popover. Что это такое? Давайте посмотрим.

Добавленный элементу атрибут popover превратит его в неблокирующий (об этом ниже) диалог, удобный для меню, выбора вариантов, уведомлений, или отображения вспомогательных элементов формы. Собственно, сразу пример кода:

Click me



Что мы получаем из коробки:
- Никакого теребоньканья скриптов
- Никаких игр в z-index: 10000: всплывашке будет выдан свой слой
- Клик вне элемента скроет его (нативный onClickOutside)
- Захват фокуса и esc для закрытия

В отличие от dialog, как я уже сказал выше, всплывашка не блокирует взаимодействие со страницей и дополнительного контроля со стороны JS API не предоставляет. Dialog сильно старее и довольно спорен в целом.

В общем, читаем блог разработчиков Chrome:
https://developer.chrome.com/en/blog/introducing-popover-api/

#css #html #popover Открыть/Комментировать

2023-06-10 21:03:08 #совет дня

Буду краток.

Когда верстаете проект, расставляйте aria-label на интерактивных элементах сразу.

Хрен с ней, с доступностью. Просто потом не будете сидеть как я и заполнять action name для системы трекинга на каждый чих

#бородач Открыть/Комментировать

2023-06-09 17:00:52 CockroachDB vs YDB vs YugabyteDB

Нашли ультимативный гайд по базам данных.

В статье:
• исследование БД на основе популярного бенчмарк-теста YCSB;
• «сравнение яблок и апельсинов» или небольшая ретроспектива в историю исследований баз данных SQL;
• проверка производительности БД на разных сценариях.

Есть ли одна лучшая СУБД SQL, узнайте по ссылке Открыть/Комментировать

2023-06-09 11:39:17 #статья дня

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

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

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

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

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

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

#react #query #js Открыть/Комментировать

2023-06-08 13:45:06 #инструмент дня

Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.

Но иногда кому-то из нас приходится верстать... письма. И вот тут начинается веселье.

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

Для таких случаев придуман https://www.caniemail.com/

Всё то же самое, что Can I Use", но про почту.

Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.

#email #css #html #feature #бородач Открыть/Комментировать

2023-06-07 22:07:06 #новость дня

Давайте я быренько, чтобы никого не задерживать: нативный CSS-нестинг вчера приземлился в Firefox Nightly!

Пруф: https://bugzilla.mozilla.org/show_bug.cgi?id=1835066

Codepen для проверки вашего любимого браузера: https://codepen.io/bramus/full/oNdrypM

Caniuse: https://caniuse.com/?search=css%20nesting

Ну и PostCSS-плагин, который я совсем скоро подключу и избавлюсь от ненавистного мне Dart Sass: https://github.com/postcss/postcss-nested

Остаёмся на связи, котаны!

#css #nesting Открыть/Комментировать

2023-06-07 13:37:19 #игра дня

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

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

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

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

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

#css #game #quiz Открыть/Комментировать

2023-06-06 16:51:40 #статья дня

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

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

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

#svg #viewbox #clippath #gsap #бородач Открыть/Комментировать

2023-06-06 09:45:18 #codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform Открыть/Комментировать

2023-06-05 19:46:55 #статья дня

Две недели назад я писал о том, что мой бывший коллега Даниэль Ющик создал Stylelint-плагин, помогающий привнести Defensive CSS-практики в ваш процесс деплоя.

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

Впрочем, очень удачно подоспела и расширенная статья Даниэля об его плагине и в принципе о том, как настраивать Stylelint, включая демо-проект.

Собственно: https://blog.logrocket.com/linting-defensive-logical-css-stylelint-plugins

Линтуйте, котаны!

#css #defensive #stylelint Открыть/Комментировать