Всем привет! На связи руководители 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 зарекомендовал себя как общий инфраструктурный слой для следующего поколения веб-фреймворков.
Большая новость, о которой на прошлой неделе намекнул Evan You
Evan создал компанию Voidzero Inc, которая будет делать "an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem" (примерно как сейчас bun или deno только без js движка), и в первом раунде привлек $4.6 млн. за нее (то есть продал инвесторам процентов 10-20 её акций за эту сумму)
Привет, Хабр!
Меня зовут Егор Прокопьев, и я фронтенд-разработчик в Ozon.
Третья версия полюбившегося многими фреймворка Vue вышла уже давно, и большинство использующих его произвели обновление до новой версии. Но всегда будут такие, как наша команда, кто откладывал этот переход в дальний ящик техдолга — ведь есть более приоритетные задачи! Однако рано или поздно этот день настаёт, и вот и для нас он пришёл.
В этой статье я хочу рассказать, как мы переходили на новую версию при том, что сервис является достаточно большим и очень важным для пользователей. Но обо всём по порядку.
Это простое руководство для тех кто хочет развернуть локально проект и начать уже писать код.
Стек: typescript, vue, vitejs, primevue
Создание своей (кастомной) страницы входа через сервис keycloak - это отдельный вид искусства. Мало того, что в шаблонах тем используется нешироко расаространённый язык шаблонизации .ftl (FreeMarker), так разработчику ещё необходимо знать почти что все переменные окружения, которые нужны для работы с keycloak'ом.
Но когда перед разработчиком встаёт задача создать кастомную тему на привычных для команды технологиях этот "счастливчик" может начать рвать на себе волосы.
Именно такая задача встала передомной и решение удалось найти чудом. Как раз из-за этого я до сих пор не являюсь точной копией персонажа Вина Дизеля из фильма "Ридик".
Репозиторий с реализованной кастомной темой здесь.
Сегодня мы рады сообщить о выходе Vue 3.5 "Tengen Toppa Gurren Lagann"!
Этот минорный релиз не содержит кардинальных изменений и включает в себя как внутренние улучшения, так и новые полезные функции. Мы расскажем о некоторых основных моментах в этом блоге - полный список изменений и новых возможностей можно найти в полном журнале изменений на GitHub.
В жизни каждого фронтенд-разработчика наступает момент, когда пора войти в нужную дверь когда приходит осознание того, что было бы неплохо как то подтвердить, что твой код работает. У меня этот момент настал после болезненной миграции с Vue 2 на Vue 3 с тоннами дефектов, которая завершилась очередной прядью седых волос, и не только у меня. Хватит это терпеть (с).
Меня зовут Дмитрий, я Frontend разработчик в компании fuse8, и в этой статье мы рассмотрим как можно начать тестировать Vue компоненты.
Vue.js — один из самых популярных фреймворков для создания пользовательских интерфейсов. Однако, как и в любом крупном веб-приложении, при увеличении количества компонентов и данных, производительность может снижаться. Оптимизация производительности — важный аспект, который влияет на пользовательский опыт и SEO-оценки. В этом руководстве мы рассмотрим практические подходы и техники, которые помогут вам улучшить производительность Vue.js приложений.
