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

🖥️✨ 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

🚀 AI-Управляемый Поиск Работы Career-Ops — это интеллектуальная платформа для поиска работы, использующая Claude Code. Она автоматизирует процесс оценки предложений, генерации резюме и отслеживания заявок, позволяя сосредоточиться на наиболее подходящих вакансиях. 🚀Основные моменты: - Оценка предложений с использованием системы баллов A-F. - Генерация адаптированных резюме в формате PDF. - Автоматическое сканирование порталов для новых вакансий. - Параллельная обработка нескольких предложений. - Интегрированная система отслеживания заявок. 📌 GitHub: https://github.com/santifer/career-ops #javascript

Pure CSS Hamburger fold-out menu Раскладывающееся меню Гамбургер. Написано на чистом CSS. https://codepen.io/erikterwan/pen/EVzeRP

🎨 Создайте идеальные скелетоны загрузки с Boneyard Boneyard генерирует пиксельно-точные скелетоны загрузки, извлекая данные из вашего реального DOM. Просто оберните компонент в и получите автоматические заполнители без ручных настроек. 🚀 Основные моменты: - Автоматическое извлечение размеров элементов с помощью getBoundingClientRect() - Поддержка нескольких точек прерывания для адаптивного дизайна - Анимация пульсации для визуального эффекта - Легкая интеграция в React-приложения 📌 GitHub: #javascript https://github.com/0xGF/boneyard

Rounded Box - Matcap texture Куб с зеркальными гранями, выполненный с помощью Pug, Sass и библиотеки Three.js https://codepen.io/vcomics/pen/JjpgBwY

Aseprite Анимированный редактор спрайтов и инструмент для пиксель-арта (Windows, macOS, Linux) ▫️Поддержка цветовых профилей и различных цветовых режимов ▫️Средства анимации с предварительным просмотром в реальном времени ▫️Экспорт/импорт анимации в/из листов спрайтов, файлов GIF или последовательности файлов PNG ▫️Специальные инструменты для пиксельной графики ▫️Одновременное преобразование нескольких кадров/слоев ▫️Возможности Lua-скриптинга ▫️CLI — интерфейс командной строки для автоматизации задач https://github.com/aseprite/aseprite

Создаем CSS Scroll-driven текст с помощью SVG-фильтра 🥊 section { filter: url(#​knockout); } section h1 { animation: shrink; } @​keyframes shrink { 0% { scale: 36; }} - Анимация изменения масштаба текста на видео-оверлее ✅ - Выбивание текста с использованием SVG-фильтра ✅ - Управление прокруткой ✅

Server Actions создают публичные конечные точки, поэтому не забудьте защитить их, как и маршруты API.

🎮 Interactive Super Mario - анимация Super Mario, выполненный с помощью SCSS и JavaScript. Управление осуществляется с помощью клавиатуры https://codepen.io/merchedev/pen/BaYqyNx

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

⚡️ Open-source NVR интерфейс для IP-камер camera.ui — это open-source веб-интерфейс уровня NVR для управления камерами, поддерживающими RTSP-стриминг. Что умеет: • смотреть live-видео с камер прямо в браузере • удобный Camview — плиточная панель всех камер • детекция движения через video analysis, MQTT, HTTP, FTP или SMTP • сохранение фото и видео, когда обнаружено движение • pre-buffer — можно увидеть несколько секунд до события • уведомления через Telegram, Webhook, Alexa и WebPush • поддержка Apple HomeKit через Homebridge • PWA-приложение с push-уведомлениями • тёмная тема и несколько цветовых тем интерфей • https://github.com/seydx/camera.ui

Совет по CSS 💡 Знаете ли вы, что свойство gap можно использовать и для макета flexbox? ✨