Все потоки
Поиск
Написать публикацию
Обновить
30.09

TypeScript *

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

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

Vercel VS Edge VS Next. Что такое Vercel Edge, зачем, как и куда

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

Edge рантайм. Один из главных функционалов компании Vercel — компании, которая разработала и развивает next.js. Тем не менее, её влияние по edge рантайму вышло далеко за рамки её фреймворков и утилит. Edge рантайм работает и в недавно купленном Vercel Svelte, и в nuxt, и в более чем 30 других фронтенд фреймворках. Эта статья будет посвящена edge рантайму — что это, как это используется в Vercel, какими возможностями дополняет next.js и какие решения сделал я, чтобы эти возможности расширить.

Читать далее

Стреляем себе в ногу из localStorage

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

Все фронтендеры любят localStorage — в него можно прикопать данные без всяких баз и серверов. Но из localStorage можно отлично обстрелять себе ногу. сегодня расскажу про 6 встроенных пулеметов и презентую библиотеку banditstash, которая нежно, но настойчиво прикрывает ваши ножки.

Читать далее

Как узнать количество перерисовок? React Custom Hook: useRenderCount

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

В этой серии статей мы отправимся в путешествие по миру пользовательских хуков React, открывая для себя их огромный потенциал для улучшения ваших проектов. Сегодня мы сосредоточимся на хуке useRenderCount, одном из многих тщательно разработанных хуков, доступных в коллекции пользовательских хуков React.

Читать далее

Payload и опыт взаимодействия с ним

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

Привет! Меня зовут Сергей, я ведущий разработчик в Lad. В этой статье речь пойдет об опыте работы с Payload.

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

Читать далее

Как мы OpenAPI в приложениях используем (Spring Boot, Typescript)

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

Хочу рассказать, как мы реализуем на практике контакты по спецификации OpenAPI, стараемся следовать подходу Contract First и в целом разрабатывать так, чтобы удобно было как разработчикам в команде, так и всем, кто использует наши сервисы. В статье описана генерация Java и typescript, а так же конфигурации maven.

Контракты OpenAPI — спецификация, которая позволяет описывать интерфейс взаимодействия с сервисом в виде REST. Или не REST, тут зависит от задачи и ее реализации.

Вдаваться в историю появления спецификации и ее развития не буду. Если кратко — эта спецификация позволяет описывать контракт взаимодействия с сервисом с помощью yaml‑синтаксиса. А с помощью OpenAPI generators можно генерировать из такого описания клиент‑серверные интерфейсы на различных языках. На данный момент последняя версия OpenAPI — 3.1.0 — является наиболее удобной и структурированной, позволяет описывать контракт с помощью JSON. Мы осознанно используем версию 3.0.3. Почему? Расскажу далее.

Читать далее

Как сделать Infinite Scroll на хуках в React приложении

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

Infinite Scrolling - это популярный метод загрузки данных по мере необходимости (on-demand quests). При начальном рендере приложение запрашивает только часть контента (только ту, которую он сможет увидеть) и динамически подгружает следующие части по мере прокрутки страницы пользователем, обеспечивая бесшовный user experience.

В этой статье описан самый простой способ реализации - на хуках.

Читать далее

Как сделать приложение на NestJS, которое можно будет поддерживать спустя годы

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

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

Читать далее

Zoneless Angular 18

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

По праву основной фичей Angular 18 стала Zoneless Change Detection. Именно с ней так и хочется разобраться.

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

Перед тем как мы перейдем к Zoneless Change Detection, вкратце пробежимся по концепции механизма CD (Change Detection) и тому, как он реализуется с помощью zone.js.

Читать далее

Как подменять данные в SSR-сайтах

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

Привет, на связи Surf Web Team и Никита, QA Surf! 

Давайте разберемся, какие проблемы возникают при тестировании SSR-сайтов с помощью подмены данных и как сделать так, чтобы все заработало.  

Читать далье

Frontend. Поток данных

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

Здравствуйте :)

Коротко о чем тут, чтобы вы могли понять нужно ли оно вам или нет.

Тут я описываю то к чему пришел в проектировании глобальных сторов и потока данных в приложении.

Материал может быть полезен как для новичков, так и для более опытных.

Примеры будут на React и Effector, но это не важно, потому что тут важна идея, а не реализация. К тому же это везде будет примерно одинаково выглядеть.В конце будут так же ссылки на примеры с svelte + effector и react + redux thunk

Читать далее

Руководство по ng-template и ngTemplateOutlet в Angular

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

Angular предоставляет мощные инструменты для динамического создания и управления шаблонами. Среди этих инструментов ключевую роль играют директивы ng-template и ngTemplateOutlet. В этой статье мы подробно рассмотрим, что это такое, как их использовать, и какие нюансы могут возникнуть при работе с ними.

Читать далее

Преобразования данных React Query

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

Привет, на связи KOTELOV! Мы перевели эту статью, чтобы понять, как эффективно преобразовывать данные при работе с REST API и библиотекой react-query.

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

Но если вы работаете с REST, вы довольствуетесь тем, что возвращает бэкэнд. Так где лучше всего преобразовывать данные при работе с react-query? Универсальный ответ в разработке ПО применим и здесь: «Это зависит от обстоятельств». 

Разберем три подхода к преобразованию данных, их плюсы и минусы.

Читать далее

Квест на Node.js — борьба с утечкой памяти. От диагностики до решения

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

Всем привет! Меня зовут Артём и я backend-разработчик компании SimbirSoft. На протяжении восьми лет я работаю на Node.js. Сегодня хочу поделиться опытом поиска утечек памяти при gRPC-вызовах в Node.js + Nest.js. В частности, речь пойдет об отладке утечки памяти при взаимодействии между микросервисами. Статья будет полезна backend-разработчикам, которые работают с Node.js и gRPC.

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

Одной из задач, которую ставил перед нами клиент,  был поиск и устранение утечки памяти при работе микросервисов. Задача была открыта уже давно, но не было четкого понимания, как ее решать. Судя по описанию, было несколько API, при вызове которых отделы DevOps и QA наблюдали сильный рост памяти при мониторинге системы и тестировании соответственно. В дополнении к REST API присутствовали gRPC-методы.

Читать далее

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

Вам не нужен Lodash. Хватит! Пожалуйста

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

На State Of JS 2023 Lodash занял первое место в топе библиотек - что меня сильно огорчило. Я топлю за его отказ последние годы - и хотел бы рассказать, почему я считаю его вредным и не особо вам нужным.

Ну давай!

На чем разработать свой стартап или с чего начать хакатон в 2024? (часть 1)

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

Попробуем собрать свой идеальный boilerplate для full-stack разработки в 2024 году. В этой статье мы будем постепенно собирать свой шаблон для быстрого запуска стартапов.

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

Читать далее

ng-container

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

ng-container в Ангулар - это структурная директива в Angular, которая позволяет создавать группы элементов без добавления дополнительного узла в DOM. Это полезно, когда нужно применить директиву или использовать условные конструкции или циклы *ngFor для группы элементов, но при этом не добавлять лишних тегов в разметку.

ng-container не является компонентом и не создает своего собственного экземпляра, поэтому к нему не получится доступ через ViewChild или ContentChild. Он просто действует как контейнер для элементов, которые вы хотите группировать. Поэтому вместо того чтобы использовать <div> который будет рендериться в дереве компонента при сборке и занимать лишнее место лучше использовать ng-container - собственно это и есть его суть!

Читать далее

Web-приложение с использованием fingerprint: как это работает и в чем сложность

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

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

Читать далее

Избавьтесь от хаоса модальных окон с useModalControl (React)

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

Избавьтесь от хаоса модальных окон с useModalControl (React)

Модальные окна - важная часть UI современных веб-приложений. Управление ими в React может вызвать трудности, в частности, когда нужно избежать одновременного появления нескольких окон. Для этого и существует хук useModalControl, который облегчает эту задачу.

Читать далее

Хоп, Хлоп, и MVP готов

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

Здравствуйте, меня зовут Дмитрий Карловский и я.. как 30 лет назад вошёл в IT, и всё никак не могу из него выйти. И всё это время я не только работал работу, но и точил свой набор топоров, благодаря которому путь стартапа от идеи до прода сокращается с минимум недели до максимум часа.

Заинтригованы? Тогда следите за руками внимательно, иначе пропустите как мы во мгновение ока нарисуем полноценный фронтенд без чат-ботов, поднимем базу данных без сервера, задеплоим всё на статический сервер без боли, и будем наслаждаться результатом без тормозов.

Ну 0_0

Мой опыт миграции приложения на standalone-компоненты

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

Всем привет! Меня зовут Антон Горелов, я фронтенд-разработчик в Selectel. Заметил, что часто в сообществе при рефакторинге или написании приложения с нуля возникает вопрос применения одного из двух подходов. Первый — «все делаем через модули, они прекрасно работают, не надо ничего нового». Второй — «есть standalone-компоненты, супер, используем новый инструмент».

В этом тексте поделюсь своим опытом применения обоих подходов. Расскажу, что дают standalone-компоненты, на что стоит обратить внимание в процессе миграции и тестирования и когда использовать standalone, а когда стоит все же остаться на модулях. Материал будет полезен фронтенд-разработчикам уровня Junior+ и Middle. Ниже опишу сценарии, с которыми чаще всего сталкивался лично, и обобщу свой опыт.
Читать дальше →