ESLint теперь официально поддерживает линтинг CSS

#eslint #css

Интересный JSON Viewer попался

Удобно смотреть, для дебага в админке и вообще

#json #lib

Вышло обновление моей Lissa Health - приложения для хранения личной медицинской информации и ИИ аналитики по данным

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

Наконец сделаны e2e (playwright) и API (phpunit) тесты

Создан канал с новостями о разработке приложения - @lissahealth

Подписывайтесь. Будете свидетелями рождения единорога.

#lissa #pet

Псевдокласс CSS :empty свидетельствует, что в элементе пусто.

Полезен при необходимости, например, обнулять padding и margin пустого элемента, либо делать что-то еще

#css #tip

По совету в комментариях к посту про Lissa Health решил добавить Tour на сайт.
Но не готовой библиотекой, а свой. Ну, потому что свой всегда лучше - и роутинг можно задействовать, и кастомный контент тултипов, и ветвистые пути туров.
Делал не сам, конечно, с AI помощником.

Сгенерил он что-то приличное раза с пятого. Только оверлей на весь экран, не подсвечивается целевой элемент.

Я его прошу доделать, и даю ссылки на код driverjs для примера. Он отвечает:

I've implemented a much better approach for the tour overlay that's similar to driverjs.

Ничего себе, какой самонадеянный Sonnet попался, думаю. Когда я свой onboarding делал, много помучился с этим вырезанием дырки в оверлее, особенно не прямоугольной (в driverjs это на svg масках реализовано).

Ну, ладно, говорю, показывай своё "мач беттер".

Показывает. И ведь реально гениально!

Вопрос: как он это сделал?

#lissa #css

Ответ к вопросу в прошлом посте

Реализация tour:

1. Находим абсолютные координаты target element.
2. Создаем прозрачный модальный элемент с такими же абсолютными координатными.
3. Ставим ему... boxShadow: 0 0 0 9999px rgba(0, 0, 0, 0.7)

Это первая половина гениальности. Вторая состоит в том, что теперь анимация перехода подсветки это тоже одна CSS строка: transition.

Ну и копирование исходного border-radius даст в большинстве случаев ту же самую форму.

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

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

#tour #css

А вы знали, что в Chrome уже есть LLM - Gemini Nano? И что в определенных dev версиях ее можно уже запрашивать из js по API?

А в последней 134-ой версии браузера для 1% пользователей она уже в тестовом режиме используется как антискам-бот:

появилась возможность использования большой языковой модели для определения мошеннических страниц по их содержимому. ИИ-модель выполняется на стороне клиента, но в случае выявления подозрений на сомнительный контент, выполняется дополнительная проверка на серверах Google;

#ai #chrome

Для Vue проекта с микрофронтэндами человек детально сравнил три бандлера

https://habr.com/ru/articles/888478/

#vite #webpack #rspack

С утра почитал Хабр, как один облачный провайдер искал фронтендера:

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

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

Я осторожно выдохнул и спросил опытного middle+ про концепцию DRY (Don't repeat yourself) и как он применяет её в работе.

— DR что?

Я объяснил. На что кандидат просто сказал: «Нет, сдаюсь» и вышел с собеседования.

#humor

Хорошая статья про CSS тени

box-shadow, drop-shadow, text-shadow, neumorphic shadows и лучшие практики работы с ними

#css

Поздравляю всех прекрасных читательниц канала с тем, что они есть!

Веры, надежды, любви.

Женщина - эволюционно более развитое существо, чем мужчина.

#women