На фронте - javascript, html, css
关闭频道
Актуальные материалы для frontend разработчиков. Админ - @haarrp Ссылка на канал - https://t.me/+U3U3HoZzEglkNDdi
显示更多7 682
订阅者
-424 小时
-227 天
-8430 天
帖子存档
✔️ curl - один из самых недооценённых проектов в истории софта.
Первый релиз вышел 20 марта 1998 года. Его запустил один разработчик - Daniel Stenberg.
Прошло больше 27 лет, а он всё ещё поддерживает проект.
Сегодня
curl работает на миллиардах устройств и поставляется почти везде:
* macOS
* основные Linux-дистрибутивы
* Windows 10 и новее
* серверы
* контейнеры
* embedded-системы
* CI/CD пайплайны
Ирония в том, что многие пользуются curl каждый день, даже не думая об этом.
Одна маленькая CLI-утилита стала невидимой инфраструктурой интернета.
Вот так выглядит настоящий open source: без хайпа, без миллиардных раундов, но с кодом, который держит половину мира.Подборка для тех, кто устал от «зарегистрируйтесь, чтобы скачать файл» 😈
FckSignups здесь 170+ веб-инструментов, которые работают прямо в браузере: без установки, без аккаунта и без оплаты.
Внутри конвертеры, PDF-редакторы, утилиты для изображений и видео, аналоги CapCut, инструменты для текста, файлов, разработки и даже панели для мониторинга мировых событий.
Открыл, сделал задачу, закрыл. Без почты, паролей и вечного «начните бесплатный trial».
https://github.com/BraveOPotato/FckSignups
Совет по 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/+3
Сохраняем эти шпаргалки по 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
Repost from React JS
🌟 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
