Как стать автором
Обновить
0
@BollGaderead⁠-⁠only

Пользователь

Отправить сообщение

Работа с REST API при помощи swagger-typescript-api

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

Прежде чем начать писать данную статью, я озадачился интересным вопросом. А кто как вообще работает с API в 2024 году? Для меня наличие Swagger-контракта или OpenAPI-контракта уже несколько лет как must have. И откровенно говоря, мне сложно представить, что люди не используют этот фреймворк для работы c REST API. Однако, если среди читателей таковые есть, и вам до сих пор скидывают «дтоошки», то вперед осваивать и продвигать OpenApi.

Для понимания работы swagger-typescript-api я сначала кратко опишу основные моменты спецификации OpenAPI. Читатели, которые уже знакомы с этим, могут сразу перейти к части про swagger-typescript-api.

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

Бизнес-метрики в Sentry или как сделать велосипед из самоката

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

Привет! Меня зовут Врублевский Артур, и я занимаюсь frontend-разработкой на Angular в Страховом Доме ВСК. Так сложилось, что ранее, до работы в ВСК, я уже сталкивался с инструментом Sentry – занимался его настройкой на отлов ошибок. Наверно именно поэтому я был привлечен к неожиданным для меня работам, которые так же касались Sentry, его использования в необычной плоскости. Об этом и пойдет далее рассказ в 6 актах.

Стадия 1 — «Отрицание»

Думаю, многим Sentry известен как инструмент, позволяющий аккумулировать ошибки, отслеживать метрики производительности, делать тревожные оповещения о состоянии ваших приложений. И когда мне принесли задачу, звучащую как «Нам нужны продвинутые бизнес-метрики, можем ли мы это сделать в Sentry?», я сразу начал отрицать возможность такой затеи. Это казалось противоестественным действием, хотелось отправить постановщика в Яндекс Метрику, которая изначально была создана для подобных целей. Но со слов постановщика, решение Яндекса все же не давало необходимых показателей в нужном виде, нужно было больше гибкости.

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

«Нам нужны продвинутые бизнес-метрики, можем ли мы это сделать в Sentry?»

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

GET запросы на практике: правила, принципы и примеры

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

Я думаю, что вы не раз уже гуглили, заглядывали в статьи, манифесты IT-гигантов о лучших практиках проектирования API. Я тоже.

Но в большинстве из них всё ограничивается описанием URL ресурса, мотивацией использовать пагинацию, сложными словами про кэширование и SSL. Это, безусловно, необходимо для общего понимания технологий, но практически не помогает, когда ты сидишь перед пустой страницей и надо начать “проектировать контракт”.

Я работаю тимлидом направления системного анализа в X5Tech и за все время развития карьеры сталкивалась с большим количеством кейсов проектирования Web систем. IT продукты в большинстве очень динамичны: постоянно изменяются требования, появляются новые, итеративно улучшается пользовательский опыт (по принципу 20% усилий на 80% результата, а остальное доделаем потом).

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

В этой статье предлагаю спроектировать контракт по шагам, и на каждом из них я расскажу про общие рекомендации из копилочки “Полезное”, а также про личные правила и практики, полученные долгим опытом работы над постоянно меняющимися ИТ-продуктами, которые помогут для “дальновидного” проектирования GET REST API.

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

Часть 1. Управление знаниями в Obsidian. Обработка информации. Рабочий процесс. Источники информации. Работа с заметками

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

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

Начнём долгий путь
Всего голосов 34: ↑31 и ↓3+37
Комментарии77

Отказ от create-react-app и создание собственного шаблона для React-приложений

Время на прочтение9 мин
Количество просмотров46K
Автор статьи, перевод которой мы сегодня публикуем, предлагает React-разработчикам отойти от использования create-react-app (CRA) и создать собственный шаблон для React-приложений. Здесь речь пойдёт о преимуществах и недостатках CRA, а так же будет предложено решение, которое способно заменить create-react-app.


Читать дальше →
Всего голосов 16: ↑14 и ↓2+22
Комментарии12

Решаем задачу: как сохранить нервные клетки пользователей с помощью валидации поля ввода

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

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

В этом году я много путешествовал, поэтому нередко заполнял формы с анкетами на разные визы — в них бывало по 30—40 полей. Когда что-то шло не так, часто сайты не давали никакой обратной связи. Иногда они сбрасывали всё, что я заполнял в течение часа, если одно из полей невалидно. 

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

В этой статье мы разберёмся, как настроить валидацию поля ввода.

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

Локальное хранилище или куки? Безопасное хранение JWT на клиенте

Время на прочтение6 мин
Количество просмотров79K
JWT (JSON Web Token) — это замечательный стандарт, основанный на формате JSON, позволяющий создавать токены доступа, обычно используемые для аутентификации в клиент-серверных приложениях. При использовании этих токенов возникает вопрос о том, как безопасно хранить их во фронтенд-части приложения. Этот вопрос нужно решить сразу же после того, как токен сгенерирован на сервере и передан клиентской части приложения.



Материал, перевод которого мы сегодня публикуем, посвящён разбору плюсов и минусов использования локального хранилища браузера (localStorage) и куки-файлов для хранения JWT.
Читать дальше →
Всего голосов 30: ↑24 и ↓6+32
Комментарии21

Кастомизируем VS Code для веб-разработки

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

Привет, меня зовут Филипп, я фронтенд-разработчик в KTS.

Visual Studio Code — это бесплатный, шустрый (что важно на больших проектах) и глубоко кастомизируемый редактор кода.

В статье расскажу, какие настройки и плагины VS Code использует наша команда фронтенда в KTS. Материал может быть полезен для JavaScript- и React-разработчиков, а ещё для тех, кто уже давно пользуется VS Code, но не знает о некоторых полезных плагинах и фичах для повседневного использования. 

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

Также я рассмотрел инструменты для оптимизации работы с Git, шаблоны директорий и другие возможные настройки.

Читать далее
Всего голосов 44: ↑40 и ↓4+38
Комментарии17

От Web до Desktop за 2 недели: технология Electron на практике

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

Если у вас есть компьютер и вы используете его по назначению, то скорее всего вы так или иначе работали с приложениями на Electron (даже если об этом не знали).

Меня зовут Сергей Володин, я руковожу командой разработки VK WorkMail. В этой статье я расскажу, как на основе Electron мы за две недели создали PoC кроссплатформенного настольного приложения Почты, что узнали о технологии и к каким выводам пришли.

Читать далее
Всего голосов 22: ↑18 и ↓4+26
Комментарии31

React + Three.js. Создаём собственный 3D шутер. Часть 2

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

Привет, дорогие пользователи мира IT!

В эпоху активного развития веб-технологий и интерактивных приложений, 3D-графика становится всё более актуальной и востребованной. Но как создать 3D-приложение, не теряя преимуществ веб-разработки? В этой статье мы рассмотрим, как сочетать мощь Three.js с гибкостью React, чтобы создать собственную игру прямо в браузере.

В статье вы познакомитесь с библиотекой React Three Fiber и научитесь создавать интерактивные 3D-игры.

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

React: тестируем компоненты с помощью Jest и Testing Library

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


Привет, друзья!


В данном туториале я покажу вам, как тестировать компоненты на React с помощью Jest и Testing Library.


Список основных задач, которые мы решим на протяжении туториала:


  1. Создание шаблона React-приложения с помощью Vite.
  2. Создание компонента для получения приветствия от сервера.
  3. Установка и настройка Jest.
  4. Установка и настройка Testing Library.
  5. Тестирование компонента с помощью Testing Library:
    1. Используя стандартные возможности.
    2. С помощью кастомного рендера.
    3. С помощью кастомных запросов.
  6. Тестирование компонента с помощью снимков Jest.

Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

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

JavaScript. WebRTC. Соединение браузеров напрямую без сервера, peer-to-peer

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

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

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

Кастомные хуки в React: лучшие практики, пример использования и покрытия тестами

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

Когда я искал свою первую работу в качестве Frontend-разработчика, меня часто спрашивали, умею ли я писать кастомные хуки в React. Тогда я только начинал изучать React и только-только запомнил основы, такие как useState и useEffect. Слово «кастомный хук» для меня было новым и сложным. Но теперь, когда я уже более опытный разработчик, знаю, что это значит и как их использовать.

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

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

Web Workers в JavaScript: Параллельные вычисления и улучшение производительности

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

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

Есть случаи, когда эту проблему можно решить с помощью Web Workers, про них я и расскажу вам далее!

Бустануть производительность
Всего голосов 15: ↑14 и ↓1+18
Комментарии6

Github pages для pet проектов

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

Как можно использовать github pages для своих fullstack pet проектов с бэкендом на статических файлах)

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

Docs as Code: как вести фронтовую документацию рядом с кодом, чтобы репозиторий не раздуло

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

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

Но, кажется, эту напасть удалось побороть. В статье я расскажу, как вести фронтовую документацию рядом с кодом и к каким последствиям это приводит.

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

RTK query: что мы от него хотим и зачем

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

Redux Toolkit Query — это мощный инструмент для взаимодействия с API, который из коробки реализует такие полезные фишки, как отображение состояния загрузки, кэширование, дедупликацию запросов, полинг, ревалидацию при различных условиях, а также весьма удобна в использования за счёт готовых хуков. 

Привет, меня зовут Антон Степанов, я — frontend-разработчик в Альфа-Банке. В статье расскажу какие задачи при работе с API frontend-разработчику приходится решать чаще всего, к каким идеям рано или поздно это может привести, и как их можно реализовать в RTK query, собственно.

Под катом много кода и убеждений.

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

Если ваш фронтендер перестал бояться IE6, покажите ему SmartTV

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

В декабре 2021 года под новогодние праздники в приложении Кинопоиска для SmartTV появился раздел с Яндекс Музыкой. Он позволил пользователям на телевизорах открывать новые для себя треки в Моей волне, включать популярные подборки и слушать собственную коллекцию на телевизорах.

При создании этого раздела я впервые столкнулась с миром SmartTV. Не каждый фронтендер встречает в своей практике подобные задачи, даже несмотря на то, что сейчас разработка под ТВ довольно популярна.

Меня зовут Лена и я фронтенд-разработчик Яндекс Музыки. В этой статье я расскажу про особенности работы SmartTV и разработки под них на примере свежей фичи, которую мы назвали Время клипов. Теперь в приложении вы можете посмотреть клипы любимых артистов и открывать для себя новых исполнителей, которые подходят вам по настроению.

Под катом обсудим ключевые отличия работы фронтенда над вебом и SmartTV, поговорим про оптимизацию и вёрстку и посмотрим на фотографии множества пультов (без пакетиков).

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

Как сделать Private Routes с авторизацией через JWT token

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

Статья о JWT-авторизации и создании приватных страничек сайта для авторизованных пользователей. Простым и понятным языком. Даже твой кот сможет написать эту фичу по этому туториалу :)

Читать далее
Всего голосов 2: ↑1 и ↓10
Комментарии12

RTK Query и redux. Минимум кода для работы с api

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

Все мы не любим писать много однообразного кода и хотим писать больше интересного кода) Давайте рассмотрим очень удобный инструмент для работы с API - RTK Query.

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

Информация

В рейтинге
Не участвует
Работает в
Зарегистрирован
Активность