Почему фронтэндеру надо быть экспертом в Webpack

https://link.medium.com/XvXzbtqp4eb

Nuxt | Определение типа устройства

@nuxtjs/device - вставляет флаги, указывающие тип устройства, доступные во всём приложении:

$device.isDesktop
$device.isMobile
$device.isTablet
$device.isMobileOrTablet
$device.isDesktopOrTablet
$device.isIos
$device.isWindows
$device.isMacOS
$device.isAndroid

Для использования в стилях можно добавить флаги в виде классов на родительский элемент:

<div id="app" :class="{ ...$device }">

4 лучших альтернативы Tailwind CSS на 2021 год

https://areknawo.com/top-4-tailwind-css-alternatives-for-2021/

Vue | Тестирование компонентов

Коллекция коротких примеров тестирования компонентов с использованием vue-test-utils – официальной библиотекой для тестирования vue компонентов. Также используется Jest – современный фреймворк для тестирования. Рассматривается vue-test-utils API и лучшие практики тестирования.

​​Как интегрировать нужную библиотеку или инструмент во Vue.js? Схема фронтенд-разработчика GitLab Ильи Климова

Фронтенд-разработчик в GitLab Илья Климов создал гайд о том, как интегрировать модули в проекте на Vue.js. Незнание часто ведет к проблемам, которых можно избежать, если применять простую схему.

Полный текст читайте на нашем сайте — https://highload.today/kak-integrirovat-nuzhnuyu-biblioteku-ili-instrument-vo-vue-js-shema-frontend-razrabotchika-gitlab-ili-klimova/

#vuejs #websocket #npm #apollo

Переписываем Nuxt Hacker News с помощью Fastify, Vite и Vue 3

https://vuejsdevelopers.com/2021/03/23/nuxt-vite-fastify/

Принципы юнит-тестирования

Автор: Хориков Владимир

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

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

#testing #русский

Todo list на Vue

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

👁‍🗨Практика Vue JS - создание CRM системы

▪️Урок 1. Создание приложения с Vue CLI 3 - Смотреть
▪️Урок 2. Страницы и layouts - Смотреть
▪️Урок 3. Основной layout - Смотреть
▪️Урок 4. Создание фильтра даты + меню - Смотреть
▪️Урок 5. Валидация с Vuelidate - Смотреть
▪️Урок 6. Как создать плагин сообщений - Смотреть
▪️Урок 7. Добавление Firebase - Смотреть
▪️Урок 8. Регистрация через Firebase - Смотреть
▪️Урок 9. Работа с API, валютами и компонентами - Смотреть
▪️Урок 10. Добавление категорий - Смотреть

@itlecture

#песочница #javascript #vue #css
Интересная анимационная панель кнопок на Vue

Ссылка на песочницу

Неплохие, хотя и достаточно очевидные (для меня во всяком случае) советы по улучшению вашего кода Vue

https://betterprogramming.pub/5-principles-for-writing-clean-and-maintainable-vue-js-code-35dfcf5ef08c

Vue | Динамический компонент

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

👉 @web_craft

​Фронтенд-разработка в Docker

Эта статья поможет фронтенд-разработчикам, которые работают или будут работать над совместным проектом. Здесь вы научитесь разрабатывать фронтенд, используя Docker, который поможет избавиться от проблем с совместимостью у разных людей и не только.

Подробнее в статье:

https://tprg.ru/o1vz

#docker #фронтенд

#ссылка дня

Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/

«SVG в вебе. Практическое руководство»

В дружественных чатах постоянно проскакивают вопросы о подключении SVG в HTML, об их оптимизации, стилизации и манипуляции над ними.

И каждый раз ответы – одинаковые. И не всегда верные и однозначные.

Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.

#svg #sprite #css

#песочница #javascript #vue #css
Адаптивные parallax карточки при наведении курсора, созданные с помощью Vue

Ссылка на песочницу

Как на самом деле тестировать UI
Методы тестирования, используемые ведущими командами инженеров

https://storybook.js.org/blog/how-to-actually-test-uis/

​Как тестировать фронтенд

Чтобы избежать проблем, нужно тестировать не только JavaScript-код, но даже HTML. Ведь проблемы с вёрсткой могут сильно испортить впечатления пользователя.

В этой статье автор рассказал, как в их компании тестируют фронтенд и, в частности, вёрстку и записал целый чек-лист:

https://tprg.ru/IzDW

#фронтенд #html

Рассказали о некоторых особенностях CSS-переменных, о которых почему-то редко говорят.

Читать статью

Работа со строками в современном JavaScript

https://www.baseclass.io/guides/string-handling-modern-js

Изучите основы Vue с Vue 3

https://blog.asayer.io/learn-the-fundamentals-of-vue-with-vue-3