Как стать автором
Обновить
1.66
Рейтинг

VueJS *

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

Сначала показывать
  • Новые
  • Лучшие™
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Vue + SSR + AMP — как подружить SPA с гугл страницами

CSS *JavaScript *Node.JS *VueJS *
Tutorial

Привет™, хабрист!

Довольно давненько подружил свои приложения с гуглом™.

Основная идея была - не создавая новых шаблонов, получить все страницы сайта AMP-friendly и, вообще™, сделать ядро приложения AMP-ready.

Тут нас поджидает серьезная переработка стилей™ CSS и структуры приложения путем добавления дубликатов забаненных гуглом™ компонентов, таких как картинки, карусели, менюхи™ и прочее™.

Я буду вещать™ на примере самого™ простого - картинок. Все прочее™ аналогично, хоть и посложнее на практике.

Объявим зависимости

Читать™ далее
Всего голосов 3: ↑0 и ↓3 -3
Просмотры 2.4K
Комментарии 0

Новости

Uni Localization. Абсолютная кастомизация, работает на любом сайте (Vue, React, Angular, ...)

WordPress *Разработка веб-сайтов™ *JavaScript *HTML *VueJS *

Я всегда™ мечтал™ о функциональности, которую можно было бы использовать на любом web проекте. Еще я мечтал™ иметь максимально гибкое™ решение для абсолютной кастомизации под себя. Два года назад мы начали™ работать над воплощением этой смелой™ мечты в реальность. Первой™ такой функциональностью стала именно™ Uni Локализация.

Читать™ далее
Всего голосов 8: ↑7 и ↓1 +6
Просмотры 2.1K
Комментарии 0

Nuxt: скорость и seo для интернет-магазина

API *Разработка под e-commerce *VueJS *
Из песочницы

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

Сейчас™ мы работаем над e-commerce платформой для большой сети розничных магазинов. Привычное для нас и клиента решение — магазин на базе Битрикса — не подходило для проекта. И мы обратили свое внимание на Nuxt.

Читать™ далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 2.7K
Комментарии 10

Прогрессивный Petite™-vue

JavaScript *ReactJS *VueJS *

Привет™ 👋, это статья™ про progressive enchancement с помощью petite™-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).

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

В общем (и целом), всё круто 👍

Прогрессировать
Всего голосов 3: ↑2 и ↓1 +1
Просмотры 3.6K
Комментарии 2

Petite™-vue

Open source™ *JavaScript *VueJS *
Из песочницы

Привет™, эта статья™ - "перевод документации и часто используемых примеров" для petite™-vue + ещё немного приколов и одна интересная практика (с которой не всё так очевидно, как могло бы казаться).

Зачем нужен petite™-vue?

Petite™-vue это 6-ти килобайтное подмножество Vue, основной задачей которого, по словам™ Эвана, является Progressive Enchancement.

Выучить очередной фреймворк
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 4.6K
Комментарии 7

Единая™ система диалоговых окон на vue-cli при помощи™ vuex и vue-router™

JavaScript *VueJS *
Из песочницы

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

Концепция

Вся система будет работать довольно просто™, для отображения нужного нам диалогового окна надо будет всего лишь изменить один query параметр в адресной строке™ браузера, для примера назовем этот параметр ‘dialog™’. Соответственно для закрытия окна надо будет только™ убрать™ параметр ‘dialog™’.

Читать™ далее
Всего голосов 2: ↑1 и ↓1 0
Просмотры 2.9K
Комментарии 9

Как мы ускоряли комментарии Хабра

Блог компании Хабр JavaScript *Клиентская оптимизация *VueJS *
image

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

Вы когда-нибудь™ открывали в старом™ дизайне Хабра пост с большим числом™ комментариев? Страничка даже с тысячей сообщений грузится шустро™, на ней без серьёзных задержек работает форма для ответа™, кнопки™ голосования и закладок. Но когда мы начали™ переход на новую версию™ Хабра, стало понятно, что добиться такой же скорости будет непросто.

Этому есть несколько причин™. Во-первых™, Хабр стал одностраничным приложением (SPA, Single™ Page Application) на Vue, то есть теперь™ переходы между страницами рисуются на клиенте с помощью JS вместо™ классического серверного рендеринга (Server™-Side Rendering, SSR). Такие SPA-страницы отображаются быстрее на современных устройствах, но на старых™ девайсах могут тормозить.

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

В октябре мы постепенно выкатывали на часть пользователей обновлённую версию™ комментариев, над которой трудились последние полгода. Наши новые комментарии должны™ рендериться быстрее и доставлять удовольствие всем, а не только™ обладателям топовых MacBook Pro c M1 Max.

Давайте посмотрим, как работали комментарии полгода назад, до того, как мы начали™ работу™ по оптимизации.
Читать™ дальше™ →
Всего голосов 96: ↑89 и ↓7 +82
Просмотры 13K
Комментарии 147

Как мы организовали хранилище фоток с кроссовками на Vue и Vuex и немного автоматизировали работу™ фотографов

Блог компании Конференции Олега Бунина™ (Онтико™) Блог компании Sportmaster Lab JavaScript *Программирование *VueJS *

Привет™! Меня зовут Артём Карачёв, я фронтенд-разработчик в Sportmaster Lab. Сейчас™ мы пишем модуль™ автоматизации физической фотостудии, где работают несколько фотографов, менеджеров, фоторедакторов, кладовщиков и других™. Все фото кроссовок, которые вы видите™ в интернет-магазинах Спортмастера, снимают и загружают в базу данных™ именно™ эти люди.

Благодаря модулю™ автоматизации они смогут™ их выгружать быстрее и легче. Возможно, наш опыт организации vuex-хранилища и слоя получения данных™, а также последующего интеграционно-компонентного тестирования окажется кому-то полезным.

Читать™ далее
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 2.4K
Комментарии 4

Запрещаем браузеру Google™ Chrome™ сохранять и предлагать сохраненный пароль™ в нашем приложении на Vue.js(v2)

Информационная безопасность *Google™ Chrome™ VueJS *

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

Да, удобно™. Но небезопасно. И временами очень вредно™.

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

Читать™ далее
Всего голосов 22: ↑6 и ↓16 -10
Просмотры 3.4K
Комментарии 31

Улучшаем производительность vue с помощью selective-object™-reuse

JavaScript *VueJS *
Tutorial

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

Примеры этой статьи™ собраны в двух репозиториях (один для vue2, другой™ для vue3), с идентичным исходным кодом.

Читать™ далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 2.8K
Комментарии 2

Как устроены мобильные номера™. Давайте разберемся

Сетевые технологии *VueJS *

Привет™ всем. Последнее время я писал код полей ввода input для номеров телефона и др. И мне пришлось углубиться в эту тему и разобраться как устроены мобильные номера™ телефонов. И в этой статье™ я хочу с вами поделиться своим опытом™. Я постараюсь очень кратко™, так что присоединяйтесь, потратьте 15 минут, если вы этого не знаете™ и вам любопытно.

Если вы занимаетесь программированием на vue.js, то вот вам ссылка™ на компонент, который включает различные input поля в том числе для номеров телефонов. Мне кажется данный™ компонент может сильно™ облегчить вам жизнь, ниже ссылка™ на github™ и гифка как работает одно из полей. На этом по вступлению все, дальше™ только™ по теме.

https://github™.com/fakt309/inputv™

ЧИТАТЬ™
Всего голосов 127: ↑112 и ↓15 +97
Просмотры 42K
Комментарии 150

Какой JS-фреймворк выбрать новичку — мнения™ шести экспертов

Блог компании Яндекс™.Практикум Angular *ReactJS *VueJS *SvelteJS *
Привет™! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс™.Практикума, Head of Frontend в СберМаркете.

В первой™ статье™ о JS-фреймворках я рассказал о самых популярных из них: Angular, React, Vue и других™. В комментариях опытные разработчики спорили о том, какой фреймворк лучше, а новички спросили у меня, какой же инструмент выбрать для проекта и с чего начать™ знакомство с библиотеками.



Большую часть пути разработчика я писал на React. Хоть я и начинал с AngularJS, но убеждён, что это не единственный путь и можно начать™ с любого™ другого фреймворка, поэтому для статьи™ я решил собрать мнения™ знакомых разработчиков, которые пишут на разных™ фреймворках. Статья™ не даст однозначного ответа™ на вопрос™ «Что же выбрать?», но поможет решить™, в каком направлении двигаться. А ещё подскажет, какие инструменты лучше применять в пет-проектах, а какие — в энтерпрайзе. Если нет времени читать™ статью™ целиком, в конце я собрал™ список™ лучших™ фреймворков для новичков на основе™ личных™ мнений™ экспертов.
Читать™ дальше™ →
Всего голосов 22: ↑20 и ↓2 +18
Просмотры 15K
Комментарии 26

Стилизация однофайловых Vue компонентов

CSS *JavaScript *VueJS *TypeScript *
Перевод

Если у вас есть опыт написания однофайловых Vue компонентов, вы, вероятно, сталкивались с написанием CSS в своем компоненте. Они позволяют разработчикам группировать код более логическими способами, а не разбивать компоненты по используемому языку (HTML, CSS или JavaScript). Возможность группировать стили компонентов непосредственно рядом с HTML-кодом, к которому он применяется, является одним из основных преимуществ Vue, включая возможность применять CSS к компоненту, чтобы он не влиял на другие™ части пользовательского интерфейса.

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

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

SEO Analyzer — библиотека для поиска™ SEO дефектов

VueJS *
Из песочницы

Всем привет™!

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

И как вы поняли™, речь пойдёт™ о SEO анализаторе, инструменте, который поможет отлавливать SEO дефекты на разных™ стадиях разработки (и, конечно же, сохранить хорошие отношения с SEO специалистами 😊).

Читать™ далее
Всего голосов 5: ↑3 и ↓2 +1
Просмотры 2.4K
Комментарии 0

Vue.js для проекта на Bitrix™

Блог компании Агентство AGIMA VueJS *

Привет™, Хабр!

Меня зовут Дмитрий Матлах™. Я тимлид™ в AGIMA. Мы с коллегами обратили внимание, что в сообществе часто возникает вопрос™ о том, как совместить на одном проекте Bitrix™-компоненты и реактивные фронтовые движки™. Мы неоднократно сталкивались с подобными задачами, и поэтому я решил подробно рассказать, как мы их решаем™. Думаю, если вы используете Bitrix™-фреймворк в своих проектах, прочитать будет интересно. Ну и забегая вперед™, если вы решаете те же задачи™ по-другому, то интересно в комментариях узнать™ поподробнее.

Читать™ далее
Всего голосов 18: ↑17 и ↓1 +16
Просмотры 5.8K
Комментарии 10

Выбираем алгоритм, или Когда ждать уже невыносимо

Блог компании SimbirSoft JavaScript *Angular *ReactJS *VueJS *

При разработке бизнес™-логики™ приложений нужно продумать действия с множествами – с пересечением, разницей массивов или двойной разницей. Недостатки в этом алгоритме могут привести к рискам™. Например, если вам нужно в реальном времени обработать объем данных™, превышающий определенную границу, система может «тормозить» – до минуты™ и даже больше™. Такие ситуации требуют лишнего расхода ресурсов, отталкивают пользователей и вызывают другие™ проблемы.

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

Читать™ далее
Всего голосов 8: ↑5 и ↓3 +2
Просмотры 2.6K
Комментарии 1

Создание веб-компонентов с помощью Vue 3.2

JavaScript *VueJS *TypeScript *
Перевод

Вы когда-нибудь™ работали над несколькими проектами и хотели™ иметь набор настраиваемых компонентов, которые можно было бы использовать во всех из них? Будь то работа™ или просто™ побочные проекты, набор компонентов, к которым вы можете™ обратиться, - отличный способ™ ускорить работу™ в новом или существующем проекте. Но что, если не все ваши проекты используют одну и ту же структуру пользовательского интерфейса? Или, что, если у вас есть тот, который вообще™ не использует какой-либо фреймворк JavaScript и полностью отрисован на сервере?

Как разработчик Vue, в идеале™ мы хотели™ бы просто™ использовать наш фреймворк для создания сложных пользовательских интерфейсов. Но иногда™ мы оказываемся в описанной выше ситуации, работая с другим™ фреймворком JavaScript, таким как React или Angular, или используя внутреннюю систему рендеринга, такую как Rails или Laravel. Как мы можем создать многоразовый пользовательский интерфейс для различных вариантов внешнего интерфейса?

В Vue 3.2 у нас теперь™ есть решение этой проблемы: веб-компоненты на базе Vue!

Читать™ далее
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 7.4K
Комментарии 8

Создание унифицированного UI без мам, пап и кредитов

Блог компании Wargaming JavaScript *HTML *VueJS *
Из песочницы

Всем привет™! Меня зовут Артём и я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой софта для взаимодействия поддержки с пользователями, с целью решения любых возникших у пользователей проблем.

В прошлый раз один из моих коллег™ рассказывал, как реализовано взаимодействие сервисов у нас в Платформе. Те, кто пропустили эту статью™, могут найти её по ссылке™. Сегодня я хочу рассказать про приложение, которое раскрыло возможности Contract API с новой стороны. Знакомьтесь, Contract UI.

Читать™ далее
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 1.2K
Комментарии 0

Разработка документации на VuePress

VueJS *
Из песочницы

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

Изначальной целью VuePress, была поддержка фреймворка Vue.js и сопутствующей инфраструктуры. Для примера, можно посмотреть любую документацию по Vue: Vue.jsVue Router™Vuex, где применяется единый™ стиль, заложенный в основе™ VuePress.

В ходе статьи™ мы разберем архитектуру VuePress, разработаем базовое приложение и выложим на GitHub™ Pages.

Читать™ далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 3.7K
Комментарии 0

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

Работа™