Обновить
44.03

TypeScript *

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

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

React Custom Hook: useStorage

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

Одним из ключевых преимуществ этого пользовательского хука является его простота. Вы можете использовать его для хранения данных любого типа, таких как строки, числа или даже сложные объекты, всего с помощью нескольких строк кода. Кроме того, useStorage выполняет сериализацию и десериализацию данных за вас, поэтому вам не нужно беспокоиться о преобразовании значений в JSON и из него.

Читать далее

Сказка о зачарованной пасеке

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

Басня о коде и мёде

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

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

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

Так начинается наша история. История не только о коде, но и о вечных закономерностях природы, которые могут помочь нам создавать создавать красивые программы. Мы отправимся в самое сердце Шестиугольного Улья, откроем его секретный генетический код и узнаем, как выращивать собственных «рабочих пчел», которые будут служить нашему цифровому королевству добросовестно.

Читать далее

JavaScript: зачем конструктору return …

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

Этот вопрос интересовал меня настолько давно, что за прошедшие годы даже стал как-то про него забывать. И не то, чтобы меня это прям как-то сильно интересовало, но всё же лучше понимать назначение было бы приятно.

И, ведь, ну в самом деле, подумаешь, ну может разработчику хочеться вернуть не эземпляр, не instance, а какой-нибудь другой объект, и зачем-то при этом ему нужен именно вызов конструктора. Ну, допустим, он хочет чтобы new.target был заполнен и т.п., ну, мало ли какие варианты зачем-то иметь возможность в противном случае вернуть объект. Или может он хочет асинхронных конструкторов и вернуть new Promise, где уже в resolve передать this как вариант для создания await new MyConstructor. Или может быть хочет вернуть Proxy над this для отслеживания операций с этим экземпляром. В общем есть всякие разные причины когда гуманно было бы иметь этот "сахар", но всё же, может быть есть что-то, что иначе никак не сделать? И, самое важное, что эта функциональность былв всегда, с самой первой версии же. Понятно, что может быть про это вообще не думали, просто делали "как привычно". И, да, функции-конструкторы, в отличие от class-овможно вызвать без new и в те времена никаких классов в JavaScript не было конечно, и return объективно был нужен, но может быть есть какие-нибудь варианты когда и с new имеется глубокий практический смысл уже и тогда существовали, то есть может быть назначение операции возврата иного значения конкретно у конструкторов вполне себе приемлемое. И, да, конечно, конструкторы не возвращают примитивы, но может быть и для объектов есть какое-то применение тоже находилось бы, ну, вдруг, внезапно, может быть ...

Читать далее

Clean Architecture во frontend: почему я ушёл от FSD

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

Привет! Хочу поделиться с тобой опытом перехода от Feature-Sliced Design к Clean Architecture во фронтенде. Почему я считаю Clean Architecture более подходящей для сложных приложений, и как она решает проблемы, с которыми ты точно сталкивался.

Если ты используешь FSD и тебе уже больно или до сих пор пишешь всю логику в компонентах React — эта статья точно для тебя.

Читать далее

Angular Router для начинающих: понятный гайд с примерами

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

Представьте, что вы делаете сайт-визитку или интернет-магазин на Angular. У вас есть главная страница, страница «О нас» и страница с товарами. Логично, что при клике на ссылки пользователь должен переходить между этими страницами

В классических сайтах это решается просто: при каждом клике браузер запрашивает у сервера новую HTML-страницу. Но в современных SPA (Single Page Applications) всё работает иначе — приложение загружается один раз, а дальше мы просто подменяем содержимое внутри него

Именно за это отвечает Angular Router.

Читать далее

Как реализовать тестирование сортировки с помощью Playwright + TypeScript

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

Если вы начинающий специалист в автоматизации тестирования, или автотестировщик с опытом, готовый обсуждать и улучшать стратегии тестирования, то с радостью представляю вам первый пост в серии, посвященный разборам подходов к тестированию ПО. Здесь я разбираю свой взгляд на способы решения реальных задач по тестированию, используя Playwright + TypeScript.

Читать далее

Свой LLM-агент на Typescript с использованием MCP

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

В публикации поделюсь подробной инструкцией по разработке и запуску своего ИИ‑агента на Typescript с использованием MCP, который будет извлекать и выполнять команды, сказанные обычными словами и сможет опрашивать необходимую информацию через диалог с пользователем.

Читать далее

Для чего нужны enum в TypeScript. Подробно и простым языком

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

Привет, меня зовут Дмитрий, и я руководитель фронтенд-разработки в компании Интелси. В данной статье я хочу подробно разобрать enum в TypeScript, чтобы было понятно, что это такое, для чего нужно и почему это работает именно так.

Читать далее

React Custom Hook: useScript

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

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

Читать далее

Простая и мощная валидация форм для SolidJS с Zod

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

solidjs-hook-form — библиотека для удобной и быстрой работы с формами в SolidJS. Использует Zod для мощной валидации и встроенную реактивность SolidJS для высокой производительности. Легковесная, не навязывает стили и дает полный контроль над UI. Идеальна для разработчиков, которые хотят меньше возиться с формами и больше фокусироваться на логике приложения. Попробуйте, если работаете с SolidJS — возможно, это то, что вам нужно!

Читать далее

Как порядок свойств убивает JavaScript?

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

Привет, Хабаровчане! Во второй статье, хочу поделиться наблюдениями из документации V8 и немного нудной информацией для многих :-)

Читать далее

Изучаем Go: руководство для JavaScript-разработчиков. Часть 2

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

После пяти лет работы JavaScript-разработчиком, занимаясь как фронтендом, так и бэкендом, я провел последний год, осваивая Go для серверной разработки. За это время мне пришлось переосмыслить многие вещи. Различия в синтаксисе, базовых принципах, подходах к организации кода и, конечно, в средах выполнения — все это довольно сильно влияет не только на производительность приложения, но и на эффективность разработчика.

Интерес к Go в JavaScript-сообществе тоже заметно вырос. Особенно после новости от Microsoft о том, что они переписывают официальный компилятор TypeScript на Go — и обещают ускорение до 10 раз по сравнению с текущей реализацией.

Эта статья — своего рода путеводитель для JavaScript-разработчиков, которые задумываются о переходе на Go или просто хотят с ним познакомиться. Я постарался структурировать материал вокруг ключевых особенностей языка, сравнивая их с привычными концепциями из JavaScript/TypeScript. И, конечно, расскажу о "подводных камнях", с которыми столкнулся лично — с багажом мышления JS-разработчика.

Читать далее

Angular Signals + RxJS: объединяем два реактивных мира в одном стейт-менеджере

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

Angular долгое время ассоциировался с RxJS. Даже слишком: многие разработчики ощущали, что без Observable ничего не работает. Но вот в Angular 17 появляются Signals — синхронная реактивность прямо из коробки. В 17+ — они становятся мейнстримом. Возникает вопрос: а что делать с RxJS? Выбрасывать?

Signals и RxJS — не конкуренты, а два мощных инструмента для решения разных задач. И если их правильно сочетать, можно построить удобную, масштабируемую и эффективную архитектуру.

Читать далее

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

Перестаньте использовать CustomEvent

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

Я часто вижу, как веб-разработчики используют CustomEvent в коде своих компонентов. Настолько часто, что у многих складывается впечатление, будто CustomEvent — единственный способ создавать custom события (с маленькой "c"), а то и вообще единственный способ генерировать собственные события.

Это понятно. Это прямо указано в названии: "Пользовательское" событие. Создается впечатление, что это идеальный инструмент для этой задачи. Это даже звучит созвучно с "пользовательским компонентом". Но я всегда говорю разработчикам, не использовать CustomEvent. Нет ни одной причины это делать. Почему?

Читать далее

Документирование фронтенд-приложений: обзор JSDoc и Storybook

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

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

В этой статье мы рассмотрим два популярных подхода к документированию фронтенд-кода: JSDoc и Storybook. Они решают схожие задачи, но совершенно разными способами и с разным фокусом.

Читать далее

Профессиональная обработка ошибок в TypeScript

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

Ошибки происходят в любом приложении. Говоря об ошибках, первым делом отметим, что все они делятся на два типа: ожидаемые ошибки, обусловленные бизнес-логикой, и неожиданные ошибки. Это различие очень важное, поскольку стратегии обработки ошибок первого и второго типа значительно отличаются.

Ожидаемые ошибки, связанные с бизнес-логикой — это «нормальная» часть эксплуатации системы. О таких ошибках в системе должно быть заранее известно пользователям, а вы должны быть способны эти ошибки исправлять, если они возникнут.

Пример ожидаемой ошибки, обусловленной бизнес-логикой — попытка получить объект из хранилища больших неструктурированных данных (blob storage) с последующей необходимостью обработать случай «объект не найден». Другой пример связан с регистрацией пользователя, когда клиент пытается взять себе логин, который уже занят. В принципе, это ожидаемая ситуация и, если она произойдёт, мы вернем пользователю качественное сообщение об ошибке.

Неожиданные ошибки — такие, которые можно себе представить, но просто их не ожидаешь в условиях нормальной эксплуатации системы. Теоретически, можно было бы попробовать смоделировать все возможные ошибки, но это титаническая работа, сама по себе не слишком полезная. Как правило, не существует способов качественно обрабатывать такие ошибки или как следует после них восстанавливаться.

Читать далее

Принцип единой ответственности SOLID в React

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

Всем привет! Меня зовут Дмитрий, и я руководитель фронтенд-разработки в компании Интелси.

Сегодня хочу рассказать о принципе единственной ответственности (Single Responsibility Principle) — первом из пяти принципов SOLID, сформулированных Робертом Мартином в его книге "Agile Software Development: Principles, Patterns, and Practices". Суть этого принципа звучит так: «Класс должен иметь только одну причину для изменения» (A class should have only one reason to change).

Читать далее

Dependency Injection в JavaScript: зачем он вам нужен

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

Как избавиться от проп-дриллинга, упростить тестирование и навести порядок в зависимостях React/JS‑приложения? В статье — зачем вообще нужен dependency injection в JavaScript, почему он редко используется и как это меняет @wroud/di. С кодом, примерами и без тяжёлой рефлексии.

Читать далее

Ассиметрия в ревью

Время на прочтение5 мин
Количество просмотров596

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

Фикс критической ошибки (не архитектурной или по дизайну системы, а именно ошибки/баги) не добавляет профита ревьюеру. При удачной фиче похвала и бонус пойдут автору. То есть действия ревьюрера приносят ноль ему и что-то автору. Хотя ревьюер может не только помочь, но и навредить - заблочить пул реквест (и иногда действительно такое случается), бизнес невилирует отрицательные последствия - вмержат только в путь, когда бабло начнет течь мимо кассы. Не беря во внимание совесть ревьюера, получить максимальный профит можно на дейликах (ведь для этого утренние созвоны и нужны, так ведь?) - аккурат перед мержем пулл реквеста упомянуть о критической неисправности.

Ревью это про чтение кода - выбор золотой середины между мыслями автора и доходчивостью ревьюера. Последний может попросить скомпоновать код попроще, что скорее всего заставит автора выгрузить из оперативной памяти смысловые блоки под запись в файл. Данную аргументацию дополняет еще и условие: пишем раз, читаем много раз. Если ревьюеру хочется сделать фичу самому - лучше сделать ее самому, а если уже поздно - лучше не бурчать, а понять и простить. Но никто же не просит устранять неэффективность (говнокод) без удовольствия, так? Предлагаю рассмотреть примеры кода на языке "тайпскрипт", хотя идеи ниже могут быть применимы к любому языку программирования.

Читать далее

React Custom Hook: useMediaQuery

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

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

Читать далее