Vue | Quasar — швейцарский нож для Vue

Quasar позволяет строить SPA-, SSR-, PWA-, Electron- и нативные мобильные приложения, а также делать браузерные плагины и пользоваться библиотекой компонентов на Material 2.0. И всё это строится на одной кодовой базе, что теоретически позволяет некий функционал реализовать одновременно под почти все возможные платформы и запросы. Всё это многообразие тщательно стандартизировано и задокументировано, чтобы сделать жизнь разработчика легче и сформировать непреодолимую привязанность к проекту.

Get Programming with Node.js

Автор: Jonathan Wexler
Год издания: 2019

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

#node #english

Vue | Решаем задачу с валидацией форм

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

В статье показываются и сравнивают способы валидации полей:
-Валидации с помощью средств HTML5
-Валидации без использования библиотек
-vee-validate
-Vuelidate

Современный JavaScript для нетерпеливых

Автор: Кэй С. Хорстман

Год издания: 2021

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

#javascript #русский

☕️ 7 советов изучающему Vue.js новичку

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

https://proglib.io/w/fe8fa290

#vue

Vue UI - Первый взгляд

Наглядный обзор возможностей утилиты Vue UI для развертывания и управления проектами на Vue.js.

В третьей версии популярного JavaScript-фреймворка Vue появилась новая функциональность Composition API, которая значительно облегчает жизнь программисту. Она упрощает повторное использование логики в разных модулях больших приложений, позволяет лучше отслеживать и оптимизировать сложный код.

https://nuancesprog.ru/p/11296

@nuancesprog #статьи #Vue

Vue | Библиотеки UI-компонентов для Vue 3

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

В статье рассмотрены библиотеки компонентов пользовательского интерфейса, которые работают с Vue 3 на 2021 год, и показан прогресс разработки трех основных библиотек UI-компонентов.

UI-библиотеки поддерживающие Vue 3:
- Element
- Ionic
- Primevue
- Vuetify - обещают поддержку в третьем квартале 2021
- Quasar - обещают поддержку в первом квартале 2021

Lazy Load Routes во Vue с динамическими комментариями webpack

https://css-tricks.com/lazy-load-routes-in-vue-with-webpack-dynamic-comments/

Nuxt | 7 советов для разработки большого приложения

- Используйте свой файл с роутами
- Используйте Vuex store factory function
- Генерируйте файлы с помощью extend()
- Инициализируйте глобальный пользовательский код

И другие советы с примерами реализации и разъяснением в статье.

​Разработка PWA с поддержкой распознавания лица и голоса

Этот материал посвящён продвинутым возможностям PWA (Progressive Web Application, прогрессивное веб-приложение), основанным на некоторых современных API. А именно, здесь мы поговорим о разработке веб-проекта, поддерживающего распознавание лица и голоса. Тем, что раньше было доступно только в обычных приложениях, теперь можно воспользоваться и в PWA. Это открывает веб-разработчикам множество новых возможностей.

https://proglib.io/w/10bdd9f3

#pwa

​Пишем мессенджер на Vue в облаке Amazon

WhatsApp, Telegram, Viber — всё так избито и банально... Пора создать свой собственный мессенджер, который будет соответствовать вашим собственным предпочтениям!

В этом руководстве как раз расскажут, как это сделать начиная от фронтенда и аутентификации, заканчивая бэкендом:

https://tprg.ru/8Dog

#vue #aws

Nuxt | Создаём PWA интернет-магазин

Серия статей шаг за шагом рассказывающая о создании и оптимизации интернет--магазина.

Структура интернет магазина:
- Главная страница с каталогом товаров
- Страница категорий со списком товаров
- Карточка товара
- Страница оформления заказа

Возможности приложения:
- Модальные окна.
- Хранение идентификатора пользователя в cookie.
- Ленивая подгрузка и гидрация компонентов.
- Сжатие изображений, стилей, скриптов, html кода и всего что только можно.
- 2 версии сайта: 1) для последних браузеров которым не нужен транспилированный код (через Babel) 2) Legacy версия транспилированная через Babel.
- Умная загрузка шрифтов без FOUT, FOIT, FOFT.
- Поддержка всех браузеров от IE 10.
- Поддержка svg.
- Работа со всеми SEO тегами.
- Автоопределение устройства пользователя ещё до рендера сайта, для отдачи нужного html контента.
- Работа с API с помощью XHR запросов.

https://habr.com/ru/post/490496/

Реализация шаблона Builder во Vue.js, часть 1: Списки

https://webdevblog.ru/realizaciya-shablona-builder-vo-vue-js-chast-1-spiski/

Vue 3 | Suspense - пример использования

Suspense — это специальный компонент, который отображает резервный контент вместо вашего компонента, пока не будет выполнено условие. Подробности в статье.

Почему вы должны превратить свое приложение в PWA

https://blog.logrocket.com/why-you-should-turn-your-app-into-a-pwa/

Vue | Renderless компоненты, логика не зависимая от содержимого

Renderless Components – это компоненты, которые не рендерят свой HTML. Они управляют состоянием и поведением, предоставляя один scoped slot, который позволяет родителю/потребителю контролировать рендеринг. Renderless components рендерят ровно то, что вы в них передадите без дополнительных элементов.

Подробности и примеры использования в статье.

Vue | Использование Vue вместе с WordPress

В статье шаг за шагом разобрано использование WordPress в качестве headless CMS с Vue.js фреймворком:
1. Создание моделей с настраиваемыми полями в WordPress
2. Создание пользовательской конечной точки для API REST WP (API URL)
3. Настройка одностраничного приложения Vue.js
4. Хостинг приложения

​Руководство по React для разработчика Vue.js

Освоив один инструмент нельзя останавливаться, необходимо иметь в арсенале сразу несколько. Это повысит и ваши навыки, и востребованность на рынке.

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

https://tprg.ru/FDcI

#фронтенд #react #vue

Vue | Реализация паттерна Builder

Шаблон строителя (Builder) — это шаблон создания (Creational) в объектно-ориентированном программировании. «Creational» означает, что он обычно используется для упрощения процесса создания новых объектов. В приложениях Vue.js все строится на основе компонентов, и в нашем случае мы хотим, чтобы класс строителя создавал для нас новый компонент (так как на самом деле компонент не что иное, как объект).