Всем привет! Мы ИТ-компания BSL - технологический партнер в продуктовой разработке и интеграции. И это наш первый обзорный материал для хабра-блога. В BSL мы успешно разрабатываем фронтовую часть проектов как с использованием старой версии фреймворка Vue, так и с использованием новой. В данной статье наш Team Lead Frontend Developer - Андрей, рассказал о некоторых нововведениях Vue 3, которые могут стать для вас веской причиной для перехода на новую версию.
После подробного изучения темы скелетонов, я решил создать очень простое, гибкое, переиспользуемое, настраиваемое и легкое решение, которое подойдет для большинства случаев использования. В этой статье я опишу процесс создания этого решения и превращения его в библиотеку, а также трудности, с которыми я столкнулся при работе над ним.
Приветствую, друзья технологии!
Сегодня в мире постоянно меняющихся технологий и уникальных разработок смартфонов, планшетов и других устройств, оказаться "в тренде" - это как настоящее искусство. Каждый из нас хочет использовать устройства, которые позволяют нам легко и интуитивно взаимодействовать с миром цифровых возможностей. Одной из фантастических новинок, которая взрывает сознание пользователей и разработчиков, является свайп-сайдбар – это гениальное решение для эффективной навигации и управления контентом!
Вам, наверняка, приходилось сталкиваться с ситуацией, когда приложение или веб-сайт предлагают свернутый сайдбар, который появляется с одного края экрана после легкого свайпа пальцем. Это действительно захватывающий опыт, который добавляет удобство и стиль в нашу повседневную жизнь.
В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов!
Доброго времени суток, дорогие читатели!
В данной статье я буду рассказывать про холодную и горячую последовательность на примере такой задачи:
Пользователь заходит на сайт и начинается внутренняя прослушка (какой либо запрос на сервер с получением данных, в нашем же случае будет обычный sleepAsync - функция с таймаутом и остается только его подхватить и обработать). Режимов прослушки два - оптимизированный (будем называть горячим) и константный (будем называть холодным). При условии активности пользователя на вкладке, включаем оптимизированный метод, если же пользователь покинул вкладку, включаем константный. Также нужно показывать количество времени, которое занимала прослушка.
Так-с, уважаемые читатели, всех радостно приветствую! Это небольшая статейка как раз для тех людей, которые хотят по быстрому вот такой функционал:
• обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно
• обнаруживать какая ориентация на данный момент у пользователя
• обнаруживать какой тип устройства имеет пользователь: desktop, tab, phone
Звучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :)
Всем привет, мы продолжаем строить собственный SSO Server. Сегодня мы разберем подключение Redis и Swagger к нашему проекту. А также построим собственную, красивую форму аутнетификации, используя VueJS.
Всем привет, в последнее время, много вижу/читаю/слышу про astro, про то, какой он быстрый, производительный. Поэтому я решил потыкать Astro и параллельно проверить насколько он быстрый - я написал на нем примитивный блог с 600 карточками и сравнил его по производительности с Nuxt 3 SSG.
Многие из нас привыкли к тому, что быстрый и стабильный интернет это данность в 2023 году, поэтому оптимизацией вебсайтов под этот случай особо не занимаются. Однако все еще остаются сценарии, когда это не так: например, в дороге между населенными пунктами или в некоторых помещениях, которые либо находятся под землей, либо плохо пропускают сигнал по какой-то другой причине.
Для нашего проекта combat-sport.club как раз актуальна ситуация, когда взвешивание перед проведением соревнований нередко происходит в каком-нибудь подвальном помещении с плохой связью, и тяжелый SPA с большим количеством медиа может грузиться очень долго. В свою очередь это влияет и на возможность работать с платформой и в целом на удовлетворенность пользователей.
Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.
В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue.
Приветствую всех читателей, что забрели на эту страницу. Вероятно, вы тоже как и я, не нашли должной информации по этой теме, поэтому наслаждайтесь, ведь тут будет вся нужная информация для корректной работы runtime импорта!
Не так давно я столкнулся с проблемой, что при плохом интернете некоторые запросы к серверу идут так долго, что пользователь успевает перейти на другую страницу, пока запрос еще не завершился. И этот запрос с предыдущей страницы продолжает выполняться на новой странице.
Хотя такое возможно и при нормальной скорости интернета, но все же особенно неприятно это становится тогда, когда у пользователя медленный интернет и каждый лишний запрос еще больше замедляет работу вебсайта.
Приветствую всех. Уже как неделю я переписываю свой проект, который был на Vue options api с использованием Quasar и перевожу его на Svelte-Sveltkit-DaisyUI. Скажу сразу, он мне очень понравился, особенно в если учитывать что Vue composition api стал больше похож на React, нежели чем на самого себя. Складывается впечатление что Svelte это то к чему должен был прийти Vue, но он пришел к реакту))) (ты должен был бороться...)
Итак, тот код, который я писал на вью(вуй в простонародье) 10 месяцев на свелт был написан за 9 дней, и то успел добавить дополнительные функции. Кое-что еще не реализовано, но это легкая часть, которая займет дня 3-4, не больше. Затем привязка к бэкенду и тестирование и через 2-3 недели все должно быть в целом готово. Справедливости ради стоит отметить что не все время из этих 10 месяцев было использовано на написание кода. Половина времени было потрачено на безрезультатные попытки(пытки) написать бэкенд самому. Прыгал с одной технологии на другую, но в основном пытался(пытал себя) написать на фшарп. Ничего не вышло, перешел на ноду-экспресс. Кое-что вышло, но в процессе написания понял что бэк не мое. Один бэкендер говорил что работа бэкендера это как 8 часов решать "судоку" на работе, а в остальное время решать судоку для отдыха. Полностью с этим согласен. Главное что вовремя осознал свою неспособность писать бэкенд, а заодно и нелюбовь решать судоку. Хотя когда был в школе любил, вероятно и бэк в то время зашел бы, но не факт. Отныне, если когда-нибудь я буду писать бэк для чего-то, то буду использовать лишь готовые вещи вроде strapi или directus.
Библиотеки UI компонент популярны и удобны в некоторых случаях, но у них тоже есть обратные стороны. Одно дело, когда делаешь админку и используешь десятки компонент, другое - когда тебе надо всего пару компонент.
Было проведено исследование - взяты три HTML элемента: Button, Input и Select, и проверено, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3.
В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для создания кросс-платформенных приложений. В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor. Вперед под кат)
В статье речь пойдет о низкоуровневой реализации цикла жизни компонента: объявление, монтирование в DOM, дестрой экземпляром компонента самого себя.
Мы привыкли к наиболее частому использованию компонентов: объявление, регистрация, обращение к компоненту из другого с передачей параметров. Описываем компонент в файле componentName.vue и вызываем в шаблоне другого компонента как <component-name /> А как быть если мы хотим вызвать скажем диалоговое окно из плагина? И хотим чтобы о нашем диалоговом окне не знало все приложение, а знал только плагин? Именно с такой задачей столкнулась на рабочем проекте и собирать информацию пришлось по крупицам. Расскажу как было реализовано все перечисленное. Я делала в плагине, но это не обязательно. Этот подход можно реализовывать и в самом проекте.
Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.
В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку).
Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.
Демка представляет собой игру, в которой перемещаются разноцветные шарики между трубками, цель игры - отсортировать шарики по цветам за наименьшее количество шагов.
Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь.
Эта моя первая коротенькая статейка на Хабре в попытке сделать проект, который делал для себя в целях самообразования и применения на работе, полезным кому-то еще. Можно было бы написать больше букв, но ввиду особенностей профессиональной деятельности, времени на это мягко говоря не очень много. Кто заинтересуется, всегда может подробности почерпнуть самостоятельно на гитхабе.
Сегодня, я хочу поделиться опытом и рассказать про участие в хакатоне от совкомбанка. Подробнее про хакатон можно почитать тут. Для лл я вкратце опишу задачу — командой до 5 человек сделать внутренний сервис для подбора персонала и ведения HR деятельности.
Требовалось кешировать используемые в разных проектах NPM пакеты (+ хранить свои пакеты) на отдельном сервере.
Было решено делать это с помощью репозитария Verdaccio (по нему есть достаточно хорошая офф. дока), крутится это все должно в Docker, а разворачиваться на отдельном сервере через GitLab CI/CD.
Т.к. реализация данной схемы заняла у меня некоторое время (Хотелось бы и по меньше), решил написать короткий туториал по этой теме, с описание нюансов, которые для меня казались не очевидными.
Это вторая статья из нашей рубрики «Разбор резюме». В первой мы разбирали резюме бэкендера, а здесь нам прислал свое CV фронтендер. Давайте посмотрим и разберем, что в нем можно улучшить: почему это резюме вообще лучше бы превратить в несколько, стоит ли включать в список навыков «опытный пользователь ПК» и как определяется уровень владения той или иной технологией.
Резюме достаточно длинное, так что разбирать мы его будем поэтапно.
