Javascript

🖥 Самые полезные библиотеки JS для красивых анимаций

⏩Держите отличную подборку библиотек, возможно что-то из этого списка идеально закроет ваши кейсы.
В статье речь идёт про:
├╼ Three.js
├╼ Mo.js
├╼ AniJS
├╼ Typed.js
├╼ Lottie
├╼ Anime.js
├╼ Popmotion
╰╼ и ещё некоторые другие
Enjoy)

📎 Статья

@javascriptv

⚡️ Большая подборка вопросов с собеседований: Frontend, Javascript, React, Vue и многое другое.

Подборка актуальных задач и вопросов с собеседований поможет вам подготовиться как к практике, так и к теории и получить заветный оффер.

▪Front-end. Вопросы на собеседовании - Репозиторий видеокаста, содержит коллекцию вопросов, которые можно получить на техническом собеседовании на вакансию Junior/Middle Front-end разработчик.

▪Вопросы (с ответами) кандидату на должность frontend разработчика

▪Front End Interview Handbook - В отличие от типичных собеседований, в frontend собеседованиях меньше внимания уделяется алгоритмам и больше вопросов о сложных знаниях и экспертизе в предметной области - HTML, CSS, JavaScript. Этот репозиторий содержит все, что вам нужно знать для прохождения собеседований frontend собеседованиями.

▪ Полное собеседование React разработчика 2024🧑🏻‍💻

▪Front-end Developer Interview Questions
список полезных вопросов с собесов.

▪ Interview-questions наиболее часто задаваемые вопросы Frontend-разработчику.

▪Список тестовых заданий на позицию JS-разработчика

▪10 задач по промисам JavaScript

▪Вопросы с собеседования на фронтенд разработчика React.js

▪100 вопросов по React для подготовки к собеседованию

▪ Список из 100 вопросов с собеседований Middle JavaScript разработчика в 2025 году

@javascriptv

⚡️ Ouroborus — CSS only

Крутая анимированная сцена, выполненная с помощью Pug и SCSS, без использования JavaScript.

https://codepen.io/graphilla/pen/GRxqzLj

@javascriptv

🖥 12 JavaScript-фреймворков, о которых стоит знать

⏩Next.js — это мощнейший фулстек-фреймворк JavaScript на основе React для веб-разработки быстрых и легко индексируемых сайтов. Он особенно хорош для тех, кто хочет создавать веб-страницы, которые быстро загружаются и легко находятся в поисковиках.

Одна из его ключевых особенностей — автоматическая оптимизация изображений и удобная система навигации по сайту. Это делает разработку страниц проще и улучшает пользовательский опыт. Next.js идеально подходит для создания современных веб-проектов, где важны скорость загрузки и удобство разработки.


⏩Vue.js часто рекомендуют в качестве старта для новичков в области JS-разработки благодаря его простоте в изучении. Он используется для создания пользовательских интерфейсов и одностраничных приложений.

Экосистема Vue включает в себя Vue Router для маршрутизации, Vuex для управления состоянием и Vue CLI для сборки проекта, что делает её комплексным решением для специалистов, ищущих баланс между производительностью, гибкостью и скоростью разработки.


⏩Svelte JS набирает популярность среди разработчиков, потому что предлагает революционный подход к созданию прогрессивных веб-приложений.

В отличие от Vue или React, Svelte JS минимизирует необходимость в активных обновлениях DOM во время выполнения приложения, так как большая часть работы проходит на этапе компиляции. Также к преимуществам отнесём то, что готовый продукт не требует высокой вычислительной мощности от клиентского устройства.

Про остальные фреймворки можно почитать тут
📎 Статья

@javascriptv

🖥 Q-OTP - двухфакторная аутентификация на VueJS

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

Компонент подключается как Quasar App Extension:

quasar ext add q-otp

Пример подключения:

<template>
  <QOtp
      field-classes="q-ml-xs q-mr-xs"
      @complete="(code) => alert(code)"
  />
</template>
<script lang="ts" setup>
  import QOtp from 'quasar-app-extension-q-otp'
</script>

🖥 Исходный код доступен на GitHub под лицензией MIT

@javascriptv

🖥 Основные тенденции развития JavaScript

Каковы основные тренды в JavaScript? На какие технологии и инструменты стоит обратить пристальное внимание?
Держите годный список от руководителя обучения JavaScript в EPAM Андрея Гордийчука — вот они, актуальные тренды:

⏩Переход к новым фреймворкам фронтенда
Одностраничные приложения (SPAs) и соответствующие фреймворки JavaScript, такие как React, Angular и Vue.js, все еще остаются популярными. Существует четкая тенденция перехода приложений с обработки на стороне клиента (CSR) на отрисовку на стороне сервера (SSR). Это требует от инженеров изучения новых фреймворков, таких как Svelte, Solid.js и Qwik.

⏩Производительность и рендеринг
Серверный рендеринг (SSR) и генерация статических сайтов (SSG) конкурируют в улучшении производительности и SEO. Последние несколько лет шаблоны рендеринга были относительно простыми, однако все более популярными становятся новые подходы, такие как Partial Hydration, Progressive Hydration и Island Architectures (Astro).

⏩Дизайн-фреймворки и дизайн-системы
Тенденции в дизайне пользовательского интерфейса (UI) включают:
— Minimal flat design и инструменты;
— Neo-brutalism on UI (контрастные цвета, мультяшная графика);
— Motion design.
Со стороны разработчиков такие инструменты, как Tailwindcss (API для вашей системы проектирования), PureCSS и Primer становятся популярнее, чем Bootstrap.

⏩Создание инструментов и монорепозиториев
На основе вышеупомянутых результатов, автоматизация процессов сборки, тестирования и развертывания приложений также будет претерпевать изменения. У Webpack более устоявшаяся экосистема и широкий спектр доступных плагинов, что делает его подходящим для более сложных проектов, но новые инструменты Vite и Turbopack становятся чрезвычайно востребованными благодаря своему более быстрому подходу встроенного модуля-скрипта и более простой конфигурации (что делает их более удобными в использовании), мгновенным обновлениям без полной пересборки, меньшим размером пакета.

📎 Читать подробнее

@javascriptv

🖥 Microsoft представила инструмент для веб-разработки Babylon.js 7.0 с новыми опциями процедурной геометрии

⏩Microsoft представила инструмент для веб-разработки Babylon.js 7.0 с новыми опциями процедурной геометрии для создания сложных веб-игр.

⏩В своем блоге Microsoft объявила, что одним из крупнейших нововведений Babylon.js 7.0 является поддержка процедурной геометрии (Procedural Geometry) под названием Node Geometry, которая должна помочь создавать сложные игровые миры без необходимости создания огромных файлов для 3D-иллюстрации игры. Microsoft заявила, что эта опция позволяет локальному ПК создавать сложный графический контент.

⏩Microsoft открыла доступ к описанию Node Geometry Editor, демо работы Node Geometry и инструментарию новой опции.

⏩Пользователи, которые пытаются загрузить и поиграть в веб-игру с поддержкой Node Geometry, могут просто «загрузить данные Node Geometry объемом в несколько КБ и позволить своему собственному ПК или мобильному устройству создать геометрию». Очевидно, это означает более быструю загрузку сложной веб-игры и повышение общей производительности проекта.

⏩В Babylon.js 7.0 добавлена ещё одна опция, которая широко распространена в стандартных компьютерных и консольных играх. Это поддержка физики рэгдолла (Ragdoll Physics) для анимации тела персонажей. Microsoft заявляет, что эта опция позволит «любому скелетному ассету проявлять значительные изменения одним нажатием кнопки».

📎 Подробнее

@javascriptv

🔥 Совсем недавно был выпущен бенчмарк Speedometer 3.0 от Mozilla, Google, Microsoft и Apple для измерения скорости отклика веб-приложений.

Speedometer 3.0, созданный совместными усилиями разработчиков из Mozilla, Google, Microsoft и Apple, представляет собой инструмент для оценки скорости отклика веб-приложений в различных браузерах. В новой версии Speedometer 3.0 были использованы новейшие версии фреймворков Angular, Backbone, jQuery, Lit, Preact, React, React+Redux, Svelte и Vue. Также были применены современные шаблоны проектирования сайтов и веб-приложений, такие как Webpack, Web Components и новые методы работы с DOM.

В бенчмарк добавлены тесты для оценки производительности отрисовки при помощи элемента Canvas, генерации SVG, обработки сложных CSS, работы с очень большими деревьями DOM, а также использования методов, применяемых при редактировании контента в режиме WYSIWYG и работе с новостными сайтами.

▪Github

@javascriptv

🖥 Список тестовых заданий на позицию JS-разработчика

⏩ Тестовое задание на позицию стажера-бекендера в юнит Авто (archived)

⏩ Тестовое задание для Javascript разработчика (JS, jQuery)

⏩ Тестовое задание на позицию cтажер-разработчик javascript HTML, CSS, JS)

⏩ JavaScript Developer (JS, Vue.js)

⏩ Frontend Developer (TypeScript/JavaScript, Angular/React/Vue)

Отличный вариант вспомнить основы перед собеседованием, пользуйтесь)

@javascriptv

🖥 DOM3D.js

Кодеры, ловите абсолютно безумный проект: разработчик написал инструмент для просмотра HTML/DOM, который позволяет оценить ваш сайт в 3D.

🖥 GitHub

@javascriptv

🖥 Какие темы освещаются в статье?

⏩Вы же знаете про HTMX?
HTMX — это небольшая, свободная от зависимостей библиотека JavaScript, позволяющая создавать передовые пользовательские интерфейсы с лёгкостью языка разметки. Она предоставляет доступ к AJAX, CSS Transitions, WebSockets и Server Sent Events напрямую в HTML с помощью атрибутов. Это стало переломным моментом для разработчиков, поскольку позволяет им добиться интерактивности (которую даёт JS), но непосредственно из HTML разметки.

И вот как раз о HTMX и идёт речь в этой статье

⏩Вот темы, которые освещаются:
• Установка HTMX
• Ajax-запросы с помощью HTMX
• Триггер запроса
• Модификаторы триггеров
• Фильтры триггеров
• Логирование и события в HTMX
• и ещё много всего

📎 Статья

P.S: Как думаете, какие перспективы у этой технологии? Из каких сфер HTMX может полностью вытеснить JS?

@javascriptv