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 все строится на основе компонентов, и в нашем случае мы хотим, чтобы класс строителя создавал для нас новый компонент (так как на самом деле компонент не что иное, как объект).

Vue | Топ 10 книг по Vue

Чтение документации отлично подходит для изучения теории, но в этих книгах сконцентрировано множество полезных хитростей, наглядных примеров и практической реализации самых разных примеров.

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

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

Если вы начали изучать Vue, то эти советы помогут вам быстрее в нём освоиться:

https://tprg.ru/Xn4H

Кстати, тут есть опытные разработчики на Vue? Напишите, чтобы вы ещё посоветовали новичкам.

#vue #javascript

Vue | Индикатор загрузки файла с Axios и VueJS

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

PWA для приложений на Vue: практическое руководство

https://dev.to/pegahsafaie/pwa-for-vue-applications-a-practical-guide-4de3

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

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

Как добавить такую возможность — в статье:

https://tprg.ru/VRgX

#pwa

Vue | Глобальные Sass/Less переменные

Глобальные переменные css перепроцессоров это удобно и экономит много времени при разработке, можно создать отдельный файл, в котором будут собраны все переменные, но как его использовать в большом проекте, чтоб не пришлось вручную подключать в каждый новый файл компонентов?

По ссылка вы найдете статьи с решением этой проблемы для Vue.js и Nuxt.js

Нагрузочное тестирование веб-сокетов с помощью k6.

https://proglib.io/w/71603b39

Vue | Onsen UI компоненты для мобильных приложений

Onsen UI предоставляет широкий спектр готовых к использованию компонентов Vue, которые соответствуют рекомендациям и дизайну пользовательского интерфейса iOS и Android

Vue | Коллекция реализованных проектов

made with vue.js - сайт где собрано всё что связанно с vue.js
- Приложения
- Шаблоны
- Книги
- Фреймворки
- Игры
- Плагины
- Руководства
- и многое другое

Все записи снабжены ссылками на репозитории и документацию.

JavaScript. Полное руководство

Автор: Дэвид Флэнаган

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

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

#javascript #русский

📌 Django + Docker

● Django + Docker на русском - часть 1 - Смотреть
● Vue.js + Docker на русском - часть 2 - Смотреть
● Django + Docker разделение настроек - часть 3 - Смотреть
● Django + Docker deploy - часть 4 - Смотреть
● Vue + Docker deploy - часть 5 - Смотреть
● Vue + Docker deploy - часть 5/1 - Смотреть

@itlecture