Обновить
50.39

TypeScript *

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

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

Как декораторы могут упростить разработку веб-форм

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

Относительно недавно в TC39 предложение с реализацией декораторов в EcmaScript вышло на 3-ю пред финальную стадию. Чуть позже MicroSoft выпустил 5-ю мажорную версию TypeScript, в которой новая реализация декораторов начала работать из коробки без каких-либо экспериментальных флагов. Babel тоже подсуетился, и в своей документации начал рекомендовать использовать новую реализацию декораторов. А это означает лишь то, что декораторы наконец-то начали полноценно входить в жизнь JavaScript разработчиков.

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

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

Читать далее

Infinite scroll (бесконечный скролл) +Virtualization (виртуализация) на примере ReactJS+ RTK Query

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

На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира (около 5.3 млрд. человек), а к 2025 году это число увеличится до 6.54 млрд. (внушительно, не правда ли?). Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?». При такой картине мира и самых оптимистичных прогнозах о темпах появления новых вещей, мы имеем неосторожность войти в некую рекурсию.

С детства нас учили есть маленькими порциями и тщательно пережевывать, так почему бы и в сложившейся ситуации получать всю информацию не одним скопом, а порционно? Именно такое решение предлагаю рассмотреть в своей статье. И если уж касаться темы еды (видимо, не стоит писать на голодный желудок), то стоит проглатывать еду, которую мы уже прожевали, а не копить ее во рту, иначе когда-нибудь он порвется (Джокер, к тебе претензий нет).  Так и мы будем удалять элементы из DOM-дерева, которые не доступны взору пользователя, чтобы не перегружать наш сайт.

Читать далее

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов

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

В статье рассмотрим как создавать шаблоны в продуктах Jesbrains (WebStorm, PhpStorm, Intellij, PyCharm).

Читать далее

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний?

Время на прочтение16 мин
Охват и читатели3.6K

Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте? 

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

Меня зовут Денис Стасьев. В этой статье расскажу о том, как мы внедряли машину состояний в одном из компонентов главной страницы Mail.ru — блоке новостей, что получили на выходе и ещё подробнее о том, почему в итоге остановились на XState.

Читать далее

Передача и обработка IAsyncEnumerable в Typescript с ASP.NET Core Web

Уровень сложностиПростой
Время на прочтение17 мин
Охват и читатели4.6K

Всем привет, Меня зовут Олег и я .NET разработчик в компании Bimeister. Я хотел поделиться своим интересным опытом по связи проекта на ASP.NET Core Web App с использованием IAsyncEnumerable коллекций и современного фронт-енд SPA приложения на Typescript.и Vue.js 3 версии.

Все эти технологии не новы и, на самом деле, фреймворк и технологии для веб части могут быть любые на ваш вкус: Angular, или React, или что-либо еще. Весь интерес представляет собой именно унификация процесса обмена с бэкендом на C# с современной асинхронной коллекцией. Я не буду заострять внимание на структуре обеих половин приложения подробно, скажу лишь, что использовал один из сложившихся в моей практики шаблонов для запуска  ASP.NET Core Web приложения с SPA. Все детали можно будет посмотреть в приложенном репозитории.

Читать далее

TypeScript и все что тебе нужно в разработке

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели45K

Все для работы с продвинутым TS внутри. Generic Types, Mapped Types, Types Guard, Utility Types и многое другое. Шпаргалка с навигацией и примерами.

К изучению

Пишем продвинутый планировщик с использованием React, Nest и NX. Часть 4: пользовательский интерфейс

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

Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. Как вы помните из предыдущих частей (1, 2, 3), у нас уже есть функциональность для работы с планировщиком в бэкенде. Теперь нашей задачей будет создать удобный и интуитивно понятный пользовательский интерфейс, чтобы пользователи могли легко взаимодействовать с задачами.

Читать далее

Создание конвертера JSON в Typescript с помощью React, NodeJS и ChatGPT

Время на прочтение11 мин
Охват и читатели4.7K

Эта статья — отличное подспорье для каждого, кто хочет ускорить процесс разработки с помощью автоматизации. Из нее вы узнаете, как создать веб-приложение, которое преобразует объекты JSON в интерфейсы Typescript с помощью API ChatGPT. Приведенные пошаговые инструкции смогут легко выполнить даже новички.

Читать далее

Реализация Server-Side Rendering (SSR) при помощи Bun и React

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

Bun — «швейцарский нож» для JavaScript, который все ждали, наконец релизнулся и уже стал геймченджером. Bun представляет собой универсальную среду выполнения JavaScript и набор инструментов, рассчитанный на высокую скорость работы. В его состав входят бандлер, тест-раннер, встроенная поддержка TypeScript и JSX и даже менеджер пакетов, совместимый с Node.js.

Дисклеймер: это вольный перевод статьи из блога Алекса Кейтса. С оригинальным постом можно ознакомиться здесь.

Читать далее

Римские числа или как не запоминать составные варианты

Время на прочтение3 мин
Охват и читатели12K

Откройте почти любую реализацию перевода чисел из арабской системы в римскую и вы почти со 100% вероятностью увидите там знаменитые дифтонги "CM" (900), "CD" (400) и так далее. И поначалу кажется, что без них не обойтись. Но это не так!

Читать далее

Kysely.js типизированный sql builder

Уровень сложностиСредний
Время на прочтение17 мин
Охват и читатели7.1K

Kysely.js – это библиотека, позволяющая писать типизированные SQL запросы. Библиотека делает работу с SQL в вашем проекте более безопасной, избавляя от таких ошибок как опечатки в названиях колонок или таблиц и неправильное использование SQL операторов в коде (код не скомпилируется). Ко всему прочему она делает работу с SQL более удобной, предоставляя при написании запросов автодополнения для таблиц, колонок, алиасов и других сущностей. Kysely имеет незначительный слой абстракции над SQL для того чтобы можно было пользоваться всей мощью SQL и при этом не изучать множество дополнительных сущностей. Библиотека поддерживает MySQL, PostgreSQL, SQLite, PlanetScale, D3, SurrealDB и другие.

Теперь погрузимся в наш кисель ?.

Читать далее

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

Время на прочтение6 мин
Охват и читатели19K

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

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

Читать далее

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

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

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

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

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

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

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

Типизированные формы в Angular

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели7.5K

Всем привет! В июне 2022 года наша фронтенд команда наконец-то дождалась строго типизированных форм от разработчиков Angular! Через какое-то время мы заметили что не все работает так, как интуитивно ожидаешь. Позже я создал небольшой внутренний документ с “фишками”, которые явно не описаны в официальных доках. И подумал: “А почему бы мне не выложить наш небольшой гайд на Хабр?”. И вот, выкладываю.

Читать далее

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

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

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

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

Читать далее

Vite плагин для удобной работы с Web Workers

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

Привет, Хабр! Я участвую в разработке крупного Web приложения и мы с коллегами на этапе проработки и планирования архитектуры пришли к выводу о необходимости выносить всю логику приложения в отдельный поток Web Worker, т.к. предполагается большое число фоновых операций и вычислений. К чему это привело? Сложности? Пути их решения? Обо всем попорядку.

Читать далее

Создатель Ruby on Rails: «Turbo 8 отказывается от TypeScript»

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

По общему мнению, TypeScript стал большим успехом для Microsoft. Я видел множество сияющих от радости людей, напичкавших JavaScript типами, которые могут быть проверены компилятором. Но я никогда не был его поклонником. Ни через пять минут размышлений, ни через пять лет. Поэтому я с большим удовольствием могу сообщить, что мы отказываемся от TypeScript в следующем большом выпуске Turbo 8.

Читать далее

Обертка для indexedDB / localStorage /…

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

Библиотека storage-facade, о которой пойдет речь в этой статье, предоставляет единый синхронный / асинхронный API хранилища, являющийся абстракцией над реальной реализацией хранилища. Для конечного пользователя она упрощается использование любых хранилищ, для которых абстрактный класс из storage-facade будет реализован. Как автор этой библиотеки, расскажу о её использовании.

Есть реализации для IndexedDB, localStorage, sessionStorage, обёртка для Map.

Рассмотрим самый простой вариант, storage-facade-localstoragethin.

Читать далее

Повышаем продуктивность разработки: магия общей ESLint конфигурации

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели19K

Всем привет! Меня зовут Дмитрий Пашкевич, я Frontend разработчик и хочу рассказать о создании единой ESLint конфигурации, которую можно переиспользовать между проектами.

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

Читать далее

Делаем import/require ясными и красивыми

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели9.9K

Довольно часто в проектах встречается использование относительных import/require. Если это маленький проект, и подключается модуль из текущей папки, то это приемлемо, но при разрастании проекта и глубины вложенности папочной структуры без слез смотреть на это нельзя:

Читать далее