Ради интереса выставил своего Аргуса на конкурс проектов на Product Radar

Кому бот понравился - поддержите голосом (надо залогиниться на сайт).

Хейтеры могут поддержать соперников. Можно сразу всех вместе.

#argus #productradar #contest

pollinations.ai - правильный API для AI:

GET https://text.pollinations.ai/{prompt}

<img 
    src="https://image.pollinations.ai/prompt/Reactjs%20is%20dying" 
    alt="A beautiful picture"
/>

Другие варианты тут

P.S. На картинке генерация DALL-E 3 с промптом из кодблока

Кстати, где можно генерить качественные картинки - https://www.tg-me.com/neuralforum/5300857

#ai

По большому счету технически SPA - это в основном router

В этой статье показывается пример, как реализовать router на чистом js

С Hash Mode и History Mode

#spa #router

Когда твой сайт делал креативный UX дизайнер

#ux #humor #meme

С праздником!

#gagarin

Окунулся я в сферу стартапов

Страшный это мир...

#startup #meme

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

Кроме монорепы, git submodules и других наворотов для решения этой задачи есть еще один - `ln -s`

Символьная ссылка на docs директорию в другие проекты не захламляет git, но тот же Cursor отлично видит её содержимое.

Параллельное составление актуальной документации полезно еще и тем, что IDE AI может использовать ее как часть контекста (не надо по 10 раз объяснять, как тут что работает)

Так же IDE AI можно научить при необходимости обновлять документацию после каждого рефакторинга

#ai #ide #documentation

Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: _Highlight;
      color: _HighlightText;
    }
  }
}

Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

За долгие годы у меня было несколько миграций с браузера на браузер. Сейчас Chrome, перед ним были Vivaldi и Brave, и вот думаю об Edge, потому что Chrome ну что-то прям сильно часто стал не показывать то, что нормально показывает Edge.

Вообще переход на Chromium у MS был очень грамотный шаг

Embrace, extend, and extinguish

#chrome #ms

Продвинув Vite в экосистему React Эван выстрелил в свою Vue ногу - React попер как на дрожжах, согласно статистике w3tech.

#stats #react

Зелёной окисью окрасив интернет
Висит Vue лого мощная махина.
Окончен бой, соперников уж нет,
Сгорели под напалмом реактива.

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

Реакты что? Родятся и помрут.
Их жизнь есть тлен, и краток путь в забвенье.
Один лишь Vue теперь надолго тут,
Логичный, прогрессивный, офигенный.

#literature #creative

#audio #offtop

Тут знакомый попросил потестить его приложение на React Native на Андроиде

Столкнулся с непонятным поведением - курсор мигает в поле ввода, тыкаю на ссылку в другом месте - ноль реакции. С 10 раза как-то только получается

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

То есть, артефакты, в обычной веб разработке вообще не встречающиеся.

Стало интересно - это он криво накодил/нагенерил, или это React Native сам по себе такой?

#react #mobile

Книга Chibi Vue от разработчика Yoichi Kikuchi - подробное руководство по внутреннему устройству Vue 3. Полезно для разработчиков, углублённо изучающих Vue.

В ней есть:

- Анализ ядра Vue: реактивность, компилятор шаблонов, система рендеринга.
- Практическая реализация упрощённой версии Vue с нуля.

Книга на английском языке.

#learning #chibivue #vuejs

Есть сайты, у которых нельзя открыть браузерные devtools

Делается это так:

Запрет на меню и хоткеи

document.addEventListener('contextmenu', event => event.preventDefault());

document.addEventListener('keydown', event => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});

Определять открытие девтулз и, например, перегружать страницу:

(function() {
    const element = new Image();
    Object.defineProperty(element, 'id', {
        get: function() {
            throw new Error('DevTools detected!');
        }
    });
    console.log(element);
})();

#badpractice #devtools