Как стать автором
Обновить
9.32

VueJS *

Прогрессивный JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Парсинг, хранение и отображение логов 3-х разных агентов доставки электронной почты. MTA Log Parser

Время на прочтение 3 мин
Количество просмотров 3.7K

Эта моя первая коротенькая статейка на Хабре в попытке сделать проект, который делал для себя в целях самообразования и применения на работе, полезным кому-то еще. Можно было бы написать больше букв, но ввиду особенностей профессиональной деятельности, времени на это мягко говоря не очень много. Кто заинтересуется, всегда может подробности почерпнуть самостоятельно на гитхабе.

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 9

Делюсь опытом участия в хакатоне от Совкомбанка

Время на прочтение 12 мин
Количество просмотров 3.7K

Сегодня, я хочу поделиться опытом и рассказать про участие в хакатоне от совкомбанка. Подробнее про хакатон можно почитать тут. Для лл я вкратце опишу задачу — командой до 5 человек сделать внутренний сервис для подбора персонала и ведения HR деятельности.

Читать далее
Всего голосов 20: ↑15 и ↓5 +10
Комментарии 9

Свой NPM репозитарий Verdaccio + GitLab + Docker

Уровень сложности Средний
Время на прочтение 3 мин
Количество просмотров 3.2K

Требовалось кешировать используемые в разных проектах NPM пакеты (+ хранить свои пакеты) на отдельном сервере.

Было решено делать это с помощью репозитария Verdaccio (по нему есть достаточно хорошая офф. дока), крутится это все должно в Docker, а разворачиваться на отдельном сервере через GitLab CI/CD.

Т.к. реализация данной схемы заняла у меня некоторое время (Хотелось бы и по меньше), решил написать короткий туториал по этой теме, с описание нюансов, которые для меня казались не очевидными.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 8

[Разбор резюме] Фронтенд-разработчик: как не утопить рекрутера в технологиях и не потерять фокус

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 12K

Это вторая статья из нашей рубрики «Разбор резюме». В первой мы разбирали резюме бэкендера, а здесь нам прислал свое CV фронтендер. Давайте посмотрим и разберем, что в нем можно улучшить: почему это резюме вообще лучше бы превратить в несколько, стоит ли включать в список навыков «опытный пользователь ПК» и как определяется уровень владения той или иной технологией.

Резюме достаточно длинное, так что разбирать мы его будем поэтапно.

Читать далее
Всего голосов 15: ↑13 и ↓2 +11
Комментарии 6

Истории

Миграция на Vue 2.7

Уровень сложности Простой
Время на прочтение 9 мин
Количество просмотров 5.7K

Здравствуйте! В данной статье я бы хотел поделиться своим опытом обновления проекта, написанного на Vue 2.6. Помимо обновления самого vue и компонентов, я на примерах покажу как мне удалось обновить другие зависимости проекта и адаптировать их для работы с Composition API.

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 3

Детокс для i18n

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 5.7K

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно располнела. В ней много возможностей для локализации дат, чисел, установки нужных склонений, поддержки RTL языков, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".

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

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 11

Как заставить бэкендера писать фронтенд

Уровень сложности Простой
Время на прочтение 10 мин
Количество просмотров 15K

Всем привет! Меня зовут Иван Ситкин, я бэкенд-разработчик в Едадиле. Сегодня я хочу поделиться с вами историей написания очередной панели администрирования и как из этого мы собрали подходящие подходы и практики.

Для начала давайте вспомним, что же это за панели. Панель администрирования (или админка) — это приложение, которое используется для управления и настройки приложения. То есть это такой продукт для продукта. Панели администрирования нужны для различных целей, например, для создания и редактирования контента, настройки параметров продукта или управления пользователями.

Но иногда в проектах важна скорость и ресурсов на создание админки с привлечением команды фронтенда откровенно не хватает. И тогда бэкендеру приходится брать процесс в свои руки.

А теперь вы готовы погрузиться в эту кроличью нору.

Читать далее
Всего голосов 29: ↑26 и ↓3 +23
Комментарии 70

Представляем вам Vue 3.3

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 13K

Сегодня мы рады объявить о релизе Vue 3.3 "Rurouni Kenshin"!

Этот выпуск сосредоточен на улучшении опыта разработки - в частности, на использовании SFC <script setup> с TypeScript. Вместе с релизом 1.6 Vue Language Tools (ранее известного как Volar) мы решили многие давние проблемы при использовании Vue с TypeScript.

В этом посте представлен обзор основных возможностей версии 3.3. Для получения полного списка изменений, пожалуйста, ознакомьтесь с полным журналом изменений на GitHub.

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Комментарии 1

Рендеринг модальных окон с помощью функций на Vue

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 4.9K

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

Вперед под кат
Всего голосов 3: ↑2 и ↓1 +1
Комментарии 5

Я хотел улучшить React

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 9.5K

Я давно пишу код, а React использую более пяти лет.

За это время у меня возникло несколько идей о том, как можно было бы улучшить React.

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

А о том, что из этого вышло, я бы хотел рассказать в этой статье.

Читать далее
Всего голосов 8: ↑6 и ↓2 +4
Комментарии 47

Как я сделал SPA в два раза быстрее

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 22K

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

Немного контекста: я работаю frontend-разработчиком в компании, которая в основном занимается разработкой MVP (Minimum Viable Product), но так же и разработкой и поддержкой долгоживущих продуктов. Как раз у MVP бывает много проблем, потому что минимум времени уделяется под рефакторинг и оптимизацию, а проблемы между проектами повторяются, потому что часто используется один стартовый шаблон.

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

Читать далее
Всего голосов 33: ↑32 и ↓1 +31
Комментарии 26

Расширенный мониторинг производительности Vue.js

Время на прочтение 8 мин
Количество просмотров 4.9K

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

Как мы можем отслеживать производительность в динамике? Каковы должны быть наши цели? Несем ли мы, разработчики Vue.js, ответственность за все проблемы с производительностью?

Эта статья является продолжением нашего руководства Vue.js Performance Guide, в котором рассматриваются основы оптимизации производительности. Она поможет вам разобраться с мониторингом производительности и ее наиболее важными метриками.

Читать далее
Всего голосов 9: ↑7 и ↓2 +5
Комментарии 1

Улучшение реактивности с помощью VueUse

Время на прочтение 6 мин
Количество просмотров 5.4K

VueUse — это библиотека из более чем 200 служебных функций, которые можно использовать для взаимодействия с целым рядом API, включая интерфейсы для браузера, состояния, сети, анимации и времени. Эти функции позволяют разработчикам легко добавлять реактивные возможности в свои проекты Vue.js, помогая им с легкостью создавать мощные и отзывчивые пользовательские интерфейсы.

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

Цель этой статьи — изучить некоторые утилиты VueUse, которые помогут нам улучшить реактивность в нашем приложении Vue 3.

Читать далее
Всего голосов 14: ↑13 и ↓1 +12
Комментарии 2

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн

Как мы разрабатывали браузерную игру: взгляд со стороны frontend-архитектора

Уровень сложности Средний
Время на прочтение 24 мин
Количество просмотров 5.6K

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

Я Антон, руководитель Архитектурного комитета SimbirSoft, и в этой статье я расскажу о полученном опыте с точки зрения технологических особенностей реализации frontend-части. Рассмотрим большое количество нестандартных элементов игрового интерфейса и общие требования и ограничения к frontеnd-части приложения (архитектура, model, service, store и т.д.). Поделюсь, как реализовали:

— набор визуальных элементов приложения;

— элементы пагинации;

— сложный компонент на примере кнопки;

— составной компонент на примере g-card-list;

— анимацию.

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 11

Pinia scoped store

Уровень сложности Средний
Время на прочтение 9 мин
Количество просмотров 6.9K

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

Предлагаемое автором решение - узконаправленные, локальные сторы, привязанных к конкретному инстансу модуля или просто Pinia scoped store.

Читать далее
Всего голосов 7: ↑7 и ↓0 +7
Комментарии 19

Адаптивный и многоязычный компонент футера для Vue 3: создание и использование

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 2.9K

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

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

Читать далее
Всего голосов 1: ↑0 и ↓1 -1
Комментарии 3

Как мы увеличили скорость работы сайта в 10 раз

Время на прочтение 6 мин
Количество просмотров 22K

Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей. В этом кейсе расскажем об обновлении сайта: что делали, с какими проблемами столкнулись и как их решали.

Читать далее
Всего голосов 12: ↑2 и ↓10 -8
Комментарии 20

Как использовать пропсы для передачи данных дочерним компонентам в Vue 3

Время на прочтение 7 мин
Количество просмотров 8.6K

По традиции делимся полезными переводными материалами во frontend-разработке. В этот раз frontend-специалист SimbirSoft Никита сделал выбор в пользу материалов Nwose Lotanna, опубликованных на сайте blog.logrocket.com. С разрешения автора мы перевели статью, в которой он рассказывать о способах использования пропсов для передачи данных дочерним компонентам в Vue 3.

Примечание автора: Данная статья последний раз была обновлена 15 декабря 2022, чтобы отразить обновления, добавленные в Vue 3.

Пропсы — это важная фича в Vue для управления родительскими и дочерними компонентами, однако взаимодействие с ними может быть довольно мудреным. В этой статье мы изучим, как передавать данные из родительского компонента в дочерний с использованием пропсов в Vue 3. Весь код из этой статьи вы можете найти на GitHub. Что ж, начнем!

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Комментарии 14

Ionic Capacitor Vite, Vue (в 4-х частях)

Время на прочтение 10 мин
Количество просмотров 5.7K

Capacitor — это нативный рантайм с открытым исходным кодом для создания приложений Web Native. Создавайте кроссплатформенные iOS, Android и Progressive Web Apps (PWA) с помощью JavaScript, HTML и CSS.

Vite — это инструмент сборки, цель которого — обеспечить более быструю и экономную разработку современных веб-проектов. Он состоит из двух основных частей: сервер dev и команда build. 

За 8 минут я объясняю, как создать проект vue js с помощью vite, преобразовать его в мобильное приложение и развернуть его на симуляторе с live-reload для эффективного процесса разработки.

Читать далее
Всего голосов 7: ↑5 и ↓2 +3
Комментарии 1

Создание простого SPA на VueJs с использованием CMS Strapi

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 8.8K

Данное руководство составлено на основе некоторого опыта, который был получен из книг и официальной документации. Вашему вниманию будет представлено 2 варианта написания простых в поддержке сайтов на Vue.js (с использованием backend систем и без). 

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

Во второй части мы рассмотрим более сложный вариант, с использованием опен сорс CMS решения для управления данными сайта. Весь код в данном руководстве представлен в синтаксисе javascript/hml/css и bash.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 12

Вклад авторов

Работа