TypeScript *

При разработке приложений мы каждый день решаем как типичные задачи , так и весьма сложные. Иногда сложные задачи решаются очень просто и быстро, а иногда даже самые простые требуют нестандартных решений и не малого опыта от разработчика. В данной статье я хочу поделиться с Вами нестандартным решением довольно простой задачи на первый взгляд, которую вы наверняка встречали в приложениях на Angular, с помощью написания собственного декоратора, что само по себе является далеко не самым распространенным решением для Angular

Всем привет!

Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это "Воплощённые типы"("Embodied types").

Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.

Это вторая часть roadmap frontend разработчика, Если вы не читали первую часть, то настоятельно рекомендую ознакомится, Первая часть. В этой статье я продолжу вам рассказывать про мое представление современной карты развития frontend разработчика.

swagger-typescript-api - это мощный инструмент для генерации кода на основе OpenApi-контактов, о процессе работы с которым я рассказывал в предыдущей статье. Там же я упомянул, что его можно кастомизировать под нужды конкретного проекта с помощью своих шаблонов.

Именно кастомные шаблоны и бонусом, кастомная конфигурация, будут раскрыты в текущей статье. Поехали!

У меня возникла задача спарсить данные с веб-сайта aboutyou.de. Я провел быстрый анализ страниц и обнаружил, что сайт не имеет серьезной защиты и вся необходимая информация доступна в HTML. На первый взгляд всё казалось окей. Но это, между прочим, не окей.

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

Гибкое API у UI kit компонентов является преимуществом. Однако возможность повлиять на стили ваших компонентов в конкретном месте является большим искушением. Разработчику выгодно внести изменение здесь и сейчас, а не думать на перспективу. Такое поведение постепенно разрушает вашу систему переиспользования.

Заметили, что мир становится намного красочнее, пестрее, ярче и контрастнее?

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

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

В ИТ мире тоже происходит такой сдвиг, программы для разработки (IDE) походят больше на елку с гирляндой или какие-то детские квесты из 2000-х. Странность заключается в том, что центр внимания программиста смещается со знаний, на все что угодно, но только не на написание качественного кода, изучения алгоритмов или разобраться как же все таки работает Garbage Collector (.Net мем). Становятся популярны какие-то странные супер фичи будущего, выбор красивой подсветки ошибок, умные помощники и т.д. Но самое странное все начинают называть себя экспертами всех этих ценностей.

https://github.com/paulbuzakov/tmuxconfig

Создаем TypeScript библиотеку для валидации данных. Поэтапно добавляем основной функционал и типизацию. Делаем основую упор на простоту кода и проиводительность. Как протитип используем yup и zod.

Прежде чем начать писать данную статью, я озадачился интересным вопросом. А кто как вообще работает с API в 2024 году? Для меня наличие Swagger-контракта или OpenAPI-контракта уже несколько лет как must have. И откровенно говоря, мне сложно представить, что люди не используют этот фреймворк для работы c REST API. Однако, если среди читателей таковые есть, и вам до сих пор скидывают «дтоошки», то вперед осваивать и продвигать OpenApi.

Для понимания работы swagger-typescript-api я сначала кратко опишу основные моменты спецификации OpenAPI. Читатели, которые уже знакомы с этим, могут сразу перейти к части про swagger-typescript-api.

Всем привет! А вы знали, что RxJS содержит в себе более 100 операторов? Но если ваш проект использует эту библиотеку - скорее всего вы с трудом насчитаете у себя больше пары десятков. Интересная ситуация, да? Не знаю почему так получается, но сегодня я хочу поделиться реальными примерами использования “редких” операторов. Приступаем!

Игнорируете кастомные директивы в Angular? Зря-зря, многое упускаете.

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

Устанавливаем pnpm, создаем воркспейсы для фронта и бека, импортируем что угодно из одного в другое, типизируем запросы и избавляемся от бойлерплейта.

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

В статье я расскажу:

о простом интерфейсе Zustand

о его внутреннем устройстве

о производительности без усилий: 3 простых способа оптимизаций

о производительности на максималках: не всегда нужно использовать длинный цикл рендера React, чтобы достичь максимальной производительности - Zustand может быстрее!

о применении на практике: советы и рекомендации по интеграции Zustand в ваши проекты для достижения масштабируемости и удобства поддержки.

Начните активно использовать Zustand в своих проектах - вы будете приятно удивлены простотой и удобством работы с ним.

Перестаньте писать, генерировать и переписывать API слой для каждого приложения - создайте универсальный прокси с TypeScript единый для множества приложений и обновляйте только типы при изменениях API на сервере!

Ваш API слой всегда будет оставаться минимальным в размерах и не увеличится ни на байт с увеличением количества вызываемых методов! Это обеспечит стройность вашим бандлам и добавит удовольствие пользователю от быстрой загрузки вашего сайта

Привет! Меня зовут Врублевский Артур, и я занимаюсь frontend-разработкой на Angular в Страховом Доме ВСК. Так сложилось, что ранее, до работы в ВСК, я уже сталкивался с инструментом Sentry – занимался его настройкой на отлов ошибок. Наверно именно поэтому я был привлечен к неожиданным для меня работам, которые так же касались Sentry, его использования в необычной плоскости. Об этом и пойдет далее рассказ в 6 актах.

Стадия 1 — «Отрицание»

Думаю, многим Sentry известен как инструмент, позволяющий аккумулировать ошибки, отслеживать метрики производительности, делать тревожные оповещения о состоянии ваших приложений. И когда мне принесли задачу, звучащую как «Нам нужны продвинутые бизнес-метрики, можем ли мы это сделать в Sentry?», я сразу начал отрицать возможность такой затеи. Это казалось противоестественным действием, хотелось отправить постановщика в Яндекс Метрику, которая изначально была создана для подобных целей. Но со слов постановщика, решение Яндекса все же не давало необходимых показателей в нужном виде, нужно было больше гибкости.

Глобальная задумка состояла в том, что нужно проследить путь клиента при оформлении продукта от первого контакта, до состоявшейся оплаты и отправке документов email.

«Нам нужны продвинутые бизнес-метрики, можем ли мы это сделать в Sentry?»

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

Как бы то ни было, задача есть и ее нужно закрыть. Поэтому я и расскажу, как я с ней справился, в надежде получить одобрение или более элегантное решение) Погнали!

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

Чем такой инструмент не является обычной посадкой строгой статической типизации на динамически типизированный язык, как она есть в C#, Java, Kotlin и так далее...? Что такое типы утилиты? И какие решения всерьез могут облегчить жизнь разработчикам?

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

Чем такой инструмент не является обычной посадкой строгой статической типизации на динамически типизированный язык, как она есть в C#, Java, Kotlin и так далее...? Что такое типы утилиты? И какие решения всерьез могут облегчить жизнь разработчикам?

Мой путь от концепции к реальности: реализация, которая даёт нечто большее, чем однократное решение.

JavaScript — самый популярный скриптовый язык в мире. Так почему же так сложно запускать shell-скрипты на JavaScript?

Этим вопросом задались создатели Bun (альтернатива Node.js - очень быстрый runtime для запуска JS-кода, а также менеджер зависимостей, тест раннер, бандлер для фронтенда, транспилятор TypeScript и не только).

20 январе 2024 в рамках Bun v1.0.24 был представлен Bun Shell - встроенный интерпретатор shell-подобных скриптов. Под катом узнаем зачем это нужно и какой функционал уже доступен.