Обновить
56.89

TypeScript *

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

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

Решение задачи про определение типа в Typescript с Yandex Cup 2023

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

Всю прошлую неделю проходила квалификация на Yandex Cup 2023. Я решил тряхнуть стариной и вспомнить что такое спортивное программирование.

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

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

Завариваем чаек, я начинаю.

Читать далее

Vue3 provide-inject di

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

Разбираемся с provide-inject до конца. Что он может? Поговорим о том, как его использовать, зачем он вообще нужен и можно ли удобно настроить использование этой фичи в приложении.

Читать далее

Как выстроить удобные процессы в работе с монорепой

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

Как настроить общее рабочее пространство для команды без запуска сборки в watch-режиме и ожидания старта dev-сервера, чтобы подхватить изменения? Для этого нужно удобным для всех образом настроить переиспользование кода внутри монорепы.

Нам поможет Андрей Кочеров, старший разработчик интерфейсов в Яндекс Такси и техлид фронтэнд команды партнёрских продуктов. Он расскажет как сделать готовый к работе репозиторий сразу после чекаута, на основе методологии Trunk Based Development.

Читать далее

9 алгоритмов сортировки и поиска для JS, о которых вас спросят на собеседовании

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

Привет, Хабр!

Меня зовут Илья, я frontend-разработчик SimbirSoft. Долгое время вопрос изучения алгоритмов был холиварным. Со я временем убедился, что ни одно современное собеседование в крупную компанию не обходится без вопросов про алгоритмы, и в последний год их всё больше.

Даже если ты frontend-разработчик и решаешь прикладные задачи, тебе в любом случае придётся знать алгоритмы хотя бы на базовом уровне. Но статей на русском с объяснением алгоритмов и тем, как их реализовать на JavaScript, крайне мало. Поэтому хочу поделиться некоторыми алгоритмами сортировки и поиска, и немного рассказать про структуры данных. Знание алгоритмов и структур данных поможет вам в оптимизации приложений.

Статья будет полезна разработчикам любых направлений, которые начали свой путь к крепкому уровню middle.

Читать далее

Fusor vs React

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

Mortal Kombat - Vs Screen (MKX version) Fan art by LukenStruken CC BY-SA 3.0

Моя работа состоит в написании кода на React. Несмотря на то, что мне нравится React, при разработке на нем я столкнулся с некоторыми его недостатками. В связи с этим, я решил создать свою библиотеку, Fusor, чтобы исправить эти недостатки и вот что из этого получилось.

Читать далее

CRUD React c Redux и Saga + typescript в 2023

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

В этой статье будет представлена классическая архитектура, и на ее примере я хотел бы вкратце объяснить работу redux , saga и их типизацию.

Читать далее

ESLint | Shareable config настройка и что это такое?

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

Приветствую! В ходе своей профессиональной деятельности, каждый фронтенд-разработчик сталкивается с неотъемлемой частью разработки - инструментом ESLint.

Сегодня мы поговорим, о настройке shareable config. Мы рассмотрим, как это может помочь продуктовым командам или фрилансеру разработчику, а далее перейдем к настройке этой конфигурации.

Читать далее

Пишем TIP-4 NFT коллекцию с картами для Гвинта на Everscale за 30 минут

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

По нашим предыдущим статьям может сложиться впечатление, что писать и деплоить смарт-контракты для асинхронных сетей на Threaded Virtual Machine (TVM), таких как Everscale и Venom, сложно и долго. Код смарт-контракта необходимо преобразовывать в файл с расширением .boc, в котором будет лежать код, приведенный к типу древа ячеек, с которым работает TVM. Кроме того, компилятор создает .abi файл, описывающий интерфейс контракта, его переменные, функции их параметры и возвращаемые ими типы. Этот файл используется для дальнейшей типизации для Typescript. Однако, благодаря инструментам, созданным в помощь разработчикам, процесс теста и деплоя смарт-контрактов по большей части автоматизирован.

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

Читать далее

Как типизировать Vuex Store

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

Всем привет!

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

You are welcome!

Хочу типизировать Vuex

Кулинарный гид по Vue.js: всё о props

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

Привет, Хабр! В этой статье разберемся, как frontend-разработчику готовить на «кухне» props. Выбирайте подходящий уровень сложности: джуны-поварята смогут лучше разобраться в работе и применении props на фреймворке Vue.js, а еще мы затронем тему валидации. Для мидлов и более опытных специалистов — настоящих шеф-поваров мы приготовили продвинутые кулинарные техники props, где можно освежить в памяти некоторые детали или решить проектную проблему, если замылился глаз. 

Props – от слова «properties» (здесь и дальше будем использовать слово «props») – это специальные атрибуты, используемые в экосистеме Vue для передачи данных в компоненты. Они являются частью системы реактивности, позволяют определять типы данных и проводить с ними валидацию.

По большей части мы будем покрывать основы передачи props. Поэтому статья будет актуальна как для Vue 2, так и для Vue 3, поскольку по части объявления props отличий мало. Но так как в Composition API и TypeScript все же они есть, то мы рассмотрим их тоже.

Если вы подходите под все эти условия, то добро пожаловать, мы начинаем наш кулинарный гайд! Bon appétit!

Читать далее

Обновление состояния системы через Server-Sent Events (SSE) без затей

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

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

Допустим, у нас есть список объектов, к примеру – список эпизодов для шоу. Один клиент на него смотрит, а другой в это время добавляет в список еще один эпизод. Хорошо бы факт добавления нового эпизода сразу отобразить у первого клиента. То же самое относится и к просмотру информации об отдельном эпизоде: если один клиент её просматривает, а другой – редактирует, было бы здорово результат редактирования сразу отображать у первого.

Для решения данной задачи очень удобно использовать механизм Server-Sent Events (SSE). О том как это сделать в проектах, у которых на беке Node, а на фронте React, я и хочу поговорить.

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

К изучению

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее