VueJS *

Привет! На связи Дима — Senior Frontend разработчик в Doubletapp. В этой статье я расскажу, как эффективно собесить фронтендеров. Мой стек — Vue, Nuxt, поэтому примеры будут на основе моего опыта, но текст подойдет для всех разработчиков и нанимающих менеджеров.

В этой статье 

- Что я понял спустя 80+ собеседований? 
- Как собесят на рынке?
- Почему это все не работает
- Фактор ИИ и «подготовленных» кандидатов
- Как проводить инженерное интервью: 4 принципа

Синхронизация атрибутов элемента с DOM-свойствами

Очевидно, что нашему компоненту потребуются атрибуты, через которые пользователь сможет контролировать его поведение. Наш компонент должен вести себя как стандартный элемент ввода типа «input», поэтому обязательно должен поддерживать такие атрибуты как disabled и required – и это самый минимум. Поэтому важно разобраться (ну или вспомнить) что такое «content vs IDL attributes», и как с этим работать.

Документация по веб-компонентам мало говорит об атрибутах, разве что рекомендует использовать attributeChangedCallback() для наблюдения за ними, но этого недостаточно. Хотя это полезное API, нам оно не подходит, потому что оно уведомляет нас о уже совершенном действии (изменении атрибута), а нам нужно контролировать этот процесс, то есть – синхронизировать атрибуты и свойства с нормализацией значений.

Так как наш компонент наследует базовый класс HTMLElement, а в нем уже реализовано большое количество разных методов, то мы можем переопределить некоторые из них чтобы получить нужный нам результат. Для начала определим наши свойства в виде пар get/set и значения в приватном поле:

Пошаговое руководство по развёртыванию блога с нуля: Strapi CMS (админка и API) и Nuxt.js (фронтенд) на VPS Ubuntu. В итоге — работающий блог за Nginx с возможностью включить SSL по отдельной инструкции.

Всем привет! Кажется, настала пора поделиться изменениями в Азбуке, которые произошли с 2022 года, когда я выпускал прошлую статью. Наш текущий стэк: Vue 3, Nuxt 4, TS.

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

За последние пару лет я провёл сотни технических собеседований — от junior до senior специалистов. И я обнаружил что есть одна тема, с пониманием которой есть проблемы почти у всех кандидатов с кем мне доводилось общаться. Это Virtual DOM.

Почти каждый кандидат объясняет его примерно так:

“Virtual DOM нужен, чтобы обновлять не всю страницу, а только её часть. Поэтому всё работает быстрее.”

Привет, Хабр! Меня зовут Василий Беляев. Я руководитель группы разработки по направлению фронтенда в ИТ-компании «Криптонит». В этой статье хочу поделиться опытом и рассказать об оптимизации библиотек: о том, с какими проблемами мы столкнулись, и как их пошагово решили.

Для начала кратко опишу фронтовый стек у нас в «Криптоните»: мы те ребята, которые не пишут на React. У нас все проекты и библиотеки написаны на Vue + Composition API. Из дополнительных инструментов мы используем следующие:

В прошлой статье я познакомил вас с существованием малоизвестных "суперплатформ" управления данными. На абстрактном примере реализации показал как легко кастомизируется платформа - от идеи, к готовому UI. У кого-то это вызвало отвращение, у кого-то просто шок, а кто-то увидел возможность.

Настало время на деле показать как с помощью современного стека разработки (который возможно уже через пару лет станет опять старым) - дать второе дыхание морально устаревшим системам из прошлого, взяв из них лучшее, а именно философию и надёжные концепции и при этом не страдать от старого, дурно пахнущего legacy.

В общем расскажу про импортозамещение Dassault Systèmes 3DExperience, далее Enovia, а точнее - той её части, которая на протяжении многих лет востребована многими крупными предприятиями: гибкого движка для построения бизнес-приложений, с возможностями управления жизненным циклом (без привязки к тяжелому САПР).

В данной статье я покажу код на JS, который не поместился в предыдущей статье, а также перепишу его на TS. Кратко расскажу о преимуществах TS над JS и о том, что необходимо понимать для перехода.

В прошлой статье я также упоминал, что у Сергея получилось запустить мой проект на Tauri в режиме разработки на Arch. Он поделился со мной информацией в issue на GitHub и тем самым внёс вклад в проект. Поэтому я решил попробовать исправить проблему на основе его issue. Заодно расскажу, что такое issue и как оно выглядит.

Заваривайте чай, доставайте вкусняшки — пора «снимать первый урожай помидор»! 🍅

Всем привет! Написал сервис для проектирования интерфейсов с возможностью импорта и экспорта Vue шаблонов.

Привет, меня зовут Арина, я фулстек‑разработчик.
Есть задачи, которые годами возвращаются в твою жизнь. Для меня такой задачей стало бронирование столиков.
Давайте посмотрим, как я делала её трижды. Правило трёх попыток: один раз — ошибка, два — опыт, три — паттерн поведения.

В предыдущей статье мы разобрали trackOpBits — механизм оптимизации трекинга зависимостей во Vue 3.
Но тогда мы смотрели на систему через одну конкретную оптимизацию.

Сегодня поднимемся уровнем выше.

Почти всё, что вы делаете во Vue:

Привет, Хабр.

Это моя первая статья здесь. Долгое время не решался что-то публиковать, хотя регулярно читал и разбирал материалы других авторов.

Для первой публикации я выбрал тему внутренней оптимизации реактивности во Vue 3 — trackOpBits и работу ReactiveEffect. Этот механизм почти не заметен при обычной работе с фреймворком, но он напрямую влияет на производительность рендера компонентов и поведение вложенных computed.

В статье разберём, какую проблему решает trackOpBits, как именно он используется внутри системы реактивности и почему эта оптимизация важна в реальных приложениях.

У нас случилась классика: бэкенд уже отдает данные, бизнес ждет экран «вчера», а фронтендера в команде нет и ближайшие фронты заняты.

Мы рискнули и собрали MVP‑интерфейс за неделю — без выделенного фронта, но на корпоративном стеке (Vue/TypeScript) и с дизайн‑системой.

Это не история «AI все сделал». Это история про то, как правила + дизайн‑система + ревью как для джуна могут делать из AI‑ассистента нормальный инструмент, а не генератор мусора.

Что должен делать разработчик, чтобы проект, над которым он работает, не имел проблем? Очевидно — нужно просто исправить все баги и больше не писать новых. 

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

В 2026 году обновят JavaScript. Окончательный список изменений сформируется из проектов ECMAScript, достигших 4 этапа к марту. Но многие из них уже на заключительной стадии, а другие готовы и доступны в некоторых браузерах и средах. Под катом — что ждёт разработчиков и какие проблемы будут решены в этом апдейте.  

Всем привет!

Долго я возился с маркдауном в своих проектах и, честно говоря, знатно подгорел. Первая проблема — это вечный выбор библиотеки.

С одной стороны, есть «конструкторы» типа unified, remark и rehype. Штуки мощные, но настраивать весь этот AST-конвейер и систему плагинов — это какой-то оверхед и лишняя сложность, имхо.

С другой стороны, есть @next/mdx, который вроде и ок, но слишком завязан на страницах и вообще не умеет работать на клиенте.

Раньше я обычно выбирал что-то вроде markdown-to-jsx или react-markdown.

DX у них приятнее, работают и на клиенте, и на сервере, весят мало.

Но вот беда: они «из коробки» не переваривают HTML или MDX, и ты снова вязнешь в настройке плагинов. А если добавить туда i18n (типа i18next или next-intl), начинается настоящий ад. Куча if/else в коде, чтобы отрендерить нужный язык, и бандл раздувается до небес. Плюс вечные косяки с front-matter. Ну и до недавнего времени всё это было только для React.

В общем, решил я написать свое решение для intlayer. Чтобы просто работало.

> К слову, за основу я взял форк markdown-to-jsx v7.7.14 (от quantizor), который базируется на simple-markdown v0.2.2 (от Khan Academy).

Когда пилил этот парсер, ставил перед собой такие цели:

- Максимально легкий вес

- Кросс-фреймворковость (React, Vue, Svelte, Angular, Solid, Preact)

- Простая настройка: никаких бесконечных цепочек плагинов

- Поддержка SSR и клиентского рендеринга

- Настройка на уровне провайдера: можно легко прокинуть свои компоненты из дизайн-системы

- Компонентный подход: полный контроль над рендерингом каждой части приложения

Архитектура сложных форм. WEB-Frontend.
(VueJS, TypeScript, Compositions API, Pinia)

Архитектура форм, в которых:
- сложная бизнес логика
- множество полей
- валидация (frontend + backend)

Уже скоро год, как запущена AI-платформа для хранения и аналитики персональных медицинских данных Lissa Health. Недавно в ней появился отчет «Профиль здоровья», который учитывает любую информацию, которую пользователь предоставил о себе. Чтобы его реализовать, нам пришлось полностью переработать идеологию движка системы.

Мы совершили качественный переход от документо‑центрической к фактор‑центрической модели данных, где атомом информации о здоровье человека является медицинский факт с уникальным кодом и контекстом.

Ниже — техническое описание новой структуры.

Когда у тебя несколько клиентов (web + расширение + десктоп), API быстро развивается, а данных много и они сложные — «контракт» между бэком и фронтом начинает дрейфовать.
Я решил это так:

В данной статье я попытаюсь переписать часть приложения Kawai-Focus на стек: FastAPI + Vue.js + Tauri + Ionic. Также я соберу приложение только с экраном «Таймеры» под Linux в AppImage, которое подойдёт для большинства Linux-дистрибутивов. Реализация одного экрана не будет слишком долгим процессом, а финальная сборка приложения позволит оценить сложность и удобство полного цикла разработки.

Эта cтатья не будет подробным гайдом, так как размер переписанного кода и его описание слишком велики для одной статьи. Однако я покажу часть кода проекта и расскажу о выбранном стеке, а также о трудностях и преимуществах, с которыми я столкнулся в процессе переписывания проекта. Я буду использовать часть кода старого проекта, который не касается Kivy и KivyMD, поэтому его душа не умрёт, а обновится.

Заваривайте чай, доставайте вкусняшки — пора «старый стек превращать в удобрение для новых помидор»! 🍅