Если вы хотите использовать AI Google Antigravity, но при авторизации выходит ошибка:

Sorry, this account is ineligible to use Antigravity
Your current account is not eligible for Antigravity, because it is not currently available in your location.

Решение очень простое

1. Переходим в настройки своего аккаунта: policies.google.com/country-association-form
2. Выбираем страну (например Венгрия)
3. Выбираем причину смены региона
4. Нажимаем Отправить

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

Когда поменяется регион, вы сможете использовать ИИ Google Antigravity.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

В последнее время на VS Code не загружаются плагины с библиотеки. Как выяснилось не у меня одного такая проблема.

Теперь плагины приходится скачивать отдельным VSIX файлом и закидывать его в VS Code.

📱 Мои каналы

Telegram
YouTube
VK

Решение 1

Скачать плагины в формате VSIX можно через этот сервис: https://cypherpunksamurai.github.io/vsix-downloader-webui/
(На официальном сайте отрубили скачку VSIX)

• Ищем на сайте нужный плагин и скачиваем его
• Открываем VS Code
• Заходим в раздел плагины
• Закидываем в список плагинов, наш скаченный VSIX плагин

Решение 2

Переходим на маркет расширений VSCode: https://marketplace.visualstudio.com/vscode

Ищем нужный нам плагин, и копируем url ссылку на него.

Переходим на сайт: https://vsix.2i.gs/

В поле «URL или ID расширения» вставляем ссылку на наш плагин с маркета.

Кликаем на любое место и у нас автоматически заполняется поле «Версия»

Нажимаем «Скачать»

Открываем VSCode и переходим во кладку Extensions. Открываем папку со скаченными плагином, и переносим файл во вкладку Extensions скаченный плагин.

П.с. За этот метод спасибо Михаилу Ахметшину.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

При разработке одностраничных сайтов (One-page) или веб-приложений, заказчики просят отключать масштабирование (зум) на мобильных устройствах.
На первый взгляд это просто – но есть нюансы. Разберем подробно, как отключить зум на сайте во всех браузерах, включая в🤬й Safari на iPhone.

1. Отключаем зум через meta-тег

В файле index.html в теге header нужно добавить:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi, viewport-fit=cover" />

content="user-scalable=no – Запрещает пользователю зумировать страницу
initial-scale=1.0 – Начальный масштаб страницы 1х
maximum-scale=1.0 – Максимальный масштаб страницы
minimum-scale=1.0 – Минимальный масштаб страницы
width=device-width – Ширина viewport равна ширине экрана устройства (чтобы сайт не выглядел как уменьшенная версия сайта с PC)
height=device-height – Высота viewport равна высоте экрана устройства
viewport-fit=cover – Для iPhone с откусанным экраном, растягивает страницу на весь экран, включая области рядом откусанной областью «домашней полоской»

2. В CSS нужно запретить жесты и резиновый скролл

body,
html {
  overscroll-behavior: none;
  touch-action: none;
}

overscroll-behavior: none – Отключаем резиновый эффект, если доскроллить страницу до конца
touch-action: none – Отключаем жесты

Теперь на всех нормальных устройства скролл отключен.

😡 Но есть iPhone со своим Safari. Запрет скролла в Safari не работает, так как Apple считает что пользователи должны зумировать контент.

Как отключить зум на iPhone в Safari надо сделать это через JS.

Проще добавить в конце тега body вот такой скрипт

<script>
document.addEventListener("gesturestart", function (e) {
  e.preventDefault();
});
</script>

Тут мы перехватываем событие gesturestart (жесты) и отключаем их preventDefault()

👏 Теперь ваш сайт не масштабируется ни в Android, и на iPhone.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

Пример в  CodePen

Градиентный фон

Градиентный фон делается очень просто:

background: linear-gradient(137deg, #36ea8a 0%, rgba(30, 132, 78, 0.5) 100%);

Но вот обводку через CSS градиент border напрямую задать нельзя. CSS пока не поддерживает такую возможность.
По этому приходиться выкручиваться через костыли и использовать псевдоэлементы ::brfore или ::after.

Обводка элемента с градиентом

<button class="ui-button"><p>Кнопка</p></button>

.button {
  position: relative;
  background: linear-gradient(90deg, #00ff88, #00bfff);
  border: none;
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  z-index: 1;
  cursor: pointer;
}

.button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, #0066ff, #00ffff);
  border-radius: 14px;
  z-index: -1;
}

Как работает CSS обводка с градиентом

— Основной элемент получает градиентный фон
— Задаем псевдоэлементу ::before тоже градиентный фон, Размером делаем его чуть больше кнопки, и ставим его за кнопку. Получается что его края выполняют роль обводки

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

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

Пример можно посмотреть здесь: CodePen — Анимированный градиент текста

🔧 Пример кода

HTML:

<h1>Сладкий <span class="gradient">ТЮЛЕНЬ</span></h1>

CSS:

.gradient {
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #7c3aed, #f472b6);
  background-size: 600% 600%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text;
  color: transparent;
  transition: background-position 1s;
}
.gradient:hover {
  background-position: 100% 50%;
}

🧠 Как это работает:

• background-clip: text — делает фон видимым только внутри текста.
• background: linear-gradient(...) — Задает фоновый градиент
• transition: background-position 1s — Задает плавную анимацию перехода

Получается что мы делаем для класса gradient фоновый градиент, увеличиваем его в несколько раз, делаем фон видимым внутри текста, а цвет текста делаем прозрачным.

При наведении мыши на слово, мы просто двигаем задний фон.

Так и получается анимированный градиент текста.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

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

Для синхронизации нам контента и плагинов нам понадобится плагин Remotely Save.
Если раньше им не пользовались, то вот инструкции:
Obsidian – облачная синхронизация через Yandex Disk
Obsidian – облачная синхронизация через Mail Cloud (Облако)

Подписывайтесь мой Telegram, VK и Youtube

Начинаем

Открываем obsidian на том устройстве, где настроены и установлены нужные вам плагины. (Например на компе).

Заходим в Настройки

В Community plugins (Сторонние плагины) находим Remotely Save.
Находим пункт Sync Config Dir (experimental) устанавливаем Enable.

Закрываем настройки нажимаем на Remotely Save.

Синхронизируем плагины на других устройствах

Например настроем на телефоне.

Открываем боковую панель, заходим в Настройки.

Внизу где Community plugins (Сторонние плагины) находим Remotely Save.
Находим пункт Sync Config Dir (experimental) устанавливаем Enable.

Закрываем все, открываем нижнее меню и жмем Remotely Save.

Опять открываем боковую панель, заходим в Настройки.

Заходим в пункт Community plugins (Сторонние плагины)
Нажимаем иконку (обновить)
У нас должны подтянутся наши плагины, активируем их.

Готово. Плагины в обсидиан синхронизированы со всеми настройками.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

Оглавление

Настройка Mail cloud

Переходим по этой ссылке: https://account.mail.ru/user/2-step-auth/passwords/

Даем любое имя нашему паролю. Например Webdav.

Выбираем — Полный доступ к Облаку (WebDAV)

Возможно потребуется подтвердить аккаунт.

Мы получили пароль от Webdav. Скопируйте и сохраните его, Она нам пригодится когда будем настраивать Obsidian.

Настройка Obsidian

На компьютере

Заходим в Obsidian и нажимаем на Настройки

Переходим в Community Plugins (Сторонние плагины) -> Browse (Обзор)

В поиске пишем Remotely Save и выбираем плагин у которого более 1 млн установок.

Нажимаем на Install (Установить)

Далее Enable (Включить)

Нажимаем на Option (Настройки)

В строке Choose A Remote Service выбираем Webdav

Server Address вписываем https://webdav.cloud.mail.ru
Username наш email от почты mail.ru
Password вставляем пароль от Webdaw (мы его получали когда настраивали mail cloud)

Все закрываем, и нажимаем на иконку Remotely Save

Внизу видим что наши файлы синхранизируются

Видим сообщение об успешной синхронизации.

Если зайти в mail cloud, то мы увидим что у нас создалась папка с названием нашего проекта в obsidian

На телефоне

Открываем Obsidian на телефоне и создаем новый проект

Vault name — имя проекта должно быть таким-же как и на компьютере
Нажимаем на Create

На телефоне выбираем папку, где будем хранить проект
В верхнем левом углу вызываем навигацию по проекту

Нажимаем на Настройки -> Сторонние плагины

Жмем на Обзор
В поиске пишем Remotely Save и выбираем плагин у которого более 1 млн установок.

Нажимаем на Установить -> Включить -> Настройки

В строке Choose A Remote Service выбираем Webdav

Server Address вписываем https://webdav.cloud.mail.ru
Username наш email от почты mail.ru
Password вставляем пароль от Webdaw (мы его получали когда настраивали mail cloud)

Закрываем Настройки, закрываем навигацию по проекту.

Нажимаем на нижнее правое меню

Нажимаем на Remotely Save

Происходит синхронизация, мы увидим сообщение успешной синхронизации.

В навигации по проекту мы увидим наши разделы.

Возможные проблемы

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

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

Оригинал статьи на Reddit

Подписывайтесь мой Telegram и VK

1. Настройка разрешения

Project > Project Settings > Display > Window > Width, Height

Устанавливаем разрешение, для примера возьмем NES/SNES 256x224.
Так как современный формат 16:9, то переделаем это разрешение на 384x216.

Вы можете получить другие разрешения, разделив ваше целевое разрешение (например, 1920/5 = 384, 1080/5 = 216).
Список разрешений, с которыми вы можете работать

2. Настройка окна

Project > Project Settings > Display > Window > Test Width, Test Height

Устанавливаем ширину и высоту. Берем цифры которые мы указали выше и умножаем их на 3 (4 или 5). Это коэффициент масштабирования для вашей игры в оконном режиме.

В поле вводим 386*3 и поле Godot автоматически рассчитает значение.

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

3. Растяжение окна

Project > Project Settings > Display > Window > Stretch > Mode

Ставим viewport

Подробнее о режимах: тут (en)

4. Адаптируемость

Project > Project Settings > Display > Window > Stretch > Aspect

keep – Если хотим чтобы экран не был адаптивным, то ставим (выберем его)

keep_width – Экран адаптируется по высоте, подходит для игр с вертикальным экраном (мобильные например)

keep_height – Экран адаптируется по ширине, для игр в горизонтальном формате (основная часть игр)

expand – Растягивается по ширине и высоте

5. Pixel Snap

Project > Project Settings > Rendering > 2D > Use GPU Pixel Snap

Включаем.

Переходим на экран 2D просмотра. Нажимаем на Snapping Option (3 вертикальные точки) и включаем Use Pixel Snap

6. Правила импорта ассетов

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

Переходим в FileSystem выбираем любой ассет например icon.png

Выбираем вкладку Import > Preset > 2D Pixel

Устанавливаем все импорты по умолчанию
Import > Preset > 2D Pixel > Set as Default for 'Texture'

Применяем настройки, нажимаем Reaimport.

7. Убираем центрирование ассетов

Всякий раз, когда вы добавляете узел Sprite или AnimatedSprite, обязательно отключите свойство «Centered».

Для узла AnimatedSprite вы найдете это свойство в разделе «AnimatedSprite».

Для узла Sprite — в разделе «Offset».

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

PS

Если вы попытаетесь переделать свой проект в pixelart некоторое время спустя, когда вы уже работали над ним, вам придется убедиться, что все позиционировано по целочисленным значениям (перейдите в инспектор и проверьте все значения Transform. Для узлов Contol также проверьте, есть ли у вас целые числа в свойствах rect_size.) В противном случае вы получите дрожание при движении камеры. Это может создать проблемы в работе с Tilemaps.

И еще

Если вы создаете более одного проекта в одинаковом стиле, рекомендую просто скопировать файл project.godot в ваш новый проект. Этот файл хранит все настройки вашего проекта, а также вашу карту входных данных, поэтому стоит настроить карту входных данных.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

Подписывайтесь мой Telegram и VK

Навигация:

В этой статье будем синхронизировать Obsidian через Yandex Disk

Качаем Obsidian

Настройки Яндекс Диска

В Яндексе переходим в Пароли приложений
https://id.yandex.ru/security/app-passwords

• Жмем на Файл WebDAV
• Вводим любое имя, например: Obsidian
• Копируем пароль

Настройка Obsidian (Для компа)

Заходим в Настройки -> Сторонние плагины -> Включить плагины сообщества -> Плагины сообщества (обзор)

В поле поиска вводим Remotely Save. Выбираем его и жмем:

• Установить
• Включить
• Настройки

Choose A Remote Service выбираем Webdav

Server Address: https://webdav.yandex.ru/

Username вводим ваш логин от yandex почты.
Например: kyzmichmail@yandex.ru будет kyzmichmail

Run Once On Start Up Automatically можно установить sync once after 1 second of start up.
Обновляем данные после первого запуска.

Закрываем окно настроек.

Когда нам надо будет сохранить данные нажимаем на Remotely Save

Настройка Obsidian (Для смартфона)

Создаем такую-же папку как и на компе (в яндекс диске) с учетом регистра.

Open folder as vault -> Создать папку -> Имя папки как на компе -> OK

Находясь в нашей папке нажимаем:

Использовать эту папку -> Разрешить -> Навигация

Настройки -> Community plugins -> Turn on community plugins

Browse -> Поиск: Remotely Save -> Выбираем Remotely Save -> Install

Принимаем условия
Agree -> Options

Настраиваем
Choose A Remote Service: Webdav

Server Address: https://webdav.yandex.ru/

Username вводим ваш логин от yandex почты.
Например: kyzmichmail@yandex.ru будет kyzmichmail

Run Once On Start Up Automatically можно установить sync once after 1 second of start up.

Проверяем подключение Check
Если все ок выйдет окно –Great!

Закрываем настройки

Обновляем данные с диска

Меню -> Remotely Save

Заходим в навигацию и видим обновления

Возможные проблемы

С Апреля при использовании Яндекс Диска начали возникать проблемы, при синхронизации данных может выходить ошибка 429 Too many requests.
Возможно помогут следующие шаги:

В настройках Remotely Save -> Advanced Settings -> Concurrency поставить 1 (у некоторых через сутки заработало)

Можно пересоздать ключ WebDav

Или синхронизировать данные через Mail cloud
Статья: Obsidian – облачная синхронизация через Mail Cloud (Облако)

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)

Подписывайтесь мой Telegram и VK

Demo

Делаем эффект появления контента при скролле.

HTML

<section>
 <article class="anim left">
  <h1>Заголовок 1</h1>
  <p>Интересный роль дальнейших количественный позиций, условий. Разработке собой проверки рамки условий активизации. Также в формировании модель намеченных подготовки заданий активности организации развития. Административных плановых же оценить позволяет дальнейших реализация развития. Обучения реализации таким сфера нашей значение реализации количественный сложившаяся важны.</p>
 </article>
</section>
<section>
 <article class="anim right">
  <h1>Заголовок 2</h1>
  <p>Высшего повседневная проверки по практика важные форм занимаемых административных высшего собой формировании соображения сфера также требуют структура рост по эксперимент постоянный дальнейших в в организации формировании форм условий задания реализации нашей активизации. Эксперимент административных направлений в задач. Высшего финансовых ж.</p>
 </article>
</section>
<section>
 <article class="anim custom">
  <h1>Заголовок 3</h1>
  <p>Деятельности позволяет и условий особенности условий также высшего соответствующий кадров нашей собой существенных прогрессивного и количественный развития. Порядка, новая собой соответствующий задания деятельности сфера идейные играет структура эксперимент высшего рамки играет направлений практика сфера деятельности и нашей оценить деятельности образо.</p>
 </article>
</section>

Добавляем кастомные классы элементам, которые будут появляться когда мы доскролим до его. В нашем случае это будут: anim, left, right, custom
anim – как будет отображаться элемент, когда он появиться. Тут же и будет задана плавность анимации.
left – элемент будет появляться слево
right – элемент будет появляться справа
custom – элемент будет появляться скейлом (увеличиваться)

CSS

.anim{
    transition: transform 1s, opacity 1s;
}
.left{
    transform: translateX(-200px);
    opacity: 0;
}
.right{
    transform: translateX(200px);
    opacity: 0;
}
.custom{
    transform: scale(0.1);
    opacity: 0;
}

JS

window.addEventListener('DOMContentLoaded', () => {

    function onEntry (entry, getClass){
        entry.forEach( (change)=>{
            if(change.isIntersecting) {
                change.target.classList.remove(getClass);
                change.target.classList.add('animated');
            }
        });
    }
    
    function startAnimation(getClass) {
        const elements = document.querySelectorAll(`.${getClass}`)
        elements.forEach(element => {
            let observer = new IntersectionObserver((e)=>{
                onEntry(e, getClass);
            }, {threshold:[0.7]});
            observer.observe( element );
        });
    }

    startAnimation("left");
    startAnimation("right");
    startAnimation("custom");

});

startAnimation – Функция принимает название класса элементов, которые будут появляться.

onEntry – функция принимает элемент и название элемента, который удалит.

📱 Мои каналы

Telegram

YouTube

VK

Автор: Ренат Гришин (Renat Grishin)