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

🎉 PostgreSQL playground прямо в браузере через WASM! Открыл для себя интересный проект: полностью работающий PostgreSQL в браузере с помощью WebAssembly! Теперь можно запускать и экспериментировать с PostgreSQL прямо в браузере — без установки, настроек и локальных серверов. Отлично подходит для: - обучения SQL - быстрых прототипов - демонстраций - тестирования запросов 🚀 PostgreSQL everywhere — даже в браузере! 🔗 https://github.com/datawan-labs/pg/

Hamburger Menu Animations 4 вида плавной анимации для гамбургер-меню, реализованные на чистом CSS. https://codepen.io/Zaku/pen/ejLNJL #css

🎮 Server Survival - браузерная игра, которая обучает облачной архитектуре через механику tower-defense. Что это: Server Survival - это 3D-симулятор, где вы строите устойчивую инфраструктуру, выдерживаете растущий трафик и отбиваетесь от атак, следя при этом за бюджетом и репутацией. Ключевые особенности: - Реалистичные концепции облачных систем: балансировщики нагрузки, кэш, очереди, базы данных, WAF, хранилище. - Нужно одновременно обрабатывать легитимный трафик и защищаться от DDoS-подобных атак. - Каждый компонент имеет стоимость, пропускную способность и расход на обслуживание — всё как в настоящей архитектуре. - Два режима: Survival (рост нагрузки) и Sandbox (свободная настройка параметров). Технологии: - Игра работает прямо в браузере. - Сделана на JavaScript + Three.js. - Не требует сборки — достаточно открыть index.html. Кому подойдёт: - Начинающим DevOps/Backend разработчикам, - Всем, кто хочет наглядно понять, как масштабируются реальные сервисы, - Тем, кто любит игры, но хочет попутно изучать архитектуру. Репозиторий: github.com/pshenok/server-survival

Пишете на JavaScript, но всё ещё завязаны на фреймворки и готовые компоненты? Хотите понимать, как работает браузер, и создавать свои элементы, а не только использовать чужие? На открытом уроке разберём, как JavaScript взаимодействует с DOM, как с помощью классов и ООП собирать структурированные компоненты и что такое Web Components на практике. Шаг за шагом создадим кастомный HTML-тег с нуля и подключим его к странице так, чтобы элемент можно было переиспользовать. Урок будет полезен начинающим фронтенд-разработчикам и тем, кто хочет уйти от фреймворков к осознанному пониманию браузерного API. Вебинар проходит в преддверие старта курса «JavaScript Developer. Basic». Встречаемся 22 декабря в 20:00 МСК. Регистрация открыта: https://clck.ru/3QrWbt Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🚀 Вышел мощный сжиматель видео - сжимает ролики в десятки раз без заметной потери качества и битрейта. На примере: файл ужался в 17 раз, при этом можно самому выбрать итоговое качество (низкое/среднее/высокое). Встроен простой редактор: обрезка, поворот, отражение - всё за секунды. Главное, что работает локально, без интернета, никакой передачи на серверы. https://github.com/codeforreal1/compressO/releases/tag/1.4.0

📱 Orion Store: Serverless App Store for Android 🚀 Orion Store - это современный прогрессивный Android-приложение, работающее без серверной части. Полностью функционирует на GitHub и может быть скомпилировано в нативный APK с помощью Capacitor. Имеет адаптивный дизайн и поддерживает автоматическое обновление приложений. 🚀 Основные моменты: - 🎨 Яркий дизайн с темами Light, Dusk и Dark. - 🤖 Поддержка нативных Android-устройств. - ☁️ Полностью серверная архитектура на базе GitHub. - ⚡ Умное кэширование для мгновенной загрузки. - 🔄 Автоматическая система обновлений приложений. 📌 GitHub: https://github.com/RookieEnough/Orion-Store #typescript

⚡️ Используйте сгенерированный CSS clip-path, чтобы получить более тонкую форму .squircle { clip-path: polygon( 100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, ... ); }

🚀 Умный инструмент для тестирования HTTP-запросов rep+ — это легкое расширение для Chrome, вдохновленное Burp Suite, с поддержкой ИИ. Оно позволяет быстро захватывать и повторять HTTP-запросы, не требуя настройки прокси. Идеально подходит для исследователей безопасности и охотников за уязвимостями. 🚀 Основные моменты: - Захват и повтор запросов без настройки прокси - Интеграция с ИИ для объяснения запросов и предложений по уязвимостям - Мощные фильтры и поддержка регулярных выражений - Экспорт/импорт запросов в формате JSON - Встроенный инструмент для скриншотов и анализа JavaScript 📌 GitHub: https://github.com/bscript/rep #javascript

📋 Копирование в буфер обмена в 2025 Clipboard API - это уже стандарт для работы с буфером обмена. А старый document.execCommand('copy') официально deprecated ещё с 2020 года. Поддержка Clipboard API: ✔ Chrome 66+ ✔ Firefox 63+ ✔ Safari 13.1+ ✔ Opera 53+ ⚠️ Важные различия между браузерами: Chrome / Edge — Не требует user gesture — Работает только в активной вкладке Firefox / Safari — Требуется пользовательское действие (клик/тап) — Вызов должен быть внутри обработчика этого события 🔐 Общие требования — Только HTTPS или localhost — Для readText() нужно явное разрешение пользователя Где применять Clipboard API — Кнопки «Скопировать код» — Промокоды — Токены доступа — Быстрое копирование ссылок 💡 Совет Всегда вызывайте navigator.clipboard.writeText() внутри обработчика клика — это гарантированно работает во всех современных браузерах.

🎉 JavaScript празднует 30-летие! 🕺 Язык, на котором держатся веб-приложения, UI, фронтенд-фреймворки и половина интернета - появился ровно 30 лет назад. И забавный факт: первую версию языка создали всего за 10 дней. А потом он внезапно стал стандартом веба, пережил мемы про «какой ужас», вырос, оброс экосистемой и теперь управляет всем — от браузеров до серверов и IoT 🚀 С днём рождения, JavaScript. Как ни странно, ты только начинаешь 😉 #JavaScript #WebDev #History #Programming

Совет по CSS! ✨ Вы можете сделать стили компонентов портативными с помощью контейнерных запросов 😎 Изменение макета карты в зависимости от размера 🔥 Удаление текста кнопки, если она маленькая 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} https://codepen.io/jh3y/pen/JjZavRJ

🔥 Фронтенд будущего: ИИ-инструменты и Docs-as-Code в ЮMoney Фронтендеры из ЮMoney поделятся опытом 6 декабря, онлайн, на бесплатной IT-конференции ЮMoneyDay, который помогает делать быстрее и качественнее: 🟣 Вайб-кодинг в финтехе: как мы используем ИИ-инструменты в ежедневных задачах, ускоряем проверку гипотез и возвращаем в работу творчество. 🟣 Docs-as-Code на фронтенде: почему выбрали Markdoc и как мы решаем практические задачи с помощью этого инструмента. Подробнее о программе и регистрации — на сайте конференции (https://events.yoomoney.ru/yoomoneyday-2025-conf?utm_source=tg&utm_medium=post&utm_campaign=yoomoney_day2025&utm_term=paid&utm_content=javascriptv&erid=2VtzqxmMwmB) ™️

⚡️ Крупное обновление легендарной библиотеки иконок для фронтенда Для фронтенд-разработчиков вышло масштабное обновление одной из самых известных библиотек иконок. Экосистема заметно выросла и теперь включает: - 63 119 иконок и 30 стилей — от минимализма до детальной графики; - полноценную SVG-библиотеку и шрифтовые лигатуры, которые работают как обычный текст; - обновлённый дизайн и новые тематические наборы; - официальные NPM-пакеты для React и других фреймворков; - удобные варианты поставки: CDN, SVG-пакеты, шрифты; - полностью переработанную архитектуру без legacy-зависимостей. Инструмент стал универсальным решением: подходит для интерфейсов, дизайн-систем, прототипов и продакшн-приложений. https://github.com/FortAwesome/Font-Awesome

Если JavaScript у вас пока живёт в консоли и учебных задачках, самое время вытащить его в «настоящий мир». На открытом вебинаре соберём мини-приложение, которое очень похоже на реальный продуктовый интерфейс: каталог с карточками, фильтрами и поиском по данным с внешнего API. Что будем делать на вебинаре: - Подключим внешний API и загрузим реальные данные — без фейковых «заглушек». - Построим каталог с карточками: изображение, название, описание — как в интернет-магазинах или сервисах подбора. - Добавим поиск, фильтры и индикатор загрузки, чтобы интерфейс выглядел и вёл себя живо. - Покажем, как обрабатывать ошибки и показывать корректные UI-состояния, а не просто «ничего не происходит». - Разберём структуру приложения на чистом JS: где хранятся данные, где бизнес-логика, как устроен рендеринг. 9 декабря, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic». Регистрация открыта: https://clck.ru/3QdHEp Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🌍 Twitter Location Flags Extension Расширение для Chrome, которое добавляет флаги стран к именам пользователей на Twitter/X, основываясь на их местоположении. Оно автоматически определяет пользователей и запрашивает информацию о местоположении через GraphQL API Twitter. 🚀Основные моменты: - Отображает флаги стран рядом с именами пользователей - Работает с динамически загружаемым контентом - Кэширует данные о местоположении для снижения нагрузки на API - Не требует передачи данных третьим лицам 📌 GitHub: https://github.com/RhysSullivan/twitter-account-location-in-username #javascript https://github.com/RhysSullivan/twitter-account-location-in-username/

🎨 Инструменты для создания и редактирования изображений Kims — это мощный инструмент для работы с изображениями, позволяющий легко редактировать и создавать графику. Он предлагает интуитивно понятный интерфейс и множество функций, которые делают процесс редактирования простым и эффективным. 🚀 Основные моменты: - Поддержка различных форматов изображений - Интуитивно понятный пользовательский интерфейс - Множество инструментов для редактирования и фильтров - Возможность создания графики с нуля - Активное сообщество и регулярные обновления 📌 GitHub: https://github.com/kimkulling/kims #javascript

````typescript type Status = "draft" | "published" | "archived"; type ActiveStatus = // как исключить статус archived? ```` Задумался? Или сразу ответил "Omit"? Если так – этот пост для тебя 😉 Эта задача с реального собеседования в крупную госкорпорацию в сфере атомной энергетики. На таком собесе даже небольшая заминка может стоить тебе оффера. Всё из-за тонкостей TypeScript, которые не всегда встречаются в повседневной работе. Чтобы быть в тонусе и щёлкать такие задачки как орешки — заходи в JavaScript Portal (https://t.me/js_portal). Каждый день там публикуются новые задачи по JS и TS, которые точно прокачают твои практические и теоретические навыки. Подписывайся и будешь готов к любому собесу! 👉 P.S. Правильный ответ и разбор уже ждут тебя тут (https://t.me/js_portal/73?erid=2W5zFGUh8Mn)

⚡️ Отличный гайд по тому, как прокачать навык работы с дейтпикерами в JavaScript. В нём есть примеры, ясные объяснения и наглядный формат, который помогает быстро разобраться во всех нюансах создания собственных дейтпикеров на чистом JS. Читать здесь (https://pikaday.dbushell.com/)👍