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

Всем привет! Меня зовут Иван Ситкин, я бэкенд-разработчик в Едадиле. Сегодня я хочу поделиться с вами историей написания очередной панели администрирования и как из этого мы собрали подходящие подходы и практики.Для начала давайте вспомним, что же это за панели. Панель администрирования (или админка) — это приложение, которое используется для управления и настройки приложения. То есть это такой продукт для продукта. Панели администрирования нужны для различных целей, например, для создания и редактирования контента, настройки параметров продукта или управления пользователями.Но иногда в проектах важна скорость и ресурсов на создание админки с привлечением команды фронтенда откровенно не хватает. И тогда бэкендеру приходится брать процесс в свои руки.А теперь вы готовы погрузиться в эту кроличью нору. Читать далее
https://habr.com/ru/companies/yandex/articles/736006/?utm_campaign=736006&utm_source=habrahabr&utm_medium=rss

Детокс для i18n

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно разрослась. В ней много возможностей для локализации дат, чисел, плурализации, двунаправленных алфавитов, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".В то же время часто для локализации сайта нужны очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n. Ниже будет описана несложная процедура избавления от i18next-ной зависимости Читать далее
https://habr.com/ru/articles/736530/?utm_campaign=736530&utm_source=habrahabr&utm_medium=rss

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

Здравствуйте! В данной статье я бы хотел поделиться своим опытом обновления проекта, написанного на Vue 2.6. Помимо обновления самого vue и компонентов, я на примерах покажу как мне удалось обновить другие зависимости проекта и адаптировать их для работы с Composition API. Читать далее
https://habr.com/ru/articles/738032/?utm_campaign=738032&utm_source=habrahabr&utm_medium=rss

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

Это вторая статья из нашей рубрики «Разбор резюме». В первой мы разбирали резюме бэкендера, а здесь нам прислал свое CV фронтендер. Давайте посмотрим и разберем, что в нем можно улучшить: почему это резюме вообще лучше бы превратить в несколько, стоит ли включать в список навыков «опытный пользователь ПК» и как определяется уровень владения той или иной технологией.Резюме достаточно длинное, так что разбирать мы его будем поэтапно. Читать далее
https://habr.com/ru/companies/getmatch/articles/739218/?utm_campaign=739218&utm_source=habrahabr&utm_medium=rss

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

Требовалось кешировать используемые в разных проектах NPM пакеты (+ хранить свои пакеты) на отдельном сервере. Было решено делать это с помощью репозитария Verdaccio (по нему есть достаточно хорошая офф. дока), крутится это все должно в Docker, а разворачиваться на отдельном сервере через GitLab CI/CD.Т.к. реализация данной схемы заняла у меня некоторое время (Хотелось бы и по меньше), решил написать короткий туториал по этой теме, с описание нюансов, которые для меня казались не очевидными. Читать далее
https://habr.com/ru/articles/739298/?utm_campaign=739298&utm_source=habrahabr&utm_medium=rss

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

Сегодня, я хочу поделиться опытом и рассказать про участие в хакатоне от совкомбанка. Подробнее про хакатон можно почитать тут. Для лл я вкратце опишу задачу - командой до 5 человек сделать внутренний сервис для подбора персонала и ведения HR деятельности. Читать далее
https://habr.com/ru/articles/739350/?utm_campaign=739350&utm_source=habrahabr&utm_medium=rss

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

Эта моя первая коротенькая статейка на Хабре в попытке сделать проект, который делал для себя в целях самообразования и применения на работе, полезным кому-то еще. Можно было бы написать больше букв, но ввиду особенностей профессиональной деятельности, времени на это мягко говоря не очень много. Кто заинтересуется, всегда может подробности почерпнуть самостоятельно на гитхабе. Читать далее
https://habr.com/ru/articles/740288/?utm_campaign=740288&utm_source=habrahabr&utm_medium=rss

BALLSORT на $mol

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.Демка представляет собой игру, в которой перемещаются разноцветные шарики между трубками, цель игры - отсортировать шарики по цветам за наименьшее количество шагов.Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь. Читать далее
https://habr.com/ru/articles/741040/?utm_campaign=741040&utm_source=habrahabr&utm_medium=rss

Как сделать кастомный Semi Donut Chart с помощью SVG

Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку). Читать далее
https://habr.com/ru/articles/741214/?utm_campaign=741214&utm_source=habrahabr&utm_medium=rss

BALLSORT на $mol. Часть 2

Сегодня мы продолжим переписывание на $mol этой демки. Кто не читал первую часть, рекомендую сначала ознакомиться с ней BALLSORT на $mol. Часть 1 Читать далее
https://habr.com/ru/articles/741256/?utm_campaign=741256&utm_source=habrahabr&utm_medium=rss

Низкоуровневая реализация полного цикла жизни компонента во Vue 2

В статье речь пойдет о низкоуровневой реализации цикла жизни компонента: объявление, монтирование в DOM, дестрой экземпляром компонента самого себя.Мы привыкли к наиболее частому использованию компонентов: объявление, регистрация, обращение к компоненту из другого с передачей параметров.  Описываем компонент в файле componentName.vue и вызываем в шаблоне другого компонента как <component-name /> А как быть если мы хотим вызвать скажем диалоговое окно из плагина? И хотим чтобы о нашем диалоговом окне не знало все приложение, а знал только плагин? Именно с такой задачей столкнулась на рабочем проекте и собирать информацию пришлось по крупицам. Расскажу как было реализовано все перечисленное. Я делала в плагине, но это не обязательно. Этот подход можно реализовывать и в самом проекте. Читать далее
https://habr.com/ru/articles/742310/?utm_campaign=742310&utm_source=habrahabr&utm_medium=rss

Vue.js 3 Design Patterns and Best Practices: Develop scalable and robust applications with Vite, Pinia, and Vue Router (2023)
Автор: Olaf Zander
Количество страниц: 296

#vue

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

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

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

Использование Ionic и Vue 3 для создания мобильных приложений

В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для создания кросс-платформенных приложений. В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor. Вперед под кат) Под кат!
https://habr.com/ru/articles/743778/?utm_campaign=743778&utm_source=habrahabr&utm_medium=rss

Сравнение тяжеловесности популярных библиотек IU компонент для Vue 3

Библиотеки UI компонент популярны и удобны в некоторых случаях, но у них тоже есть обратные стороны. Одно дело, когда делаешь админку и используешь десятки компонент, другое - когда тебе надо всего пару компонент.Я провел исследование - взял три HTML элемента: Button, Input и Select, и посмотрел, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3. Читать далее
https://habr.com/ru/articles/745012/?utm_campaign=745012&utm_source=habrahabr&utm_medium=rss

Как я переписал свой проект на Svelte

Приветствую всех. Уже как неделю я переписываю свой проект, который был на Vue options api с использованием Quasar и перевожу его на Svelte-Sveltkit-DaisyUI. Скажу сразу, он мне очень понравился, особенно в если учитывать что Vue composition api стал больше похож на React, нежели чем на самого себя. Складывается впечатление что Svelte это то к чему должен был прийти Vue, но он пришел к реакту))) (ты должен был бороться...)Итак, тот код, который я писал на вью(вуй в простонародье) 10 месяцев на свелт был написан за 9 дней, и то успел добавить дополнительные функции. Кое-что еще не реализовано, но это легкая часть, которая займет дня 3-4, не больше. Затем привязка к бэкенду и тестирование и через 2-3 недели все должно быть в целом готово. Справедливости ради стоит отметить что не все время из этих 10 месяцев было использовано на написание кода. Половина времени было потрачено на безрезультатные попытки(пытки) написать бэкенд самому. Прыгал с одной технологии на другую, но в основном пытался(пытал себя) написать на фшарп. Ничего не вышло, перешел на ноду-экспресс. Кое-что вышло, но в процессе написания понял что бэк не мое. Один бэкендер говорил что работа бэкендера это как 8 часов решать "судоку" на работе, а в остальное время решать судоку для отдыха. Полностью с этим согласен. Главное что вовремя осознал свою неспособность писать бэкенд, а заодно и нелюбовь решать судоку. Хотя когда был в школе любил, вероятно и бэк в то время зашел бы, но не факт. Отныне, если когда-нибудь я буду писать бэк для чего-то, то буду использовать лишь готовые вещи вроде strapi или directus. Читать далее
https://habr.com/ru/articles/745780/?utm_campaign=745780&utm_source=habrahabr&utm_medium=rss

AbortController для отмены pending запросов при смене страницы (SPA)

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

Особенно неприятно это становится тогда, когда у пользователя медленный интернет и каждый лишний запрос еще больше замедляет работу вебсайта. К слову, про оптимизацию SPA я писал в этой статье, а эту статью можно использовать и как небольшое дополнение и еще один способ оптимизации для пользователей с плохим интернетом.А иногда это приводит и к ошибкам. Например, у нас есть две страницы - страница соревнований и страница турниров, обе страницы имеют id в URL и данные запрашиваются по этому id. Когда пользователь быстро переходит со страницы турнира на страницу соревнования, то id турнира может подмениться на id соревнования, и тогда получится, что запрос пойдет на несуществующий для турнира id и упадет ошибка.Когда я столкнулся с этой проблемой, то первой мыслью было использовать AbortController для отмены таких “висящих” запросов, и я решил загуглить как это правильно сделать, но сразу же был крайне удивлен тем, что советы на stackoverflow или различные статьи как-то очень странно и скудно освещали эту проблему, иногда предлагая абсолютно нерабочие решения, поэтому и решено было написать эту статью, чтобы показать конкретный рабочий пример.Для тех, кто с этим не знаком, AbortController - это, простыми словами, интерфейс, который позволяет управлять отменой http запросов со стороны фронтенда. Читать далее
https://habr.com/ru/articles/746740/?utm_campaign=746740&utm_source=habrahabr&utm_medium=rss

Динамический импорт remote компонента Module Federation на Vue 3

Приветствую всех читателей, что забрели на эту страницу. Вероятно, вы тоже как и я, не нашли должной информации по этой теме, поэтому наслаждайтесь, ведь тут будет вся нужная информация для корректной работы runtime импорта! Узнать о Module Federation
https://habr.com/ru/articles/747384/?utm_campaign=747384&utm_source=habrahabr&utm_medium=rss

Оптимизация изображений для пользователей с медленным интернетом с помощью Network Information API

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

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

Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.

В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue. Читать далее
https://habr.com/ru/articles/748272/?utm_campaign=748272&utm_source=habrahabr&utm_medium=rss

Правда ли Astro так быстр, сравнение с Nuxt 3

Всем привет, в последнее время, много вижу/читаю/слышу про astro, про то, какой он быстрый, производительный. Поэтому я решил потыкать Astro и параллельно проверить насколько он быстрый - я написал на нем примитивный блог с 600 карточками и сравнил его по производительности с Nuxt 3 SSG. Правда ли производительность 100 ?
https://habr.com/ru/articles/748366/?utm_campaign=748366&utm_source=habrahabr&utm_medium=rss

Строим свой SSO. Часть 3: Redis, Swagger, Vue.js

Всем привет, мы продолжаем строить собственный SSO Server. Сегодня мы разберем подключение Redis и Swagger к нашему проекту. А также построим собственную, красивую форму аутнетификации, используя VueJS. Читать далее
https://habr.com/ru/articles/748584/?utm_campaign=748584&utm_source=habrahabr&utm_medium=rss