Как стать автором
Обновить
47.53

TypeScript *

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

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

Обобщенные фабрики тайпгардов в TypeScript

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

Привет, Хабр! Меня зовут Сергей Соловьев, я разрабатываю интерфейсы международных платежей в Тинькофф Бизнесе. Уверен, многие хотят писать надежный, поддерживаемый, но при этом лаконичный код. Как найти баланс?

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

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

Читать далее
Всего голосов 31: ↑33 и ↓-2+35
Комментарии6

Новости

Храним файлы Strapi в облаке Selectel

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

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

Читать далее
Всего голосов 26: ↑26 и ↓0+26
Комментарии3

Храним файлы Strapi в облаке Selectel

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

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

Читать далее
Всего голосов 26: ↑26 и ↓0+26
Комментарии3

Oxlint — более быстрая альтернатива ESLint

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

Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. Недавно стал общедоступен новый линтер «Oxlint», основанный на языке программирования Rust, и многие эксперты высоко оценили его. Какие преимущества Oxlint предоставляет по сравнению со своим предшественником ESLint?

Читать далее
Всего голосов 32: ↑32 и ↓0+32
Комментарии18

Истории

Taiga UI: итоги 2023 года

Время на прочтение10 мин
Количество просмотров8.7K

Заканчиваются рабочие дни уходящего года, а значит, самое время подводить итоги наших трудов. За 2023 год у проекта Taiga UI появилось более пятидесяти релизов, больше двух тысяч вмерженных PR-ов и свыше пятисот закрытых issue.

Taiga UI — это огромный Angular UI Kit, который активно используется в сотне продуктов компании Тинькофф и популярен за ее пределами. Разработка проекта много лет идет в Open Source, собирая свою аудиторию по всему миру.

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

Читать далее
Всего голосов 27: ↑26 и ↓1+25
Комментарии0

Как я сделал проект для себя и получил приз от Telegram

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

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

Читать далее
Всего голосов 36: ↑35 и ↓1+34
Комментарии15

Decky Notifications: как переизобрести KDE Connect и перенести уведомления в Steam Deck

Время на прочтение12 мин
Количество просмотров3.2K

Недавно в мои руки попала портативная игровая консоль Steam Deck. Замечательное устройство, которое полностью поглощает внимание. В этом я вскоре нашел минус: телефон генерирует уведомления и приходится откладывать приставку, чтобы посмотреть сообщение.

Хочу играть и не проверять телефон, но при этом боюсь пропустить что-то важное. И я нашел способ решение этой задачи. В этой статье расскажу, как мне пришлось полностью перебрать протокол KDE Connect, чтобы написать плагин, который переносит уведомления в Steam Deck. Подробности под катом!
Читать дальше →
Всего голосов 44: ↑44 и ↓0+44
Комментарии10

Taiga UI: больше чем UI kit

Время на прочтение6 мин
Количество просмотров15K

Taiga UI — огромная библиотека UI-компонентов для Angular, на которую стоит взглянуть. Но она только вершина айсберга. Мы разрабатывали ее более пяти лет, начав еще на Angular 4. И, будучи любителями декомпозиции, мы создали несколько отдельных независимых проектов, которые помогают нам писать крутые Angular-приложения. 

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

Читать далее
Всего голосов 28: ↑27 и ↓1+26
Комментарии3

Как я разбирал нестандартный формат 3D-моделей, чтобы показывать Лего у себя на сайте

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

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

Я перепробовал несколько редакторов 3D-моделей Лего (моим главным условием была работа на Linux, либо в вебе), и остановился на онлайн-редакторе Mecabricks. Но, уже перенеся туда несколько из моих творений, понял, что с задачей «показывать всем друзьям» всё будет сложнее: у Mecabricks довольно скудные возможности экспорта, а его собственный формат с расширением .zmbx понимает только он и его плагин для Blender.

Поэтому я решил посмотреть, как этот формат устроен, и написать свой конвертер во что-то более общепринятое. В качестве целевого формата я выбрал glTF, а инструмент незатейливо назвал zmbx2gltf.

В этой статье я расскажу, как постепенно разбирал этот непонятный .zmbx, про устройство и преимущества glTF как формата передачи 3D-ассетов между разными инструментами, и про то, какие проблемы я решал, конвертируя одно в другое.
Читать дальше →
Всего голосов 87: ↑87 и ↓0+87
Комментарии11

Релиз Bun 1.0 (новый runtime для JavaScript )

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

Представляем Bun версии 1.0.

Bun — это быстрый и универсальный набор инструментов для запуска, сборки, тестирования и отладки JavaScript и TypeScript кода (от одного файла до fullstack-приложения). Сегодня Bun стабилен и готов к продакшену.

Читать далее
Всего голосов 89: ↑86 и ↓3+83
Комментарии117

Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса

Уровень сложностиСредний
Время на прочтение22 мин
Количество просмотров9.1K
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.

В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:

Читать дальше →
Всего голосов 42: ↑42 и ↓0+42
Комментарии0

JavaScript повсюду или почему веб-технологии захватили мир

Время на прочтение18 мин
Количество просмотров15K

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

Пробежимся галопом по истории интернета, перемоем косточки фронтендерам и придем к неутешительному заключению. Буду ругать и хвалить, но выводы делать лишь вам. Хотя и не надеюсь кого-то в чем-то убедить. Добро пожаловать под кат!

Читать далее
Всего голосов 42: ↑39 и ↓3+36
Комментарии38

DOM, DI и View: деревья в Angular

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

Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними.

Читать далее
Всего голосов 25: ↑25 и ↓0+25
Комментарии3

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

Создание игры в стиле GameBoy в 13 КБ

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

В прошлом году я решил поучаствовать в гейм-джеме js13kgames. Это длящееся один месяц ежегодное соревнование по созданию с нуля игры на JavaScript, которая должна уместиться в 13 КБ (в zip). Места как будто не очень много, но с достаточным количеством креативности при таких ограничениях можно достичь многого. Просто взгляните на потрясающие примеры прошлых лет:


Хотя в прошлом году моя игра заняла не такое высокое место, я всё равно хотел бы поделиться своими открытиями, сделанными в процессе её разработки.

Мне захотелось сделать игру, напоминающую о ретроэпохе игр на портативных консолях с их уникальным квадратным экраном, низким разрешением и видом сверху вниз. Я решил реализовать быстрый геймплей в стиле action-RPG с простым, но увлекательным геймплеем, мотивирующим игрока продолжать игру. С музыкой всё было очевидно — звуковые эффекты должны быть похожими на звуки аркадных автоматов.

Поиграть в мою игру можно на странице Gravepassing сайта JS13KGames. Полный код выложен на GitHub.
Читать дальше →
Всего голосов 49: ↑47 и ↓2+45
Комментарии1

Явное управление ресурсами: пробуем новую фичу JavaScript и TypeScript

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

Одной из самых интересных грядущих новинок JavaScript и TypeScript для меня является явное управление ресурсами. Новый синтаксис using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий какими-либо ресурсами.

В этой статье я хочу на примерах разобрать эту фичу — в том виде, в котором она сейчас доступна в TypeScript 5.2.0-beta с полифиллом disposablestack. Я рассмотрю синхронные и асинхронные ресурсы, DisposableStack/AsyncDisposableStack, а также приведу пример неочевидного бага, в который попался я сам. По пути я также коснусь нескольких других нововведений Node.js, про которые, возможно, ещё знают не все. Весь код доступен в репозитории.
Читать дальше →
Всего голосов 65: ↑65 и ↓0+65
Комментарии6

Yet another введение в fp-ts. Часть 2. Моноиды и полугруппы

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

Всем привет! В предыдущей части цикла статей мы поговорили о том, зачем вообще нужно функциональное программирование, а также обсудили понятие классов типов и разобрали базовые из них: Eq (эквивалентность) и Ord (сравнимость).

Сейчас я хочу пролить свет на два наводящих жуть на неподготовленного читателя слова: моноиды и полугруппы. Это математические понятия родом из общей алгебры. На самом деле всё не так уж и страшно. Если совсем упрощать, то оба термина относятся к объединению элементов множества. Я помогу разобраться с их формальными определениями, а также на практических примерах покажу, как и зачем их использовать.

Читать далее
Всего голосов 39: ↑38 и ↓1+37
Комментарии13

Maskito – новая коллекция библиотек для маскирования текстовых полей

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

Рады поделиться: выложили нашу разработку Maskito в открытый доступ, и совсем недавно произошел релиз ее первой мажорной версии. Maskito — коллекция библиотек, упрощающих маскирование текстовых полей, с удобным и гибким публичным API.

Maskito содержит разные библиотеки: основная написана на TypeScript без зависимостей, есть опциональный пакет с набором готовых конфигурируемых масок, а еще есть библиотеки для удобного использования Maskito в проектах на React, Angular или Vue. Рассказываю обо всем подробнее.

Читать далее
Всего голосов 58: ↑56 и ↓2+54
Комментарии13

В поисках лучшей версии EcmaScript для сборки сайта

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

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

В статье вы увидите бенчмарк производительности EcmaScript фич; узнаете какой из компиляторов генерирует самый производительный JavaScript код; а также можно ли добиться прироста производительности, начав собирать сайт в более поздней версии ES.

Читать далее
Всего голосов 26: ↑26 и ↓0+26
Комментарии18

Какие уроки я извлёк из создания расширения VSCode с помощью GPT-4

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

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

В большинстве случаев, когда кто-то утверждает, что «GPT написал X», человек выступает для LLM в роли своеобразного REPL (Read-Eval-Print Loop, цикл чтение-оценка-вывод), внимательно подводя модель к функциональному результату. Я нисколько не хочу принизить ценность этого процесса – очень здорово, что он работает. Но можем ли мы шагнуть дальше? Можем ли использовать LLM для генерации ВСЕГО кода сложной программы за раз без человеческого вмешательства?
Читать дальше →
Всего голосов 47: ↑46 и ↓1+45
Комментарии11

Битва CLIs: почему мы отказались от Angular CLI в пользу Nx

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

Привет! Меня зовут Даниил, я фронтенд-разработчик в Тинькофф Бизнесе. Мы строим удобные интерфейсы, чтобы клиенты могли быстро зарегистрировать бизнес.

Сегодня я хочу рассказать, почему мы используем Nx для всех наших Angular-проектов, какие проблемы решает этот инструмент и чем он лучше Angular CLI.

Читать далее
Всего голосов 25: ↑25 и ↓0+25
Комментарии5
1
23 ...