User
Представляю vue-dnd-kit/components — готовые компоненты для быстрой разработки drag & drop интерфейсов в Vue 3!
📋 Сортируемые таблицы
📊 Канбан-доски
🌳 Древовидные структуры
🧩 Интерактивные дашборды
CLI работает как shadcn/ui — компоненты клонируются в ваш проект, давая полный контроль над кодом. Проект в активной разработке, но уже готов к использованию!
Готовые компоненты: Table, Kanban, Tree, Dashboard.
Статус: бета, API может изменяться. Подходит для прототипов и активной разработки.
Наш фронтенд начинался как простой SPA на React, собранный с помощью Vite — типичный монолит с несколькими страницами. Со временем проект оброс новыми функциями и интеграциями и начал становиться всё сложнее в поддержке.
На горизонте появились новые вызовы: к продукту планировалось подключать всё больше независимых сервисов, а значит — ещё больше интеграций и роста кодовой базы. Мы понимали, что нагрузка на инфраструктуру будет только увеличиваться, поэтому решили заранее заложить архитектуру с расчётом на масштабирование.
После изучения разных вариантов мы остановились на подходе микрофронтендов. Хотелось разграничить зоны ответственности между командами и ускорить разработку, не теряя гибкости. В качестве сборщика решили остаться на Vite — он быстро развивался, предлагал отличную DX и поддержку модульной федерации через плагин. Кроме того, важно было сохранить единый репозиторий, чтобы упростить CI/CD и управление зависимостями.
4 000 часов в роли системного аналитика или обзор навыков, умений и личных качеств, которые превращают человека в аналитика.
«У меня не тимлид, а просто ведущий дейликов!» — с горечью однажды воскликнул мой знакомый, и эта фраза послужила для меня поводом к написанию этой статьи. Ведь я тоже уже давно замечаю, что с ролью тимлида в последние годы происходит что-то не то. Причем как со стороны самих лидов, так и со стороны их руководителей
Как использовать мощь системы типов TypeScript для вычисления логики ещё на этапе компиляции и автоматической генерации кода. Разбираем условные типы, шаблонные литералы, рекурсивные типы и другие приёмы, чтобы упростить разработку, сократить дублирование кода и снизить вероятность ошибок на runtime.
Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!
А вы уже прятали что-то внутри PNG? Базовый способ надежно спрятать что-то внутри картинки. И все на вашем любимом JavaScript!
Всем привет! На связи Вадим Королев, архитектор на Web HiFi-стриминга Звук. Сегодня я хочу поделиться своим опытом и рассказать, как создать архитектуру фронтенд-приложения, если ее еще нет в вашей компании.
Каждый разработчик рано или поздно приходит к той степени зрелости, когда его начинают интересовать вопросы архитектуры на своем проекте. При детальном изучении темы оказывается, что все примеры в основном рассматривают что-то на бэкенде, вследствие чего встает вопрос: «А как готовить архитектуру для фронтенда?». Если в вашей команде больше одного человека, стоит с самого начала (независимо от размера проекта) озаботиться этим вопросом.
Пять лет назад я выступал на конференции с докладом о живых гайдлайнах и инструментах документирования для фронтенд-разработчиков, а еще публиковал на эту тему статью. Тогда мы только начинали понимать, как сильно может измениться процесс создания и поддержки документации в современных веб-проектах. Сегодня, оглядываясь назад, я вижу, насколько радикально изменился наш подход к документированию фронтенд-проектов.
Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов. А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать его бояться!
В статье я кратко напомню основные теоретические идеи свойства и подробно расскажу о реальных примерах использования на основании опыта разработки Taiga UI.
Мессенджер Revolt
В своих предыдущих статьях о разработке телеграм-ботов я делился опытом создания базового функционала и работы с командами через аргументы (раз, два). На этапе подготовки третьей статьи передо мной встал вопрос генерации однотипного кода для новых команд, что превратилось в рутинную задачу. Чтобы избежать этого и ускорить процесс, я решил задействовать ChatGPT. К моему удивлению, его помощь оказалась значительно весомее, чем я ожидал.
Если коротко, то использование ChatGPT для автоматизации генерации кода эффективно при работе с шаблонами. Генерация однотипных фрагментов на основе шаблонов ускоряет процесс разработки и снижает количество рутинных задач. Чем точнее структура и наименования в шаблонах, тем легче модели корректно выполнять замены,
Для тех же, кто хочет более детально ознакомиться с процессом взаимодействия человека и ChatGPT при создании JavaScript-проекта - добро пожаловать под кат.
Я много пишу про OpenWrt и часто получаю вопросы о том, какой взять роутер под эту ОС. В прошлом году я уже делал обзор роутеров, лучше всего подходящих под OpenWrt. Тогда выбор был не очень большой, но сейчас всё изменилось в лучшую сторону. Поэтому я сделал новый актуальный разбор для тех, кто не знает, какой роутер выбрать.
Роутер, как и любой другой девайс, нужно покупать под запрос. Например, линуксоиды привыкли покупать ноутбуки именно под Linux, а не первый попавшийся. Также и тут: если нужен OpenWrt, то роутер тоже надо выбирать с умом, а не надеяться на то, что кастомная прошивка сделает конфетку из роутера за 700 р.
В 2023 и 2024 появились интересные роутеры, которые уже поддерживаются проектом OpenWrt. Эти роутеры сделаны на базе ARM-процессоров. Такие роутеры появились у нескольких компаний, и дальше их количество будет только увеличиваться.
Если Вы являетесь счастливым обладателем маршрутизатора Mikrotik и у Вас белый IP адрес, а также надоело занижение скорости Youtube, то статья для Вас. Добро пожаловать!
В статье рассматривается создание IPv6 интерфейса, добавление публичного IPv6 пула в локальную сеть, тестирование, а также настройка брандмауэра.
Всем привет! Мы — Иван и Даниил, ведущие разработчики компании ITFB Group. У компании два собственных продукта — ЕСМ/CSP/BPM-платформа СИМФОНИЯ (документооборот, хранение контента, архив, портал) и система распознавания/обработки документов ITFB EasyDoc. Пару месяцев назад к нам прилетела задача интегрировать ряд функций распознавания из продукта ITFB EasyDoc и оформить их в отдельный модуль платформы СИМФОНИЯ, дабы пользователь всё делал в одном месте и не дрейфовал по разным системам. Однако возникла загвоздка: СИМФОНИЯ — на React, а ITFB EasyDoc — на Vue. Для решения вопроса посерчили различные источники информации и плавно ушли в собственное творчество, поскольку не обнаружили стоящих вариантов с вменяемой технической детализацией. В какой-то момент возникло острое желание поделиться нашими итоговыми наработками на Хабре и заполнить пробелы базы знаний в интернете по этому вопросу. Всем, кому интересно увидеть наше решение, добро пожаловать под кат :-)
Всем привет, меня зовут Иван и я фронтенд-разработчик из компании DexSys.
На моём комментарии про микрофронтенды набралось целых три лайка, поэтому я решил написать статью с описанием всех шишек, что наш стрим набил и набивает в результате внедрения микрофронтендов.
Начнём с того, что ребята с Хабра (@artemu78, @dfuse, @Katsuba) уже писали про Module Federation, так что, моя статья - это не что-то уникальное и прорывное. Скорее, это шишки, костыли и велосипеды, которые полезно знать тем, кто собирается использовать данную технологию.
Это история о том, как увеличить скорость выкатки фич, но сохранить качество продукта. О болевых точках, которые замедляют разработку, и новой «болезни» — микросервисе головного мозга, которую диагностировал Михаил Трифонов, техлид фронтов в SberСloud. Он утверждает, что она приводит к росту функциональности ML Space на 683% при увеличении команды разработки всего в 2 раза. Невероятно, но бизнес-аналитика это подтверждает. Так что давайте разбираться по порядку.
Привет, Хабр! Меня зовут Данил, я Frontend-разработчик в Samokat.tech. Недавно мы с командой распилили монолит на Angular и перешли к микрофронтендам на Vue.
Наш опыт я постарался упаковать в пошаговый гайд – надеюсь, этот материал поможет тем, кто только начинает свой путь в мире микрофронтендов. По ходу статьи мы с вами вместе пройдём от полного незнания до понимания принципов и ответа на заветный вопрос — нужно ли всё это вам. На практике мы сделаем небольшую демонстрацию, которую вы сможете использовать в своём проекте. Поехали!