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

TypeScript *

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

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

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

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

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

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

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

Новости

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Истории

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

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 17K
Туториал

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

К изучению
Всего голосов 20: ↑16 и ↓4 +12
Комментарии 10

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

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 3.3K
Туториал

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

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

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

Время на прочтение 11 мин
Количество просмотров 2.4K
Туториал
Перевод

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

Читать далее
Всего голосов 8: ↑4 и ↓4 0
Комментарии 7

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

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

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

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

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

Римские числа или как не запоминать дифтонги

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

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

Читать далее
Всего голосов 21: ↑18 и ↓3 +15
Комментарии 45

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

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

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

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

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

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

Время на прочтение 6 мин
Количество просмотров 11K
Дайджест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Битва пет-проектов
Дата 25 сентября – 30 ноября
Место Онлайн
PG Boot Camp Russia 2023
Дата 5 октября
Время 10:00 – 17:00
Место Москва Онлайн
Joker
Дата 9 – 14 октября
Время 16:00 – 19:30
Место Санкт-Петербург Онлайн
Открытый урок «Kafka Streams»
Дата 16 октября
Время 10:00
Место Онлайн
Питч-сессия pravo (tech) impulse
Дата 19 октября
Время 15:45 – 17:30
Место Москва
Russia Risk Conference 2023 — 19-я конференция по риск-менеджменту
Дата 25 – 26 октября
Время 10:00 – 19:00
Место Москва Онлайн
Онлайн IT HR-конференция HR42
Дата 17 – 18 ноября
Время 10:00 – 14:00
Место Онлайн
HighLoad++ 2023
Дата 27 – 28 ноября
Время 9:00 – 20:00
Место Москва Онлайн

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее
Всего голосов 19: ↑16 и ↓3 +13
Комментарии 108

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

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

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

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

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

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

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

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 4.6K
Туториал

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

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

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

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

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 2.4K
Туториал

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

Читать далее
Всего голосов 9: ↑5 и ↓4 +1
Комментарии 11

react-query vs SWR и избавимся ли мы от Redux?

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

Давайте сначала познакомимся с обоеми библиотеками, чтобы сравнить их и убедиться, что лучше. react-query и SWR — это две популярные библиотеки для управления состоянием данных в React-приложениях. Они обе предназначены для облегчения работы с данными, получаемыми с сервера, но имеют некоторые различия в функциональности и подходах.

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 21

Вклад авторов

Работа