Варианты анимации кнопок для вдохновения с кодом

#css

Еще один игрок на рынке AI IDE на Gemini 2 - codeassist.google

Расширения для VS Code и JetBrains
Автокомплит и чат
Вроде неплохой бесплатный план

——

А вот чувак попробовал 36 разных AI IDE и агентов для кодинга

Создавал приложения, делал описательные видео

#ai #google #ide

Илья Климов начал новый курс по Vue 3 на Youtube

Планируется около 20 видео, на пару месяцев.

Nuxt free

В плане подачи материала у Ильи обычно всё на очень высоком уровне. Рекомендуется к просмотру безусловно.

#learning #vuejs

Вышел Cursor 0.46 сразу с семью патчами.

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

Claude-3.7-sonnet-thinking очень круто принимает во внимание твой контекст и генерит качественный код. За пару часов можно интегрировать YooKassa на фронт и бэк или настроить e2e Playwright тестирование.

В то же время более дешевый Claude-3.7-haiku как будто специально сделали глупей.

#au #cursor #ide

В слове "фронтэндер" есть что-то унизительное и оскорбительное (как и в "бэкендер", впрочем)". Фронтенд как область разработки, конечно, имеет полное право на существование, но человек, который сидит исключительно в ней, и предпочитает только "красить кнопочки" - ущербен.

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

Вполне можно начать изучать программирование с фронта, но если через год-два-три ты не можешь поднять сервер и написать простой бэк, а предпочитаешь только красить кнопочки, если тебе не интересно построить и запустить что-то цельное, рабочее, исследовать что-то новое, то ты не разработчик. Ты маляр-халтурщик. И место твоё у ведра краски с лохматой кистью и шапкой-лодочкой из газеты "Известия".

#esse

Вышла вторая часть курса по Vue 3 Ильи Климова - "Реактивность"

Толковое объяснение "на пальцах". Яркий пример отличия учебника от документации.

Что не понравилось - смешивание понятия реактивности и связывания с шаблоном. Реактивные конструкции не приколочены к UI и могут использоваться и в других языках. Хотя, конечно, основное применение - динамичный пользовательский интерфейс.

#learning #klimov #rectivity

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