BALLSORT на $mol

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.Демка представляет собой игру, в которой перемещаются разноцветные шарики между трубками, цель игры - отсортировать шарики по цветам за наименьшее количество шагов.Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь. Читать далее
https://habr.com/ru/articles/741040/?utm_campaign=741040&utm_source=habrahabr&utm_medium=rss

Как сделать кастомный Semi Donut Chart с помощью SVG

Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку). Читать далее
https://habr.com/ru/articles/741214/?utm_campaign=741214&utm_source=habrahabr&utm_medium=rss

BALLSORT на $mol. Часть 2

Сегодня мы продолжим переписывание на $mol этой демки. Кто не читал первую часть, рекомендую сначала ознакомиться с ней BALLSORT на $mol. Часть 1 Читать далее
https://habr.com/ru/articles/741256/?utm_campaign=741256&utm_source=habrahabr&utm_medium=rss

Низкоуровневая реализация полного цикла жизни компонента во Vue 2

В статье речь пойдет о низкоуровневой реализации цикла жизни компонента: объявление, монтирование в DOM, дестрой экземпляром компонента самого себя.Мы привыкли к наиболее частому использованию компонентов: объявление, регистрация, обращение к компоненту из другого с передачей параметров.  Описываем компонент в файле componentName.vue и вызываем в шаблоне другого компонента как <component-name /> А как быть если мы хотим вызвать скажем диалоговое окно из плагина? И хотим чтобы о нашем диалоговом окне не знало все приложение, а знал только плагин? Именно с такой задачей столкнулась на рабочем проекте и собирать информацию пришлось по крупицам. Расскажу как было реализовано все перечисленное. Я делала в плагине, но это не обязательно. Этот подход можно реализовывать и в самом проекте. Читать далее
https://habr.com/ru/articles/742310/?utm_campaign=742310&utm_source=habrahabr&utm_medium=rss

Vue.js 3 Design Patterns and Best Practices: Develop scalable and robust applications with Vite, Pinia, and Vue Router (2023)
Автор: Olaf Zander
Количество страниц: 296

#vue

В этой книге Vue 3 рассматривается с самых основ, включая компоненты и директивы, и постепенно переходит к более продвинутым темам, таким как маршрутизация, управление состоянием, веб-рабочие и автономное хранение. Начав с простой страницы, вы постепенно создадите полнофункциональное многопоточное, автономное и устанавливаемое прогрессивное веб-приложение.

К тому времени, когда вы закончите читать эту книгу по Vue, вы не только научитесь создавать приложения, но и поймете, как эффективно решать общие проблемы, применяя существующие паттерны проектирования. Обладая этими знаниями, вы сможете не изобретать велосипед для каждого проекта, а экономя время создавать программное обеспечение, адаптируемое к будущим изменениям.

Скачать книгу

Использование Ionic и Vue 3 для создания мобильных приложений

В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для создания кросс-платформенных приложений. В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor. Вперед под кат) Под кат!
https://habr.com/ru/articles/743778/?utm_campaign=743778&utm_source=habrahabr&utm_medium=rss

Сравнение тяжеловесности популярных библиотек IU компонент для Vue 3

Библиотеки UI компонент популярны и удобны в некоторых случаях, но у них тоже есть обратные стороны. Одно дело, когда делаешь админку и используешь десятки компонент, другое - когда тебе надо всего пару компонент.Я провел исследование - взял три HTML элемента: Button, Input и Select, и посмотрел, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3. Читать далее
https://habr.com/ru/articles/745012/?utm_campaign=745012&utm_source=habrahabr&utm_medium=rss

Как я переписал свой проект на Svelte

Приветствую всех. Уже как неделю я переписываю свой проект, который был на Vue options api с использованием Quasar и перевожу его на Svelte-Sveltkit-DaisyUI. Скажу сразу, он мне очень понравился, особенно в если учитывать что Vue composition api стал больше похож на React, нежели чем на самого себя. Складывается впечатление что Svelte это то к чему должен был прийти Vue, но он пришел к реакту))) (ты должен был бороться...)Итак, тот код, который я писал на вью(вуй в простонародье) 10 месяцев на свелт был написан за 9 дней, и то успел добавить дополнительные функции. Кое-что еще не реализовано, но это легкая часть, которая займет дня 3-4, не больше. Затем привязка к бэкенду и тестирование и через 2-3 недели все должно быть в целом готово. Справедливости ради стоит отметить что не все время из этих 10 месяцев было использовано на написание кода. Половина времени было потрачено на безрезультатные попытки(пытки) написать бэкенд самому. Прыгал с одной технологии на другую, но в основном пытался(пытал себя) написать на фшарп. Ничего не вышло, перешел на ноду-экспресс. Кое-что вышло, но в процессе написания понял что бэк не мое. Один бэкендер говорил что работа бэкендера это как 8 часов решать "судоку" на работе, а в остальное время решать судоку для отдыха. Полностью с этим согласен. Главное что вовремя осознал свою неспособность писать бэкенд, а заодно и нелюбовь решать судоку. Хотя когда был в школе любил, вероятно и бэк в то время зашел бы, но не факт. Отныне, если когда-нибудь я буду писать бэк для чего-то, то буду использовать лишь готовые вещи вроде strapi или directus. Читать далее
https://habr.com/ru/articles/745780/?utm_campaign=745780&utm_source=habrahabr&utm_medium=rss

AbortController для отмены pending запросов при смене страницы (SPA)

Существует довольно распространенная проблема, когда пользователь заходит на страницу, для этой страницы начинают запрашиваться различные данные, но вдруг пользователь быстро переходит на другую страницу, а запросы с предыдущей страницы продолжают выполняться, все еще используя ресурсы сети и выполняя ненужную работу.

Особенно неприятно это становится тогда, когда у пользователя медленный интернет и каждый лишний запрос еще больше замедляет работу вебсайта. К слову, про оптимизацию SPA я писал в этой статье, а эту статью можно использовать и как небольшое дополнение и еще один способ оптимизации для пользователей с плохим интернетом.А иногда это приводит и к ошибкам. Например, у нас есть две страницы - страница соревнований и страница турниров, обе страницы имеют id в URL и данные запрашиваются по этому id. Когда пользователь быстро переходит со страницы турнира на страницу соревнования, то id турнира может подмениться на id соревнования, и тогда получится, что запрос пойдет на несуществующий для турнира id и упадет ошибка.Когда я столкнулся с этой проблемой, то первой мыслью было использовать AbortController для отмены таких “висящих” запросов, и я решил загуглить как это правильно сделать, но сразу же был крайне удивлен тем, что советы на stackoverflow или различные статьи как-то очень странно и скудно освещали эту проблему, иногда предлагая абсолютно нерабочие решения, поэтому и решено было написать эту статью, чтобы показать конкретный рабочий пример.Для тех, кто с этим не знаком, AbortController - это, простыми словами, интерфейс, который позволяет управлять отменой http запросов со стороны фронтенда. Читать далее
https://habr.com/ru/articles/746740/?utm_campaign=746740&utm_source=habrahabr&utm_medium=rss

Динамический импорт remote компонента Module Federation на Vue 3

Приветствую всех читателей, что забрели на эту страницу. Вероятно, вы тоже как и я, не нашли должной информации по этой теме, поэтому наслаждайтесь, ведь тут будет вся нужная информация для корректной работы runtime импорта! Узнать о Module Federation
https://habr.com/ru/articles/747384/?utm_campaign=747384&utm_source=habrahabr&utm_medium=rss

Оптимизация изображений для пользователей с медленным интернетом с помощью Network Information API

Многие из нас привыкли к тому, что быстрый и стабильный интернет это данность в 2023 году, поэтому оптимизацией вебсайтов под этот случай особо не занимаются. Однако все еще остаются сценарии, когда это не так: например, в дороге между населенными пунктами или в некоторых помещениях, которые либо находятся под землей, либо плохо пропускают сигнал по какой-то другой причине.

Для нашего проекта combat-sport.club как раз актуальна ситуация, когда взвешивание перед проведением соревнований нередко происходит в каком-нибудь подвальном помещении с плохой связью, и тяжелый SPA с большим количеством медиа может грузиться очень долго. В свою очередь это влияет и на возможность работать с платформой и в целом на удовлетворенность пользователей.

Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.

В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue. Читать далее
https://habr.com/ru/articles/748272/?utm_campaign=748272&utm_source=habrahabr&utm_medium=rss

Правда ли Astro так быстр, сравнение с Nuxt 3

Всем привет, в последнее время, много вижу/читаю/слышу про astro, про то, какой он быстрый, производительный. Поэтому я решил потыкать Astro и параллельно проверить насколько он быстрый - я написал на нем примитивный блог с 600 карточками и сравнил его по производительности с Nuxt 3 SSG. Правда ли производительность 100 ?
https://habr.com/ru/articles/748366/?utm_campaign=748366&utm_source=habrahabr&utm_medium=rss

Строим свой SSO. Часть 3: Redis, Swagger, Vue.js

Всем привет, мы продолжаем строить собственный SSO Server. Сегодня мы разберем подключение Redis и Swagger к нашему проекту. А также построим собственную, красивую форму аутнетификации, используя VueJS. Читать далее
https://habr.com/ru/articles/748584/?utm_campaign=748584&utm_source=habrahabr&utm_medium=rss

Сервис для обнаружения типа устройства пользователя на typescript и vue

Так-с, уважаемые читатели, всех радостно приветствую! Это небольшая статейка как раз для тех людей, которые хотят по быстрому вот такой функционал:- обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно- обнаруживать какая ориентация на данный момент у пользователя- обнаруживать какой тип устройства имеет пользователь: desktop, tab, phoneЗвучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :) Читать статью
https://habr.com/ru/articles/748890/?utm_campaign=748890&utm_source=habrahabr&utm_medium=rss

Холодная и горячая последовательность RxJS

Доброго времени суток, дорогие читатели!
В данной статье я буду рассказывать про холодную и горячую последовательность на примере такой задачи:
Пользователь заходит на сайт и начинается внутренняя прослушка (какой либо запрос на сервер с получением данных, в нашем же случае будет обычный sleepAsync - функция с таймаутом и остается только его подхватить и обработать). Режимов прослушки два - оптимизированный (будем называть горячим) и константный (будем называть холодным). При условии активности пользователя на вкладке, включаем оптимизированный метод, если же пользователь покинул вкладку, включаем константный. Также нужно показывать количество времени, которое занимала прослушка. Просвятиться
https://habr.com/ru/articles/751268/?utm_campaign=751268&utm_source=habrahabr&utm_medium=rss

Swipe sidebar — отдельный Typescript сервис и обработка touch событий на Vue

Приветствую, друзья технологии!Сегодня в мире постоянно меняющихся технологий и уникальных разработок смартфонов, планшетов и других устройств, оказаться "в тренде" - это как настоящее искусство. Каждый из нас хочет использовать устройства, которые позволяют нам легко и интуитивно взаимодействовать с миром цифровых возможностей. Одной из фантастических новинок, которая взрывает сознание пользователей и разработчиков, является свайп-сайдбар – это гениальное решение для эффективной навигации и управления контентом!Вам, наверняка, приходилось сталкиваться с ситуацией, когда приложение или веб-сайт предлагают свернутый сайдбар, который появляется с одного края экрана после легкого свайпа пальцем. Это действительно захватывающий опыт, который добавляет удобство и стиль в нашу повседневную жизнь.В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов! Читать далее
https://habr.com/ru/articles/751618/?utm_campaign=751618&utm_source=habrahabr&utm_medium=rss

Валидация формы с помощью AJV, Vue.js и TypeScript

Валидация форм является важной частью фронтенд-разработки, которая помогает улучшить пользовательский опыт и предотвратить ошибки при отправке данных на сервер. В этой статье мы рассмотрим, как использовать библиотеку AJV совместно с Vue.js и TypeScript для создания мощной системы валидации формы. Читать далее
https://habr.com/ru/articles/752074/?utm_campaign=752074&utm_source=habrahabr&utm_medium=rss

[Перевод] Skeleton Mammoth — или как я решал проблему переиспользуемых скелетон лоадеров

После подробного изучения темы скелетонов, я решил создать очень простое, гибкое, переиспользуемое, настраиваемое и легкое решение, которое подойдет для большинства случаев использования. В этой статье я опишу процесс создания этого решения и превращения его в библиотеку, а также трудности, с которыми я столкнулся при работе над ним. Читать далее
https://habr.com/ru/articles/751956/?utm_campaign=751956&utm_source=habrahabr&utm_medium=rss

Для тех, кто ещё думает о переходе на vue 3

Всем привет! Мы ИТ-компания BSL - технологический партнер в продуктовой разработке и интеграции. И это наш первый обзорный материал для хабра-блога. В BSL мы успешно разрабатываем фронтовую часть проектов как с использованием старой версии фреймворка Vue, так и с использованием новой. В данной статье наш Team Lead Frontend Developer - Андрей,  рассказал о некоторых нововведениях Vue 3, которые могут стать для вас веской причиной для перехода на новую версию. Читать далее
https://habr.com/ru/companies/bsl/articles/752172/?utm_campaign=752172&utm_source=habrahabr&utm_medium=rss

[Перевод] Шина между Веб-воркерами и основным потоком. Ускоряем работу JavaScript

Хотите узнать, как ускорить выполнение JavaScript в веб-приложениях? В этой статье я подробно расскажу о веб-воркерах, шине данных между основным потоком и веб-воркерами, и как это можно применить в Angular, React и Vue. Вы узнаете, как вынести тяжелые вычисления в отдельный поток, организовать обмен данными, и как это все собрать в единую архитектуру. Примеры кода, инструкции и советы внутри помогут вам сделать ваши проекты быстрее и эффективнее. Освоение этого подхода может стать значимым улучшением в ваших проектах. Загляните, если интересуетесь оптимизацией JavaScript Читать далее
https://habr.com/ru/articles/752526/?utm_campaign=752526&utm_source=habrahabr&utm_medium=rss