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

🔺 Delaunator — молниеносная триангуляция Делоне на JavaScript. Библиотека выполняет разбиение 2D-точек на треугольники с впечатляющей скоростью — обрабатывает миллион точек за секунду. Основной алгоритм основан на оптимизированных sweep-line методах из научных работ 2010-2013 годов. Инструмент имеет компактные структуры данных (Uint32Array для треугольников, Int32Array для рёбер), минимизирующие нагрузку на память. Поддерживает дегенеративные случаи через robust-predicates и обновление триангуляции на лету. 🤖 GitHub (https://github.com/mapbox/delaunator)

Совет по CSS 💡 Используйте табличные цифры для отображения таймеров ✅ https://www.codewithshripal.com/playground/css/use-tabular-number-for-timers

🌳 Fancytree — проверенная временем JavaScript-библиотека для создания интерактивных деревьев с поддержкой редактирования, drag'n'drop и ленивой загрузки. Хотя проект перешёл в режим поддержки, он остаётся стабильным решением для таблиц с иерархией и файловых менеджеров. Интересно реализована модульная структура: можно подключать только нужные функции вроде фильтрации или чекбоксов. Для современных проектов автор рекомендует наследника — Wunderbaum, но Fancytree всё ещё активно используют в legacy-системах. 🤖 GitHub (https://github.com/mar10/fancytree)

⏳ AWS Amplify — библиотека для фронтенд- и мобильных разработчиков, упрощающая интеграцию приложений с облачными сервисами AWS. Она предлагает готовые решения для аутентификации, хранения данных, аналитики, API и даже машинного обучения, скрывая сложность бэкенд-настроек за простым JavaScript-интерфейсом. Хотя инструмент заточен под AWS, архитектура позволяет подключать и кастомные бэкенды. Amplify особенно удобен для React Native и веб-приложений, например, можно добавить авторизацию через Cognito или работу с S3 буквально парой строк кода. 🤖 GitHub (https://github.com/aws-amplify/amplify-js)

✔️ Card Mouse Hover Effect Карточки с интересным эффектом при наведении. Сделаны на CSS и JavaScript. Открыть код (https://codepen.io/yudizsolutions/pen/wvZEeNE) https://telegra.ph/file/2f96c1157916fe57d4fe1.mp4

🧠 HASH — открытая база данных с элементами ИИ, которая самостоятельно структурирует информацию и проверяет её достоверность. Проект объединяет данные из разных источников в реальном времени, предлагая удобные инструменты для работы с ними даже не-техническим пользователям. HASH имеет автономных агентов, которые автоматически дополняют и очищают данные, а в будущем система превратится в полноценную рабочую среду с AI-интерфейсами. Для старта можно использовать облачную версию или развернуть локально. 🤖 GitHub (https://github.com/hashintel/hash)

Хотите углубить знания в JavaScript и работать с самыми популярными фреймворками? Прокачайте свои навыки до профессионального уровня с курсом «JavaScript Developer. Professional» от OTUS. Мы предлагаем практический курс, где вы: - Изучите передовые технологии, такие как ReactJS, Angular, Vue, Node.js и другие. - Научитесь работать с такими инструментами, как Webpack, TDD, и PostgreSQL. - Примените знания на практике: создадите сложные веб-приложения, протестируете их, организуете хранение данных и многое другое. Вы сможете: • Создавать приложения для реальных проектов. • Применять паттерны проектирования. • Работать с асинхронностью, тестированием, оптимизацией. Пройдите вступительное тестирование и получите скидку на обучение: https://clck.ru/3NFvzi Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🧩 FossFLOW — опенсорс PWA для создания стильных технических диаграмм прямо в браузере Этот инструмент идеально подойдёт для архитекторов, инженеров и DevOps-специалистов, которым нужно быстро визуализировать инфраструктуру. 🎨 Особенности: — работает как полноценное веб‑приложение (PWA) — поддерживает кастомные цвета, подписи, офлайн-режим — удобный drag‑and‑drop интерфейс и управление компонентами — ничего не надо устанавливать — всё прямо в браузере 🚀 Разворачивается за секунды: — GitHub Pages — Netlify — Vercel — Docker или можно просто открыть онлайн-демо: stan-smith.github.io/FossFLOW/ 💡 Быстрая, приватная и лёгкая альтернатива тяжёлым десктопным редакторам. 🔗 GitHub: github.com/stan-smith/FossFLOW

🪐 Новый UI-фреймворк в стиле Sci‑Fi — Cosmic UI 🌌 Cosmic (https://github.com/rizkimuhammada/cosmic-ui) UI — это open-source библиотека футуристичных компонентов на React + TailwindCSS + TypeScript. Всё выполнено в стиле научной фантастики — идеально для проектов с «космическим» вайбом. 🔧 Внутри: - Компоненты с анимациями и голографическими эффектами - Документация + демо: [cosmic-ui.com](https://cosmic-ui.com/docs) - MIT лицензия — можно использовать как угодно - Поддержка Vite, TS, ESLint, Vercel ⚡ Почему стоит попробовать? - Готовые стилизованные компоненты экономят кучу времени - Идеально для игр, дашбордов, кастомных интерфейсов - Выглядит не как все остальные boring UI-библиотеки 📦 Установка: npm install cosmic-ui 📌Github (https://github.com/rizkimuhammada/cosmic-ui)

🚀 Реактивное программирование в Angular Современный Angular предоставляет два подхода к реактивному программированию: RxJS и Signals. На открытом уроке мы разберём оба подхода, покажем, в чём их различия, как они дополняют друг друга, и как выбрать правильный инструмент под задачу. 👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре? - Что такое реактивное программирование в контексте Angular - Observable и Signals: в чём разница, когда что использовать - Операторы RxJS - Создание и управление сигналами (signal, computed, effect) - Как внедрить сигналы в компоненты, шаблоны и сервисы - Связь между RxJS и Signals через rxjs-interop Бесплатный вебинар проходит в рамках курса “Angular Developer“ Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3NDgF7 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

📊 Plotly for R — пакет для создания интерактивной визуализации в R с использованием JavaScript-библиотеки plotly.js. Позволяет превращать статические ggplot2-графики в динамические веб-визуализации с помощью одной функции ggplotly(). Инструмент имеет поддержку анимаций, кастомизации подсказок и интеграции с Shiny. Пакет особенно полезен для создания интерактивных дашбордов и отчетов в RMarkdown. 🤖 GitHub (https://github.com/plotly/plotly.R)

😱💻 Хотите прокачать архитектурные скилы и стать востребованным fullstack-разработчиком? Пройдите вступительный тест и получите бесплатные уроки курса «C# ASP.NET Core разработчик» от OTUS!👉 Пройти тест: https://clck.ru/3NBGrt 🚀 Зарядите карьеру: увеличьте доход, берите сложные проекты и работайте с современным стеком!Всего за 6 месяцев вы научитесь: • Разрабатывать веб-приложения на ASP.NET Core, рассматривая ASP.NET подробно, со всеми его механизмами • Создавать различные технологии межсервисного взаимодействия + реалтайм с клиентским приложением •Интегрировать фронтенд (ReactJS + JavaScript+Typescript) с бэкендом • Тестировать приложения: интеграционные и нагрузочные тесты • Автоматизировать процессы с CI/CD и Kubernetes • Проектировать микросервисы и освоить event-driven архитектуру 🎁 Бонус: После теста — доступ к урокам! 👉 Проверьте свои силы прямо сейчас: https://clck.ru/3NBGrt Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

🤘 Пройди хардкорный тест по JavaScript+Angular ✔️ Ответь на 20 вопросов и проверь свои знания. Сможешь сдать — пройдёшь на продвинутый курс "Angular Developer". ⛔️ТЕСТ СМОГЛИ ПРОЙТИ ТОЛЬКО 40% УЧАСТНИКОВ ⏰ Время прохождения теста ограничено 25 минут ✍️ПРОЙТИ ТЕСТ: https://clck.ru/3NB7jF 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

✔️ Response-print-pdf — это UI Kit для создания PDF-файлов с использованием React и TypeScript. С Response-print-pdf создавайте и генерируйте PDF-документы с помощью React 📄. Этот UI-набор компонентов предназначен для создания PDF и печатных документов, таких как счета, брошюры и другие документы. Используйте простые и многократно используемые компоненты и шаблоны для создания профессиональных документов. Реализуйте свои идеи с помощью любимого фреймворка фронтенда React для создания PDF-документов следующего поколения. Забудьте о docx, latex или устаревших библиотеках. С помощью react-print-pdf вы получите: ☑️ Простоту в использовании ☑️ Готовые компоненты и шаблоны ☑️ 100% контроль макета ☑️ Интеграция динамических данных в PDF-файл https://github.com/OnedocLabs/react-print-pdf

Не пропустите! 23 июля в 20:00 пройдет бесплатный урок по теме "Зачем JavaScript-разработчику понимать бэкенд? От fetch до Node.js". Запись: https://clck.ru/3NB7qH Что будет на вебинаре? - Как устроено взаимодействие фронтенда с сервером: API, запросы, заголовки, ответы. - Почему поверхностные знания API тормозят рост и усложняют задачи. - Что нужно знать о Node.js и серверной части, даже если вы не fullstack. - Как уверенное понимание архитектуры влияет на производительность и автономность. - Почему знание бэкенда усиливает вашу позицию на проекте и на рынке. Что узнают участники? - Как работает связка клиент–сервер: от запроса до ответа. - Какие ошибки делают фронтендеры при работе с API — и как их избегать. - Как знание Node.js помогает даже тем, кто пишет только клиентскую часть. - Почему современный разработчик не может быть “только фронтом”. - Как это знание влияет на скорость разработки. Не забудьте записаться на урок и получить запись пред. вебинара: https://clck.ru/3NB7qH Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Анимация загрузки для любителей чего-то необычного #прелоадер #ожидание #загрузка https://codepen.io/jkantner/pen/qBbjEVQ

Веб-разработчики, ловите полезный инструмент: MetaExplorer — мощное SEO-расширение прямо в браузере. Показывает всё, что не так с вашей страницей: – битые ссылки – дубли заголовков – кривые или отсутствующие мета‑теги – проблемы с доступностью – и другие SEO‑косяки, которые сложно отследить вручную 🚀 Подходит не только для фикса багов, но и для улучшения качества перед релизом. Больше не нужно зарываться в DevTools или десятки валидаторов — всё видно сразу. Очень удобная штука: https://www.metaexplorer.co/

Введение в Angular: основы и практические навыки В ходе занятия познакомимся с основными концепциями Angular, разберем его ключевые компоненты и научимся создавать интерактивные и структурированные приложения. Что такое модули, компоненты, директивы, пайпы и сервисы, а также освоите работу с данными через привязку, настроите маршрутизацию и создадите простую форму с валидацией. 👉Какие ключевые темы и вопросы будут рассмотрены на вебинаре? - Поймут, как устроен Angular и как с ним работать. - Сумеют самостоятельно создать простое одностраничное приложение. - Освоят основы архитектуры приложения: компоненты, модули и маршруты. - Получат опыт настройки форм и базовой проверки данных. - Будут готовы к дальнейшему изучению Angular и построению полноценных проектов. Бесплатный вебинар проходит в рамках курса “Angular Developer“ Регистрация и подробнее о курсе Angular Developer - https://clck.ru/3N4XmD Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🖥 Rio — open-source фреймворк для разработки веб-приложений на чистом Python: не нужен ни HTML, ни CSS, ни JS — pip install rio-ui Rio привносит в Python компоненты в стиле React. Можно выбирать из множества встроенных компонентов и комбинировать их для создания своих собственных компонентов, а потом строить из тех свои приложения Готовые приложения, созданные с помощью Rio могут работать как локально на вашей машине, так и в Интернете. 🖥 GitHub (https://github.com/rio-labs/rio) 🟡 Доки (https://rio.dev/docs/tutorial-tic-tac-toe/1-rio-setup) 🟡 Примеры готовых веб-приложений (https://rio.dev/examples)

Красивый интерактивный учебник от команды Google Chrome — он прокачает вас в веб-разработке Внутри отличные материалы по HTML, CSS, JS, доступности, тестированию и ещё куча всякого полезного. https://web.dev/learn