Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!
Nuxt 3 — это мощный фреймворк на основе Vue, который упрощает разработку серверно-рендерируемых и статически генерируемых веб-приложений. Одна из его особенностей — возможность работы с асинхронными данными с помощью специальных хуков. Они обеспечивают эффективное взаимодействие с API, динамическую загрузку данных и подгрузку контента. Многие знают про эти хуки, но далеко не все используют их потенциал в полной мере.
Меня зовут Леша Смолыгин, я разработчик в Lamoda Tech. Разберемся, как использовать популярные хуки запроса из коробки useFetch, useAsyncData, $fetch, useLazyAsyncData и реализовать кастомный fetch. Эти инструменты решают задачи, связанные с загрузкой данных из API, при этом каждый из них имеет свои особенности и ограничения. Разберём их и сравним, чтобы понять, какой инструмент лучше подходит для той или иной ситуации в вашем приложении.
Привет, Хабр! На связи команда фронтенд-разработки из ecom.tech. Меня зовут Миша, я занимаюсь разработкой интерфейсов для внутренних сервисов. Например, мы сделали удобное приложение для курьеров-партнёров Самоката, сервис для быстрой работы логистов, интуитивно понятный терминал для складов.
В этой статье я расскажу, как мы переизобрели взаимодействия с инпутами и написали свою клавиатуру для мобильного приложения – вас ждёт код и пошаговое описание. Поехали!
Как мы создали микросервисное приложение для анализа вакансий с hh.ru: Docker, Kafka, Elasticsearch и ещё немного магии
26 ноября 2024 года вышла новая мажорная версия инструмента для сборки приложений Vite. Это событие особенно примечательно тем, что это первый релиз после анонса VoidZero, где Even You представил грядущее направление развития основных продуктов.
Далее мы рассмотрим ключевые моменты этого обновления.
你好! Меня зовут Дмитрий, я фронтенд-разработчик в компании fuse8. Сегодня мы рассмотрим, как можно проводить валидацию кастомных компонентов в формах из UI-библиотеки ElementPlus.
Если вы работали с формами в ElementPlus, то наверняка знаете, что библиотека предоставляет простой интерфейс для валидации. Но что делать, если в форме используется кастомный компонент и необходимо применить правило валидации, которое передали в форму? С этим и разберёмся.
Всем привет! На связи руководители Frontend‑практики ГК Юзтех. В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.
Современные пользовательские интерфейсы требуют высокой интерактивности и удобства взаимодействия. В этой статье поговорим о том, как реализовать мощный, адаптивный компонент мульти‑выбора на основе Vue 3 Composition API. ChipsMultiSelect — это компонент, который объединяет возможности выпадающего списка, визуализации выбора в виде «чипсов» и встроенной фильтрации.
Выбранные элементы отображаются в виде «чипсов».
Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.
Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!
UI-компоненты — это один из базовых инструментов, необходимых фронтенд-разработчику для быстрого создания интерфейсов. Они помогают ускорить разработку и упростить поддержку кода. В этой статье представлен обзор нескольких популярных библиотек компонентов для Vue 3. Библиотеки перечислены в произвольном порядке.
19 октября 2024 года завершился Vue Fes Japan 2024 — традиционное событие, которое собрало множество энтузиастов и экспертов в области веб-разработки, где рассказывали о будущем экосистемы вью. На этой конференции разработчик Кевин Денг подробно представил новый этап в эволюции фреймворка Vue — Vapor Vue. Ожидается, что Vapor Vue значительно повысит скорость работы фреймворка, делая его еще более эффективным и мощным инструментом для создания современных веб-приложений. Такой шаг в развитии не только обещает ускорение производительности, но и открывает новые горизонты для гибкости и адаптивности Vue в работе над сложными проектами. В данной статье мы расскажем о самом интересном в этой презентации.
Решаем проблему с тестирование элемента что он виден пользователю или не виден.
Данное решение для reactjs проекта написано, но также работает и для других фреймворков, с которыми работает jest-dom
Я интегрировал видео анимацию, которая перематывается в зависимости от положения скролла, для лендинга детского парка развлечений - wizardia.land
Я думаю, я попробовал все неправильные способы, как можно это реализовать, и дальше расскажу про свой опыт.
Стек проекта: nuxt 3 (ts) / tailwindcss
Идея нашего руководства состояла втом, чтобы создать «вау» эффект для новых пользователей. Для этого оно обратились к 3д художнику, чтобы он намоделил нам видео с красивой переливающейся сферой посередине и последующим ее взрывом с разлетающимся конфетти и тематическими элементами. После того, как оказалось, что само по себе видео выглядит не так впечатляюще, они решили, что оно не должно воспроизводится сразу, а должно перематываться при скроллинге страницы - и тут все началось.
Содержание - вкратце по тупым ошибкам, которые я совершил.
Всем привет! После учебы попал на ферросплавный завод в 2005 году, сначала "киповцем" в цех КИПиА, а позже меня перевели в службу АСУТП. Там относительная свобода в сравнении с цехом АСУП, потому что у них там были разные корпоративные стандарты безопасности, Active Directory и другие ограничения на разработку. В нашем же цехе, хоть и была проблема с Интернет, все сервера были на тот момент ограничены внутренней сетью, но на тот момент дома почти у всех был ADSL и дома можно было искать информацию, а потом на работе ее использовать.
В итоге практика написания скриптов на VBScript (в SCADA Cimplicity был на тот момент только этот язык для написания сценариев, как и во многих других пакетах), с использованием Win32API, проект на Delphi с использованием Mutex и Semaphore, первый проект и вроде даже не один на Visual C++ MFC, поддержка и отладка проектов на Borland C++ и С++ Builder, с нуля созданный портал на PHP (спасибо коллеге Антону - это была его идея, чтобы не дописывать проект на умирающем уже на тот момент Delphi, хотя он вроде функционирует до сих пор), ну и самое главное, что появился опыт работы с MS SQL (почему-то нам его даже в университете не преподавали).
На следующем месте работы было более глубокое погружение в MS SQL, так как вся бизнес-логика была реализована на нём, и знакомство с Visual C# и .NET Framework, так как на нем был клиент написан на WinForms. Так же не первый опыт работы с OPC.
Но проект заканчивался, а новых пока там не планировалось, поэтому в следующей организации было знакомство с ASP.NET WebForms и, помимо MS SQL, уже и с Oracle DB. Всё было на примитивном уровне, опять сбор данных, хранение, отображение. Там было реализовано своеобразное хранение и отображение данных по сменам рабочих с помощью рекурсий на T-SQL.
Привет, Хабр!
Когда ты разрабатываешь интерфейсы на Vue.js, рано или поздно приходит момент, когда простые пропсы уже не спасают. Допустим, нужно сделать компонент не просто гибким, а настолько гибким, чтобы его можно было адаптировать под любые сценарии. Пропсами ты тут не отделаешься. И вот тут могут помочь слоты.
Современные AI чатботы это инструмент. Для каких-то вещей в жизни разработчика он подходит хорошо, для каких-то - не очень. Для интернационализации сайтов - хорошо.
Ниже будет показано как с помощью, грубо говоря, двух промптов сделать свой сайт доступным для людей, разговаривающих на других языках.
Привет, Хабр! Меня зовут Дмитрий Виноградов, я руковожу направлением продуктовой разработки в Рунити, а если проще — то разработкой сайтов и витрин компании. Я и моя команда находимся в постоянном поиске удобных подходов к разработке технических решений. В этой статье расскажу о продуктовых практиках в нашей группе компаний, а также подробнее разберемся, как создавать независимые компоненты, чтобы ускорить frontend-разработку.
Сегодня было анонсировано следующее поколение инструментария для JavaScript от автора Vue и Vite. В рамках начального финансирования было привлечено $4.6 миллиона, при этом основными инвесторами стали Accel и Amplify. В свете этого анонса важно понять контекст, в котором он происходит, и значимость изменений, которые он приносит.
Пятнадцать лет назад JavaScript был в основном языком сценариев для браузеров. Сегодня он стал самым широко используемым языком, применяемым для создания веб-приложений, мобильных приложений, игр и даже Интернета вещей (IoT). Несмотря на развитие множества инструментов для решения все более сложных задач, экосистема JavaScript остаётся фрагментированной, что делает настройку совместной работы зависимостей одной из самых сложных задач.
Эван Ю вложил значительные усилия в изучение стека инструментов JavaScript и разработку абстракций для упрощения работы разработчиков, что привело к созданию Vite в 2020 году. За четыре года Vite стал одним из ведущих инструментов для веб-разработки, поддерживаемым множеством мета-фреймворков и обладающим более чем 15 миллионами загрузок в неделю. Vite зарекомендовал себя как общий инфраструктурный слой для следующего поколения веб-фреймворков.
