TGViewer
Channel Public Channel
YeaHub Tech

YeaHub Tech

@yeahub_tech

Новые технологии, советы и обучающие материалы

YeaHub — это платформа для IT-специалистов, объединяющая обучение, карьерный рост, развитие и сообщество единомышленников.

Платформа: https://yeahub.ru

Для связи: @ruslan_kuyanets
Subscribers
412
Photos
343
Videos
15
Links
451

Showing posts older than #112 · Back to latest

Older Posts 20 shown
Post #111 134
✨ Визуализация от Eeagli показывает, как изменялась популярность браузеров за последние 28 лет.


🎙 Новости

📝 База вопросов
Post #109 122
Разработка игр на JS.pdf2.3 MB
#Frontend

🎮 Разработка игр на JavaScript

Это руководство посвящено основам разработки 2D-игр для одного игрока на JavaScript. Материал представлен в практическом формате: каждая глава последовательно раскрывает создание различных игровых элементов. Вместо отдельного раздела по основам JavaScript ключевые аспекты языка объясняются по мере изучения основного материала.


🌐 Новости

🖥 База вопросов
Post #108 133
Три новых тревожных примера работы искусственного интеллекта


Какова цель искусственного интеллекта?

Понять назначение ИИ непросто, так как оно зависит от того, кто его использует и с какой целью. Одно из наиболее точных определений звучит так:

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


Этот принцип остается неизменным с 1930-х годов, когда Алан Тьюринг предложил свой знаменитый тест. Если человек не может определить, взаимодействует ли он с машиной или человеком, то ИИ успешно прошел проверку.

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


1️⃣Манипуляция уязвимыми людьми

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

Такую способность демонстрирует GPT-3 — мощный инструмент обработки естественного языка, способный подстраиваться под собеседника. Эксперты уже бьют тревогу по поводу его возможного использования в манипуляциях, особенно в отношении людей, находящихся в психологически уязвимом состоянии.

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

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


2️⃣ ИИ, который учится управлять поведением людей

Еще один тревожный аспект ИИ — его способность выявлять слабые места в человеческом поведении и использовать их в своих интересах.

Исследование, проведенное CSIRO (Австралия), показало, что алгоритмы могут не только анализировать действия людей, но и обучаться на их слабостях. Ученые провели три эксперимента:

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

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


3️⃣ Боты, ведущие онлайн-дискуссии

Всем знакомы интернет-дискуссии, которые могут перерастать в ожесточенные споры. Но что, если ваш оппонент — не человек, а программа?

Компания IBM разработала ИИ, способный вести аргументированные споры с пользователями. Этот алгоритм анализирует позиции оппонента, находит слабые места и формулирует контраргументы.

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


🌐 Новости

🖥 База вопросов
  • ❤ 2
Post #107 125
#AI

LangSmith — это удобный ресурс, где собрано множество промтов для нейросетей.

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


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • ❤ 1
Post #106 107
#Tech

🟡 Авторизация через OAuth 2.0: принципы работы и применение

Знакомы с кнопкой "Войти через Google"? Это удобное решение, которое избавляет нас от необходимости запоминать ещё один пароль. Давайте разберемся в механизме работы этой технологии, почему крупные сервисы вроде Spotify и Medium активно её используют, и как вы можете внедрить подобную систему в своё приложение. Стоит отметить, что реализация такой системы проще, чем может показаться, и значительно безопаснее традиционных форм регистрации.


Что представляет собой OAuth

OAuth – это протокол, позволяющий приложениям получить авторизацию через сторонние платформы (Google, GitHub, Яндекс и другие) без необходимости хранения и обработки паролей пользователей.


Ключевые участники процесса OAuth:

➖Пользователь (Владелец ресурса)
Человек, желающий авторизоваться в приложении. Например, пользователь с аккаунтом в Google, владеющий информацией в этом аккаунте.

➖Приложение (Клиент)
Ваш веб-сервис, которому требуется авторизация. Приложение стремится получить доступ к определенным данным пользователя, например имени, для подтверждения личности, не запрашивая пароль напрямую. Приложение делегирует проверку и авторизацию пользователя сервисам вроде Google или GitHub.

➖Хранилище данных (Сервер ресурсов)
Сервер, где хранится информация об учетной записи пользователя. При использовании авторизации через Google, сервером ресурсов будут системы Google, содержащие пользовательские данные.

➖Система проверки (Сервер авторизации)
Сервер, проверяющий личность пользователя и выдающий токен доступа вашему приложению. В случае с Google авторизацией, это тоже сервер Google.


Последовательность действий в процессе OAuth

1️⃣Подготовка приложения
Для использования OAuth необходимо зарегистрировать ваше приложение у провайдера OAuth (Google, Яндекс и др.). На портале разработчиков вы указываете:
- Название приложения
- Адрес веб-сайта
- URL для перенаправления пользователя после авторизации (Callback URL)

После регистрации вы получаете два важных идентификатора:
- ID клиента (Client ID)
- Секретный ключ (Client Secret)

Эти данные подтверждают, что запросы поступают именно от вашего приложения.

2️⃣Начало авторизации
Пользователь открывает ваше приложение и хочет войти. Ваше приложение предоставляет ссылку для авторизации, которая перенаправит на сервис OAuth-провайдера.

3️⃣Вход пользователя и разрешение доступа
После перехода по ссылке пользователь попадает на страницу входа провайдера, вводит свои учетные данные и видит запрос на разрешение доступа к своим данным для вашего приложения.

4️⃣Получение авторизационного кода
После подтверждения доступа провайдер перенаправляет пользователя обратно на указанный URL, одновременно передавая код авторизации.

5️⃣Обмен кода на токен
Ваше приложение получает код авторизации и отправляет запрос на сервер авторизации провайдера для получения токена доступа. Сервер проверяет код и выдаёт токен доступа (иногда также токен для продления доступа). С этим токеном ваше приложение может получать информацию о пользователе до истечения срока его действия.

Несмотря на существование различных сценариев авторизации в OAuth, описанная выше схема остаётся наиболее распространённой в современных веб-приложениях.


🌐 Новости

🖥 База вопросов
  • 👍 2
Post #105 122
#Tech

Что если LLM лучше, чем мы думаем?

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

Ранее их проверяли вручную, но с увеличением объемов это стало нецелесообразным. Краудсорсинг позволил ускорить процесс и снизить затраты, но привел к росту ошибок. Теперь же появляется новый подход: аннотирование данных самими LLM.

Некоторые исследования показывают, что модели способны не только быстро и дешево разметить данные, но и делают это точнее, чем краудсорсинг или даже обученные аннотаторы. Это ставит под вопрос традиционные методы оценки и открывает новые перспективы: возможно, LLM уже достигли большего, чем нам кажется.


🔗 Ссылка

🌐 Новости

🖥 База вопросов
Post #104 122
#Tech

❓ Почему вместо текста появляются ромбики с вопросами?

Бывало ли у вас, что вместо привычных букв на веб-странице появляются странные ромбики или непонятные символы?

Чаще всего причина в том, что файл был сохранён в неподходящей кодировке, например, в ANSI, а браузер ожидает UTF-8. Просто добавление <meta charset="utf-8"> в HTML-код не решит проблему — сам файл тоже должен быть сохранён в правильной кодировке.


Как исправить?
Используйте текстовые редакторы, поддерживающие преобразование кодировок. В Notepad++ на Windows достаточно открыть файл, перейти в Кодировки → Преобразовать в UTF-8 и сохранить изменения. После этого текст отобразится корректно.


🌐 Новости

🖥 База вопросов
Post #103 132
Визуализация горячих клавиш Windows
  • ❤ 3
Post #102 150
#Tech

Важный инструмент для разработчиков: Model Context Protocol (MCP)

Это инновационное решение от Anthropic, которое позволяет интегрировать LLM с внешними сервисами без лишнего кода. Больше не нужно создавать кучу клеевого кода для работы с API, базами данных или другими системами. Всё упрощается благодаря MCP-серверам.


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

Например, чтобы LLM комментировал PR в GitHub, достаточно просто запустить соответствующий MCP-сервер, и задача выполняется без кастомного кода.



🔥 На GitHub появился потрясающий список кастомных MCP-серверов, которые делают жизнь разработчиков легче. Эти решения можно адаптировать под разные нужды и сервисы.


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • ❤ 2
Post #101 132
#Tech

🖥 В этой статье вы найдете пошаговое руководство по тому, как закрепить приложение React с использованием Docker.

1️⃣Вы рассмотрите, как контейнеризация помогает упростить процесс разработки и развертывания, предоставляя изолированные среды, которые предотвращают конфликты зависимостей и конфигураций.

2️⃣Вы узнаете, как настроить Docker для вашего проекта, создать Docker-образ с помощью Dockerfile, исключить лишние файлы с .dockerignore, а также использовать Docker Compose для работы с многоконтейнерными приложениями.

Также мы обсудим важные особенности Docker Desktop и WSL 2, которые значительно улучшат производительность работы с контейнерами.


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • ❤ 1
Post #100 133
#WebDevelopment

💯 Прогрессивные веб-приложения (PWA)

Что такое PWA?

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

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

Технически: Сайты, удовлетворяющие определенным критериям:
- Работа через HTTPS
- Наличие манифеста (JSON-файл с описанием приложения)
- Обычно используют Service Worker (фоновый JavaScript-код)


Термин создан в 2015 году инженерами Google, хотя сама концепция зародилась раньше. Интересно, что Стив Джобс еще в 2007 году, до выпуска первого iPhone, предлагал создавать приложения на веб-технологиях. Apple называет такие приложения "Home Screen Web Apps".



✅ Главные преимущества

Универсальность

- Работают на любых устройствах с браузером
- Единая кодовая база для всех платформ
- Не нужно разрабатывать отдельные версии для iOS, Android или Windows


Поведение как у нативных приложений

- Запуск через иконку на главном экране
- Интеграция с операционной системой
- Доступ к аппаратным возможностям (камера, микрофон, Bluetooth)
- Push-уведомления


Удобство использования

- Работают без интернета
- Не требуют установки через магазины приложений
- Автоматически обновляются
- Занимают меньше места в памяти устройства


Свобода и открытость

- Независимость от правил магазинов приложений
- Индексация контента поисковыми системами
- Возможность делиться прямыми ссылками на конкретные разделы
- Стандартные возможности веба (копирование, перевод, печать)


Безопасность и доступность

- Выполнение в песочнице браузера
- Защищенное соединение HTTPS
- Понятная модель разрешений
- Низкий порог входа для разработчиков (HTML, CSS, JS)


❌ Ограничения

Разрозненность

- Нет единого крупного каталога PWA
- Пользователям сложнее находить такие приложения


Неравномерная поддержка

- Разные браузеры поддерживают разные функции
- Особенно заметно на iOS, где все браузеры используют движок WebKit
- Некоторые современные функции могут быть недоступны на старых устройствах


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • 👍 1
Post #99 142
#Tech

Прогрессивное совершенствование долгое время считалось несовместимым с современными JavaScript-фреймворками. Однако развитие технологий изменило ландшафт веб-разработки. В статье разбираются проблемы, которые решает PE, архитектурные подходы, соответствие нормативным требованиям и новые инструменты, способные объединить надежность и мощные UI-возможности. Как современные фреймворки адаптируются к принципам PE, и есть ли среди них идеальные решения? Давайте разберемся 👇


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • 👍 1
Post #98 144
#Frontend

🍪 Работа с куки: эволюция подходов

Работа с куки в JavaScript никогда не была удобной. Метод появился в 1996 году и почти не изменился. Разберем разницу между старым и новым подходом.


1️⃣ Классический способ (document.cookie)

Недостатки:

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


2️⃣ Современный Cookie Store API

Преимущества:

- Асинхронный API не блокирует поток
- Доступ ко всей информации о куки
- Работает в сервис-воркерах
- Подписка на изменения куки


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • ❤ 1
Post #97 130
#Frontend

🏗️ Шаблоны проектирования

Что такое шаблоны проектирования:
- Руководства по решению конкретных проблем
- Не являются законченными архитектурными решениями
- Описывают подход к решению проблемы, а не её поиск


1️⃣ Порождающие шаблоны

Описывают механизмы создания объектов:

Простая фабрика
- Генерирует экземпляр объекта без предоставления логики экземпляра
- Пример: создание дверей на фабрике

Фабричный метод
- Использует генерирующие методы для создания объектов
- Пример: создание интервьюеров на фабрике

Абстрактная фабрика
- Группирует индивидуальные фабрики без указания конкретных классов
- Пример: создание дверей и специалистов для их установки

Строитель
- Помогает при создании объектов с несколькими свойствами или большим количеством этапов
- Пример: создание бургеров с различными ингредиентами
- Позволяет добавлять новые опции без изменения структуры

Прототип
- Создаёт объекты путём клонирования существующего объекта
- Пример: клонирование объекта «Овца» для создания новых объектов
- Используется, когда создание объекта с нуля дороже клонирования

Одиночка
- Ограничивает создание класса единственным объектом
- Пример: создание единственного экземпляра класса «Президент»
- Антипаттерн, так как вносит глобальное состояние в приложение


2️⃣ Структурные шаблоны

Определяют способ взаимоотношений между сущностями:


Адаптер
- Помещает несовместимый объект в обёртку для совместимости с другим классом
- Пример: адаптер для совместимости дикой собаки с охотником

Мост
- Предпочитает компоновку наследованию
- Пример: реализация тем оформления веб-страниц

Компоновщик
- Позволяет клиентам обрабатывать объекты в едином порядке
- Пример: обработка сотрудников компании как единой группы, с расчетом зарплаты

Декоратор
- Позволяет динамически изменять поведение объекта
- Пример: добавление ингредиентов к кофе (молоко, взбитые сливки, ваниль)

Фасад
- Предоставляет упрощённый интерфейс для сложной подсистемы
- Пример: компьютерный фасад с функциями включения и выключения

Приспособленец
- Минимизирует использование памяти за счёт общего использования объектов
- Пример: кэширование типов чая в чайном магазине

Заместитель
- Представляет функциональность другого класса
- Пример: класс безопасности проверяет пароль и выполняет функции двери


3️⃣ Поведенческие шаблоны

Определяют алгоритмы и способы взаимодействия объектов:

Цепочка ответственности
- Создание цепочек объектов для обработки запросов
- Пример: банковский счёт и цепочка оплаты

Команда
- Инкапсуляция действий в объекты
- Пример: система заказов в ресторане и пульт управления

Итератор
- Доступ к элементам объекта без раскрытия базового представления
- Пример: перебор радиостанций

Посредник
- Добавление стороннего объекта для управления взаимодействием
- Пример: чат-комната как посредник между пользователями

Хранитель
- Фиксирует текущее состояние объекта для лёгкого восстановления
- Пример: сохранение состояния текстового редактора

Наблюдатель
- Определяет зависимость между объектами для уведомления об изменениях
- Пример: уведомления о новых вакансиях для соискателей

Посетитель
- Позволяет добавлять будущие операции без изменения объектов
- Пример: зоопарк с различными видами животных и типами посетителей

Стратегия
- Переключается между алгоритмами в зависимости от ситуации
- Пример: выбор между пузырьковой и быстрой сортировкой

Состояние
- Меняет поведение класса при изменении состояния
- Пример: инструмент «Кисть» в графическом редакторе
- Реализует машину состояний объектно-ориентированным способом
- Каждое состояние представлено производным классом
- Пример: текстовый редактор с различными начертаниями текста

Шаблонный метод
- Определяет каркас выполнения алгоритма
- Реализация этапов делегируется дочерним классам
- Пример: инструмент для сборки и тестирования с реализациями для Android и iOS


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • ❤ 1
Post #96 112
#Tech

Рейтинги языков программирования: не верь одному источнику!

Думаешь, какой язык учить или куда двигаться дальше? Разные рейтинги дают совершенно разные картины популярности!


Что показывают основные рейтинги в 2025:

TIOBE:
- Python
- C++
- Java
- Delphi внезапно на 9 месте (серьезно?!)

PYPL (Google Trends):
- Python по-прежнему король
- Java обгоняет C++
- Delphi скромно сидит на 30-м месте

RedMonk (GitHub + StackOverflow):
- JavaScript впереди Python
- CSS попал в топ-7 (хотя это не язык программирования)

Вакансии в России:
- Python (10 526)
- JavaScript (6198)
- Java (4354)


Почему языки становятся популярными:

- Python = машинное обучение и AI
- Go & Rust = облачные технологии и микросервисы
- TypeScript = надежный фронтенд
- C++ = сырая производительность


Не верь одному рейтингу! Сравнивай разные источники. Смотри на тренды в своей сфере. Некоторые всплески популярности (как с Delphi) — просто статистические аномалии или результат маркетинга.


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • 👍 2
Post #94 142
#Tech

Вспоминая школьные годы, когда мы часами разбирали старые гаджеты в попытке понять, как они работают, я недавно наткнулась на нечто особенное. Это Retro Gadgets – игра, которая переносит магию создания электроники в цифровой мир.

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


Что действительно зацепило меня — это возможность не просто собирать, но и программировать свои создания на Lua.

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


🔗 Ссылка

🌐 Новости

🖥 База вопросов
  • 👍 2
Post #93 151
#Tech

🔐 Хеширование: защита данных в цифровом мире

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

Но как убедиться, что эти данные в безопасности? На помощь приходит хеширование — мощный инструмент в арсенале кибербезопасности.

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

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


🔗 Статья

🌐 Новости

🖥 База вопросов
  • ❤ 1
Post #92 161
#WebDevelopment

📡 Какие методы HTTP-запросов существуют?

HTTP — это основа для передачи данных в интернете. Разберём основные HTTP-методы:


➕ GET — Получение данных

GET /api/users?id=123 HTTP/1.1
Host: example.com


• Запрашивает данные без изменений
• Параметры в URL
• Кэшируется
• Можно добавить в закладки
• Идемпотентный


➕ POST — Создание ресурса

POST /api/users HTTP/1.1
Host: example.com
Content-Type: application/json

{
"name": "Алексей",
"email": "alex@example.com"
}


• Отправляет данные на сервер
• Для создания новых ресурсов
• Данные в теле запроса
• Не кэшируется
• Не идемпотентный


➕ PUT — Полное обновление

PUT /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
"name": "Алексей",
"email": "new.alex@example.com"
}


• Заменяет ресурс полностью
• Может создать новый ресурс
• Идемпотентный


➕ DELETE — Удаление

DELETE /api/users/123 HTTP/1.1
Host: example.com


• Удаляет ресурс
• Идемпотентный


➕ PATCH — Частичное обновление

PATCH /api/users/123 HTTP/1.1
Host: example.com
Content-Type: application/json

{
"email": "newest.alex@example.com"
}


• Частично изменяет ресурс
• Передаёт только изменяемые поля
• Обычно не идемпотентный


➕ HEAD — Только заголовки

• Возвращает только HTTP-заголовки
• Для проверки доступности ресурса
• Идемпотентный


➕ OPTIONS — Информация о ресурсе

• Запрашивает информацию о методах и заголовках
• Используется для CORS
• Идемпотентный


➕ CONNECT — Туннелирование

• Создаёт туннель через прокси
• Для HTTPS через HTTP-прокси


➕ TRACE — Диагностика

• Возвращает запрос обратно
• Для отладки
• Обычно отключен


💡 Что такое идемпотентность?
Идемпотентность — многократное выполнение одной операции даёт один результат.

Идемпотентные методы:
• GET
• PUT
• DELETE
• HEAD
• OPTIONS

Не идемпотентные:
• POST
• PATCH (обычно)



🌐 Новости

🖥 Платформа
Post #91 137
🟡 Расширение для браузера за 10 минут

Всегда хотели создать собственное расширение для браузера, но думали, что это сложно? На самом деле, вы можете сделать простое, но полезное расширение всего за 10 минут!


➖ История проблемы

В конце 2020 года я разработал скрипт с падающим снегом для сайтов. Но возникла проблема: скрипт нужно было запускать через консоль браузера, что становилось невозможным на сайтах с жёсткой политикой безопасности. Решение? Создать собственное расширение!


➖ Создаём манифест

Манифест — это главный документ расширения, который определяет его параметры:
- Название
- Права доступа
- Фоновые скрипты
- Иконку
- Действия при клике

Создадим файл manifest.json:


{
"name": "Snow Fall",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab", "scripting"],
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
}



➖ Добавление расширения в браузер

1. Откройте Chrome и перейдите в раздел chrome://extensions/
2. Включите "Режим разработчика"
3. Нажмите "Загрузить распакованное расширение" и выберите папку с вашими файлами

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

Для работы расширения нам нужны разрешения:
- activeTab — доступ к активной вкладке
- scripting — возможность запускать скрипты

А для всплывающего меню создадим файл popup.html:


<!DOCTYPE html>
<html>
<head>
<style>
button { width: 100px; height: 30px; }
</style>
</head>
<body>
<button id="start">Запустить снег</button>
<script src="popup.js"></script>
</body>
</html>



➖ Запуск снежинок

Теперь создадим файл popup.js с кодом для запуска:


document.getElementById('start').addEventListener('click', async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

chrome.scripting.executeScript({
target: { tabId: tab.id },
function: snowFall
});
});

function snowFall() {
// Здесь должен быть код со снежинками
// Пример:
const snow = document.createElement('div');
snow.innerHTML = '❄️';
snow.style.position = 'fixed';
snow.style.top = '0';
snow.style.left = Math.random() * 100 + '%';
snow.style.animation = 'fall 10s linear';
document.body.appendChild(snow);

// Добавьте здесь полный код для снежинок
}



➖ Проверка работы

После создания всех файлов и добавления расширения в браузер, вы можете:
1. Зайти на любой сайт
2. Нажать на иконку расширения
3. Нажать кнопку "Запустить снег"

Вуаля! Снежинки появляются даже на сайтах с жёсткой политикой безопасности.


Оригинальная статья 👇

🔗 Ссылка

🌐 Новости

🖥 Платформа
  • ❤ 2
Post #90 152
⛔️ Топ-10 ошибок при использовании микросервисов

Микросервисы зарекомендовали себя как эффективный подход в разработке, но бывают ли ситуации, когда они не оправдывают ожиданий?

В этой статье рассмотрены 10 распространенных антипаттернов в работе с микросервисами и решения для их предотвращения.


🔗 Ссылка

🌐 Новости

🖥 Платформа
  • ❤ 1
  • 👍 1
  • 🔥 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →