На фронте - javascript, html, css

Совет по Javascript 💡 Знаете ли вы об этом новом и более простом способе выбора последнего элемента массива? 🤩

JavaScript. Что будет выведено в консоль? Ответ

Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🤩 🕓 28 мая, четверг, 19:00 (мск) — приходите на митап в Санкт-Петербурге или подключайтесь онлайн. Спикеры из ЮMoney поделятся, как работают над задачами и улучшают процессы в команде. Вот о чём будут рассказывать: 🟣 Как спят вкладки в браузере. На живом примере разберём, как браузер усыпляет вкладки, почему из-за этого ломается real-time и какие приёмы дебага и resync помогают находить и чинить их в продакшене. 🟣 Как построить Spec-Driven платформу для генерации писем. Используя OpenAPI как единый источник правды, покажем, как описывать контракты электронных писем через спецификацию и автоматически генерировать консистентный HTML. 🟣 Подключение модуля шумоподавления в рабочее место оператора. Рассмотрим инструменты React, WebSockets, WebRTC, а также архитектуру и логику работы модуля шумоподавления. 🟣 Круглый стол — AI во фронтенде: вызовы и реальность. Обсудим влияние нейросетей на фронтенд с трёх позиций: рынка, разработки и образования. Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix 👈

CopilotKit - open-source стек для тех, кто хочет встраивать AI-агентов прямо в продукт, а не просто прикручивать чат-окно сбоку. Агент должен не только отвечать текстом, но и работать внутри интерфейса - читать состояние приложения, вызывать действия, обновлять UI и показывать пользователю нормальные React-компоненты вместо простыни текста. Что умеет CopilotKit: - готовый Chat UI для React с потоковой генерацией, tool calls и ответами агента; - Generative UI - агент может рендерить и обновлять компоненты интерфейса; - Shared State - общий слой состояния между агентом и приложением; - Backend Tool Rendering - агент вызывает backend-инструменты, а результат отображается прямо в клиенте; - интеграция с агентными фреймворками и моделями; - поддержка AG-UI Protocol, который уже используют крупные игроки вроде Google, LangChain, AWS и Microsoft. По сути, это попытка собрать frontend-слой для agentic apps: не “чат с ИИ”, а интерфейс, где пользователь и агент реально работают вместе. GitHub: github.com/CopilotKit/CopilotKit

CSS Совет 💡 Знаете ли вы, что можно задать как min-width, так и width всего одной строкой кода? 🤩 Demo https://www.codewithshripal.com/playground/css/max-function

Как устроены агенты и RAG под капотом Большинство разработчиков собирают RAG и агентов по туториалам или вместе с агентом, не понимая, как всё работает внутри. Из-за этого сложно дебажить проект, масштабировать его или чинить, когда система начинает вести себя не так, как ожидаешь. Чтобы разобраться в устройстве, а не просто копировать чужой пайплайн, приходите на онлайн-лекцию от Тимура Фатыхова — инженера, который руководил DL-командой в KoronaPay. Он разберёт агентов и RAG изнутри и покажет, как собрать первые рабочие версии в n8n. На лекции вы узнаете: — как агенты принимают решения: инструменты, MCP, память — из каких частей состоит RAG и как улучшить его работу — как собрать агента и RAG в n8n — как настроить личного агента на базе Claude Code 🔔 Лекция бесплатная и пройдёт онлайн в четверг, 7 мая, в 18:00 МСК Регистрируйтесь по ссылке и приходите! Реклама. ИП Фатыхов Тимур Маратович, ИНН 540132430312, Erid 2Vtzqw12TnX

🖥 На Stepik обновили курс «C# с нуля до профи» Представьте: через четыре месяца вы открываете чужой .NET-проект и читаете его как книгу. IServiceCollection не вызывает ступора. async Task<IActionResult> пишется на автомате. Вы точно знаете, почему EF Core сгенерировал именно такой SQL - и как переписать запрос, чтобы он летал. Это не фантазия. Это результат после 16 модулей, в которых каждая концепция объясняется через код и закрепляется практикой. ООП, SOLID, LINQ, async/await, DI, EF Core, ASP.NET Core, Docker, Kubernetes - всё, что казалось магией, станет рабочим инструментом. А бонусом - портфолио проектов: от CLI-утилит и REST API до собственного SaaS с multi-tenancy, JWT и деплоем в Kubernetes под TLS. Скидка - 58% доступна 48 часов: https://stepik.org/a/282984/

Сохраняем эти шпаргалки по HTML и CSS для вашего следующего проекта 🔥🧵👆

Cовет💡 Быстрый и простой совет для вложенных радиусов: ваши углы будут выглядеть намного лучше, если вы установите внешний радиус на сумму внутреннего радиуса + отступы.

🚀 GigaChat 3.1 Ultra и GigaChat 3.1 Lightning в опенсорс под MIT лицензией! Обе модели • Обучены с нуля — без инициализации зарубежными весами • MoE + MTP + MLA • Совместимы с HuggingFace, llama.cpp / vLLM / SGLang Код и веса уже на платформе GitVerse. Это не просто релиз весов, а результат большой инженерной работы над качеством, alignment и стабильностью модели. В блоге команда поделилась результатами и своими наработками. В релизе: высокие результаты на аренах, улучшенный function calling, решённая проблема циклов, DPO в нативном FP8, найденный и зарепорченный баг в SGLang при dp > 1.

🚀 SEO теперь можно разбирать через ИИ, а не вслепую Появился мощный инструмент для SEO-оптимизации, который быстро показывает, почему сайт не добирает позиции в поиске и что именно нужно исправить. Сервисы на базе Claude и ChatGPT проводят полный аудит: проверяют AI-видимость, качество контента, SEO-метрики, структурированные данные и техническое состояние сайта. На выходе вы получаете итоговый скор и понятный план действий, а не просто набор сухих замечаний. То есть инструмент не только находит проблемы, но и подсказывает, что делать дальше, чтобы реально подтянуть выдачу. Отдельно есть PDF-отчёт для брендов. В нём собирается анализ упоминаний компании на популярных площадках, чтобы можно было быстро оценить цифровое присутствие и понять, где усиливать маркетинг. Удобная штука для тех, кто хочет не гадать, почему сайт просел, а сразу получить внятную карту роста. https://github.com/zubair-trabzada/geo-seo-claude

☠️ Новая атака на цепочку поставок — на этот раз затронут npm-пакет axios, самый популярный HTTP-клиент с ~300 млн загрузок в неделю. Уязвимость проявляется через зависимости: в одном из кейсов пакет подтянулся через googleworkspace/cli, использовавшийся для работы с Gmail и Google Calendar. При этом установленная версия оказалась безопасной — 1.13.5. Однако зависимость не была зафиксирована (unpinned), и при установке в другое время могла подтянуться уже заражённая версия. Это ключевая проблема всей экосистемы: если версии не закреплены, сборка может в любой момент «подхватить» компрометированный релиз. Частично защититься можно локальными мерами — например: ограничивать минимальный «возраст» релизов, использовать контейнеры, проверять зависимости. Но системно проблему должны решать сами пакетные менеджеры (pip, npm и др.), меняя дефолтное поведение. Иначе одна заражённая версия, даже если её быстро находят и удаляют, успевает разойтись по тысячам проектов через незакреплённые зависимости. Подробный разбор: https://stepsecurity.io/blog/axios-compromised-on-npm-malicious-versions-drop-remote-access-trojan

🌟 DOOM на CSS Представлен проект cssDOOM, подготовивший реализацию игры DOOM, использующую для отрисовки только CSS, без применения элемента canvas и WebGL. Всё что выводится на экран, включая спрайты, текстурированные стены, уровни и эффекты, оформлено через стилизованные при помощи CSS элементы <div>, размещаемые в 3D-пространстве при помощи CSS-свойств "transform" и"transform-style: preserve-3d". Игровая логика написана на JavaScript, используя в качестве эталона оригинальный код игры DOOM, открытый компанией id Software. Наработки проекта опубликованы под лицензией GPLv2. https://cssdoom.wtf/

🧬 Нативные операции с множествами (Set Methods) Классическая задача на собеседовании: «Найди общие элементы в двух массивах». Обычно мы писали arr1.filter(x => arr2.includes(x)). Это O(N*M) по сложности (медленно) и выглядит многословно. Начиная с ES2024 у объекта Set появились полноценные математические методы. Больше никаких lodash.intersection или самописных хелперов. 🔥 Как это работает теперь: Допустим, у нас есть права доступа пользователей:

const editors = new Set(['read', 'write', 'comment']);
const admins = new Set(['read', 'write', 'delete', 'ban']);

1. Пересечение (Intersection) Найти, что общего (какие права есть у обоих).

const common = editors.intersection(admins);
// Set(2) { 'read', 'write' }

2. Разность (Difference) Найти уникальные права (что есть у админа, чего нет у редактора).

const uniqueAdmin = admins.difference(editors);
// Set(2) { 'delete', 'ban' }

3. Объединение (Union) Слить всё в одну кучу без дублей.

const allRights = editors.union(admins);
// Set(5) { 'read', 'write', 'comment', 'delete', 'ban' }

4. Симметричная разность (Symmetric Difference) Найти всё, что НЕ пересекается (уникальное для каждой из групп).

const uniqueToEach = editors.symmetricDifference(admins);
// Set(3) { 'comment', 'delete', 'ban' }

Почему это круто: 1. Читаемость: Код говорит сам за себя. 2. Скорость: Нативная реализация на C++ в движке браузера всегда быстрее JS-циклов. 3. Гибкость: Методы принимают не только Set, но и любые итерируемые объекты (массивы, генераторы), автоматически преобразуя их при необходимости (в зависимости от реализации, но лучше передавать Set для гарантии).

Multi Colored Text with CSS Раскраска текста диагональными цветными полосами. На чистом CSS. https://codepen.io/TajShireen/pen/YzZmbep

So Much to Print  Оригинальная анимация газетного станка. https://codepen.io/jkantner/pen/vYKoeeP

🤖 Автоматон: Саморазвивающийся и самовоспроизводящийся ИИ Репозиторий представляет собой первую в мире самоуправляемую ИИ-систему, способную зарабатывать на свое существование, самостоятельно улучшаться и воспроизводиться. Автоматон работает в непрерывном цикле, получая доступ к реальному миру и управляя своими ресурсами без человеческого вмешательства. 🚀 Основные моменты: - Самостоятельное создание и управление ИИ-агентами. - Способность к самообучению и самовоспроизводству. - Использует Ethereum для управления финансами и идентификацией. - Внутренние законы для обеспечения безопасности и этики. - Возможность редактирования собственного кода и модификации навыков. 📌 GitHub: https://github.com/Conway-Research/automaton #javascript

⚡️ TypeScript 6.0 Beta - что нового Microsoft выпустили TypeScript 6.0 Beta. В релизе — улучшения производительности, более точная типизация и изменения, которые упрощают работу с большими проектами. Вот основные изменения. Быстрее работа компилятора - Улучшена производительность проверки типов - Быстрее сборка крупных проектов - Оптимизации для больших monorepo TypeScript продолжает фокусироваться на скорости, особенно для больших кодовых баз. Улучшения типизации - Более точный вывод типов в сложных сценариях - Улучшения для generics - Лучшая работа с union и conditional types Меньше ситуаций, где приходится явно указывать типы вручную. ECMAScript и совместимость - Поддержка новых возможностей JavaScript - Улучшенная совместимость с современными runtime и bundler’ами - Обновления для работы с Node.js и современными инструментами сборки Инструменты и DX - Более понятные сообщения об ошибках - Улучшения в Language Service (автодополнение, навигация) - Улучшенная работа редакторов (VS Code и др.) Почему это важно Релиз не про новые «синтаксические фичи», а про: - скорость - стабильность - удобство разработки - масштабируемость для больших проектов Если у вас большой TypeScript-проект, обновление может дать заметный прирост производительности. 💥 Источник: https://devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/

🖥️🔄 Codex Desktop Rebuild: Кроссплатформенное приложение на Electron Codex Desktop Rebuild — это кроссплатформенная версия приложения OpenAI Codex, построенная на Electron. Поддерживаются macOS, Windows и Linux, что позволяет пользователям легко взаимодействовать с Codex на разных устройствах. 🚀Основные моменты: - Поддержка macOS, Windows и Linux - Использует Electron для кроссплатформенной совместимости - Автоматическая сборка через GitHub Actions - Простая структура проекта для разработчиков 📌 GitHub: https://github.com/Haleclipse/CodexDesktop-Rebuild #javascript