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

Плавное выделение карточек при клике на них, а также при переходе с помощью клавиши Tab. #формы #переключатели #чекбоксы #карточки https://codepen.io/havardob/pen/BapJYMg

🔥 В Qwen теперь появились песочницы для написания и запуска программного кода. Web Dev — новый инструмент для создания готовых фронтенд-страниц и приложений в Qwen Chat. 🎨 Просто напишите: «Создай сайт как ...» — и всё готово! Вы получаете код приложения. Мы сгенерировали несколько лендингов и простую игру для проверки — система хорошо понимает запросы и работает быстро. ➡️ Попробовать: https://chat.qwen.ai/?inputFeature=web_dev @ai_machinelearning_big_data #qwen #codegenerator #online

Встречайте Vue DnD Kit — новую мощную библиотеку для Vue 3, предназначенную для реализации функционала drag-and-drop! Она обеспечивает высокую производительность, гибкость и полную поддержку управления с клавиатуры, мобильных устройств, а также позволяет настраивать под любые задачи. Этот инструмент основан на композабельных функциях Vue, что делает его отличным выбором для создания сложных и интерактивных интерфейсов. Документация уже доступна по адресу (https://zizigy.github.io/vue-dnd-kit/), а в ближайшем будущем планируется выпуск новых пакетов и интеграция с DevTools. #Vue3 #DragAndDrop #Frontend #WebDev https://habr.com/ru/news/902384/

Pokemon Slide Gallery. Анимация выполнена без применения JavaScript. Используются только HTML и CSS. Переключение осуществляется с помощью радио-кнопок. https://codepen.io/cbolson/pen/raBJWOJ

🔌 Node-OPCUA — это промышленный стандарт OPC UA, выполненный для платформы Node.js. Данный набор инструментов реализует протокол OPC UA непосредственно в Node.js и в браузере, предоставляя интерфейсы на TypeScript для взаимодействия с реальным оборудованием. Данный инструмент особенно популярен в системах SCADA и в промышленной автоматизации. Он поддерживает создание как OPC-серверов, так и клиентов, включая сложные варианты подписки на данные и защищённое соединение. 🤖 GitHub (https://github.com/SciSharp/BotSharp)

Создавать 3D-модели прямо в браузере стало возможно за считанные секунды — появилась мощная программа для дизайнеров, художников и разработчиков игр. Она работает на основе текстового описания: вводишь идею — и получаешь готовую модель, которую можно сразу же редактировать. Поддерживаются все популярные форматы, а также есть большая библиотека шаблонов для вдохновения. Доступно бесплатно — пользуйтесь (https://3daily.ai/).

🌍 FBT — это фреймворк для интернационализации от Facebook, который не создает лишних сложностей. Этот инструмент интегрируется непосредственно в JSX с помощью специальных тегов и функции fbt(), автоматически извлекая строки для перевода на этапе сборки. Проект уделяет большое внимание грамматической правильности: система учитывает род, число и другие особенности языка без необходимости вручную описывать все варианты. В основе лежит преобразование кода с помощью Babel-плагинов, а готовые переводы загружаются во время выполнения. 🤖 GitHub (https://github.com/facebook/fbt)

👩‍💻 Как превратить веб-разработку на JavaScript в свою суперсилу? ✔️ Научиться создавать web-приложения на последних версиях React.js, Vue.js или Angular с серверной частью на Node.js. ✔️ Освоить Webpack, PostgreSQL, современные паттерны проектирования, DOM API и Ajax. ✔️ Научиться проектировать и организовывать контроль состояния и тестирование серверных и клиентских приложений. И все это всего за 5 месяцев на онлайн-курсе «JavaScript Developer. Professional» от OTUS. Под руководством опытных экспертов вы не только изучите лучшие инструменты и практики, но и создадите сильные проекты для портфолио. ➡️ Пройдите короткий тест, чтобы получить персональную консультацию менеджера и специальную цену на курс: https://clck.ru/3LmLqg Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

‍📱 expo-app-template — это современный шаблон для React Native и Expo. [expo-app-template](https://github.com/nkzw-tech/expo-app-template) от nkzw-tech представляет собой продвинутый шаблон, который позволяет быстро начать разработку мобильных приложений на React Native с использованием Expo и TypeScript. 🚀 Ключевые особенности: - Современные технологии: Expo 53, React Native 0.79 с новой архитектурой. - Навигация: Expo Router для удобного перемещения по приложению. - Стилизация: Tailwind CSS с помощью NativeWind. - Встроенные библиотеки: - @gorhom/bottom-sheet для модальных окон. - Legend List для работы со списками. - react-native-svg и react-native-svg-transformer. - expo-linear-gradient для создания градиентов. - Международная поддержка через fbtee. - Поддержка TypeScript и ESM. - Управление пакетами с помощью pnpm. - React Compiler для улучшения производительности. 🛠️ Как установить и запустить: Требования: - Node.js версии 22 и выше. - pnpm версии 10 и выше. - Cocoapods для iOS. Для установки выполните команду: pnpm install && pnpm dev:setup ▪ Репозиторий на Github: https://github.com/nkzw-tech/expo-app-template

🖌️ LUME — это инструмент для создания 2D/3D-интерфейсов на HTML. Он превращает стандартные HTML-элементы в полноценные графические объекты, начиная от CSS3D-преобразований и заканчивая рендерингом с помощью WebGL. Внутри используется AssemblyScript для компиляции в WebAssembly, что обеспечивает стабильную производительность. В примерах даже есть шаблон для FPS-игры на этом движке. 🤖 GitHub (https://github.com/lume/lume)

📝 OpenSign – это инструмент с открытым исходным кодом, который предлагает полный набор возможностей для безопасного подписания документов. Проект предоставляет не просто функцию добавления подписи в PDF, а целый рабочий процесс: он поддерживает множество подписантов, предлагает шаблоны документов, OTP-верификацию и даже возможность отклонения подписания с комментарием. При этом OpenSign не требует подписок и скрытых платежей, что позволяет развернуть систему как локально, так и в облаке. 🤖 GitHub (https://github.com/OpenSignLabs/OpenSign)

Пример анимированного подчеркивания с градиентной заливкой. #ссылки #hover https://codepen.io/cultofgeek/pen/RJRdVO

📊 Phantomas — это мощный инструмент для анализа производительности веб-сайтов. Он собирает множество метрик, включая количество запросов, сложные CSS-селекторы и события jQuery. Проект имеет модульную архитектуру, что позволяет легко добавлять новые функции. Его можно запустить с помощью npm, Docker или как модуль в проекте на Node.js. Кроме того, инструмент позволяет эмулировать мобильные устройства и даже добавлять кастомные метрики прямо в код страницы. 🤖 GitHub (https://github.com/macbre/phantomas)

Хотите собрать первое приложение на React за 60 минут? Присоединяйтесь к открытому уроку от OTUS. Без скучных теорий и банальных todo-листов: только практика, код и живое общение. Вы узнаете, зачем нужны хуки и как компоненты делают интерфейс «живым», и самостоятельно создадите интерактивную игру. Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение. Встречаемся 7 мая в 20:00 МСК, регистрируйтесь прямо сейчас, чтобы не пропустить: https://clck.ru/3LeW4V Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🚀 Запустился новый ИИ-сервис Adaptive — генератор веб-приложений, который создает не только прототипы, но и полностью готовые к запуску проекты. 💡 Возможности: ▪️ Добавление ИИ-функций ▪️ Настройка регистрации и оплаты подписки ▪️ Всё это — без кода и без подключения сторонних API По сути — no-code в режиме turbo. 🎁 В бесплатном плане — до 10 приложений. https://adaptive.ai/

Цвет фона карточки изменяется на цвет текста при наведении на неё. #карточки #hover https://codepen.io/himais/pen/eYOzrzJ

📁 Meriyah — это JS-парсер, предназначенный для строгого синтаксического разбора. В отличие от многих других, этот проект не стремится быть универсальным: в нем нет поддержки TypeScript или Flow, но акцент сделан на стабильности и предсказуемости. Для анализа кода он создает AST, совместимое с ESTree, с подробной информацией о позициях узлов, а гибкие настройки позволяют интегрировать парсер в инструменты для линтинга или транспиляции. Инструмент избегает алгоритмов обратного поиска, что уменьшает нагрузку на память, а интеграция с JSX и функциями Annex B делает его удобным для веб-разработки. 🤖 GitHub (https://github.com/meriyah/meriyah)

🧑‍💻 Faast.js — это библиотека, которая берет на себя всю рутинную работу: она упаковывает код, настраивает роли IAM и разворачивает ресурсы, а затем автоматически их удаляет после выполнения. Таким образом, отсутствуют постоянные кластеры, долгие деплои или ручное управление зависимостями. При этом Faast.js остается легковесным и не привязывает вас к определенным сервисам. Например, чтобы запустить функцию локально в оффлайн-режиме, достаточно изменить всего одну строку, а возможность масштабирования до тысяч ядер за секунды встроена прямо "из коробки". 🤖 GitHub (https://github.com/faastjs/faast.js/)

Как стать профи в JavaScript? Вебинар для разработчиков, которые хотят расти JavaScript — это не только язык программирования. Это целый мир, где важно уметь выбирать правильные инструменты и фреймворки, которые действительно помогут вам двигаться вперед. На открытом вебинаре 21 апреля в 20:00 мск мы разберемся, как стать профессионалом, а не просто джуном. Обсудим: — Почему одного знания JavaScript недостаточно для роста. — Как фреймворки (React, Vue, Angular, Svelte) влияют на вашу карьеру и как выбрать тот, который подходит именно вам. — Почему Node.js полезен фронтенд-разработчикам и как он ускоряет ваш путь в мире технологий. — Как научиться быстро осваивать новые фреймворки и не бояться перемен. Этот вебинар — не о коде, а о том, как осознанно развивать свою карьеру. Присоединяйтесь и получите скидку на большое обучение «JavaScript Developer. Professional»: https://clck.ru/3LWb5s Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

📦 OSS JS SDK — это библиотека, которая предлагает удобный интерфейс для взаимодействия с облачным хранилищем Alibaba OSS из Node.js и браузера. Проект включает готовые методы для работы с файлами, начиная от multipart-загрузки и заканчивая управлением правами доступа через ACL. Версия инструмента для браузера имеет ограниченный набор функций, но даёт возможность генерировать подписанные URL для безопасной загрузки файлов без раскрытия ключей доступа. Для использования в production-среде разработчики рекомендуют применять временные токены STS. 🤖 GitHub (https://github.com/ali-sdk/ali-oss)