Vue.js Digest 🇷🇺 🇺🇸
39 subscribers
389 photos
745 links
Дайджест новостей из мира vuejs
Download Telegram
Валидация формы с помощью 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
React vs Vue vs Angular. Часть 2

В прошлой части мы рассмотрели основные концепты и различия каждого фреймворка. Для большего понимания различий фреймворков, а также выбора, какой из них подходит для ваших проектов и команды, в этой статье рассмотрим подход каждого фреймворка к написанию монолитных частей фронтенд приложений: функционала, управления состоянием и роутинга. Читать далее
https://habr.com/ru/companies/auriga/articles/753270/?utm_campaign=753270&utm_source=habrahabr&utm_medium=rss
Написание Vite плагина

Сборщик Vite предоставляет не только хороший функционал, но и удобный API для создания плагинов, позволяющих кастомизировать его практически под любую задачу. То есть, плагины можно писать не только для публикации их в npmjs.com репозитории, но и для автоматизации исключительно своих задач.Сложность написания плагина сравнима со сложностью написания сценария для Gulp или GitHub Actions. Для примера напишем плагин, который будет вставлять фрагменты кода в файл index.html. В зависимости от проекта в данный файл необходимо помещать код Google Analytics, метатэги Open Graph и Twitter, подключение Service worker-a, виджета чата поддержки, сплэш скрин и многое другое. В результате index.html становится очень большим и ориентироваться в нем и блоках кода довольно сложно.Наш плагин позволить держать фрагменты кода в отдельных файлах, а при сборке все будет помещаться в index.html. Причем это будет происходить не только при непосредственно сборке ( npm build ), но и при запуске Vite dev сервера с поддержкой HRM (Hot Module Replacement). Читать далее
https://habr.com/ru/articles/753788/?utm_campaign=753788&utm_source=habrahabr&utm_medium=rss
Капибара, Новый Старый Пикабу

Пикабу долгое время было уютным уголком для обмена историями, опытом, творчеством, мнениями и эмоциями. Однако ряд нововведений, таких как отмена баянометра, изменение алгоритмов и скрытие отрицательных оценок, привели к потере духа оригинального портала. Многие из нас, пришедшие туда в молодости и теперь ставшие взрослыми, почувствовали, что наши ценности и мнения игнорируются. В ответ на это, мы, группа энтузиастов, создали "Капибару" – проект, который стремится сохранить лучшие стороны Пикабу, предоставляя пространство где пользователи сами решают какой контент "годный" и какой контент хотят видеть в своей ленте. Читать далее
https://habr.com/ru/articles/759598/?utm_campaign=759598&utm_source=habrahabr&utm_medium=rss
Базовые принципы UX для frontend-разработчика

Знаете, однажды в какой-то статье я наткнулся на интересное высказывание, которое гласило, что фронтенд-разработчик может стать последним рубежом, который может предотвратить создание «неюзабельного» UI. И это чертовски меткое и выразительное высказывание, которое отчасти и привело меня к созданию этой статьи про базовые принципы UX, которые не помешало бы иметь на вооружении каждому фронтенд-разработчику.Дизайн превью: Марина Четвертакова Читать далее
https://habr.com/ru/articles/755532/?utm_campaign=755532&utm_source=habrahabr&utm_medium=rss
Как сделать свой UI Kit на Vue 3 + storybook и задеплоить его на npm

Сейчас очень популярная история создавать свой UI Kit и везде рассказывать какой он крутой и как он ускорил разработку, поэтому я решил написать небольшой гайд, как заиметь себе собственный UI Kit. После моего туториала, вы тоже сможете рассказывать какой у вас крутой UI Kit, но это не точно :) Запилить свой UI Kit
https://habr.com/ru/articles/761570/?utm_campaign=761570&utm_source=habrahabr&utm_medium=rss
Vue-faq.org — FAQ о фронтенде в целом и Vue в частности

https://vue-faq.org - попытка охватить наиболее часто задаваемые в профильных чатах и конференциях вопросы о фронтенде в целом и Vue.js фреймворке в частности. Читать далее
https://habr.com/ru/articles/760636/?utm_campaign=760636&utm_source=habrahabr&utm_medium=rss
Парсинг, хранение и отображение логов 4-х разных агентов доставки электронной почты. Развитие MTA Log Parser

В продолжение моей предыдущей статьи о MTA Log Parser хотелось бы поделится результатами работы над теми хотелками, которые появились после ее публикации. Появился первый feedback, который в итоге принес следующие нововведения: Читать далее
https://habr.com/ru/articles/763110/?utm_campaign=763110&utm_source=habrahabr&utm_medium=rss
Tailwind не только для MVP

Всем привет!Обычно tailwind используют для каких-то MVP/админок/не очень больших проектов, но мне кажется, что tailwind, имеет место быть в средних и крупных проектах. Большинство его минусов решаемы, а плюсы чертовски хороши :)В этой статье я распишу его плюсы и минусы и как можно минусы превратить в плюсы. Tailwind больше чем просто MVP
https://habr.com/ru/articles/763126/?utm_campaign=763126&utm_source=habrahabr&utm_medium=rss
Nuxt3, Vue3, CKEditor и прочие WYSIWYG

В один прекрасный момент мне понадобилось прикрутить WYSIWYG редактор в проект написанный на Nuxt 3. Очень быстро выяснилось что готовых решений полно, но, подавляющее большинство написано для Nuxt 2 и Vue 2, есть немало решений поддерживающих Vue 3, правда прикрутить их в Nuxt 3 это целый квест, о прохождении которого я хотел бы и рассказать. Читать далее
https://habr.com/ru/articles/763252/?utm_campaign=763252&utm_source=habrahabr&utm_medium=rss
Кулинарный гид по Vue.js: всё о props

Привет, Хабр! В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. Props – от слова «properties» (здесь и дальше будем использовать слово «props») – это специальные атрибуты, используемые в экосистеме Vue для передачи данных в компоненты. Они являются частью системы реактивности, позволяют определять типы данных и проводить с ними валидацию.По большей части мы будем покрывать основы передачи props. Поэтому статья будет актуальна как для Vue 2, так и для Vue 3, поскольку по части объявления props отличий мало. Но так как в Composition API и TypeScript все же они есть, то мы рассмотрим их тоже.Если вы подходите под все эти условия, то добро пожаловать, мы начинаем наш кулинарный гайд! Bon appétit! Читать далее
https://habr.com/ru/companies/simbirsoft/articles/765024/?utm_campaign=765024&utm_source=habrahabr&utm_medium=rss
Как типизировать Vuex Store

Всем привет!В этой статье мы поймем, нужно ли вам типизировать Vuex Store или нет, и если вы достаточно отчаянны, поймем, как его типизировать и не пасть смертью храбрых.You are welcome! Хочу типизировать Vuex
https://habr.com/ru/articles/765164/?utm_campaign=765164&utm_source=habrahabr&utm_medium=rss
Сайд эффект реактивности и апдейта компонента во Vue 3

Хочу рассказать о небольшом кейсе, связанном с работой реактивности во Vue 3. Кейс касается взаимосвязи ref/reactive, v-for/v-if, :class, функций и того, что у нас находится в <template>. Сразу оговорюсь, что под капотом не смотрел, поэтому детальных объяснений не ждите. Наоборот, хотелось бы услышать ваши мнения, сталкивались ли вы с подобными сайд эффектами. Читать далее
https://habr.com/ru/articles/766958/?utm_campaign=766958&utm_source=habrahabr&utm_medium=rss
[Перевод] Миграция с Vue 2 на Vue 3: Новые Фичи

В этой статье погрузимся с головой в захватывающий мир новых возможностей Vue 3.Эта поистине революционная версия горячо любимого всеми нами JavaScript-фреймворка стремится стать переосмыслением подхода к созданию веб-приложений, предлагая множество улучшений, оптимизаций и инструментов, призванных сделать процесс разработки более плавным, быстрым и приятным.Без лишних отлагательства приступим к делу! Читать далее
https://habr.com/ru/companies/otus/articles/767266/?utm_campaign=767266&utm_source=habrahabr&utm_medium=rss
[Перевод] Vue.js 3 — шаблоны проектирования и лучшие практики

Предлагается перевод книги Vue.js 3 Design Patterns and Best Practices автора Pablo Garaguso.Книга вышла в мае 2023 года, написана очень компетентно, оперирует современными технологиями и стандартами. Материал книги будет полезен разработчикам не только Vue, но и других фронтенд фреймворков. Читать далее
https://habr.com/ru/articles/768080/?utm_campaign=768080&utm_source=habrahabr&utm_medium=rss
Где взять друзей для Hamster Kombat?

Чтобы собирать некоторые комбо в Hamster Kombat, вам необходимо иметь минимум троих друзей. А где их взять?

Можно попробовать найти новых друзей для Hamster Kombat в тематических сообществах по криптовалютам и играм в социальных сетях и на форумах. Также вы можете присоединиться к группам Hamster Kombat в Telegram. Но это все долго и муторно.

https://hamster-kombat.su/academy/gde-vzyat-druzej-dlya-hamster-kombat/

#HamsterKombat