Обновить
44.79

TypeScript *

Cтрого типизированная надстройка для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

React Custom Hook: useMediaQuery

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров2K

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

Читать далее

FSD Forge: Как я создал небольшую CLI для Feature-Sliced Design и почему это было нужно

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1.2K

Привет, Хабр! Меня зовут Виктор, я программирую на TypeScript/Java и это моя первая статья, в которой я хочу поделиться историей создания fsd-forge — CLI-инструмента для упрощения работы с архитектурой Feature-Sliced Design (FSD) в проектах на React и TypeScript. В этой статье я расскажу, почему решил создать этот инструмент, как он устроен, какие проблемы решает, и какие уроки я вынес из процесса разработки.

Что такое Feature-Sliced Design и зачем нужен CLI?

Feature-Sliced Design — это архитектурный подход для структурирования фронтенд-приложений, который помогает организовать код в масштабируемых проектах. FSD делит приложение на слои (app, pages, features, widgets, entities, shared), делая код модульным, читаемым и легким для поддержки. Однако создание новой структуры FSD или добавление сущностей (например, страниц или виджетов) вручную занимает время и чревато ошибками, особенно в больших командах.

Идея fsd-forge родилась из личной потребности. Работая над несколькими React-проектами, параллельно переписывая с Angular на React еще один, я заметил, что:

Читать далее

React Custom Hook: useGeolocation

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров1.9K

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

Читать далее

Почему стоит использовать Tagged Unions при разработке на TypeScript

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров8K

Почему стоит использовать Tagged Unions при разработке на TypeScript

👋 Привет! Меня зовут Александр, я работаю фронтенд-разработчиком в компании «МегаФон». Сегодня я хочу поговорить на тему Tagged Unions (размеченных объединений) и объяснить, почему они ваш секретный инструмент для написания надежного TypeScript-кода.

Читать далее

Альтернативный способ хранения скриншотов в Playwright и способ их обновления

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров3K

В ходе автоматизации тестирования пользовательских интерфейсов зачастую используется такой подход как визуальное тестирование. Он позволяет поддерживать стабильность и отсутствие ошибок в отображении страниц.  

Одним из инструментов, предоставляющих возможность автоматизации данного вида тестирования, является Playwright.

В этой статье я расскажу о работе с визуальным тестированием в рамках упомянутого инструмента, как мы справились со сложностями хранения эталонных скриншотов и автоматизировали их обновление.

Читать далее

Изучаем Go: руководство для JavaScript-разработчиков. Часть 1

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров12K

После пяти лет работы JavaScript-разработчиком, занимаясь как фронтендом, так и бэкендом, я провел последний год, осваивая Go для серверной разработки. За это время мне пришлось переосмыслить многие вещи. Различия в синтаксисе, базовых принципах, подходах к организации кода и, конечно, в средах выполнения — все это довольно сильно влияет не только на производительность приложения, но и на эффективность разработчика.

Интерес к Go в JavaScript-сообществе тоже заметно вырос. Особенно после новости от Microsoft о том, что они переписывают официальный компилятор TypeScript на Go — и обещают ускорение до 10 раз по сравнению с текущей реализацией.

Эта статья — своего рода путеводитель для JavaScript-разработчиков, которые задумываются о переходе на Go или просто хотят с ним познакомиться. Я постарался структурировать материал вокруг ключевых особенностей языка, сравнивая их с привычными концепциями из JavaScript/TypeScript. И, конечно, расскажу о "подводных камнях", с которыми столкнулся лично — с багажом мышления JS-разработчика.

Читать далее

Пилим стартап, часть 2.5. Мини-гайд по Claude Code, причесываем UI

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров6.4K

Да, я убрал из заголовка "за выходные", потому что проект чутка растянулся. Но идёт весело! У него и веб-версия теперь есть: https://mini.qyp.ai

Напомню: я давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex).

Идея простая: десктопное приложение, дешборд на весь экран, справа интерфейс чата. Просим ИИ вывести на дешборд какую-то информацию в духе "сколько новых юзеров за последнюю неделю" - ИИ пишет код виджета, и размещает его на дешборде. Под капотом - runtime компиляция React.js + sql-коннекторы.
Полный open-source, весь код в репозитории: https://github.com/ElKornacio/qyp-mini

Читать далее

Как @empty в Angular упрощает работу с пустыми коллекциями

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1.5K

Пустые состояния (Empty States) — это незаметные, но критически важные элементы интерфейса. Что видит пользователь, когда список задач пуст, поиск не дал результатов или дашборд ещё не содержит данных? Пустой экран? Бесполезный спиннер? Или продуманное сообщение, которое помогает сориентироваться?

С появлением декларативного управления потоками (declarative control flow) в Angular обработка пустых состояний стала проще и элегантнее. Одна из ключевых возможностей — директива @empty, которая делает код чище, а интерфейс — дружелюбнее.

Давайте разберёмся, как это работает.

Читать далее

Стартап за выходные: AI-агент для БД, часть 2

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров5.4K

Ну кто не мечтает запустить стартап за одни выходные? Давно хотел развеяться, и чутка отвлечься от рутины и работы. А ещё давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex).

Идея простая: десктопное приложение, внутри ИИ-агент, который подключается к БД, получает данные о структуре таблиц/вьюшек. Справа сайдбар: интерфейс чата с агентом, а основное пространство - холст, на котором агент размещает что хочет сам. А именно - виджеты, которые делают запросы к БД, и выводят их в приятном глазу виде.
Никакого удалённого бекенда, open-source, доступы к БД хранятся исключительно локально, всё секьюрно.

Часть 2 - как мы в runtime React-компоненты компилировали.

Читать далее

Сердце Фреймворка: Философия и Практика Dependency Injection в Angular

Уровень сложностиСложный
Время на прочтение18 мин
Количество просмотров5.6K

Dependency Injection (DI) один из столпов, на которых держится фреймворк Angular. Каждый разработчик, так или иначе, сталкивается с ним с первого дня: запрашивает сервисы в конструкторе, добавляет providedIn: 'root' и видит, как «магия» работает. Но именно в этом и кроется ловушка.

Для многих DI так и остается на уровне «магии» удобного механизма, который просто работает. Однако поверхностное понимание этого мощнейшего инструмента неизбежно приводит к архитектурным компромиссам: неочевидным утечкам памяти, сложностям в тестировании, созданию неявных связей между компонентами и, в конечном счете, к коду, который трудно поддерживать и масштабировать.

Эта статья не очередной пересказ официальной документации. Это глубокое погружение в архитектуру и философию Dependency Injection в Angular. Наша цель демистифицировать «магию» и превратить ее в предсказуемый, управляемый и мощный инженерный инструмент в вашем арсенале.

Мы пройдем путь от фундаментальных принципов инверсии контроля (IoC) до тонкостей иерархического инжектора. Мы разберем на атомы все стратегии предоставления зависимостей, научимся управлять их жизненным циклом и областью видимости. Мы изучим продвинутые паттерны с использованием InjectionToken и multi-провайдеров и поймем, как современная функция inject() меняет подход к композиции логики.

Перейти к полному анализу

Стартап за выходные: AI-агент для БД, часть 1

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров7.7K

Ну кто не мечтает запустить стартап за одни выходные?
Давно хотел развеяться, и чутка отвлечься от рутины и работы.
А ещё давно хотел пощупать Tauri v2, и новомодные фреймворки для построения AI-агентов (ai-sdk / mastra / llamaindex.

Идея простая: десктопное приложение, внутри ИИ-агент, который подключается к БД, получает данные о структуре таблиц/вьюшек. Справа сайдбар: интерфейс чата с агентом, а основное пространство - холст, на котором агент размещает что хочет сам. А именно - виджеты, которые делают запросы к БД, и выводят их в приятном глазу виде.
Никакого удалённого бекенда, open-source, доступы к БД хранятся исключительно локально, всё секьюрно.

Так как весь код открытый, то процесс я буду логировать в репозитории: https://github.com/ElKornacio/qyp-mini

Читать далее

Web3 Frontend — с чего начать?

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров12K

Создание фронтенда для Web3-приложений — это не только дизайн, кнопки и React. Это мост между пользователем и блокчейном. И ты, как фронтенд‑разработчик — тот, кто этот мост может построить...

Читать далее

Разработка браузерного расширения: путь от идеи до публикации в web store

Уровень сложностиПростой
Время на прочтение19 мин
Количество просмотров2.9K

Разработка браузерного расширения началась с простой идеи: упростить поиск по закладкам и открытым вкладкам, а также попробовать свои силы в создании проекта с элементами монетизации. В этой статье я расскажу, как за две недели прошёл путь от прототипа до публикации в Chrome Web Store и Firefox Add-ons, какие технологии использовал и с какими трудностями столкнулся. Надеюсь, мой опыт вдохновит других разработчиков попробовать свои силы в создании подобных проектов. Полный код проекта доступен на GitHub.

Читать далее

Ближайшие события

Про esModuleInterop и совместимость модулей ES6 и CommonJS

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров1.7K

Всем привет, хабровчане! Я (не)начинающий разработчик с относительно небольшим стажем, который пытается углубить свои знания в любимой технологии. В работе и повседневной жизни очень часто приходится работать с языком TypeScript, который мне очень нравится, но к своему стыду, сам очень плохо знаком с настройкой его конфигурации, поэтому решил восполнить этот пробел, ведя собственный Today I Learned. Некоторые опции tsconfig являются очень простыми и понятными. Другие же заставляют знатно напрячься. И даже если поверхностное назначение какой-то настройки является понятным, все равно возникает желание разобраться с принципом ее действия, понять, на какие структурные аспекты проекта она влияет, а также узнать, а как вообще людям жилось до ее появления.

Как раз об одном из них и пойдет разговор в этой статье, а именно об esModuleInterop. Действие опции проверялось при попытке подружить CommonJS-модуль с ES-модульным проектом. Поверхностная гуглешка не дала исчерпывающий ответ на ряд моих вопросов, поэтому приходилось обращаться к спецификации ES6, документации tsconfig (упаси боже читать документацию (шутка)), в личные блоги авторитетных дядек в сообществе и к описаниям модульных систем. На основе найденной информации я составил небольшое резюме, с попыткой собрать материал во едно. Надеюсь, кому-то он покажется интересным. Приятного чтения!

Читать далее

Как Хоук упрощает отладку JavaScript с помощью трекера консоли

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров2.9K

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

Читать далее

Создание расширения для приостановки вкладок под Manifest V3

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров570

Давно пользовался расширением The Great Suspender для приостановки вкладок, но оно давно заброшено и обновлений не планируется, а найти полноценную замену с Manifest V3 не удалось.
Тем временем Chrome окончательно отключает поддержку Manifest V2 для расширений начиная с версии 139, которая выйдет на днях (30 июля - Early Stable Release, 5 августа - Stable Release) и вопрос замены стал очень актуальным.
Посмотрел на исходный код The Great Suspender и решил, что проще написать с нуля, чем исправить. Изучил на API для расширений, всё должно быть просто: по таймеру проверяем вкладки, приостанавливаем (переадресовываем на страницу расширения) давно не использующиеся вкладки (определяем по свойству вкладки lastAccessed), по клику на приостановленной страницы возвращаем обратно на оригинальную страницу. Казалось бы, какие тут могут быть проблемы...

Читать далее

Vue 2 в 2025: какие паттерны стоит забыть, а какие – оставить

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров3.1K

Vue 2 в 2025 году официально стал legacy, но множество проектов всё ещё работают на нём. Миграция на Vue 3 не всегда возможна сразу, поэтому важно правильно поддерживать и модернизировать старый код.

В этой статье разберём:

Устаревшие паттерны, от которых лучше избавиться.

Проверенные подходы, которые остаются актуальными.

Альтернативы из Vue 3, которые можно адаптировать уже сейчас

Читать далее

Frontend и OpenAPI: генерация клиента, мокирование API и данных с помощью MSW

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров3K

Генерация кода по спецификации OpenAPI и мокирование запросов - эффективный способ автоматизировать процессы разработки и решить некоторые специфические задачи. В статье описано применение различных инструментов, которые могут быть использованы при генерации и мокировании.

Читать далее

Прощай, Zone.js: ускоряем Angular с Signal API и Zoneless-подходом

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров5.2K

Привет! Я Незар, фронтенд-разработчик Т-Банка в одном из продуктов Т-Бизнеса. Наша команда использует Angular, и мы следим за всеми изменениями, которые с ним происходят.

В статье разберу, как Angular эволюционировал от Zone.js к Zoneless-приложениям с современным реактивным подходом Signal API и почему это стало ключевым шагом для повышения производительности и упрощения реактивного программирования. 

На примерах и замерах производительности посмотрим, как переход к Zoneless-подходу с Signal API позволяет сократить избыточные перерисовки, ускорить отклик приложения и сделать код значительно чище и предсказуемее. Сделаем Angular-приложения быстрее и проще, добро пожаловать под кат!

Читать далее

Async pipe нечистый

Уровень сложностиПростой
Время на прочтение37 мин
Количество просмотров3.4K

Всем привет, меня зовут Максим Иванов. В основном я пишу обзоры и русифицирую статьи для начинающих разработчиков. Я очень люблю Angular и иногда рассказывать что-то о нем. Если вы только начинаете свой путь в изучении этого фреймворка, надеюсь эта статья будет вам полезной. Cегодня мы с вами поговорим о том, что такое пайпы (pipes), как они устроены и что не так с одним из самых популярных и доступных из коробки пайпов, таких как async. Желаю приятного прочтения и хорошего настроения. Поехали!

Читать далее