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

Lightning CSS Очень быстрый парсер, транспилятор, бандлер и минификатор CSS от создателя Parcel: поддерживает CSS-модули, добавляет вендорные префиксы на основе browserslist, интегрируется с webpack. 🌐Ссылка dev (https://lightningcss.dev/)

🔥ИИ-агенты меняют разработку: от подсказок в чате до автономного выполнения цепочек задач — от требований до деплоя. Вопрос не в «использовать или нет», а в том, как быстро и управляемо внедрить их в проекты. Курс «ИИ-агенты: продвинутое внедрение и использование» — это практика, а не теория. Что освоите: • Работу с агентами: точные промпты, управляемый контекст, генерация идей и прототипов. • End-to-end разработку с AI: от требований до готового фронтенда и бэкенда, отладка, тестирование, интеграция. • Инструменты и LLM: Cursor, Copilot, Cline, российские YandexGPT/GigaCode, open-source (DeepSeek, Qwen), основы RAG и finetuning. • Архитектуру и стратегию: проектирование систем с AI-ускорителем, выбор решений (Cloud, IDE, On-Premise), встраивание в существующие продукты. • Автоматизацию: CI/CD, логирование, мониторинг, масштабирование, автоматизация рутины разработчиков и DevOps. Формат: 3 месяца онлайн, занятия по вторникам и четвергам в 20:00 МСК. Живые вебинары с практикой + записи навсегда. Домашние задания и итоговый проект для портфолио. Активное комьюнити и обратная связь. Результат: вы перестанете конкурировать с агентами и начнёте ими управлять, используя AI как ×10 к продуктивности. Готовы перейти от экспериментов к системному внедрению? Курс стартует 29 сентября. Оставьте заявку на консультацию по программе и условиям поступления. 👉 Оставить заявку https://vk.cc/d0C8C2 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Ultimate Self-Hosting Guide () — руководство по самостоятельному хостингу. Узнайте все о локальном хостинге (на локальных и частных веб-серверах) и управлении программными приложениями самостоятельно или в своей организации. Включая облако, LLM, WireGuard, автоматизацию, Home Assistant и сети. https://github.com/mikeroyal/Self-Hosting-Guide

‍🌳 Каждый Ethernet-коммутатор в мире до сих пор использует алгоритм, который Рада Перлман придумала в 1985 году. Её разработка — Spanning Tree Protocol (STP) — решила одну из самых опасных проблем сетей: петли. Если соединить коммутаторы в несколько путей, пакеты могут начать бесконечно ходить по кругу, создавая шторм и ломая всю сеть. Перлман придумала способ превратить любую сложную топологию в дерево без циклов: «Сначала выбирается корень. Затем каждый узел оставляет самый дешёвый путь к нему. Остальные связи блокируются». Но самое необычное — её научная статья 1985 года начиналась не с обычной аннотации, а со стихотворения. «I think that I shall never see a graph more lovely than a tree…» Это был не просто красивый текст. Стих буквально описывал работу алгоритма: выбор корневого узла, поиск кратчайших путей и построение бесциклового дерева. Рада Перлман позже получила прозвище «мать интернета» за вклад в сетевые технологии. Иногда самые важные алгоритмы в истории начинаются не с формул, а со стихов.

Совет по HTML 💡 Обеспечьте лучший пользовательский интерфейс для ввода текста, автоматически выделяя слова, символы или предложения заглавными буквами при вводе данных в текстовые поля 🤩

5 платформ, где можно бесплатно задеплоить свой проект Необязательно сразу арендовать сервер и настраивать инфраструктуру. Для портфолио, MVP и небольших pet-проектов можно начать с бесплатных тарифов. 1. GitHub Pages - для статических сайтов Подходит для портфолио, документации, лендингов и проектов на HTML, CSS и JavaScript. Загружаете код в репозиторий — GitHub публикует сайт и выдаёт готовый адрес. 🔗 https://pages.github.com 2. Cloudflare Workers - для API и серверной логики Позволяет запускать JavaScript и TypeScript на серверах Cloudflare рядом с пользователем. Бесплатный тариф включает до 100 000 запросов в день. Хороший вариант для API, вебхуков, прокси и небольших backend-сервисов. 🔗 https://workers.cloudflare.com 3. Vercel - для Next.js и современного frontend Подключаете GitHub, делаете push — Vercel автоматически собирает и публикует проект. Для каждой ветки создаётся отдельная preview-ссылка. Бесплатный Hobby-тариф предназначен для личных и некоммерческих проектов. 🔗 https://vercel.com 4. Google Cloud Run - для Docker-контейнеров Загружаете контейнер, а Google самостоятельно запускает и масштабирует приложение. Когда запросов нет, сервис может уменьшить количество экземпляров до нуля. Есть постоянная бесплатная квота, но для подключения обычно требуется настроить биллинг. 🔗 https://cloud.google.com/run 5. AWS Amplify - для full-stack приложений Amplify объединяет хостинг, автоматическую сборку, CI/CD и сервисы AWS. Подходит для React, Next.js, Vue и мобильных приложений. У новых аккаунтов доступ зависит от программы AWS Free Tier и предоставленных кредитов. 🔗 https://aws.amazon.com/amplify/ Важно: «бесплатно» не означает «без ограничений». Проверяйте лимиты, правила коммерческого использования и условия оплаты сверх бесплатной квоты. Но для запуска первого проекта этих платформ более чем достаточно.

PerfectPixel (https://www.welldonecode.com/perfectpixel/) — плагин для браузеров, позволяющий верстать сайты «пиксель в пиксель» С его помощью можно проверить, насколько ваша вёрстка вообще близка к изначальному макету. Для этого достаточно установить плагин и запустить его на интересующем сайте. Интересной особенностью инструмента является возможность работы как с локальными сайтам, так и с теми, что уже размещены в Интернете

⚡️ Opus 5 за два часа превратила абзац из «Властелина колец» в интерактивный 3D-мир Андрей Карпати дал модели первый абзац книги, бюджет в 1 млн токенов - около $10 - и попросил создать сцену на Three.js. Результат: 5500 строк кода, процедурная генерация объектов, расстановка моделей по координатам и анимация событий. Местами всё выглядит криво. Но раньше никто не стал бы тратить дни на настолько узкую сцену. Теперь достаточно описать мир - и через пару часов получить рабочий прототип. Следующий шаг - временные игры по запросу, где пользователь может стать наблюдателем, NPC или героем истории. Пока слабое место моделей - проверка результата. Они не умеют полноценно смотреть видео и играть в собственные игры, поэтому анализируют скриншоты и пропускают ошибки. https://x.com/Machinelearrn/status/2083859736387035332 @data_analysis_ml

💡 Совет по JavaScript — Используй reduce для группировки элементов 🔴

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании? Кто-то без всякой драмы проходит собесы и уходит в Яндекс, VK или на валютную удалёнку. В сильные и амбициозные команды. А у кого-то зарплата не растёт, который год, задачи одни и те же неделя за неделей, календарь забит созвонами, от которых ничего не меняется. Отклики на вакансии, а в ответ — тишина или очередная noname контора. На собесах вообще нигде не встречающаяся техничка(( 👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке. Из своих учеников собрал комьюнити, в котором уже больше 220 frontend-разработчиков 🫂

В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.

У меня есть канал, где я: 👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения 👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти 👉 На примерах показываю, как проходить собеседования, включая техничку 👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров И регулярно выкладываю полезное: ▪️ Задачи, на которых валятся кандидаты ▪️ База по микрофронтам ▪️ Подборка из 100+ каналов с вакансиями для разработчиков ▪️ 100 вопросов, которые помогут тебе на собеседовании ▪️ Чек-лист для проверки своего резюме А ещё у меня куча успешных кейсов и отзывов — все они в канале. Подписывайся: https://t.me/+VVGIrnkZ2ZBmMjU6 Реклама, erid: 2W5zFJbUvxZ ИП Галактионов Тихон Витальевич, ИНН 771618975809

Goey footer Футер с анимацией стекающих капель. Реализован с помощью CSS. #css

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

Двухфакторная аутентификация 😹

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

JavaScript становится понятнее, когда из него получается не учебный фрагмент, а живое приложение. Трекер привычек — хороший формат для такой практики: есть интерфейс, данные, события, состояние, прогресс и сохранение результата в браузере. 29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти. Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript, как данные превращаются в интерфейс и почему для полноценного мини-приложения не всегда нужен фреймворк. Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень». 👉 Регистрируйтесь: https://vk.cc/cZLC1N Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Серый взрыв Этот код использует HTML, CSS и JavaScript для создания анимированного графического эффекта. Он не использует никаких фреймворков, только чистый ванильный код. Вот что он делает: Определяет функцию getRandomInt, которая возвращает случайное целое число в заданном диапазоне. Определяет константу NUM_LINES, которая равна 69 и означает количество линий, которые будут нарисованы на SVG-элементе. Получает ссылку на SVG-элемент с помощью document.querySelector и сохраняет ее в переменной svg. Определяет функцию doArt, которая делает следующее: Удаляет все старые линии с SVG-элемента, если они есть. Создает новые линии с помощью цикла for и шаблонной строки. Каждая линия имеет атрибуты x1, y1, x2, y2, stroke, stroke-linecap и stroke-width. Значения этих атрибутов генерируются случайным образом с помощью функции getRandomInt. Например, x2 и y2 определяют конечную точку линии в процентах от ширины и высоты SVG-элемента. Stroke определяет цвет линии в формате RGBA, где последний компонент - это прозрачность. Stroke-width определяет толщину линии в пикселях. Добавляет новые линии в начало SVG-элемента с помощью метода insertAdjacentHTML. Вызывает функцию doArt один раз при загрузке страницы. Добавляет обработчик события click на window, который вызывает функцию doArt каждый раз, когда пользователь кликает по экрану. Определяет стили для SVG-элемента, body и line с помощью CSS. Например, он задает ширину и высоту SVG-элемента в 100%, фоновый цвет в #eee, отступ body в 0 и высоту body в 100vh (100% от высоты окна). Он также добавляет анимацию для line с помощью ключевых кадров и свойства transform. Анимация состоит из изменения масштаба линии от 1 до 0.69 за 4 секунды в бесконечном цикле с чередованием направления. Анимация также имеет разные задержки для разных линий с помощью псевдокласса nth-child. 🌐Ссылка на код (https://codepen.io/chriscoyier/pen/OJXNeyP)

Один skill-файл для AI-агента собрал больше 100K звёзд. ui-ux-pro-max-skill добавляет агенту то, чего обычно не хватает при генерации интерфейсов: дизайнерское суждение. Не просто “сделай красиво”, а правила, почему один экран выглядит как шаблон из нейросети, а другой похож на нормальный продукт. Внутри: * 161 reasoning rules под разные индустрии * 84 UI styles * 192 product types * палитры, typography pairings и UX-гайдлайны * рекомендации по React, Next.js, Vue, Tailwind, SwiftUI, Flutter и другим стекам Skill помогает агенту выбирать структуру лендинга, стиль, цвета, шрифты, эффекты и сразу подсвечивать анти-паттерны. Например, где градиент выглядит дешево, где не хватает контраста, почему spacing ломает ощущение премиальности и какие элементы лучше не использовать в конкретной нише. https://github.com/nextlevelbuilder/ui-ux-pro-max-skill #AI #Design

Совет по Javascript 💡 Возможно, вы не знаете, что мы можем передавать исходную ошибку, при этом повторно выбрасывая ошибку с полезным сообщением для лучшей отладки.