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

🌐 Plate (https://github.com/udecode/plate?tab=readme-ov-file) — это мощный редактор WYSIWYG, разработанный на базе React и Slate, который поддерживает интеграцию с ИИ! 🌟 Он предлагает гибкую платформу для создания настраиваемых редакторов, которые можно расширять с помощью плагинов. Plate подходит для различных задач, таких как редактирование документов в стиле Notion, работа с Markdown и коллаборативные инструменты. 🔐 Лицензия: MIT 🖥 Github (https://github.com/udecode/plate?tab=readme-ov-file)

🖥 Masonry (https://masonry.desandro.com/) — это библиотека, которая позволяет создавать динамические сеточные макеты, где элементы располагаются в зависимости от доступного пространства, как в кирпичной кладке! Она поддерживает адаптивные макеты, настраиваемые отступы и ширину колонок, а также совместима с ES6-модулями, Browserify и RequireJS. 🔗 Ссылка: *клик* (https://masonry.desandro.com/)

🧠 Задача по JavaScript: Асинхронность и замыкания Что выведет следующий код? for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); }, 100); } Варианты ответа: A) 1 2 B) 3 3 C) 1 2 (в случайном порядке) D) --- ✅ Правильный ответ: B Почему: Переменная i объявлена с помощью var, поэтому она является общей для всех итераций. К моменту выполнения setTimeout цикл уже завершился, и значение i равно 3. Каждая отложенная функция видит одно и то же значение.

🎶 Glicol — это экспериментальная платформа для live-кодинга, где звуки создаются путем соединения узлов, как в модульном синтезаторе. Созданный на языке Rust, он может работать в любом месте: в браузере, как VST-плагин или даже на аппаратуре, такой как Bela. Вы можете начать с простых ритмов и затем перейти к более сложным сэмплерным синтезам — без необходимости установки дополнительных компонентов. Основная особенность Glicol заключается в том, что он доступен для новичков, но при этом не имеет ограничений для профессионалов. 🤖 GitHub (https://github.com/chaosprint/glicol)

🖥 Masonry (https://masonry.desandro.com/) — это библиотека, которая помогает создавать динамичные сеточные макеты, где элементы располагаются в зависимости от доступного пространства, как в кирпичной кладке! Она поддерживает адаптивные макеты, настраиваемые отступы и ширину колонок, а также совместима с ES6-модулями, Browserify и RequireJS. 🔗 Ссылка: *клик* (https://masonry.desandro.com/)

🖥 Шпаргалка по видам циклов в Javascript!

📞 RevShells (https://www.revshells.com/) — это сервис, который позволяет пользователям быстро создавать команды для обратных оболочек и соответствующие слушатели для разных операционных систем и сценариев. 🌟 Сайт поддерживает генерацию команд для Linux, Windows и Mac, а также предлагает выбор между различными типами оболочек и методами кодирования. Кроме того, RevShells.com интегрируется с инструментом HoaxShell, что предоставляет дополнительные возможности для создания нестандартных обратных оболочек. 🔐 Лицензия: MIT 🖥 Github (https://github.com/0dayCTF/reverse-shell-generator) 🔗 Веб-версия (https://www.revshells.com/)

🖥 В этой статье рассказывается о том, как разработать простой клон игры Crossy Road, используя библиотеку Three.js! 🌟 Автор подробно объясняет, как создать трехмерную игру в браузере с помощью JavaScript, охватывая ключевые этапы: создание сцены, настройка камеры, освещение, работа с материалами и текстурами, а также добавление анимации. 🔗 Ссылка: *клик* (https://www.freecodecamp.org/news/how-to-code-a-crossy-road-game-clone-with-threejs/)

🖥 Yaak (https://github.com/mountain-loop/yaak) — это приложение для работы с API (REST, GraphQL, SSE, WebSocket, gRPC), созданное с использованием Tauri, Rust и ReactJS! 🌟 Оно позволяет импортировать коллекции из Postman, OpenAPI, Swagger и других инструментов, а также предлагает удобные функции для авторизации (OAuth 2.0, JWT и др.), фильтрации ответов (JSONPath, XPath), организации рабочих пространств и использования переменных окружения. 🔐 Лицензия: MIT 🖥 Github (https://github.com/mountain-loop/yaak)

🌸 Typed Japanese Для любителей технологий: энтузиасты решили изучать языки с помощью TypeScript. Проект Typed Grammar (https://typedgrammar.com/) обучает грамматике (например, английскому или японскому) с использованием типов и структур программирования. И никаких зелёных сов! 🔗 GitHub (https://github.com/typedgrammar/typed-japanese)

🖥 Hoppscotch (https://github.com/hoppscotch/hoppscotch) — это открытая платформа для разработки API, которая упрощает тестирование и взаимодействие с API. 💡 Она предлагает удобный и быстрый интерфейс для отправки HTTP-запросов и получения ответов в реальном времени. Поддерживаются различные HTTP-методы, такие как GET, POST, PUT, PATCH, DELETE и другие. Платформа также предоставляет настраиваемые темы и возможность установки в виде прогрессивного веб-приложения (PWA). 🔐 Лицензия: MIT 🖥 Github (https://github.com/hoppscotch/hoppscotch)

🌐 Novu (https://github.com/novuhq/novu) — это открытая платформа для управления уведомлениями, созданная для разработчиков. 🌟 Она предлагает единый API для отправки уведомлений через различные каналы, такие как встроенные уведомления в приложении (In-App), push-уведомления, электронная почта, SMS и чаты. С помощью Novu можно разрабатывать настраиваемые рабочие процессы и устанавливать условия для каждого канала, обеспечивая эффективную доставку уведомлений пользователям. 🔐 Лицензия: MIT 🖥 Github (https://github.com/novuhq/novu)

🖥 Эта статья посвящена настройке документации в формате «Документы как код» с использованием Docusaurus и GitHub Actions! 🌟 Автор подробно объясняет, как установить Docusaurus, создать репозиторий, настроить конфигурационный файл docusaurus.config.js, редактировать документацию и автоматизировать развертывание с помощью GitHub Actions. Цель статьи — продемонстрировать, как разработчики могут эффективно управлять документацией, используя инструменты, применяемые в разработке программного обеспечения, такие как системы контроля версий и CI/CD-пайплайны. 🔗 Ссылка: *клик* (https://www.freecodecamp.org/news/set-up-docs-as-code-with-docusaurus-and-github-actions/)

👩‍💻 react-learning-resources (https://github.com/nareshbhatia/react-learning-resources) — это тщательно собранный список ресурсов для быстрого освоения React и связанных технологий. 🌟 В него включены материалы по TypeScript, React Router, управлению состоянием, тестированию, созданию UI-компонентов и лучшим практикам разработки. Даны ссылки на видеоуроки, документацию и инструменты, такие как Jest, Cypress, Storybook и другие. 🖥 Github (https://github.com/nareshbhatia/react-learning-resources)

🖥 Это подробное руководство по основам TypeScript! 🌟 Оно охватывает ключевые темы, такие как преимущества использования TypeScript, установка и настройка проекта, базовые типы, интерфейсы, обобщения и другие важные концепции. 🔗 Ссылка: *клик*

Как создать чат, который работает в реальном времени? На открытом вебинаре 25 марта в 20:00 мск разберем WebSockets — технологию, которая делает общение мгновенным и позволяет строить интерактивные веб-приложения. За 1,5 часа напишем с нуля свой минималистичный, но функциональный чат. Разберем код, подключим сервер на Node.js, научимся отправлять и получать сообщения через WebSockets. Этот урок поможет фронтенд-разработчикам освоить real-time технологии, прокачать навыки работы с WebSockets и интегрировать их в свои проекты. Урок особенно полезен тем, кто хочет перейти на новый уровень в JavaScript. Регистрируйтесь и получите скидку на большое обучение «JavaScript Developer. Professional»: https://clck.ru/3JQo6b Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

p5.js — это библиотека на JavaScript, которая предназначена для творческого программирования. Она разработана с целью сделать кодирование доступным и инклюзивным для художников, дизайнеров, педагогов, новичков и всех желающих. Используя концепцию "наброска", p5.js предлагает широкий набор функций для рисования, а также возможности взаимодействия с другими элементами HTML5, такими как текст, ввод данных, видео, веб-камера и звук. Лицензия: LGPL-2.1 Ссылка на Github.

⚡️ Эффект подсветки карточки при наведении с использованием свойства background-attachment Мы применяем background-attachment, чтобы зафиксировать фон относительно области просмотра https://codepen.io/jh3y/pen/RwqZNKa

🖥 Эта статья посвящена принципам написания чистого кода и их значению в контексте гибкой разработки программного обеспечения. 🌟 Автор отмечает, что чистый код — это код, который легко читать, понимать и поддерживать, что особенно важно в условиях Agile-методологий, где команды работают в условиях быстрого изменения требований и частых релизов. В статье рассматриваются такие аспекты, как выбор имен переменных и функций, форматирование кода, соблюдение принципа единственной ответственности и другие практики, которые помогают улучшить качество кода. 🔗 Ссылка: *клик*

🖥 Requestly — это инструмент для перехвата и изменения HTTP-запросов и ответов, созданный для фронтенд-разработчиков! 🌟 Он позволяет редактировать заголовки, перенаправлять URL, заменять файлы, ограничивать скорость запросов и тестировать API прямо в браузере. В отличие от Charles Proxy и Fiddler, Requestly не требует настройки прокси или VPN, что делает его удобным для работы в реальном времени. 🔐 Лицензия: AGPL-3.0 🖥 Github