JavaScript задачи с собеседований

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

Хватит кидать ошибки в JS как в 2015-м В JavaScript давно есть нормальные инструменты для ошибок, но многие до сих пор бросают просто throw new Error("something failed"). А потом пытаются понять, где именно всё сломалось. Что стоит использовать: - Custom Error классы - чтобы хранить statusCode, code, details и другие поля не в строке, а в структуре - Error.cause - чтобы оборачивать ошибку и не терять исходную причину - AggregateError - когда параллельно упало сразу несколько операций Главная идея простая: ошибка должна быть не просто текстом для лога, а нормальным объектом с контекстом. Плохой вариант: throw new Error("Could not load user") Лучше: throw new HttpError("Could not load user", 500, { cause: err }) Так код становится понятнее, дебаг быстрее, а логи перестают превращаться в археологию.

‍Netflix, Wikipedia, Airbnb, Dropbox, WordPress - огромная часть интернета держится на веб-сервере, который когда-то в одиночку написал скромный русский инженер. Бесплатно. В свободное время. Без громкого запуска и маркетинговой машины. Знакомьтесь: Игорь Сысоев - создатель nginx. В 2000 году он пришёл в Rambler системным администратором. Через пару лет начал писать собственный веб-сервер, потому что главный сервер той эпохи, Apache, плохо справлялся с большим числом одновременных подключений. Цель звучала почти безумно для того времени: держать 10 000 соединений на одной машине. В 2004 году nginx вышел публично. Бесплатно и как open source. Дальше всё пошло без хайпа, но очень быстро: - к 2008 году nginx в Rambler обслуживал около 500 млн запросов в день - в 2011 году Сысоев вместе с Максимом Коноваловым основал Nginx Inc. - в 2013 году Netflix использовал nginx, чтобы разогнать свой streaming CDN до 40 Gbps на сервер - в 2019 году F5 купила Nginx Inc. за $670 млн - в 2021 году nginx обогнал Apache и стал самым популярным веб-сервером в мире Сегодня nginx стоит за Netflix, Wikipedia, Airbnb, Dropbox, Cloudflare, WordPress и огромным количеством сайтов, которые вы открываете каждый день. Самое сильное в этой истории не только масштаб. А то, что один человек начал писать инфраструктурный код без сцены, без культа личности, без «я меняю мир» в каждом интервью. Просто была инженерная проблема. Он сел и решил её так хорошо, что спустя годы треть интернета продолжает работать на его коде. Вот это настоящий тихий хай-тек.

🚀 Mike: Полнофункциональный фронтенд и бэкенд для обработки документов Mike — это открытый проект, объединяющий Next.js для фронтенда и Express API для бэкенда. Он обеспечивает доступ к Supabase и включает в себя обработку документов с возможностью миграции. 🚀 Основные моменты: - Фронтенд на Next.js для динамичного интерфейса - Бэкенд на Express с поддержкой Supabase - Обработка документов и миграции базы данных - Лицензия AGPL-3.0 📌 GitHub: https://github.com/willchen96/mike

Scroll Reveal В JS создана логика, которая определяет, находится ли элемент на экране, и исходя из этого показывает или скрывает элемент. https://codepen.io/HighFlyer/pen/qByPyqr

🎮 Создание игр с OpenGame OpenGame — это открытая платформа для создания веб-игр на основе текстовых подсказок. Она использует мощные языковые модели для генерации игр, обеспечивая стабильную архитектуру и исправление ошибок в процессе разработки. 🚀 Основные моменты: - Полноценное создание игр от идеи до реализации. - Использует GameCoder-27B для управления игровыми движками. - Оценка качества игр с помощью OpenGame-Bench. - Поддержка множества игровых жанров и стилей. 📌 GitHub: https://github.com/leigest519/OpenGame

🏄‍♂️ Приближаем лето всем фронтенд-сообществом 23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴 ♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене. В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати! 🔖 Смотрите подробности и регистрируйтесь. (https://yandex.ru/project/verticals/vertis-js-meetup/?utm_source=telegram&utm_medium=paid&utm_campaign=javascriptv&erid=CQH36pWzJqE1dR7FvgBvtDgSqhLFesFDHGJoxX51FHTSvU) Встречаемся только в офлайне, количество мест ограничено.

🎨 Создание диаграмм для вашего бренда Этот репозиторий предлагает инструмент для генерации стильных диаграмм, которые соответствуют вашему бренду. Всего 13 типов диаграмм, включая архитектурные схемы и потоки, которые можно быстро настроить под ваши цвета и шрифты, просто указав URL вашего сайта. 🚀 Основные моменты: - 13 типов диаграмм: от архитектуры до временных линий. - Быстрая настройка под ваш бренд за 60 секунд. - Доступны три варианта: минималистичный светлый, темный и полный редактор. - Генерация диаграмм без необходимости в сборке или внешних изображениях. - Легкий доступ к живой галерее для просмотра всех типов диаграмм. 📌 GitHub: https://github.com/cathrynlavery/diagram-design #javascript

Знаете ли вы, что можно изменить метод формы в HTML-форме, указав атрибут formMethod на кнопке?

🖥️✨ Hermes Web UI: Интуитивный веб-дашборд для управления AI чатами. Позволяет отслеживать использование, настраивать каналы и управлять заданиями через удобный интерфейс. 🚀Основные моменты: - Мультисессионное управление чатами с поддержкой различных платформ. - Аналитика использования токенов и отслеживание затрат. - Настройка и управление заданиями по расписанию. - Интегрированный терминал для работы с несколькими сессиями. 📌 GitHub: #javascript https://github.com/EKKOLearnAI/hermes-web-ui

Совет по Javascript 💡 Возможно вы не знаете об этом простом способе сортировки без учета регистра.

Timekeeping Небольшое приложение - таймер, созданный на Vue и анимированный библиотекой gsap. https://codepen.io/Sicontis/pen/qBVMzLj

‍⚡️ Claude Design: новая фича, которая делает лендинги и презентации по двум строкам промпта В Claude выкатили Claude Design - отдельный продукт для генерации сайтов, слайдов и анимированных видео. Живёт на claude.ai/design, под капотом Opus 4.7, статус research preview. Нужен Pro или Max. Как пользоваться. Заходите, выбираете Wireframe, Presentation или Animated video. Для wireframe сразу включайте High fidelity. В промпте указываете четыре вещи: цель, аудиторию, структуру и тон. Жмёте Create. Файл DESIGN.md с вашим бренд-стилем (шрифты, цвета, тон). Положили в проект, упомянули в промпте, и Claude применяет ваш брендинг ко всему, что генерит. Без этого результат красивый, но шаблонный. Рабочий шаблон промпта: «Создай [лендинг/презентацию/видео] для [продукта]. Тон: [бренд A] + [бренд B]». Главная ошибка - размытые формулировки. «Красивый лендинг» = шаблонный AI-результат. Всегда задавайте аудиторию, три референса по стилю и желаемый итог. Полезные команды после первого результата: покажи 3 альтернативных варианта структуры, проверь контраст по WCAG 2.1 AA, сгенерируй версии под desktop/tablet/mobile, предложи два A/B-варианта hero-блока. Экспорт в один клик: Canva, PPTX, PDF, HTML. Где реально экономит время: pricing-страницы, sales deck по брифу, превращение статьи в 30-секундное видео, hero-варианты для A/B-тестов, посты в Instagram под бренд-кит. Час на страницу вместо дня.

Header With Slide Bar Появляющийся заголовок с ползунком. Написан на чистом CSS. https://codepen.io/kamciu/pen/xxbJzBv

Как frontend-разработчику вырасти в ЗП? День сурка frontend-разработчика выглядит так Зарплата замерла, задачи — бесконечный повтор, растет только кол-во бессмысленных созвонов Откликаешься на вакансии — отвечают только ноунеймы, на собесах закидывают странными алгоритмами «на скорость». И самое бесящее — пока буксуешь, кто-то вокруг спокойно забирает офферы в Яндекс и VK...

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

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. В своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и трогательных отзывов, найти их можно в канале. Реклама, erid: 2W5zFJKfEVf ИП Галактионов Тихон Витальевич, ИНН 771618975809

Совет по использованию инструментов Chrome Dev Tools 💡 Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?

DOOM ЧЕРЕЗ CURL. ДА, ПРОСТО HTTP ЗАПРОС Разработчик запустил Doom прямо в терминале без установки и GUI. Работает через обычный curl. Под капотом сервер стримит кадры игры как ANSI-графику, а ввод с клавиатуры уходит обратно по тому же соединению. По сути это полноценная игра поверх HTTP, без клиента, без зависимостей. Только bash и сеть. Сюрреализм в том, что это не демка, а реально играбельная штука. Хочешь попробовать - открываешь терминал и играешь. https://github.com/xsawyerx/curl-doom

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