#js #html

✏️ Как работает JS: Пользовательские элементы

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

〰️ Что такое пользовательские элементы?
Пользовательские элементы — это расширения стандартных HTML-элементов. Они позволяют создавать новые теги, которые ведут себя как обычные элементы, но с дополнительной логикой и стилями.

🔸 Основные методы API
- define(tagName, constructor): регистрирует новый пользовательский элемент.
- get(tagName): возвращает конструктор уже зарегистрированного элемента.
- whenDefined(tagName): возвращает промис, который срабатывает после регистрации элемента.

🔸 Жизненный цикл пользовательского элемента
Каждый пользовательский элемент проходит через несколько методов жизненного цикла:
- constructor: вызывается при создании элемента.
- connectedCallback: при добавлении в DOM.
- disconnectedCallback: при удалении из DOM.
- attributeChangedCallback: при изменении атрибутов элемента.

🔸 Структура и стили
Для создания пользовательских элементов используется class, расширяющий HTMLElement. Это позволяет использовать JavaScript для добавления логики. Стили применяются как в обычных HTML-элементах, но с учетом специфики Shadow DOM.

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

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

🔗 Статья

👉 Новости 👉 Платформа

✏️ WebAssembly

WebAssembly (wasm) представляет собой революционный низкоуровневый байт-код для веб-приложений, который открывает новые возможности для веб-разработки. Давайте разберем ключевые особенности и преимущества этой технологии.


*️⃣ Основные характеристики и преимущества
WebAssembly позволяет разрабатывать веб-приложения на различных языках программирования, компилируя их в эффективный бинарный формат. Это обеспечивает:
- Быструю загрузку (около 20% от размера машинного кода)
- Высокую производительность (лишь на 20% медленнее нативного кода)
- Поддержку всеми современными браузерными движками


*️⃣ Техническая реализация
В отличие от JavaScript, который интерпретируется и оптимизируется V8 в процессе выполнения, WebAssembly-код уже оптимизирован статически. Это устраняет необходимость в дополнительном анализе и оптимизации во время выполнения.


*️⃣ Память и безопасность
WebAssembly использует уникальную модель памяти:
- Непрерывный блок памяти без фрагментации
- Изолированный стек выполнения
- Целочисленные смещения вместо прямых указателей


*️⃣ Ограничения и особенности
- Нет прямого доступа к API платформы (взаимодействие через JavaScript)
- Отсутствие встроенного сборщика мусора
- Пока нет поддержки карт кода (source maps)
- Ограниченная поддержка многопоточности


*️⃣ Применение и перспективы
WebAssembly особенно эффективен в следующих областях:
- Ресурсоемкие вычисления
- Игровая разработка на C++/Rust
- Оптимизация энергопотребления на мобильных устройствах

WebAssembly и JavaScript будут дополнять друг друга, создавая более мощную и гибкую платформу для веб-разработки. JavaScript сохранит свое преимущество в работе с DOM и API платформы, в то время как WebAssembly возьмет на себя выполнение ресурсоемких задач.

🔗 Статья

👉 Новости 👉 Платформа

#IT #News

🛫 Looktech AI: Умные очки с искусственным интеллектом

Компания Looktech представила инновационную разработку - умные очки с интегрированным искусственным интеллектом. Устройство объединяет стильный дизайн обычных очков с продвинутыми технологиями, включая поддержку нескольких ИИ-моделей, таких как GPT-4, Gemini и Claude.

Основные возможности:
- Голосовое управление
- Фото- и видеосъемка в 2K разрешении (камера 13 МП)
- Распознавание объектов с помощью ИИ
- Перевод текстов
- Создание напоминаний
- Быстрые ответы на запросы

Технические характеристики:
- Вес: 37 граммов
- Память: 32 ГБ
- Bluetooth 5.4
- Wi-Fi 6
- Микрофон с шумоподавлением
- Время автономной работы: до 14 часов

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

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

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

🔗 Статья

👉 Новости 👉 Платформа

#backend #frontend #projectmanager #marketing

🛫 Готовь телегу зимой: какие технологии и фреймворки будут актуальны в IT 2025 году

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


🔵 Бэкенд: Эволюция и трансформация

- В 2025 году ожидается важное событие - выход 25-й версии Java и LTS версии .NET, что принесет новые возможности для разработчиков
- Искусственный интеллект становится неотъемлемой частью инструментария разработчика, внедряясь в тулинг и продукты
- Интересная тенденция - возврат от микросервисной архитектуры к более монолитным приложениям, но на новом технологическом уровне
- Возрастает важность не только технических навыков, но и понимания предметной области - разработчикам необходимо обладать базовым уровнем владения бизнес-инструментарием


🔵 Product Management: Новые горизонты

- Developer Experience становится одним из ключевых направлений, определяющих успех продукта
- Искусственный интеллект активно внедряется в рутинные задачи, значительно повышая эффективность работы команд
- Особое внимание уделяется роли AI Product Manager и развитию культуры предпринимательства внутри команд


🔵 Маркетинг: Эра нейросетей

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


🔵 Фронтенд: Стабильность и инновации

- Продолжается активное развитие основных фреймворков: React, Angular и Vue
- Увеличивается фокус на информационной безопасности и применении ИИ для обработки данных
- Внедрение HTTP/3 и новых технологий оптимизации призвано улучшить скорость загрузки веб-приложений


🔵 Ключевые выводы

- Основные тренды сконцентрированы вокруг Developer Experience, искусственного интеллекта и развития фронтенд-технологий
- Конференция Merge 2024 предоставляет уникальную возможность глубже погрузиться в эти тренды и обменяться опытом с коллегами
- Программа включает более 30 секций и 150 докладов от ведущих экспертов индустрии


🔗 Статья

👉 Новости 👉 Платформа

#github

📖 От хаоса к порядку: Практическое руководство по эффективной работе с GitHub

Знакома ли вам ситуация, когда в репозитории царит хаос? Ветки с загадочными названиями, коммиты в стиле "fix", "update" и "final-final-v2", пулл-реквесты размером с "Войну и мир", и никто не помнит, зачем были внесены те или иные изменения?

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


✅Почему это важно?

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

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

- Для тимлидов: Документ поможет стандартизировать процессы в команде и обучить новых сотрудников, сократив время на объяснение базовых принципов работы с GitHub.


✅Что вы узнаете?

В этом руководстве мы рассмотрим весь жизненный цикл задачи в GitHub:

- Как правильно создавать и описывать issues, чтобы всем было понятно, что нужно сделать
- Как организовать работу с ветками, чтобы не запутаться в них
- Как писать коммиты так, чтобы они реально помогали при code review и откате изменений
- Как проводить code review, чтобы это не превращалось в формальность
- Как поддерживать репозиторий в чистоте, чтобы он не превращался в свалку кода

Готовы навести порядок в своем репозитории? — 🔗 Статья


👉 Новости 👉 Платформа

👩‍💻 multimodal-live-api-web-console — это приложение на React для работы с Multimodal Live API через вебсокеты.

Оно помогает разработчикам тестировать мультимодальные функции, такие как воспроизведение аудио, запись данных с микрофона и веб-камеры, а также логирование.

✅ Полезно для создания приложений с мультимедийным вводом (голосовые команды, видеочаты). Включает примеры приложений и прост в настройке — достаточно установить зависимости и указать API-ключ.


👩‍💻 GitHub

👉 Новости 👉 Платформа

#JavaScriptOptimization

🌐 Сетевая подсистема браузеров

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

1️⃣Что делает сетевая подсистема?
1. Управление сокетами. Браузер устанавливает TCP/UDP-соединения с серверами.
2. Запросы и ответы. Отправка HTTP/HTTPS-запросов и обработка ответов (статусы, заголовки, тело).
3. Кэширование. Использование локальных данных (HTTP Cache, Service Workers), чтобы избежать лишних запросов.
4. Безопасность. Обеспечение шифрования (TLS), защита от атак (CORS, CSP).

2️⃣Как браузеры оптимизируют сеть?
1. Параллельные запросы. Загрузка ресурсов в несколько потоков.
2. Прогнозирование. Chrome, например, предсказывает, какие ресурсы понадобятся, и загружает их заранее.
3. Реюз соединений. Использование протоколов HTTP/2 и HTTP/3 позволяет ускорить загрузку за счёт мультиплексирования.
4. Компрессия данных. Автоматическое сжатие (Gzip, Brotli).

3️⃣Как программист может помочь?
- Минимизируйте количество запросов. Используйте бандлинг или tree shaking.
- Оптимизируйте серверный стек. Настройте HTTP/2, кэширование и сжатие.
- Работайте с кэшем. Устанавливайте корректные заголовки Cache-Control и Expires.
- Оптимизируйте ресурсы. Используйте современные форматы изображений (WebP, AVIF).

4️⃣Безопасность в сетевой подсистеме
- TLS. Всегда используйте HTTPS.
- CORS. Настраивайте правильный доступ к API.
- CSP. Внедряйте Content Security Policy для защиты от атак.

Учитывайте потребности приложения, тип данных и подключайте современные подходы. Сетевая подсистема — ключ к быстрой и безопасной работе веб-приложений!


🔗 Статья

👉 Новости 👉 Платформа

#DevOps

⚙️ CI/CD: Что это, зачем нужно, какие виды и для чего

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


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


✅ Какие виды CI/CD существуют?

1. Continuous Integration (CI) — непрерывная интеграция. Разработчики регулярно сливают изменения в основную ветку проекта, и после каждого коммита автоматически запускаются тесты для обнаружения ошибок на ранних этапах.

2. Continuous Delivery (CD) — непрерывная доставка. После сборки и тестирования приложение готово к деплою в продакшн, но сам процесс развертывания может быть выполнен вручную. Это включает более сложные тесты, такие как интеграционные и e2e тесты.

3. Continuous Deployment (CD) — непрерывное развертывание. В этом случае код автоматически отправляется в продакшн после успешного прохождения всех тестов, что позволяет быстрее обновлять продукт.


✅ Для чего ?

- Автоматизация тестирования: CI/CD помогает автоматически запускать тесты (unit, интеграционные, e2e) на каждом этапе разработки, улучшая стабильность кода.
- Снижение рисков: Быстрое выявление ошибок позволяет минимизировать риски и дефекты в продакшн.
- Ускорение разработки: Автоматизация рутинных задач позволяет разработчикам сосредоточиться на написании новых фич и улучшении функционала.
- Улучшение качества: Постоянная проверка кода помогает улучшить качество продукта, сокращая количество багов.

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

🔗 Статья

Новости 👉 Платформа

#Tech

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

Сенсоры прикосновения, камера и микрофон позволяют Ropet распознавать лица, жесты и объекты. Функция нагрева имитирует тепло тела, делая взаимодействие комфортным. Благодаря ИИ робот ведёт осмысленные беседы, адаптируясь к владельцу, и подключается к Wi-Fi для обучения.

Компактный дизайн делает его идеальным компаньоном для дома или офиса — для детей, одиноких людей или пожилых, ищущих эмоциональную поддержку.


🌐 Новости

🖥 Платформа

#News

«Яндекс» объявил о покупке сервиса аренды зарядных устройств «Бери заряд» и намерен инвестировать в его развитие более 2 млрд рублей в 2025-2026 годах.
Компания планирует расширить географию сервиса и увеличить количество зарядных станций по всей стране. Артем Молчанов, гендиректор «Бери заряд», будет курировать это направление в «Яндекс Go». Сумма сделки не раскрыта.


🔗 Статья

🌐 Новости

🖥 Платформа

#Frontend

ℹ️ Обработка условий гонки в React: защищаем API-запросы от конфликтов

Разработчики часто сталкиваются с "условиями гонки" в React-приложениях — ситуациями, когда асинхронные запросы к API конфликтуют друг с другом. Разберемся, как их предотвратить.


🟢 Когда это происходит?

Представьте: пользователь быстро переключается между вкладками профилей, а данные с сервера приходят в случайном порядке из-за:
- Медленного интернета
- Высокой нагрузки на сервер
- Частых действий пользователя

В результате UI может показывать неактуальные или некорректные данные.


🟢 Как решить проблему?

1. Игнорирование устаревших ответов
Добавляем флаг, который показывает, актуален ли еще полученный ответ от сервера.

2. Отмена предыдущих запросов
Используем AbortController для отмены устаревших запросов перед отправкой новых.

3. Современные библиотеки
React Query, Apollo Client и другие решения уже имеют встроенную защиту от условий гонки.

// Простой пример защиты от условий гонки
useEffect(() => {
  let isActive = true;
  
  fetchData().then(data => {
    if (isActive) {
      setData(data);
    }
  });

  return () => { isActive = false };
}, []);

🟢 Советы для разработки

- Тестируйте приложение с искусственными задержками
- Используйте индикаторы загрузки
- Не забывайте об обработке ошибок
- Для сложных сценариев применяйте специализированные библиотеки


🔗 Статья

🌐 Новости

🖥 Платформа

🎄 С наступающим 2025 годом, дорогие разработчики!

Пока все базы данных обновляют свои timestamps до 2025 года, хочу искренне поздравить вас с наступающим!

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

Пусть в новом году:
- Ваш код компилируется с первого раза
- Все тесты проходят без падений
- Git не выдаёт конфликтов
- А заказчики присылают четкие ТЗ (да, я тоже в это не верю 😅)

Спасибо, что были с нами в этом году! Продолжайте учиться, развиваться и не забывайте делать git commit своих достижений.

С наилучшими пожеланиями,
Ваш любимый YeaHub ❤️

💎 Screeps — это уникальная стратегия в реальном времени, где вы управляете колониями не руками, а кодом!

Название игры, "Scripting Creeps", говорит само за себя: вместо кликов и горячих клавиш вы пишете JavaScript, который становится мозгом ваших виртуальных подопечных. Ваш код — это ваша армия!

🔗 Ссылка

🌐 Новости

🖥 Платформа

#WebDevelopment

#️⃣ В чем разница между SSR и SPA?

SSR (Server-Side Rendering) и SPA (Single Page Application) — это два подхода к созданию веб-приложений. У каждого есть свои особенности, преимущества и недостатки.


1️⃣Server-Side Rendering (SSR)

При SSR весь HTML генерируется на сервере и отправляется в браузер.

Как это работает:
1. Клиент отправляет запрос.
2. Сервер собирает данные, рендерит HTML и возвращает его браузеру.

Преимущества:
- Полностью отрендеренный HTML помогает поисковым системам лучше индексировать сайт.
- Быстрый первый рендер — пользователь сразу видит содержимое страницы.
- Минимальная зависимость от JavaScript на стороне клиента.

Недостатки:
- Высокая нагрузка на сервер, особенно при большом количестве запросов.
- Перезагрузка страницы для каждого нового запроса замедляет взаимодействие.


2️⃣Single Page Application (SPA)

SPA работает иначе: весь JavaScript и основные компоненты загружаются один раз. В дальнейшем приложение использует AJAX-запросы для динамического обновления данных.

Как это работает:
1. Приложение загружается в браузере.
2. Контент обновляется без перезагрузки страницы.

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

Недостатки:
- Долгая первоначальная загрузка, так как требуется загрузить весь JavaScript.
- Проблемы с SEO из-за динамической загрузки контента.
- Требует современного браузера и больше ресурсов на стороне клиента.


3️⃣ Гибридный подход

Современные фреймворки, такие как Next.js, объединяют плюсы SSR и SPA. Например, страница может рендериться на сервере для быстрого первого отображения и SEO, а затем переключаться в SPA для динамических взаимодействий.


🌐 Новости

🖥 Платформа

#Backend

Как выбрать между SQL и No-SQL решениями?


🔤 Реляционные БД (SQL) — для твёрдых данных:
- Подходят для структурированных данных с фиксированной схемой.
- Обеспечивают высокую согласованность данных.
- Идеальны для финансовых систем и ERP.


🔤 Нереляционные БД (No-SQL) — для текучих данных:
- Поддерживают гибкость в хранении данных и масштабируемость.
- Лучше подходят для данных, структура которых меняется или заранее неизвестна.


✅ Как выбрать?
- Для структурированных и твёрдых данных (финансы) — SQL.
- Для текучих и изменяющихся данных (логи, данные пользователей) — No-SQL.


✅ Согласованность:
- SQL обеспечивают строгую согласованность.
- No-SQL обеспечивают "согласованность в конечном счёте".


✅ Затраты:
- SQL — проверенные технологии с быстрым выводом на рынок.
- No-SQL — могут ускорить разработку, но требуют продуманного проектирования.


✅ Рекомендации:
- Для масштабируемых и гибких данных — No-SQL.
- Для точности и целостности — SQL.


🔗 Статья

🌐 Новости

🖥 Платформа

#Backend

➕ Добавление нереляционной MongoDB в кластер Kubernetes


1️⃣ Установка MongoDB в Kubernetes:
- Используется оператор Kubernetes для управления жизненным циклом базы данных.
- Кластер MongoDB создается с помощью манифеста.


2️⃣ Тестирование базы данных:
- Подключаемся через MongoDB Compass.
- Создаём пользователя для приложения и тестируем работу с приложением Spring Boot.


3️⃣ Создание приложения Spring Boot:
- Создаём приложение с зависимостями Spring Web и Spring Data MongoDB.
- Используем Lombok для упрощения кода.
- Разрабатываем сущности и репозитории для работы с MongoDB.


4️⃣ Тестирование приложения:
- Проверка приложения в интегрированной среде разработки.
- Перезагружаем базу данных в кластере Kubernetes.


5️⃣ Развертывание приложения в Kubernetes:
- Создаём jar-файл и Docker-образ.
- Загружаем образ в кластер и запускаем приложение через манифест Deployment.


Заключение:
- MongoDB легко интегрируется с Kubernetes и Spring Boot.
- Важно учитывать безопасность, резервное копирование и отказоустойчивость.


🔗 Статья

🌐 Новости

🖥 Платформа

#Tech

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

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

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


🌐 Новости

🖥 Платформа